:root{
    --carbon:#171717;
    --carbon-70:rgba(23,23,23,.7);
    --carbon-45:rgba(23,23,23,.45);
    --crema:#FFF7F2;
    --paper:#FFFCF9;
    --rosa:#FFEAF2;
    --fucsia:#FF2D7A;
    --violeta:#7B4DFF;
    --lima:#C8F000;
    --line:rgba(23,23,23,.16);
    --line-soft:rgba(23,23,23,.09);
    --maxw:1220px;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--crema);color:var(--carbon);
    font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
  ::selection{background:var(--carbon);color:var(--crema);}
  h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;text-wrap:balance;}
  p{line-height:1.65;margin:0;}
  .eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--carbon-70);
    display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--fucsia);}
  .eyebrow.on-dark{color:rgba(255,247,242,.7);}
  .lead{font-size:18px;color:var(--carbon-70);max-width:44ch;line-height:1.7;}
  .lead.on-dark{color:rgba(255,247,242,.72);}
  em,.accent{font-style:italic;color:var(--fucsia);font-weight:500;}

  /* ---------- PROGRESS BAR ---------- */
  .scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:100%;z-index:1200;
    background:transparent;pointer-events:none;
  }
  .scroll-progress .fill{
    height:100%;width:0%;background:var(--fucsia);
    transform-origin:left center;
  }

  /* ---------- NAV ---------- */
  .navbar{
    position:sticky;top:0;z-index:1000;background:rgba(255,247,242,.9);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:padding .3s ease;
  }
  .navbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:22px 40px;transition:padding .3s ease;}
  .navbar.is-scrolled .wrap{padding:14px 40px;}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:500;font-size:19px;white-space:nowrap;}
  .brand .mark{width:30px;height:30px;flex:none;}
  .brand .creative{font-style:italic;color:var(--fucsia);}
  .nav-links{display:flex;align-items:center;gap:38px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
  .nav-links a{position:relative;opacity:.8;transition:opacity .2s;padding-bottom:4px;}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--carbon);transition:right .25s ease;}
  .nav-links a:hover{opacity:1;}
  .nav-links a:hover::after{right:0;}
  .nav-cta{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
  .nav-cta .arrow{transition:transform .2s;}
  .nav-cta:hover .arrow{transform:translateX(4px);}
  @media (max-width:860px){ .nav-links{display:none;} .navbar .wrap{padding:18px 24px;} }

  /* ---------- BUTTONS ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;border-radius:8px;
    font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;
    border:1.5px solid var(--carbon);cursor:pointer;
    transition:background .25s,color .25s,transform .25s;
  }
  .btn-primary{background:var(--carbon);color:var(--crema);}
  .btn-primary:hover{background:var(--fucsia);border-color:var(--fucsia);transform:translateY(-2px);}
  .btn-outline{background:transparent;color:var(--carbon);}
  .btn-outline:hover{background:var(--carbon);color:var(--crema);transform:translateY(-2px);}
  .btn-on-dark{border-color:var(--crema);color:var(--crema);}
  .btn-on-dark:hover{background:var(--crema);color:var(--carbon);}
  .text-link{font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid var(--carbon);padding-bottom:3px;}
  .text-link .arrow{transition:transform .2s;}
  .text-link:hover .arrow{transform:translateX(4px);}

  section{padding:130px 0;position:relative;}
  @media (max-width:700px){section{padding:88px 0;} .wrap{padding:0 24px;}}

  /* ---------- HERO ---------- */
  .hero{padding-top:100px;padding-bottom:110px;position:relative;overflow:hidden;}
  .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;}
  .hero .hero-grid{position:relative;z-index:1;}
  .hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:start;perspective:1400px;}
  @media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:56px;}}
  .hero h1{font-size:clamp(38px,5.6vw,72px);line-height:1.08;margin-top:26px;font-weight:400;}
  .hero h1 .line2{font-weight:500;}
  .hero .lead{margin:30px 0 40px;}
  .hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;}

  .index-box{border:1px solid var(--line);border-radius:2px;padding:8px 0;will-change:transform;transform-origin:center;backface-visibility:hidden;}
  .index-box .index-head{
    padding:16px 28px;border-bottom:1px solid var(--line);
    font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--carbon-45);
  }
  .index-row{
    display:flex;align-items:baseline;gap:16px;padding:17px 28px;border-bottom:1px solid var(--line-soft);
    transition:background .2s;
  }
  .index-row:last-child{border-bottom:none;}
  .index-row:hover{background:var(--rosa);}
  .index-row .n{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--fucsia);flex:none;width:26px;}
  .index-row .t{font-size:15px;font-weight:500;}

  /* ---------- PROBLEMA / PULL QUOTE ---------- */
  .pullquote{background:var(--carbon);color:var(--crema);text-align:center;}
  .pullquote .wrap{max-width:940px;}
  .pullquote h2{color:var(--crema);font-size:clamp(28px,4.2vw,52px);line-height:1.25;font-weight:400;}
  .pullquote h2 em{color:var(--lima);}

  /* ---------- SOLUCION ---------- */
  .solucion .wrap{max-width:980px;}
  .solucion h2{font-size:clamp(28px,4vw,46px);line-height:1.3;font-weight:400;}
  .solucion h2 em{font-weight:500;}

  /* ---------- SERVICIOS (editorial list) ---------- */
  .servicios-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:20px;flex-wrap:wrap;}
  .servicios-head h2{font-size:clamp(30px,4vw,48px);font-weight:400;max-width:14ch;}
  .service-row{
    position:relative;
    display:grid;grid-template-columns:90px 1.1fr 1.4fr auto;gap:32px;align-items:center;
    padding:34px 28px;margin:0 -28px;border-top:1px solid var(--line);
    overflow:hidden;transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
  }
  .services-list .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row::before{
    content:"";position:absolute;inset:0;background:var(--rosa);
    transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.2,.8,.2,1);
    z-index:0;
  }
  .service-row:hover::before{transform:scaleX(1);}
  .service-row:hover{padding-left:40px;}
  .service-row .n{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--fucsia);transition:transform .35s ease;}
  .service-row:hover .n{transform:scale(1.15);}
  .service-row h3{position:relative;z-index:1;font-size:23px;font-weight:500;}
  .service-row p{position:relative;z-index:1;font-size:15px;color:var(--carbon-70);max-width:46ch;}
  .service-row .goal{position:relative;z-index:1;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-45);white-space:nowrap;}
  @media (max-width:760px){
    .service-row{grid-template-columns:1fr;gap:8px;padding:26px 0;}
    .service-row .n{font-size:18px;}
  }

  /* ---------- METODO ---------- */
  .metodo{background:var(--violeta);color:var(--crema);}
  .metodo h2{color:var(--crema);font-weight:400;}
  .steps{display:grid;grid-template-columns:repeat(6,1fr);margin-top:56px;border-top:1px solid rgba(255,247,242,.25);}
  @media (max-width:900px){.steps{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:520px){.steps{grid-template-columns:repeat(2,1fr);}}
  .step{padding:26px 20px 0 0;border-right:1px solid rgba(255,247,242,.25);}
  .step:last-child{border-right:none;}
  .step .n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--lima);}
  .step .label{font-size:16px;font-weight:600;margin-top:10px;}

  /* ---------- MOVIMIENTO (canvas generativo) ---------- */
  .movimiento{padding-bottom:100px;}
  .movimiento-stage{
    position:relative;max-width:var(--maxw);margin:0 auto;padding:0 40px;
  }
  .movimiento-canvas{
    display:block;width:100%;height:min(58vw,460px);min-height:280px;
    border-radius:2px;border:1px solid var(--line);background:var(--carbon);
  }
  .movimiento-caption{
    margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--carbon-45);
  }
  @media (max-width:700px){.movimiento-stage{padding:0 24px;}}

  /* ---------- MANIFIESTO ---------- */
  .manifiesto .wrap{max-width:880px;}
  .manifiesto .cap{font-size:12px;}
  .manifiesto p.big{
    font-family:var(--serif);font-size:clamp(26px,3.6vw,42px);line-height:1.35;font-weight:400;margin:26px 0;
  }
  .manifiesto p.big em{color:var(--fucsia);}
  .manifiesto p.small{font-size:16px;color:var(--carbon-70);margin-bottom:26px;max-width:60ch;}
  .manifiesto .sign{margin-top:30px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--carbon-45);}

  /* ---------- MADRID ---------- */
  .madrid{background:var(--carbon);color:var(--crema);}
  .madrid-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;}
  @media (max-width:900px){.madrid-grid{grid-template-columns:1fr;gap:40px;}}
  .madrid h2{color:var(--crema);font-size:clamp(28px,3.6vw,44px);font-weight:400;margin:20px 0 22px;}
  .madrid-mark{width:100%;max-width:340px;margin-bottom:12px;}
  .info-list{border-top:1px solid rgba(255,247,242,.2);}
  .info-list .row{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid rgba(255,247,242,.2);font-size:14.5px;}
  .info-list .row span:first-child{color:rgba(255,247,242,.55);}
  .info-list .row b{font-weight:600;color:var(--lima);}

  /* ---------- VALORES (marquee) ---------- */
  .valores{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;}
  .valores-track{display:flex;width:max-content;animation:valores-scroll 22s linear infinite;}
  .valores:hover .valores-track{animation-play-state:paused;}
  .valores-row{display:flex;align-items:center;gap:0;flex:none;}
  .valores-row span{
    font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,30px);padding:0 26px;position:relative;
    white-space:nowrap;
  }
  .valores-row span::after{content:"·";position:absolute;right:-4px;font-family:var(--sans);font-style:normal;color:var(--fucsia);}
  @keyframes valores-scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion:reduce){
    .valores-track{animation:none;}
  }

  /* ---------- OFERTA ---------- */
  .oferta-box{
    border:1.5px solid var(--carbon);border-radius:2px;
    padding:70px 64px;display:flex;flex-direction:column;gap:26px;background:var(--paper);
  }
  .oferta-box h2{font-size:clamp(28px,3.8vw,42px);font-weight:400;max-width:20ch;}
  .oferta-box .fineprint{font-size:12.5px;color:var(--carbon-45);max-width:64ch;}
  @media (max-width:700px){.oferta-box{padding:44px 28px;}}

  /* ---------- CONTACTO ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px;}}
  .contacto h2{font-size:clamp(30px,4vw,48px);font-weight:400;margin:20px 0 18px;}
  .contact-list{margin-top:34px;border-top:1px solid var(--line);}
  .contact-item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);transition:opacity .2s;}
  .contact-item:hover{opacity:.6;}
  .contact-item .label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-45);}
  .contact-item .value{font-size:17px;font-weight:500;font-family:var(--serif);}

  .field{margin-bottom:28px;}
  .field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-45);margin-bottom:10px;}
  .field input,.field textarea{
    width:100%;border:none;border-bottom:1.5px solid var(--line);background:transparent;
    font-family:var(--sans);font-size:16px;padding:10px 2px;color:var(--carbon);outline:none;
    transition:border-color .2s;
  }
  .field input:focus,.field textarea:focus{border-color:var(--fucsia);}
  .field textarea{resize:vertical;min-height:70px;}
  .form-note{font-size:12px;color:var(--carbon-45);margin-top:10px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--carbon);color:rgba(255,247,242,.65);padding:70px 0 30px;}
  .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:44px;padding-bottom:46px;border-bottom:1px solid rgba(255,247,242,.16);}
  .footer-brand{display:flex;align-items:center;gap:10px;color:var(--crema);font-family:var(--serif);font-weight:500;font-size:19px;}
  .footer-brand .creative{font-style:italic;color:var(--fucsia);}
  .footer-links{display:flex;gap:56px;flex-wrap:wrap;}
  .footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,247,242,.4);margin:0 0 16px;font-weight:700;}
  .footer-col a{display:block;font-size:14px;margin-bottom:10px;color:rgba(255,247,242,.78);}
  .footer-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:12.5px;flex-wrap:wrap;gap:10px;color:rgba(255,247,242,.4);}

  .wa-float{
    position:fixed;bottom:26px;right:26px;z-index:900;
    background:var(--carbon);color:var(--crema);
    padding:14px 22px;border-radius:2px;
    display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
    box-shadow:0 12px 30px rgba(23,23,23,.22);transition:background .25s,transform .25s;
  }
  .wa-float:hover{background:var(--fucsia);transform:translateY(-3px);}
  .wa-float .dot{width:6px;height:6px;background:var(--lima);}