/* ============================================================
   2bio.me — Estilos compartidos de landings públicos
   Paleta: navy + naranja del logo PoderMail
   Carga ANTES del bloque <style> propio de cada página.
   ============================================================ */

:root {
    --navy-900: #0F2440;
    --navy-800: #1E3A5F;
    --navy-700: #2C5282;
    --orange-500: #E67E22;
    --orange-400: #F39C12;
    --orange-300: #FFC447;
    --gold: #F4C430;
    --soft-gray: #F4F6FA;
    --soft-border: #E5E9F0;
}

/* Solo prevenimos overflow horizontal a nivel de viewport. NO forzamos height auto en <img>
   para que clases tipo .h-8/.h-10 del logo del nav sigan funcionando. */
html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #1a1a1a; }

/* Logo del nav: respetar la altura declarada en clases Tailwind */
nav .navbar-brand img,
nav a img { width: auto; max-height: 40px; }

/* Tipografía / Color helpers */
.text-navy { color: var(--navy-800) !important; }
.text-navy-deep { color: var(--navy-900) !important; }
.text-orange { color: var(--orange-500) !important; }
.text-orange-light { color: var(--orange-300) !important; }

.bg-navy { background-color: var(--navy-800) !important; color: #fff; }
.bg-navy-deep { background-color: var(--navy-900) !important; color: #fff; }
.bg-orange { background-color: var(--orange-500) !important; color: #fff; }
.bg-soft { background-color: var(--soft-gray) !important; }

/* Hero base reutilizable */
.hero-bg {
    background:
      radial-gradient(circle at 90% 15%, rgba(230,126,34,0.35), transparent 35%),
      radial-gradient(circle at 5% 85%, rgba(44,82,130,0.45), transparent 40%),
      linear-gradient(135deg, #0F2440 0%, #1E3A5F 60%, #0F2440 100%);
    color: #fff !important;
}
.hero-bg h1, .hero-bg h2, .hero-bg h3, .hero-bg h4,
.hero-bg p, .hero-bg li,
.hero-bg span:not([class*="text-orange"]):not([class*="badge-pill"]) { color: #fff !important; }
.hero-bg .text-orange-light { color: var(--orange-300) !important; }

/* Botones primarios */
.btn-orange { background-color: var(--orange-500); color: #fff; transition: all .25s ease; }
.btn-orange:hover { background-color: #D35400; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(230,126,34,0.35); color: #fff; }
.btn-navy { background-color: var(--navy-800); color: #fff; transition: all .25s ease; }
.btn-navy:hover, .btn-navy:focus { background-color: var(--navy-700); transform: translateY(-2px); color: #fff; }
.btn-outline-white { border: 2px solid #fff; color: #fff; transition: all .25s ease; }
.btn-outline-white:hover { background-color: #fff; color: var(--navy-800); }

/* Cards y hover */
.card-hover { transition: all .3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,36,64,0.12); }
.product-card {
    border-radius: 24px; padding: 36px 32px; transition: all .3s ease;
    background: #fff; border: 2px solid var(--soft-border);
}
.product-card:hover { border-color: var(--orange-500); transform: translateY(-6px); box-shadow: 0 25px 50px rgba(15,36,64,0.15); }

/* Iconos circulares */
.icon-circle {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
}
.feature-icon-orange  { background: linear-gradient(135deg, var(--orange-500), #D35400); }
.feature-icon-navy    { background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); }
.feature-icon-success { background: linear-gradient(135deg, #25D366, #128C7E); }
.feature-icon-danger  { background: linear-gradient(135deg, #C0392B, #922B21); }
.feature-icon-info    { background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); }
.feature-icon-marine  { background: linear-gradient(135deg, var(--navy-700), var(--orange-500)); }

/* Pills y badges */
.badge-pill {
    display: inline-block; padding: 6px 16px; border-radius: 999px;
    font-weight: 700; font-size: .85rem; letter-spacing: .03em;
}

/* Hero chips */
.hero-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    font-size: 0.9rem; font-weight: 600; color: #fff;
    backdrop-filter: blur(8px);
}
.hero-chip i { color: var(--orange-300); }

/* Animaciones suaves */
@keyframes float       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-slow  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 4s ease-in-out infinite; }

/* Tipografía pricing */
.price-tag { font-size: 4rem; font-weight: 900; color: var(--navy-800); line-height: 1; }
.price-tag-small { font-size: 1.1rem; font-weight: 600; color: #6b7280; }

/* Listas */
.check-li { display: flex; align-items: start; gap: 10px; padding: 6px 0; }
.check-li i { color: #128C7E; margin-top: 4px; flex-shrink: 0; }

/* Detalle FAQ */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary i.fa-chevron-down { transform: rotate(180deg); }
details summary i.fa-chevron-down { transition: transform .3s ease; }

/* Tabla comparativa */
.compare-table th { background: var(--navy-800); color: #fff; padding: 14px; }
.compare-table td { padding: 14px; border-bottom: 1px solid var(--soft-border); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .yes { color: #128C7E; font-weight: 700; }
.compare-table .no { color: #C0392B; font-weight: 700; }
.compare-table tr.highlight { background: rgba(230,126,34,0.06); }

/* Cards perfil "Para quién" sobre fondo navy */
.perfil-card {
    display: flex; align-items: center; gap: 14px; padding: 18px 22px;
    background: rgba(255,255,255,0.06); border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all .25s ease;
}
.perfil-card:hover { background: rgba(255,255,255,0.12); transform: translateX(4px); }
.perfil-card .emoji { font-size: 2rem; }

/* Demo box (acortar-links) */
.demo-card {
    background: #fff; border-radius: 24px; padding: 32px;
    box-shadow: 0 25px 50px rgba(15,36,64,0.18);
    max-width: 480px; margin: 0 auto;
}
.url-box {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    border-radius: 10px; padding: 14px 16px; word-break: break-all;
    font-size: 0.85rem; line-height: 1.5;
}
.url-box.long  { background: #f3f4f6; color: #4b5563; }
.url-box.short { background: var(--orange-500); color: #fff; font-size: 1rem; font-weight: 700; }

.step-num {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--orange-500); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 900;
    box-shadow: 0 6px 16px rgba(230,126,34,0.4);
}