:root{
    --black:#000000;
    --pink:#f5b9b9;
    --off:#eeeeee;
    --off-2:#e4e4e4;
    --ink:#0a0a0a;
    --ash:#5c5c5c;
    --ash-light:rgba(255,255,255,0.65);
    --line: rgba(0,0,0,0.14);
    --line-dark: rgba(245,185,185,0.28);
    --orange:#d0401e;
    --navy:#1c2c42;
    --font:'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html, body{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 C12.5 9.5 8.5 13 8.5 18.5 C8.5 24 11.8 27.5 16 27.5 C20.2 27.5 23.5 24 23.5 18.5 C23.5 15 21 12.5 19 9 C18.4 12.5 16.7 13.8 16 11.2 C15.4 13.8 17.2 16 14.8 18.3 C12.7 20 11 17.3 12 15' fill='%23f5b9b9' stroke='%230a0a0a' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 12 6, auto;
  }
  a, button, .menu-btn{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 C12.5 9.5 8.5 13 8.5 18.5 C8.5 24 11.8 27.5 16 27.5 C20.2 27.5 23.5 24 23.5 18.5 C23.5 15 21 12.5 19 9 C18.4 12.5 16.7 13.8 16 11.2 C15.4 13.8 17.2 16 14.8 18.3 C12.7 20 11 17.3 12 15' fill='%23f5b9b9' stroke='%230a0a0a' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 12 6, pointer;
  }
  body{
    margin:0;
    background:var(--off);
    color:var(--ink);
    font-family:var(--font);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;}
  ::selection{background:var(--black);color:var(--pink);}
  :focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

  .wrap{max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}

  /* ---------- SEAL ---------- */
  .seal{width:84px;height:84px;position:relative;}
  .seal svg{width:100%;height:100%;}
  .seal .ring{animation:spin 22s linear infinite;transform-origin:50% 50%;}
  @keyframes spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){ .seal .ring{animation:none;} }

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:18px 0;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  header.scrolled{
    background:rgba(10,8,8,0.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .header-left{display:flex;align-items:center;gap:22px;}
  .header-year{font-size:13px;color:var(--ash-light);}
  .logo{display:inline-flex;align-items:center;text-decoration:none;}
  .logo-img{height:26px;width:auto;display:block;}
  .header-right{display:flex;align-items:center;gap:28px;}
  .seal-mini{width:46px;height:46px;flex:0 0 auto;border-radius:50%;overflow:hidden;}
  .seal-mini img{width:100%;height:100%;object-fit:cover;display:block;}
  nav.links{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
  nav.links a{text-decoration:none;font-size:14px;font-weight:500;color:rgba(255,255,255,0.75);transition:color .2s ease;}
  nav.links a:hover{color:var(--pink);}
  .menu-btn{
    display:none;background:none;border:1px solid rgba(255,255,255,0.3);
    color:var(--pink);width:42px;height:42px;border-radius:2px;cursor:pointer;position:relative;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after{
    content:'';position:absolute;left:11px;right:11px;height:1.5px;background:var(--pink);
    transition:transform .25s ease, opacity .25s ease;
  }
  .menu-btn span{top:20px;}
  .menu-btn span::before{top:-7px;}
  .menu-btn span::after{top:7px;}
  .menu-btn.open span{background:transparent;}
  .menu-btn.open span::before{transform:translateY(7px) rotate(45deg);}
  .menu-btn.open span::after{transform:translateY(-7px) rotate(-45deg);}
  nav.mobile-nav{
    display:none;flex-direction:column;list-style:none;margin:18px 0 0;padding:0;
    background:#111;border:1px solid rgba(255,255,255,0.15);
  }
  nav.mobile-nav.open{display:flex;}
  nav.mobile-nav a{
    text-decoration:none;color:#fff;padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,0.1);font-size:15px;
  }
  @media (max-width:860px){ nav.links{display:none;} .menu-btn{display:block;} }

  /* ---------- SHARED PIECES ---------- */
  .page-index{font-size:12.5px;letter-spacing:.02em;}
  .page-index b{font-weight:700;}
  .year-mark{font-size:13px;}

  .pill{
    display:inline-block;font-size:13.5px;font-weight:600;
    padding:8px 16px;border-radius:20px;
  }
  .pill.on-dark{background:var(--pink);color:var(--black);}
  .pill.on-light{background:var(--black);color:var(--pink);}

  .divider-line{display:flex;align-items:center;gap:14px;font-size:14.5px;}
  .divider-line .stick{flex:0 0 38px;height:1px;position:relative;}
  .divider-line .stick::after{
    content:'';position:absolute;right:-1px;top:-3px;
    width:0;height:0;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  }
  .on-light .divider-line{color:var(--ash);}
  .on-light .divider-line .stick{background:var(--ink);}
  .on-light .divider-line .stick::after{border-left:6px solid var(--ink);}
  .on-dark .divider-line{color:var(--ash-light);}
  .on-dark .divider-line .stick{background:var(--pink);}
  .on-dark .divider-line .stick::after{border-left:6px solid var(--pink);}

  section{position:relative;padding:110px 0;}
  section.on-dark, div.on-dark{background:var(--black);color:#fff;}
  section.on-light, div.on-light{background:var(--off);color:var(--ink);}
  section.on-pink, div.on-pink{background:var(--pink);color:var(--black);}

  .section-foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:70px;padding-top:18px;border-top:1px solid var(--line);
  }
  .on-dark .section-foot{border-top:1px solid rgba(255,255,255,0.14);}
  .on-pink .section-foot{border-top:1px solid rgba(0,0,0,0.18);}
  .on-dark .section-foot .page-index{color:var(--ash-light);}
  .on-light .section-foot .page-index, .on-pink .section-foot .page-index{color:var(--ash);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100svh;background:var(--black);color:var(--pink);
    display:flex;flex-direction:column;justify-content:center;overflow:hidden;
    padding-top:110px;padding-bottom:70px;
  }
  .seal-corner{position:absolute;top:26px;right:clamp(20px,5vw,64px);z-index:5;}
  .hero .year-mark{position:absolute;left:clamp(20px,5vw,64px);top:30px;color:var(--ash-light);z-index:5;}
  .embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .ember-dot{
    position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;
    background:radial-gradient(circle, var(--pink) 0%, rgba(245,185,185,0.15) 70%, transparent 100%);
    opacity:0;animation:rise linear infinite;
  }
  @keyframes rise{
    0%{transform:translateY(0) translateX(0);opacity:0;}
    8%{opacity:.9;}
    90%{opacity:.3;}
    100%{transform:translateY(-100vh) translateX(var(--drift,30px));opacity:0;}
  }
  .hero-inner{position:relative;z-index:2;}
  h1.headline{
    font-family:var(--font);font-weight:900;font-size:clamp(46px,9vw,116px);
    line-height:0.82;letter-spacing:-0.03em;margin:26px 0 30px;max-width:15ch;color:var(--pink);
    text-transform:uppercase;
  }
  .hero p.lede{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,0.82);max-width:48ch;margin:0 0 42px;}
  .word-rotate{
    display:inline-block;
    transition:opacity .18s ease, transform .18s ease;
  }
  .word-rotate.swap{opacity:0;transform:translateY(10px);}
  .scroll-cue{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ash-light);width:fit-content;}
  .scroll-cue .line{width:36px;height:1px;background:rgba(255,255,255,0.25);position:relative;overflow:hidden;}
  .scroll-cue .line::after{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--pink);animation:slide 1.8s ease-in-out infinite;}
  @keyframes slide{0%{left:-40%;}100%{left:100%;}}
  .hero .section-foot{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px clamp(20px,5vw,64px);border-top:1px solid rgba(255,255,255,0.14);}
  @media (prefers-reduced-motion: reduce){ .ember-dot,.scroll-cue .line::after{animation:none;display:none;} }

  /* ---------- FULL-BLEED PHOTO BANNER (used atop Manifiesto / Cómo trabajamos) ---------- */
  .photo-banner{
    position:relative;min-height:66vh;display:flex;align-items:flex-end;
    background:var(--black);overflow:hidden;
  }
  .photo-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55;}
  .photo-banner::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
  }
  .photo-banner .wrap{position:relative;z-index:2;padding-bottom:64px;}
  .photo-banner .tag{margin-bottom:22px;}

  /* ---------- MANIFIESTO / COMO TRABAJAMOS TEXT OVERLAYS ---------- */
  .photo-banner-text{align-items:center;}
  .photo-banner-text .wrap{padding-bottom:0;}
  .manifiesto-overlay{
    font-family:var(--font);font-weight:700;
    font-size:clamp(24px,3.4vw,38px);line-height:1.4;margin:0;max-width:26ch;color:#fff;
  }
  .manifiesto-overlay .hl{color:var(--pink);}
  .manifiesto-overlay strong{font-weight:900;color:var(--pink);}
  .banner-title{
    font-family:var(--font);font-weight:900;color:#fff;
    font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-0.02em;
    margin:0 0 20px;max-width:16ch;
  }
  .banner-subtitle{
    font-family:var(--font);font-weight:500;color:rgba(255,255,255,0.82);
    font-size:16px;line-height:1.5;margin:0;max-width:52ch;
  }

  /* ---------- QUE ES (pink) ---------- */
  .capabilities{display:flex;flex-wrap:wrap;gap:12px 0;margin-top:40px;padding-top:30px;border-top:1px solid rgba(0,0,0,0.2);}
  .capabilities span{font-size:15.5px;font-weight:600;color:var(--black);padding:8px 0;}
  .capabilities span:not(:last-child)::after{content:'/';margin:0 14px;color:var(--black);opacity:.4;}

  /* ---------- COMO TRABAJAMOS (modes grid) ---------- */
  .modes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px;}
  .mode{padding:26px 22px 26px 0;border-top:1px solid var(--line);}
  .mode h3{font-family:var(--font);font-weight:700;font-size:17px;margin:0 0 10px;}
  .mode p{font-size:14.5px;color:#fff;margin:0;line-height:1.5;}
  @media (max-width:860px){ .modes{grid-template-columns:1fr 1fr;} .mode{padding-right:16px;} }
  @media (max-width:540px){ .modes{grid-template-columns:1fr;} }

  /* ---------- SERVICIOS ---------- */
  .services-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
    margin-top:10px;
  }
  .service-card{
    background:rgba(255,255,255,0.04);
    padding:40px;
    display:flex;flex-direction:column;
    transition:background .2s ease;
  }
  .service-card:hover{background:rgba(255,255,255,0.07);}
  .service-icon{
    width:56px;height:56px;border-radius:50%;background:var(--pink);
    display:flex;align-items:center;justify-content:center;margin-bottom:26px;
  }
  .service-card h3{
    font-family:var(--font);font-weight:900;font-size:clamp(20px,2.2vw,25px);
    margin:0 0 12px;letter-spacing:-0.01em;color:var(--pink);
  }
  .service-card p{font-size:15.5px;line-height:1.5;margin:0 0 22px;color:rgba(255,255,255,0.78);max-width:34ch;}
  .service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
  .service-tags span{font-size:12.5px;color:var(--black);background:var(--pink);padding:6px 13px;border-radius:14px;}
  @media (max-width:760px){ .services-grid{grid-template-columns:1fr;} .service-card{padding:32px 24px;} }

  /* ---------- CASOS ---------- */
  .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;}
  .case{background:var(--off);padding:34px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s ease;}
  .case:hover{background:#e6e6e6;}
  .case .swatch{width:100%;height:64px;border-radius:2px;margin-bottom:20px;}
  .case .case-cat{display:inline-block;background:var(--pink);color:var(--black);font-size:12px;font-weight:600;padding:5px 12px;border-radius:14px;margin-bottom:14px;width:fit-content;}
  .case h3{font-family:var(--font);font-weight:900;font-size:clamp(19px,2.1vw,24px);margin:0 0 10px;line-height:1.15;}
  .case p{font-size:14px;color:var(--ash);margin:0 0 14px;max-width:40ch;}
  .case .case-fmt{font-size:12px;color:var(--ash);opacity:.85;}
  @media (max-width:760px){ .cases{grid-template-columns:1fr;} }

  /* ---------- LOGOS MARQUEE ---------- */
  .logos-strip{padding:64px 0;overflow:hidden;}
  .logos-label{
    text-align:center;font-size:13px;font-weight:600;letter-spacing:.04em;
    color:var(--ash);margin:0 0 36px;text-transform:uppercase;
  }
  .marquee{position:relative;width:100%;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track{
    display:flex;align-items:center;width:max-content;
    animation:marquee-scroll 54s linear infinite;
  }
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .logo-item{
    display:flex;align-items:center;justify-content:center;
    height:44px;padding:0 42px;flex:0 0 auto;
  }
  .logo-item img{
    max-height:44px;max-width:130px;width:auto;height:auto;
    object-fit:contain;opacity:.62;transition:opacity .2s ease;
  }
  .logo-item img:hover{opacity:1;}
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;}
  }
  @media (max-width:700px){
    .logo-item{padding:0 26px;height:34px;}
    .logo-item img{max-height:34px;max-width:100px;}
  }

  /* ---------- CONTACTO ---------- */
  .contact-photo-bg{position:absolute;inset:0;z-index:0;}
  .contact-photo-bg img{width:100%;height:100%;object-fit:cover;opacity:0.28;}
  .contact-photo-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg, rgba(0,0,0,0.9) 40%, rgba(0,0,0,0.55) 100%);}
  .contact-main{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;}
  .contact-cta p.big{
    font-family:var(--font);font-weight:900;
    font-size:clamp(28px,4.2vw,50px);line-height:1.1;margin:26px 0 34px;max-width:13ch;
  }
  .mail-link{
    display:inline-flex;align-items:center;gap:16px;text-decoration:none;
    font-size:clamp(22px,3vw,32px);font-weight:800;color:#fff;
  }
  .mail-link:hover{color:var(--pink);}
  .cities{
    margin:18px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;
    color:var(--pink);text-transform:uppercase;
  }
  .arrow{flex:0 0 auto;width:32px;height:2px;background:var(--pink);position:relative;}
  .arrow::after{content:'';position:absolute;right:-1px;top:-4px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--pink);}
  .contact-people{display:flex;flex-direction:column;gap:30px;padding-top:10px;}
  .person{border-top:1px solid rgba(255,255,255,0.16);padding-top:18px;}
  .person .role{font-size:13.5px;color:var(--pink);margin:0 0 10px;}
  .person .phone{display:inline-flex;align-items:center;gap:14px;font-size:clamp(19px,2.4vw,25px);font-weight:800;color:#fff;text-decoration:none;}
  .person .phone:hover{color:var(--pink);}
  .person .phone .arrow{width:24px;}
  @media (max-width:860px){ .contact-main{grid-template-columns:1fr;gap:44px;} }

  /* ---------- CLOSING ---------- */
  .closing{background:var(--black);color:var(--pink);padding:110px 0 90px;text-align:center;}
  .closing h2{
    font-family:var(--font);font-weight:900;font-size:clamp(44px,8vw,104px);
    line-height:0.82;letter-spacing:-0.03em;margin:0;text-transform:uppercase;
  }
  .closing-seal{display:flex;justify-content:center;margin-bottom:36px;}
  .closing-seal img{width:min(40vw,320px);height:min(40vw,320px);}

  footer{background:var(--black);padding:0 0 40px;}
  footer .wrap{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);
  }
  .footer-copy{font-size:13px;color:rgba(255,255,255,0.5);}