:root{
    --bg-deep:#243B5E;
    --bg-panel:#2C466C;
    --bg-panel-2:#35517A;
    --gold:#D9A429;
    --gold-bright:#F0C24E;
    --plum:#B98FCB;
    --paper:#F5F3EC;
    --muted:#93A0B6;
    --line:rgba(245,243,236,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Work Sans', sans-serif;
    color:var(--paper);
    background:var(--bg-deep);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.01em;
    color:var(--paper);
  }
  .wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(36,59,94,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  nav.scrolled{
    background:rgba(36,59,94,0.92);
    border-bottom-color:rgba(217,164,41,0.25);
    box-shadow:0 12px 32px rgba(0,0,0,0.35);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:16px; padding-bottom:16px;
    max-width:1320px; gap:20px;
  }
  nav .logo{display:inline-flex; align-items:center; flex-shrink:0;}
  nav .logo img{height:38px; width:auto;}
  nav .links{display:flex; gap:22px; align-items:center; flex-shrink:1; min-width:0;}
  nav .links a{font-size:14.5px; font-weight:500; color:var(--paper); opacity:0.75; white-space:nowrap;}
  nav .links a:hover{opacity:1;}
  nav .btn-primary{flex-shrink:0; white-space:nowrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 26px; border-radius:12px;
    font-weight:600; font-size:15px;
    border:1.5px solid transparent;
    cursor:pointer;
    position:relative; isolation:isolate;
    transition:transform .3s cubic-bezier(.16,.84,.44,1);
  }
  .btn::before{
    content:'';
    position:absolute; inset:-10px; z-index:-1; border-radius:inherit;
    background:
      radial-gradient(circle at 25% 30%, rgba(217,164,41,0.65), transparent 60%),
      radial-gradient(circle at 75% 70%, rgba(185,143,203,0.55), transparent 60%);
    opacity:0; filter:blur(16px);
    transition:opacity .4s ease;
    pointer-events:none;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:hover::before{opacity:1;}
  .btn-primary{background:var(--gold); color:var(--bg-deep);}
  .btn-primary:hover{background:var(--gold-bright);}
  .btn-ghost{border-color:var(--line); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

  /* HERO */
  .hero{
    position:relative; padding-top:56px; min-height:92vh;
    display:flex; align-items:center;
    overflow:hidden;
  }

  /* Fondo del hero: campo de partículas animado (canvas, ver main.js) */
  .hero-canvas{position:absolute; inset:0; z-index:0;}
  .hero .wrap{
    position:relative; z-index:2;
    max-width:760px;
  }
  .eyebrow-line{
    display:inline-block; width:44px; height:3px; background:var(--gold);
    margin-bottom:22px; border-radius:2px;
    opacity:0; animation:fadeUp 0.7s ease forwards; animation-delay:0.05s;
  }
  .hero h1{
    font-size:clamp(30px, 4vw, 48px);
    opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.15s;
  }
  /* Gráfica de crecimiento que se "enciende" + contador */
  .hero-growth{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    max-width:380px; margin-top:28px; padding:14px 16px 12px 18px;
    border:1px solid var(--line); border-radius:16px;
    background:linear-gradient(135deg, rgba(245,243,236,0.07), rgba(245,243,236,0.02));
    backdrop-filter:blur(4px);
    opacity:0; animation:fadeUp 0.7s ease forwards; animation-delay:0.05s;
  }
  .hero-growth-num{font-family:'Bricolage Grotesque'; font-weight:800; white-space:nowrap; font-size:34px; line-height:1; color:var(--gold-bright); font-variant-numeric:tabular-nums; min-width:4.4ch;}
  .hero-growth-label{font-size:12px; color:var(--muted); margin-top:6px; max-width:17ch; line-height:1.35;}
  .hero-growth-chart{width:44%; max-width:150px; height:auto; flex-shrink:0; overflow:visible;}
  .hg-grid{stroke:rgba(245,243,236,0.09); stroke-width:1; stroke-dasharray:3 4;}
  .hg-line{
    stroke-dasharray:1; stroke-dashoffset:1;
    filter:drop-shadow(0 0 5px rgba(240,194,78,0.65));
    animation:hgDraw 1.9s cubic-bezier(.45,.05,.25,1) .7s forwards;
  }
  .hg-area{opacity:0; animation:hgFade 1s ease 2s forwards, hgBreathe 4.5s ease-in-out 3s infinite;}
  /* Bucle discreto: un destello recorre la línea y el área respira */
  .hg-glint{
    stroke-dasharray:0.1 1.2; stroke-dashoffset:0.1; opacity:0;
    animation:hgGlint 4.5s ease-in-out 3s infinite;
  }
  @keyframes hgGlint{
    0%{ stroke-dashoffset:0.1; opacity:0; }
    8%{ opacity:0.9; }
    70%{ opacity:0.9; }
    80%,100%{ stroke-dashoffset:-1; opacity:0; }
  }
  @keyframes hgBreathe{
    0%,100%{ opacity:1; }
    50%{ opacity:0.55; }
  }
  .hg-dot{
    opacity:0; transform-box:fill-box; transform-origin:center;
    animation:hgFade .3s ease 2.5s forwards, hgPulse 2s ease-out 2.6s infinite;
  }
  @keyframes hgDraw{ to{ stroke-dashoffset:0; } }
  @keyframes hgFade{ to{ opacity:1; } }
  @keyframes hgPulse{
    0%{ filter:drop-shadow(0 0 0 rgba(240,194,78,0.9)); transform:scale(1); }
    100%{ filter:drop-shadow(0 0 8px rgba(240,194,78,0)); transform:scale(1.5); }
  }
  .hero-chip{
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
    font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold-bright);
    opacity:0; animation:fadeUp 0.7s ease forwards; animation-delay:0.05s;
  }
  .hero-chip-dot{flex-shrink:0; width:28px; height:2px; border-radius:2px; background:var(--gold);}
  .hero-fixed{color:var(--paper);}
  /* Marco de navegador con una web real: comunica "hacemos páginas web" de un vistazo */
  .hero-browser{
    display:block; margin-top:30px; max-width:440px;
    border:1px solid var(--line); border-radius:14px; overflow:hidden;
    background:var(--bg-panel);
    box-shadow:0 20px 44px rgba(0,0,0,0.35);
    opacity:0; animation:fadeUp 0.8s ease forwards, browserFloat 6s ease-in-out 1.4s infinite;
    animation-delay:0.6s, 1.4s;
    transition:border-color .3s ease;
  }
  .hero-browser:hover{border-color:var(--gold);}
  .hero-browser-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#1B2D4A;}
  .hero-browser-bar span{width:8px; height:8px; border-radius:50%; background:rgba(245,243,236,0.22);}
  .hero-browser-bar em{margin-left:8px; font-style:normal; font-size:11.5px; color:var(--muted); background:rgba(245,243,236,0.07); padding:3px 12px; border-radius:6px;}
  .hero-browser img{display:block; width:100%; height:150px; object-fit:cover; object-position:top;}
  @keyframes browserFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
  .hero-rotate{display:block; color:var(--gold); min-height:1.2em;}
  .hero-rotate .hero-word{
    display:inline-block; opacity:0; transform:translateY(14px);
    animation:heroWordIn .6s cubic-bezier(.16,.84,.44,1) forwards;
  }
  @keyframes heroWordIn{ to{opacity:1; transform:translateY(0);} }
  .hero p.sub{
    margin-top:22px; font-size:19px; color:var(--muted);
    max-width:46ch;
    opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.32s;
  }
  .hero-name{color:#C9AD6E; font-weight:600;}
  .hero .ctas{
    display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;
    opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.48s;
  }
  .hero-btn-primary{
    background:var(--gold); color:var(--bg-deep);
    animation:heroPulse 2.6s ease-in-out infinite;
  }
  .hero-btn-primary:hover{background:var(--gold-bright);}
  @keyframes heroPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(217,164,41,0.35); }
    50%{ box-shadow:0 0 0 14px rgba(217,164,41,0); }
  }
  .hero-btn-dlaf{
    border:1.5px solid var(--gold); color:var(--gold-bright); background:rgba(217,164,41,0.08);
  }
  .hero-btn-dlaf:hover{background:rgba(217,164,41,0.16);}
  .hero-badge{
    font-size:11px; font-weight:700; background:var(--gold); color:var(--bg-deep);
    padding:2px 7px; border-radius:5px; margin-left:2px;
  }
  .hero-btn-ghost{border:1.5px solid var(--line); color:var(--paper);}
  .hero-btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
  .credibility{
    margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
    display:flex; gap:36px; max-width:48ch; flex-wrap:wrap;
    opacity:0; animation:fadeUp 0.8s ease forwards; animation-delay:0.62s;
  }
  .credibility .stat{font-family:'Bricolage Grotesque'; font-size:28px; font-weight:700; color:var(--gold); white-space:nowrap;}
  .credibility .stat-label{font-size:13px; color:var(--muted); margin-top:2px; max-width:20ch;}
  .hero-stat-transform{display:flex; align-items:baseline; gap:8px;}
  .hero-stat-transform .hero-from{font-family:'Bricolage Grotesque'; font-weight:700; font-size:16px; color:var(--muted);}
  .hero-stat-transform .hero-arrow{color:var(--muted); font-size:14px;}

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* SCROLL REVEAL */
  .reveal{
    opacity:0; transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  }
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{
    opacity:0; transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
  }
  .reveal-stagger.is-visible > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
  .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.14s;}
  .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.23s;}
  .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.32s;}
  .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.41s;}

  .wave-divider{
    display:block; width:100%; height:64px;
    animation:waveFloat 5s ease-in-out infinite;
  }
  .wave-divider svg{width:100%; height:100%; display:block;}
  .wave-divider path{
    stroke-dasharray:14 10;
    animation:waveFlow 3.5s linear infinite;
  }
  @keyframes waveFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
  }
  @keyframes waveFlow{
    to{ stroke-dashoffset:-48; }
  }

  .section-head{max-width:58ch; margin-bottom:44px;}
  .section-head .kicker{font-size:13px; font-weight:600; color:var(--gold); margin-bottom:10px; display:block;}
  .section-head h2{font-size:clamp(26px,3vw,36px);}
  .section-head p{margin-top:14px; font-size:17px; color:var(--muted);}

  section{padding:96px 0; position:relative;}
  section.panel{background:var(--bg-panel);}

  /* Costura animada muy sutil entre secciones — mismo lenguaje de movimiento que el hero */
  section:not(.hero):not(.manifesto)::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    background-size:200% 100%;
    opacity:0.55;
    animation:seamShimmer 7s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes seamShimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }

  /* ============================================================
     VIDA EN EL RESTO DE LA PÁGINA (mobile-first)
     Fondo ambiental + entradas + resalte de tarjeta en pantalla
     ============================================================ */

  /* Barra de progreso de scroll */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
    background:linear-gradient(90deg, var(--gold), var(--plum));
    transform-origin:0 50%; transform:scaleX(0);
    pointer-events:none;
  }

  /* Contenido siempre por encima de los fondos decorativos */
  section > .wrap{position:relative; z-index:1;}
  section:not(.hero){overflow:hidden;}

  /* Puntos sutiles de fondo (estáticos = ligeros en celular) */
  section.panel, #servicios, #portafolio, #casos, #planes-marketing{
    background-image:radial-gradient(rgba(245,243,236,0.07) 1px, transparent 1.4px);
    background-size:26px 26px;
  }
  section.panel{background-color:var(--bg-panel);}
  /* Secciones con campo de puntos animado (canvas): quitan la trama estática */
  section[data-dots]{background-image:none !important;}
  .dot-field{position:absolute; top:0; left:0; z-index:0; pointer-events:none;}

  /* Resplandores que flotan lento (solo transform → barato para el GPU) */
  section:not(.hero):not(.manifesto):not(#contacto)::after{
    content:''; position:absolute; z-index:0; pointer-events:none;
    width:clamp(240px, 70vw, 520px); height:clamp(240px, 70vw, 520px);
    border-radius:50%;
    top:8%; right:-22%;
    background:radial-gradient(circle, rgba(217,164,41,0.16) 0%, transparent 68%);
    animation:ambientDrift 14s ease-in-out infinite alternate;
  }
  #equipo::after, #resultados-redes::after, #servicios::after, #planes::after{
    right:auto !important; left:-22%; top:auto !important; bottom:6%;
    background:radial-gradient(circle, rgba(185,143,203,0.17) 0%, transparent 68%) !important;
    animation-duration:17s !important;
  }
  #planes-marketing::after{
    background:radial-gradient(circle, rgba(185,143,203,0.18) 0%, transparent 68%) !important;
  }
  @keyframes ambientDrift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(-34px, 40px) scale(1.14); }
  }

  /* Encabezados de sección: punto que late + subrayado que se dibuja */
  .section-head .kicker{position:relative; padding-left:16px;}
  .section-head .kicker::before{
    content:''; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px;
    border-radius:50%; background:var(--gold);
    animation:kickerPulse 2.4s ease-out infinite;
  }
  @keyframes kickerPulse{
    0%{ box-shadow:0 0 0 0 rgba(217,164,41,0.55); }
    100%{ box-shadow:0 0 0 10px rgba(217,164,41,0); }
  }
  .section-head h2{position:relative; padding-bottom:16px;}
  .section-head h2::after{
    content:''; position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:3px;
    background:linear-gradient(90deg, var(--gold), var(--plum));
    transition:width .9s cubic-bezier(.16,.84,.44,1) .25s;
  }
  .section-head.is-visible h2::after{width:56px;}

  /* Entradas con más carácter: las tarjetas suben con un pequeño zoom */
  .reveal-stagger > *{transform:translateY(26px) scale(.97);}
  .reveal-stagger.is-visible > *{transform:translateY(0) scale(1);}

  /* Tarjeta "en foco": en celular no hay hover, así que la tarjeta que llega
     al centro de la pantalla se ilumina (JS agrega .in-focus) */
  section .team-card, section .why-card, section .plan-card, section .portfolio-card,
  section .mini-service, section .service-row, section .social-compare-item{
    transition-property:transform, border-color, box-shadow, background-color, padding-left, opacity;
    transition-duration:.45s;
    transition-timing-function:cubic-bezier(.16,.84,.44,1);
  }
  .team-card.in-focus, .portfolio-card.in-focus, .mini-service.in-focus, .plan-card.in-focus{
    border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(217,164,41,0.35), 0 16px 40px rgba(0,0,0,0.28), 0 0 34px rgba(217,164,41,0.14);
  }
  .why-card.in-focus{background:var(--bg-panel-2);}
  .why-card .mark span{animation:markPulse 2.6s ease-out infinite;}
  .why-card.in-focus .mark{background:rgba(217,164,41,0.3);}
  @keyframes markPulse{
    0%{ box-shadow:0 0 0 0 rgba(217,164,41,0.6); }
    100%{ box-shadow:0 0 0 9px rgba(217,164,41,0); }
  }
  .service-row.in-focus{border-color:var(--gold); padding-left:14px;}

  /* Brillo que cruza la tarjeta destacada de cada plan */
  section .plan-card.featured{
    background-image:
      linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.09) 50%, transparent 58%),
      linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    background-size:300% 100%, 100% 100%;
    background-repeat:no-repeat;
    background-position:120% 0, 0 0;
    animation:planShine 6s ease-in-out infinite;
  }
  @keyframes planShine{
    0%,50%{ background-position:120% 0, 0 0; }
    100%{ background-position:-20% 0, 0 0; }
  }

  /* MANIFESTO */
  .manifesto{
    background:var(--bg-panel-2);
    padding:100px 0;
    position:relative;
    overflow:hidden;
  }
  .manifesto::before{
    content:'“'; position:absolute; z-index:0; pointer-events:none;
    top:-6px; left:14px;
    font-family:'Bricolage Grotesque'; font-weight:800;
    font-size:clamp(150px, 42vw, 300px); line-height:1;
    color:var(--gold); opacity:0.10;
    animation:quoteFloat 8s ease-in-out infinite alternate;
  }
  @keyframes quoteFloat{
    0%{ transform:translateY(0) rotate(-2deg); }
    100%{ transform:translateY(14px) rotate(2deg); }
  }
  .manifesto .wrap{position:relative; z-index:2;}
  .manifesto p, .manifesto .sign{text-shadow:0 2px 14px rgba(20,32,56,0.55);}

  /* Personaje de Brian: se funde con el fondo por la izquierda (mobile-first: detrás del texto, tenue) */
  .manifesto-figure{
    position:absolute; z-index:1; top:1%; right:-110px;
    height:150%; width:auto; max-width:none;
    opacity:0.38; pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 42%);
    filter:drop-shadow(0 10px 30px rgba(0,0,0,0.35));
  }
  /* Barras de gráfica que suben detrás, como en el concepto */
  .manifesto-bars{
    position:absolute; z-index:0; left:0; right:0; bottom:0; height:62%;
    display:flex; align-items:flex-end; justify-content:space-around; gap:10px;
    padding:0 6%; pointer-events:none;
  }
  .manifesto-bars span{
    flex:0 0 clamp(20px, 6vw, 46px); border-radius:6px 6px 0 0;
    background:linear-gradient(180deg, rgba(217,164,41,0.20), rgba(217,164,41,0.02));
    transform-origin:bottom; animation:barsBreathe 6s ease-in-out infinite alternate;
  }
  .manifesto-bars span:nth-child(1){height:28%;}
  .manifesto-bars span:nth-child(2){height:44%; animation-delay:.6s;}
  .manifesto-bars span:nth-child(3){height:36%; animation-delay:1.2s;}
  .manifesto-bars span:nth-child(4){height:62%; animation-delay:1.8s;}
  .manifesto-bars span:nth-child(5){height:52%; animation-delay:2.4s;}
  .manifesto-bars span:nth-child(6){height:86%; animation-delay:3s;}
  @keyframes barsBreathe{ from{transform:scaleY(.86);} to{transform:scaleY(1);} }

  @media (min-width: 861px){
    section.manifesto .wrap{max-width:1040px;}
    section.manifesto p{max-width:21em;}
    .manifesto-figure{right:max(-4%, calc(50% - 660px)); top:2%; height:140%; opacity:0.75; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%); mask-image:linear-gradient(90deg, transparent 0%, #000 28%);}
  }
  .manifesto .wrap{max-width:820px;}
  .manifesto p{
    font-family:'Bricolage Grotesque'; font-weight:500;
    font-size:clamp(22px,2.6vw,32px); line-height:1.35;
    color:var(--paper);
  }
  .manifesto .sign{margin-top:28px; font-family:'Work Sans'; font-size:15px; color:var(--gold); font-weight:600;}

  /* TEAM */
  .team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px;}
  .team-card{
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:24px;
    padding:36px 32px 32px; text-align:center;
    transition:transform .4s cubic-bezier(.16,.84,.44,1), border-color .4s ease;
  }
  .team-card:hover{transform:translateY(-8px); border-color:var(--gold);}
  .team-figure{position:relative; height:300px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:20px;}
  .team-figure::before{
    content:''; position:absolute; z-index:0; top:0; left:50%; transform:translateX(-50%);
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(217,164,41,0.20) 0%, rgba(185,143,203,0.12) 55%, transparent 75%);
  }
  .team-figure.plum::before{
    background:radial-gradient(circle, rgba(185,143,203,0.24) 0%, rgba(217,164,41,0.12) 55%, transparent 75%);
  }
  .team-figure.own-glow::before{content:none;}
  .team-figure::after{
    content:''; position:absolute; z-index:0; bottom:4px; left:50%; transform:translateX(-50%);
    width:58%; height:18px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 75%);
    filter:blur(2px);
  }
  .team-figure img{
    position:relative; z-index:1; height:300px; width:auto;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,0.45));
    transition:transform .5s cubic-bezier(.16,.84,.44,1);
  }
  .team-figure:hover img{transform:rotate(2deg) scale(1.03);}
  .team-card h3{font-size:22px;}
  .team-card .team-role{display:block; font-size:13px; font-weight:600; color:var(--gold); margin-top:6px; margin-bottom:14px;}
  .team-card p{font-size:15px; color:var(--muted); max-width:38ch; margin:0 auto;}

  /* WHY WEBSITE */
  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
  .why-card{
    padding:34px 32px; background:var(--bg-deep); display:flex; flex-direction:column; gap:10px;
    transition:transform .3s ease, background .3s ease;
  }
  .why-card:hover{transform:translateY(-4px); background:var(--bg-panel-2);}
  .why-card h3{font-size:20px;}
  .why-card p{font-size:15.5px; color:var(--muted);}
  .why-card .mark{width:28px; height:28px; border-radius:8px; background:rgba(217,164,41,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
  .why-card .mark span{width:8px; height:8px; border-radius:50%; background:var(--gold);}

  .why-close{
    margin-top:40px; font-size:18px; color:var(--paper);
    max-width:50ch; font-family:'Bricolage Grotesque'; font-weight:600;
  }

  /* BEFORE / AFTER */
  .compare-wrap{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); user-select:none;}
  .compare-stage{position:relative; height:420px;}
  .compare-layer{position:absolute; inset:0; display:flex; flex-direction:column;}
  .browser-bar{height:40px; background:#050810; display:flex; align-items:center; gap:6px; padding:0 14px; flex-shrink:0;}
  .browser-bar span{width:9px; height:9px; border-radius:50%; background:rgba(245,243,236,0.18);}
  .before .browser-bar{background:#f1eee6;}
  .before .browser-bar span{background:rgba(0,0,0,0.15);}
  .site-body{flex:1; padding:28px 32px; overflow:hidden;}
  .before .site-body{background:#f1eee6;}
  .before .row{display:flex; gap:10px; margin-bottom:10px;}
  .before .blk{background:#d8d2c2; height:16px; border-radius:2px;}
  .before .blk.wide{width:70%;} .before .blk.mid{width:45%;} .before .blk.small{width:25%;}
  .before .banner{height:90px; background:repeating-linear-gradient(45deg,#e0a951,#e0a951 10px,#d99a35 10px,#d99a35 20px); border-radius:4px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; padding:0 12px;}
  .before .banner span{font-family:'Work Sans', sans-serif; font-weight:700; color:#5a3d0e; font-size:12px; text-align:center; letter-spacing:0.01em;}
  .before .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
  .before .card{background:#e5e0d2; border:1px solid #cfc7ae; height:70px; border-radius:3px;}

  .after .site-body{background:var(--bg-panel);}
  .after .top-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
  .after .brand{font-family:'Bricolage Grotesque'; font-weight:700; font-size:15px; color:var(--paper);}
  .after .navlinks{display:flex; gap:18px;}
  .after .navlinks span{width:34px; height:6px; border-radius:3px; background:rgba(245,243,236,0.2);}
  .after h4{font-family:'Bricolage Grotesque'; font-size:26px; max-width:14ch; margin-bottom:14px;}
  .after .ln{height:8px; border-radius:3px; background:rgba(245,243,236,0.16); margin-bottom:8px;}
  .after .ln.w1{width:80%;} .after .ln.w2{width:60%;}
  .after .cta-pill{margin-top:18px; width:150px; height:34px; border-radius:100px; background:var(--gold);}

  .compare-handle{
    position:absolute; top:0; bottom:0; width:3px; background:var(--gold);
    left:50%; z-index:5; cursor:ew-resize; transform:translateX(-50%);
  }
  .compare-handle::after{
    content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--bg-deep);
    display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700;
  }
  .compare-labels{display:flex; justify-content:space-between; margin-top:16px; font-size:13px; color:var(--muted); font-weight:500;}
  .compare-range{width:100%; margin-top:14px; accent-color:var(--gold);}

  /* SERVICES */
  .services-list{display:flex; flex-direction:column;}
  .service-row{
    display:grid; grid-template-columns:280px 1fr;
    gap:32px; padding:34px 0;
    border-top:1px solid var(--line);
    align-items:baseline;
    transition:padding-left .3s ease, border-color .3s ease;
  }
  .service-row:hover{padding-left:14px; border-color:var(--gold);}
  .services-list .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row h3{font-size:24px;}
  .service-row .tag{display:inline-block; font-size:12.5px; font-weight:600; color:var(--gold); margin-bottom:8px;}
  .service-row p{font-size:16px; color:var(--muted); max-width:56ch;}
  .services-extra-label{
    margin-top:36px; padding-top:28px; border-top:1px solid var(--line);
    font-size:13px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.04em;
    margin-bottom:16px;
  }
  .services-extra{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .mini-service{
    background:var(--bg-panel-2); border:1px solid var(--line); border-radius:14px;
    padding:20px 22px;
    transition:transform .3s ease, border-color .3s ease;
  }
  .mini-service:hover{transform:translateY(-3px); border-color:var(--gold);}
  .mini-service h4{font-family:'Bricolage Grotesque'; font-size:16px; font-weight:700; color:var(--paper); margin-bottom:6px;}
  .mini-service p{font-size:13.5px; color:var(--muted); line-height:1.5;}

  @media (max-width: 860px){
    .services-extra{grid-template-columns:1fr;}
  }

  /* SOCIAL RESULTS */
  .social-compare{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .social-compare-item{
    position:relative; border-radius:16px; overflow:hidden;
    border:1px solid var(--line);
  }
  .social-compare-item img{width:100%; display:block;}
  .social-compare-label{
    position:absolute; top:14px; left:14px;
    background:var(--bg-deep); color:var(--paper);
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    padding:5px 12px; border-radius:6px;
  }
  .social-compare-item:last-child .social-compare-label{background:var(--gold); color:var(--bg-deep);}
  .social-stats-row{
    display:flex; gap:40px; flex-wrap:wrap;
    margin-top:44px; padding-top:32px; border-top:1px solid var(--line);
  }
  .social-stats-row .stat{font-family:'Bricolage Grotesque'; font-size:32px; font-weight:800; color:var(--gold);}
  .social-stats-row .stat-label{font-size:13.5px; color:var(--muted); margin-top:4px; max-width:20ch;}
  .social-proof-shot{margin-top:32px; max-width:480px;}
  .social-proof-shot img{width:100%; border-radius:14px; border:1px solid var(--line); display:block;}
  .social-proof-shot span{display:block; margin-top:10px; font-size:12.5px; color:var(--muted);}

  @media (max-width: 860px){
    .social-compare{grid-template-columns:1fr;}
  }

  /* CASE STUDY */
  .case-story{
    display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px, 5vw, 64px);
    align-items:center;
  }
  .case-narrative{
    padding-left:22px; border-left:2px solid rgba(217,164,41,0.45);
  }
  .case-narrative p{
    color:var(--muted); font-size:17px; line-height:1.65; max-width:56ch;
    margin-bottom:22px;
  }
  .case-narrative p:last-child{margin-bottom:0;}
  /* Resalte de lo importante */
  .hl{color:var(--gold-bright); font-weight:600;}
  .contact p .hl{color:var(--gold-bright); font-weight:600;}
  .section-head p .hl{color:var(--gold-bright); font-weight:600;}
  .case-side{display:flex; flex-direction:column; gap:24px;}
  .case-stats{
    display:flex; gap:32px;
    background:linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--line); border-radius:20px; padding:24px 28px;
  }
  .case-stats > div{flex:1;}
  .case-stats > div + div{border-left:1px solid var(--line); padding-left:28px;}
  .case-stats .num{font-family:'Bricolage Grotesque'; font-size:clamp(36px,4.4vw,50px); font-weight:800; color:var(--gold);}
  .case-stats .lbl{font-size:13px; color:var(--muted); margin-top:6px; max-width:16ch;}
  .case-shot{
    border:1px solid var(--line); border-radius:20px;
    aspect-ratio:4/3; overflow:hidden;
    background:var(--bg-panel);
    box-shadow:0 22px 48px rgba(0,0,0,0.3);
  }
  /* se ve desde arriba (el menú completo), recortando lo de abajo */
  .case-shot img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
  .case-highlight{
    margin-top:48px; padding:28px 32px; max-width:70ch;
    border-left:3px solid var(--gold);
    background:var(--bg-panel-2); border-radius:0 16px 16px 0;
    font-size:18px; color:var(--paper);
  }
  #casos .btn{margin-top:28px;}

  /* PORTFOLIO */
  .portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
  .portfolio-card{
    display:block; padding:18px; border-radius:20px;
    border:1px solid var(--line); background:var(--bg-panel-2);
    transition:transform .35s cubic-bezier(.16,.84,.44,1), border-color .35s ease;
  }
  .portfolio-card:hover{transform:translateY(-6px); border-color:var(--gold);}
  .portfolio-shot{
    display:block; aspect-ratio:16/10; border:1px solid var(--line); border-radius:14px;
    overflow:hidden; background:var(--bg-panel);
  }
  .portfolio-shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
  .portfolio-card:hover .portfolio-shot img{transform:scale(1.04);}
  .portfolio-meta{margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .portfolio-meta h3{font-size:18px;}
  .portfolio-link{font-size:13.5px; font-weight:600; color:var(--gold); white-space:nowrap; transition:color .3s ease;}
  .portfolio-card:hover .portfolio-link{color:var(--gold-bright);}
  .portfolio-social{display:flex; gap:10px; margin-top:14px;}
  .portfolio-social a{
    font-size:12.5px; font-weight:600; color:var(--muted);
    padding:5px 12px; border:1px solid var(--line); border-radius:8px;
    transition:color .3s ease, border-color .3s ease;
  }
  .portfolio-social a:hover{color:var(--gold); border-color:var(--gold);}

  @media (max-width: 860px){
    .portfolio-grid{grid-template-columns:1fr;}
  }

  /* CONTACT */
  .contact{
    position:relative;
    border-radius:28px; padding:80px 56px;
    text-align:center; overflow:hidden;
    background:var(--bg-panel-2);
    border:1px solid var(--line);
  }
  .contact-glow{
    position:absolute;
    width:clamp(260px, 75vw, 560px); height:clamp(260px, 75vw, 560px);
    border-radius:50%;
    pointer-events:none; filter:blur(4px);
    animation:contactGlowDrift 10s ease-in-out infinite alternate;
  }
  .contact-glow-gold{
    background:radial-gradient(circle, rgba(217,164,41,0.28) 0%, transparent 70%);
    top:-30%; left:-10%;
  }
  .contact-glow-plum{
    background:radial-gradient(circle, rgba(185,143,203,0.24) 0%, transparent 70%);
    bottom:-35%; right:-10%;
    animation-delay:1.5s;
  }
  @keyframes contactGlowDrift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(30px,20px) scale(1.08); }
  }
  .contact-kicker{
    display:inline-block; position:relative; z-index:2;
    font-size:13px; font-weight:600; color:var(--gold); margin-bottom:14px;
  }
  .contact h2{font-size:clamp(28px,3.6vw,42px); max-width:16ch; margin:0 auto; position:relative; z-index:2;}
  .contact p{margin:16px auto 0; color:var(--muted); font-size:16.5px; max-width:42ch; position:relative; z-index:2;}
  .contact .contact-note{
    font-size:13.5px; color:var(--gold); font-weight:600;
    max-width:48ch; margin-top:14px;
  }
  .contact .btn-primary{margin-top:28px; position:relative; z-index:2;}
  .contact-dlaf-link{
    display:block; margin-top:16px; position:relative; z-index:2;
    font-size:13.5px; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  }
  .contact-dlaf-link:hover{color:var(--gold);}
  .contact-social{
    display:flex; gap:20px; justify-content:center;
    margin-top:24px; position:relative; z-index:2;
  }
  .contact-social a{
    display:inline-flex; align-items:center; gap:7px;
    font-size:14px; font-weight:600; color:var(--muted);
    padding:9px 16px; border:1px solid var(--line); border-radius:10px;
    transition:color .3s ease, border-color .3s ease;
  }
  .contact-social a:hover{color:var(--gold); border-color:var(--gold);}

  .contact-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}

  /* FOOTER (mobile-first: 1 columna → 2 → 4) */
  footer{
    position:relative; padding:56px 0 28px;
    background:var(--bg-deep); color:var(--muted); font-size:14.5px;
    border-top:1px solid var(--line);
  }
  footer::before{
    content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--plum), transparent);
    background-size:200% 100%; animation:seamShimmer 7s ease-in-out infinite;
    pointer-events:none;
  }
  .footer-grid{display:grid; grid-template-columns:1fr; gap:36px;}
  .footer-brand .logo{display:inline-flex; align-items:center;}
  .footer-brand .logo img{height:34px; width:auto;}
  .footer-brand p{margin-top:16px; max-width:38ch; line-height:1.6;}
  .footer-social{display:flex; gap:10px; margin-top:20px;}
  .footer-social a{
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:var(--muted);
    transition:color .3s ease, border-color .3s ease, transform .3s ease, background .3s ease;
  }
  .footer-social a:hover{color:var(--bg-deep); background:var(--gold); border-color:var(--gold); transform:translateY(-3px);}
  .footer-col{display:flex; flex-direction:column; gap:12px;}
  .footer-col h4{font-family:'Bricolage Grotesque'; font-size:15px; font-weight:700; color:var(--paper); margin-bottom:4px;}
  .footer-col a{color:var(--muted); width:fit-content; padding:2px 0; transition:color .25s ease, transform .25s ease;}
  .footer-col a:hover{color:var(--gold); transform:translateX(4px);}
  .footer-note{color:var(--gold); font-weight:600; font-size:13.5px;}
  .footer-bottom{
    margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:10px; font-size:13px;
  }
  .footer-legal{display:flex; gap:20px; flex-wrap:wrap;}
  .footer-legal a{color:var(--muted); transition:color .25s ease;}
  .footer-legal a:hover{color:var(--gold);}
  .footer-top{color:var(--muted); width:fit-content; transition:color .25s ease;}
  .footer-top:hover{color:var(--gold);}
  @media (min-width: 560px){
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1 / -1;}
    .footer-bottom{flex-direction:row; justify-content:space-between; align-items:center;}
  }
  @media (min-width: 900px){
    .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;}
    .footer-brand{grid-column:auto;}
  }

  @media (max-width: 860px){
    .why-grid{grid-template-columns:1fr;}
    .service-row{grid-template-columns:1fr;}
    .case-story{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:1fr; max-width:340px; margin:0 auto;}
    .contact{padding:52px 26px;}
    nav .links{display:none;}
    .compare-stage{height:340px;}
  }

  /* Respeta a quien pide menos movimiento */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  /* MÓVIL (celular tamaño M, ~390-430px) */
  @media (max-width: 480px){
    .wrap{padding:0 20px;}
    nav .wrap{gap:12px;}
    nav .logo img{height:30px;}
    nav .btn-primary{padding:11px 16px; font-size:13px;}
    .hero h1{font-size:clamp(26px, 7vw, 34px);}
    .hero p.sub{font-size:16px;}
    .hero-ctas{gap:10px;}
    .hero-ctas .btn{width:100%; justify-content:center;}
    .credibility{gap:24px; justify-content:center; text-align:center; width:100%;}
    .hero-stat-transform{justify-content:center;}
  }
  .plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .plan-card{
    background:var(--bg-panel); border:1px solid var(--line); border-radius:20px;
    padding:36px 30px; display:flex; flex-direction:column;
    transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
  }
  .plan-card:hover{transform:translateY(-8px); box-shadow:0 24px 48px rgba(0,0,0,0.35);}
  .plan-card.featured{
    background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
    border:1.5px solid var(--gold);
    position:relative;
  }
  .plan-badge{
    position:absolute; top:-13px; left:30px;
    background:var(--gold); color:var(--bg-deep);
    font-size:12px; font-weight:700; padding:4px 11px; border-radius:6px;
  }
  .plan-name{font-family:'Bricolage Grotesque'; font-size:22px; font-weight:700; color:var(--paper);}
  .plan-tagline{font-size:14px; color:var(--muted); margin-top:6px; min-height:36px;}
  .plan-price{margin-top:20px; font-family:'Bricolage Grotesque'; font-size:34px; font-weight:800; color:var(--gold);}
  .plan-price small{font-family:'Work Sans'; font-size:13px; font-weight:500; color:var(--muted); display:block; margin-top:2px;}
  .plan-list{list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:11px; flex:1;}
  .plan-list li{font-size:14.5px; color:var(--muted); padding-left:20px; position:relative;}
  .plan-list li::before{content:'—'; position:absolute; left:0; color:var(--gold);}
  .plan-card .btn{margin-top:26px; width:100%; justify-content:center;}
  .plans-note{
    margin-top:32px; text-align:center; font-size:14px; color:var(--muted);
    max-width:64ch; margin-left:auto; margin-right:auto;
  }

  @media (max-width: 860px){
    .plans-grid{grid-template-columns:1fr;}
  }

  /* PLANES DE MARKETING — mismo componente, acento en plum en vez de dorado */
  #planes-marketing{
    --gold: var(--plum);
    --gold-bright: #C9A3DC;
  }

  /* ============================================================
     "POR QUÉ UNA PÁGINA WEB": tarjetas con luz que recorre el borde
     (pseudo-elemento que gira dentro de un contenedor con overflow:hidden;
      funciona en todos los navegadores, sin @property)
     ============================================================ */
  .why-grid{gap:16px; background:none; border:none; border-radius:0; overflow:visible;}
  section .why-card{
    position:relative; isolation:isolate; overflow:hidden;
    border-radius:18px; background:transparent;
    box-shadow:inset 0 0 0 1px var(--line);
    padding:30px 28px;
  }
  .why-card::before{
    content:''; position:absolute; z-index:-2;
    top:-100%; left:-100%; width:300%; height:300%;
    background:conic-gradient(from 0deg, transparent 0 62%, rgba(217,164,41,0.15) 72%, #F0C24E 86%, #C9A3DC 94%, transparent 100%);
    animation:whyOrbit 7s linear infinite;
  }
  .why-card::after{
    content:''; position:absolute; z-index:-1; inset:1.5px; border-radius:16.5px;
    background:var(--bg-deep);
    transition:background-color .4s ease;
  }
  .why-card:nth-child(2)::before{animation-delay:-1.8s;}
  .why-card:nth-child(3)::before{animation-delay:-3.5s;}
  .why-card:nth-child(4)::before{animation-delay:-5.2s;}
  .why-card:hover::after, .why-card.in-focus::after{background:var(--bg-panel-2);}
  @keyframes whyOrbit{ to{ transform:rotate(360deg); } }

  /* ============================================================
     AJUSTES DE ESCRITORIO (el diseño base es mobile-first)
     ============================================================ */

  /* Menú: que nunca choque con el botón de contacto */
  @media (max-width: 1240px){
    nav .links{gap:18px;}
    nav .links a[href="#casos"], nav .links a[href="#por-que"]{display:none;}
  }

  /* Hero en 2 columnas: texto a la izquierda, web real + gráfica flotando a la derecha */
  @media (min-width: 900px){
    .hero .wrap{max-width:1160px;}
    .hero-copy{
      display:grid; align-items:start;
      grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
      column-gap:clamp(36px, 5vw, 72px);
    }
    .hero-copy > .hero-chip, .hero-copy > h1, .hero-copy > .sub,
    .hero-copy > .hero-ctas, .hero-copy > .credibility{grid-column:1;}
    .hero-copy > .hero-chip{grid-row:1;}
    .hero-copy > h1{grid-row:2;}
    .hero-copy > .sub{grid-row:3;}
    .hero-copy > .hero-ctas{grid-row:4;}
    .hero-copy > .credibility{grid-row:5;}

    .hero-copy > .hero-browser{
      grid-column:2; grid-row:1 / 6; align-self:center; justify-self:stretch;
      max-width:none; margin-top:0;
    }
    .hero-browser img{height:clamp(240px, 27vw, 340px);}
    .hero-copy > .hero-growth{
      grid-column:2; grid-row:1 / 6; align-self:center; justify-self:start;
      width:min(340px, 72%); max-width:none; margin:0;
      /* se monta sobre la esquina inferior izquierda del navegador
         (top/left en vez de transform, porque la entrada animada ya usa transform) */
      position:relative; z-index:3;
      top:clamp(120px, 14vw, 190px); left:-36px;
      background:rgba(38,62,98,0.94);
      box-shadow:0 18px 40px rgba(0,0,0,0.4);
    }
  }