/*
Theme Name: Plaud Vision Works
Theme URI: https://plaudvisionworks.com
Author: Plaud Vision Works
Description: Tema a medida para Plaud Vision Works, estudio audiovisual de CDMX y Puebla. El mosaico del portafolio se administra desde el menu Piezas.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Uso privado del cliente
Text Domain: plaudvision
*/

:root{
    --paper:     #FAFAF8;
    --ink:       #332E30;
    --ink-deep:  #1C1819;
    --ink-soft:  #6E6769;
    --line:      #DEDAD6;
    --signal:    #1E9BF0;

    --pad: clamp(18px, 4vw, 48px);
    --gap: clamp(16px, 3vw, 32px);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ background:var(--paper); scroll-behavior:smooth; }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }

  ::selection{ background:var(--signal); color:#fff; }

  a{ color:inherit; text-decoration:none; }

  :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

  .mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:.04em; }

  .display{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:.98;
  }

  .wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--pad); }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------- HEADER ---------- */

  header{
    position:sticky; top:0; z-index:60;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }

  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--gap); padding-block:16px; flex-wrap:wrap;
  }

  /* header wordmark — the source PNG carries generous transparent padding,
     so it is scaled up and optically cropped to sit on the same baseline as the nav */
  .logo{ display:block; flex:none; line-height:0; overflow:hidden; }

  .logo img{
    display:block;
    width:clamp(158px, 15vw, 210px);
    height:auto;
    margin:-31% 0;
  }

  nav.primary{
    display:flex; gap:clamp(16px,2.6vw,30px);
    font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
  }
  nav.primary a{ padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .15s ease; }
  nav.primary a:hover{ border-color:var(--ink); }

  .nav-cta{
    font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
    border:1px solid var(--ink); padding:8px 14px;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .nav-cta:hover{ background:var(--ink); color:var(--paper); }

  .nav-end{ display:flex; align-items:center; gap:14px; }

  /* Interruptor de sonido.
     Arranca apagado siempre: los navegadores bloquean el audio automático, y
     aunque no lo hicieran, sonar sin permiso es hostil. Las barras se animan
     sólo cuando está encendido, así el estado se lee de un vistazo. */
  .audio-btn{
    display:flex; align-items:center; gap:7px;
    background:none; border:0; cursor:pointer;
    color:var(--ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 10px 6px 8px;
    border:1px solid var(--line);
    transition:color .18s ease, border-color .18s ease;
  }
  .audio-btn:hover{ color:var(--signal); border-color:var(--signal); }
  .audio-btn[aria-pressed="true"]{ border-color:var(--signal); }

  .audio-btn svg{
    width:15px; height:15px; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round;
  }

  /* Las ondas se dibujan sólo cuando hay sonido; la barra tachada, sólo cuando
     no lo hay. Un icono que no cambia con el estado no informa de nada. */
  .audio-btn .onda{ opacity:0; transition:opacity .2s ease; }
  .audio-btn .tache{ opacity:1; transition:opacity .2s ease; }
  .audio-btn[aria-pressed="true"] .onda{ opacity:1; }
  .audio-btn[aria-pressed="true"] .tache{ opacity:0; }

  .audio-btn[aria-pressed="true"]{ color:var(--signal); }

  /* El texto reserva su ancho con la palabra más larga, para que el botón no
     salte —ni empuje al resto del header— al cambiar de estado. */
  .audio-btn b{
    font-weight:500;
    display:inline-grid;
    justify-items:start;
  }
  .audio-btn b span{ grid-area:1 / 1; }
  .audio-btn b .off{ visibility:hidden; }
  .audio-btn[aria-pressed="true"] b .on{ visibility:visible; }
  .audio-btn[aria-pressed="true"] b .off{ visibility:hidden; }
  .audio-btn b .on{ visibility:hidden; }
  .audio-btn:not([aria-pressed="true"]) b .off{ visibility:visible; }

  @media (max-width:520px){
    .audio-btn b{ display:none; }
  }

  .redes{ display:flex; align-items:center; gap:12px; }

  .ig{ display:flex; color:var(--ink); transition:color .18s ease; }
  .ig svg{
    width:19px; height:19px;
    fill:none; stroke:currentColor; stroke-width:1.6;
  }
  .ig:hover{ color:var(--signal); }

  /* En pantallas chicas el botón cede el paso, pero la red se queda */
  @media (max-width:640px){ .nav-cta{ display:none; } }

  /* ---------- TICKER ---------- */

  .ticker{
    background:var(--ink-deep); color:var(--paper);
    overflow:hidden; white-space:nowrap;
  }
  .ticker-track{ display:inline-flex; animation:scroll-left 34s linear infinite; }
  .ticker-track span{
    display:inline-flex; align-items:center;
    font-size:12px; letter-spacing:.09em; text-transform:uppercase;
    padding-block:9px;
  }
  .ticker-track span::after{ content:"—"; color:var(--signal); margin-inline:18px; }

  @keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* Se detiene al apuntarlo: un texto en marcha esconde la mitad de lo que dice
     en cada instante, y así se puede leer sin perseguirlo. */
  .ticker:hover .ticker-track,
  .ticker:focus-within .ticker-track{ animation-play-state:paused; }

  @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

  /* ---------- HERO ---------- */

  .hero{ padding-block:clamp(46px,7.5vw,92px) clamp(38px,6vw,72px); }

  .hero-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:var(--gap); margin-bottom:clamp(26px,4.5vw,46px);
  }

  .hero-top .eyebrow{ max-width:26ch; line-height:1.7; }

  /* PV monogram — settles into place once on load */
  .hero-mark{ width:clamp(76px,10vw,124px); flex:none; }
  .hero-mark img{
    display:block; width:100%; height:auto;
    opacity:0; transform:scale(.9) rotate(-6deg);
    transition:opacity .7s ease, transform .9s cubic-bezier(.16,.9,.28,1);
  }
  .hero-mark.is-in img{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .hero-mark img{ transition:none; }
  }

  h1.hero-line{
    font-size:clamp(2.3rem, 7vw, 6rem);
    max-width:16ch;
  }

  /* rotating hero word */
  .word-swap{
    display:block;
    position:relative;
    min-height:1.16em;
    color:var(--signal);
  }

  .word-swap .w{
    position:absolute; left:0; top:0;
    white-space:nowrap;
    opacity:0;
    transform:translateY(.16em);
    transition:opacity .32s ease, transform .32s cubic-bezier(.2,.85,.25,1);
  }
  /* the incoming word waits for the outgoing one to clear, so the two
     never sit on top of each other at display size */
  .word-swap .w.is-active{
    opacity:1; transform:none;
    transition-delay:.26s;
  }
  .word-swap .w.is-out{ opacity:0; transform:translateY(-.16em); }

  @media (prefers-reduced-motion: reduce){
    .word-swap .w{ transition:none; }
  }

  /* Puntos y signos "+" en azul. Los signos de interrogación quedan del color
     del texto. */
  .pt{ color:var(--signal); }

  /* Sobre el azul el acento no puede ser azul: ahí el punto va en blanco pleno,
     que resalta contra el texto de la celda, atenuado al 72%. */
  .cell.text.accent .pt{ color:#fff; opacity:1; }

  .sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  .hero-sub{
    margin-top:clamp(22px,3.5vw,34px);
    padding-top:clamp(18px,2.6vw,26px);
    border-top:1px solid var(--line);
    display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap);
    align-items:start;
  }

  .hero-sub .lead{
    font-size:clamp(1.05rem,1.7vw,1.5rem);
    line-height:1.3;
    max-width:30ch;
    font-weight:500;
  }

  .hero-sub p.small{ color:var(--ink-soft); max-width:44ch; }

  @media (max-width:760px){ .hero-sub{ grid-template-columns:1fr; } }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:22px;
    background:var(--ink); color:var(--paper);
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:13px 22px;
    transition:background .18s ease;
  }
  .btn:hover{ background:var(--signal); }

  /* ---------- SECTION SHELL ---------- */

  section.band{ padding-block:clamp(48px,7vw,96px); border-top:1px solid var(--line); }

  .section-head{
    display:flex; justify-content:space-between; align-items:baseline;
    gap:var(--gap); flex-wrap:wrap; margin-bottom:clamp(26px,4vw,48px);
  }

  .section-head h2{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.02em;
    font-size:clamp(1.7rem,3.6vw,3rem); line-height:1;
    max-width:18ch;
  }

  /* ---------- VALUE ---------- */

  .value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
  @media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }

  .value-grid p{ color:var(--ink-soft); max-width:52ch; }
  .value-grid p + p{ margin-top:16px; }
  .value-grid strong{ color:var(--ink); font-weight:500; }

  .formula{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:700; letter-spacing:-.01em;
    font-size:clamp(1.15rem,2.2vw,1.9rem);
    line-height:1.15;
    border-left:2px solid var(--signal);
    padding-left:18px;
  }

  /* ---------- PORTFOLIO FILTERS ---------- */

  .filter-row{
    display:flex; justify-content:space-between; align-items:center;
    gap:var(--gap); flex-wrap:wrap;
    padding-block:13px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  }

  .filter-group{ display:flex; gap:20px; flex-wrap:wrap; }

  .filter-group button{
    background:none; border:none; font:inherit; letter-spacing:.05em;
    color:var(--ink-soft); cursor:pointer;
    padding:2px 0; border-bottom:1px solid transparent;
  }
  .filter-group button[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink); }
  .filter-group button:hover{ color:var(--ink); }

  .filter-count{ color:var(--ink-soft); }

  /* ---------- MOSAIC ----------
     Justified rows: every cell keeps an exact aspect ratio (16:9, 9:16, 1:1, 4:3)
     and flex-grows in proportion to it, so a row's cells resolve to one shared
     height with zero gaps and zero cropping of the intended format. */

  .m-row{ display:flex; }

  .cell{
    position:relative;
    overflow:hidden;
    flex: var(--ar) 1 0px;
    aspect-ratio: var(--ar);
    min-width:0;
  }

  /* Format tokens. Los fotogramas llegaban con barras negras del montaje; ya
     vienen recortadas en el archivo, así que cada celda usa la proporción real
     de su imagen y no hay recorte alguno. */
  .ar-240 { --ar: 2.40; }
  .ar-235 { --ar: 2.35; }
  .ar-200 { --ar: 2.00; }
  .ar-190 { --ar: 1.899; }
  .ar-182 { --ar: 1.818; }
  .ar-wide { --ar: 1.7778; }  /* 16:9  */
  /* Franja de video: 16:9 exacto en cualquier ancho, porque ahí va un
     reproductor y recortarlo a otra proporción deformaría la pieza. */
  .ar-video{ --ar: 1.7778; }
  .ar-photo{ --ar: 1.5; }     /* 3:2   */
  .ar-sq   { --ar: 1; }       /* 1:1   */
  .ar-vert { --ar: 0.5625; }  /* 9:16  */

  /* tablet: two per row, one shared format so rows stay gapless */
  @media (max-width:900px){
    .m-row{ flex-wrap:wrap; }
    .cell{ flex:1 1 50%; --ar: 1.3333 !important; }
  }

  /* mobile: single column, each cell keeps its own real format */
  @media (max-width:540px){
    .cell{ flex:1 1 100%; }
    .ar-vert{ --ar: 0.75 !important; }
    .ar-wide, .ar-photo, .ar-sq{ --ar: 1.3333 !important; }
  }

  /* Cinemascope frames arrive letterboxed from the edit. Their cell keeps the
     2.39 ratio at every width so `cover` trims the baked-in bars exactly,
     instead of a narrower cell putting them back on screen. */
  @media (max-width:900px){
    .ar-video{ flex-basis:100% !important; --ar: 1.7778 !important; }
    .ar-240{ flex-basis:100% !important; --ar: 2.40 !important; }
    .ar-200{ flex-basis:100% !important; --ar: 2.00 !important; }
    .ar-190{ flex-basis:100% !important; --ar: 1.899 !important; }
    .ar-182{ flex-basis:100% !important; --ar: 1.818 !important; }
  }

  /* Text cells stop being square once they span a full narrow column: at that
     width a forced ratio leaves a large empty block, so they size to the copy. */
  @media (max-width:900px){
    .cell.text{
      aspect-ratio:auto;
      min-height:clamp(132px, 26vw, 200px);
      justify-content:center;
    }
  }

  .cell.media{
    background:radial-gradient(120% 140% at 15% 10%, #57524f 0%, #3b3735 44%, #1e1b1a 100%);
  }

  .cell.media::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    mix-blend-mode:overlay; opacity:.5;
  }

  .cell.media::after{
    content:""; position:absolute; inset:0;
    background:var(--signal); mix-blend-mode:color;
    opacity:0; transition:opacity .45s ease;
    pointer-events:none;
  }
  .cell.media:hover::after{ opacity:.55; }

  /* stills — cropped to the cell's format rather than letterboxed, so the
     mosaic's rhythm is never broken by a photo's own proportions */
  .cell-img{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.005);           /* hides sub-pixel edges on scaled crops */
    transition:transform .8s cubic-bezier(.2,.7,.3,1);
  }
  .cell.media:hover .cell-img{ transform:scale(1.045); }

  @media (prefers-reduced-motion: reduce){
    .cell-img, .cell.media:hover .cell-img{ transition:none; transform:none; }
  }

  /* looping preview — injected only when a cell declares data-loop, so cells
     without a clip stay as plain placeholders instead of empty players */
  .cell-video{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0; transition:opacity .6s ease;
  }
  .cell-video.is-ready{ opacity:1; }

  .cell.media[data-vimeo]{ cursor:pointer; }

  /* Vista previa viva: el propio video corriendo en la celda, sin controles,
     en bucle y sin sonido. La foto se queda debajo como respaldo mientras
     carga, o para siempre si el reproductor no llega a cargar. */
  .cell-preview{
    /* z-index 2: por encima del póster, que va en la capa 1. El botón de
       reproducir y el título suben a la 3 para no quedar tapados por el video. */
    position:absolute; inset:0; z-index:2;
    width:100%; height:100%;
    border:0;
    pointer-events:none;          /* el clic sigue siendo de la celda */
    opacity:0;
    transition:opacity .9s ease;
  }
  .cell-preview.is-ready{ opacity:1; }

  .tag{
    position:absolute; top:11px; left:11px; z-index:3;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    color:#EDEBE8;
    background:rgba(20,18,17,.5);
    border:1px dashed rgba(237,235,232,.45);
    padding:4px 7px;
  }

  .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; }
  .play span{
    width:50px; height:50px; border-radius:50%;
    border:1px solid rgba(250,250,248,.6);
    display:flex; align-items:center; justify-content:center;
    font-size:0; color:#FAFAF8;
    opacity:0; transform:scale(.85);
    transition:opacity .35s ease, transform .35s ease;
  }
  .play span::before{
    content:""; width:0; height:0;
    border-top:7px solid transparent; border-bottom:7px solid transparent;
    border-left:11px solid currentColor; margin-left:3px;
  }
  .cell.media:hover .play span{ opacity:1; transform:scale(1); }

  /* Titles stay out of the way until the piece is pointed at, so the mosaic
     reads as images first. The gradient and the text fade together. */
  .cell-meta{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    display:flex; justify-content:space-between; align-items:baseline;
    gap:10px; flex-wrap:wrap;
    padding:34px 14px 12px;
    background:linear-gradient(to top, rgba(14,12,11,.85) 0%, rgba(14,12,11,.45) 48%, transparent 100%);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.3,1);
    pointer-events:none;
  }

  .cell.media:hover .cell-meta,
  .cell.media:focus-within .cell-meta{ opacity:1; transform:none; }

  /* Touch screens have no hover, so there the titles are simply always on. */
  @media (hover: none){
    .cell-meta{ opacity:1; transform:none; }
  }

  /* Las dos franjas de video anuncian que lo son sin esperar al cursor: el
     botón queda puesto y sólo crece al apuntarlo. */
  .ar-video .play span{ opacity:1; transform:scale(1); width:66px; height:66px; }
  .ar-video:hover .play span{ transform:scale(1.08); background:rgba(30,155,240,.25); }
  .ar-video .cell-meta{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .cell-meta{ transition:opacity .01ms linear; transform:none; }
  }
  .cell-title{ font-size:clamp(.9rem,1.2vw,1.05rem); font-weight:600; color:#FAFAF8; letter-spacing:-.01em; }
  .cell-sub{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(250,250,248,.72); white-space:nowrap; }

  /* text cells inside the mosaic — blue or white only */
  .cell.text{
    display:flex; flex-direction:column; justify-content:center;
    gap:.2em;
    padding:clamp(16px,1.8vw,26px);
  }
  .cell.text.accent{ background:var(--signal); color:#fff; }
  .cell.text.light { background:#fff;          color:var(--ink); }

  .cell.text p{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:700; letter-spacing:-.015em;
    font-size:clamp(.95rem,1.75vw,1.55rem); line-height:1.05;
  }

  /* the rotating line carries the cell's accent, so the changing half is the
     one that reads as the idea */
  .cell.text .word-swap{ font-size:clamp(.95rem,1.75vw,1.55rem); min-height:1.2em; }
  .cell.text.accent .word-swap{ color:#fff; opacity:.72; }
  .cell.text.light  .word-swap{ color:var(--signal); }

  /* ---------- APARICIÓN AL ENTRAR EN PANTALLA ----------
     El estado oculto se activa desde JS (.has-reveal en <html>), nunca desde la
     hoja de estilos: si el script no corre, el texto se ve igual y nada queda
     invisible. */
  .has-reveal .rv{
    opacity:0;
    transform:translateY(18px);
    /* La opacidad tarda más que el desplazamiento: el texto termina de asentarse
       en su sitio mientras todavía está entrando, y la disolvencia se percibe
       larga sin que el movimiento se sienta lento. */
    transition:opacity 1.5s ease, transform 1.15s cubic-bezier(.2,.8,.3,1);
    transition-delay:var(--rv-delay, 0ms);
  }
  .has-reveal .rv.rv-in{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .has-reveal .rv{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- TITULAR QUE CAMBIA DE FORMATO ----------
     "La visión no cambia" se queda quieta; "El formato sí" se revuelve y se
     acomoda. La animación dice lo mismo que la frase. */
  .t-shift .shift{ display:inline-block; }

  /* Cada palabra es un bloque indivisible: como las letras van sueltas para
     poder animarlas, sin esto el renglón se partiría a media palabra. */
  .t-shift .wd, .morph .wd{ display:inline-block; white-space:nowrap; }

  .t-shift .ch, .morph .ch{
    display:inline-block;
    transition:transform .18s ease, color .18s ease;
  }

  .t-shift .ch.is-glitch, .morph .ch.is-glitch{
    color:var(--signal);
    transform:scaleY(-1);
  }
  .t-shift .ch.is-glitch.flip-x, .morph .ch.is-glitch.flip-x{ transform:scaleX(-1); }
  .t-shift .ch.is-glitch.flip-both, .morph .ch.is-glitch.flip-both{ transform:scale(-1,-1); }

  @media (prefers-reduced-motion: reduce){
    .t-shift .ch, .morph .ch{ transition:none; }
  }

  /* Palabra rotatoria del hero: cambia revolviéndose, no disolviéndose */
  .morph{
    display:block;
    color:var(--signal);
    min-height:1.16em;
  }
  /* sobre azul, el ruido se distingue en tinta */
  .morph .ch.is-glitch{ color:var(--ink); }

  /* ---------- LIGHTBOX ---------- */

  .lightbox{
    position:fixed; inset:0; z-index:100;
    background:rgba(14,12,11,.94);
    display:none;
    align-items:center; justify-content:center;
    padding:clamp(16px,5vw,64px);
  }
  .lightbox[open], .lightbox.is-open{ display:flex; }

  .lightbox-stage{
    position:relative;
    width:100%; max-width:1180px;
    aspect-ratio:16/9;
    background:#000;
  }
  .lightbox-stage iframe{
    position:absolute; inset:0;
    width:100%; height:100%; border:0;
  }

  .lightbox-close{
    position:absolute; top:-46px; right:0;
    background:none; border:1px solid rgba(250,250,248,.4);
    color:var(--paper);
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:8px 14px; cursor:pointer;
  }
  .lightbox-close:hover{ background:var(--signal); border-color:var(--signal); }

  /* ---------- SERVICES ---------- */

  .services{ display:grid; grid-template-columns:repeat(3,1fr); }
  @media (max-width:900px){ .services{ grid-template-columns:1fr; } }

  .service{
    border-top:1px solid var(--line);
    padding:clamp(22px,3vw,34px) 0;
  }
  .services > .service{ padding-right:var(--gap); }
  .services > .service + .service{ padding-left:var(--gap); border-left:1px solid var(--line); }
  @media (max-width:900px){
    .services > .service{ padding-right:0; }
    .services > .service + .service{ padding-left:0; border-left:none; }
  }

  .service h3{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.015em;
    font-size:clamp(1.05rem,1.6vw,1.3rem);
    margin:12px 0 12px;
  }
  .service p{ color:var(--ink-soft); font-size:.95rem; }
  .service p + p{ margin-top:12px; }
  .service .kicker{ color:var(--ink); font-weight:500; }

  /* ---------- METHOD ---------- */

  .method{ display:grid; grid-template-columns:repeat(4,1fr); }
  @media (max-width:900px){ .method{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:540px){ .method{ grid-template-columns:1fr; } }

  .step{
    border-top:2px solid var(--ink);
    padding:16px var(--gap) 26px 0;
  }
  .step .num{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; letter-spacing:.1em; color:var(--signal);
    display:block; margin-bottom:10px;
  }
  .step h3{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.01em;
    font-size:clamp(1rem,1.5vw,1.25rem);
    margin-bottom:8px;
  }
  .step p{ color:var(--ink-soft); font-size:.92rem; max-width:30ch; }

  /* ---------- DIFFERENTIAL ---------- */

  .diff{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
  @media (max-width:820px){ .diff{ grid-template-columns:1fr; } }

  .questions{ display:flex; flex-direction:column; }
  .questions li{ list-style:none; border-bottom:1px solid var(--line); }
  .questions li:first-child{ border-top:1px solid var(--line); }

  /* Acordeón: la pregunta es el disparador y la respuesta se despliega debajo. */
  .q-head{
    width:100%;
    display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    background:none; border:0; cursor:pointer; text-align:left;
    color:inherit;
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.02em;
    font-size:clamp(1.4rem,3.2vw,2.6rem); line-height:1.05;
    padding-block:18px;
    transition:color .18s ease;
  }
  .q-head:hover{ color:var(--signal); }

  .q-plus{
    flex:none;
    color:var(--signal);
    font-weight:700;
    transition:transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .q-head[aria-expanded="true"] .q-plus{ transform:rotate(45deg); }

  /* 0fr -> 1fr permite animar la altura sin fijarla a mano, así la respuesta
     puede crecer lo que necesite en cualquier ancho de pantalla. */
  .q-body{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .42s cubic-bezier(.2,.8,.3,1);
  }
  .q-body > div{ overflow:hidden; }
  .q-body.is-open{ grid-template-rows:1fr; }

  .q-body p{
    padding-bottom:20px;
    max-width:44ch;
  }

  @media (prefers-reduced-motion: reduce){
    .q-body{ transition:none; }
    .q-plus{ transition:none; }
  }

  .diff p{ color:var(--ink-soft); max-width:46ch; }
  .diff p + p{ margin-top:14px; }
  .diff .closing{ color:var(--ink); font-weight:500; }

  /* ---------- AUDIENCE ---------- */

  .audience{ display:flex; flex-wrap:wrap; gap:10px; }
  .audience li{
    list-style:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
    border:1px solid var(--line);
    padding:9px 14px;
    transition:border-color .18s ease, color .18s ease;
  }
  .audience li:hover{ border-color:var(--ink); }

  /* ---------- ABOUT ---------- */

  .about{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
  @media (max-width:820px){ .about{ grid-template-columns:1fr; } }
  .about p{ color:var(--ink-soft); max-width:50ch; }
  .about p + p{ margin-top:16px; }

  .about .statement{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.02em;
    font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.02;
    color:var(--ink);
  }
  /* Ambas líneas se animan, pero sólo la segunda va en azul: .oscuro devuelve
     la primera al color del texto una vez asentada. */
  .about .statement .shift{ color:var(--signal); }
  .about .statement .shift.oscuro{ color:var(--ink); }

  /* ---------- CLOSING CTA ---------- */

  .closing-cta{
    background:var(--ink-deep); color:var(--paper);
  }
  .closing-cta .inner{
    padding-block:clamp(52px,8vw,110px);
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:var(--gap); flex-wrap:wrap;
  }
  .closing-cta h2{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.025em;
    font-size:clamp(2rem,5.5vw,4.4rem); line-height:.98;
    max-width:16ch;
  }
  .closing-cta p{ color:rgba(250,250,248,.66); max-width:38ch; margin-top:16px; }
  .btn-light{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--signal); color:#fff;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    padding:15px 26px;
    transition:background .18s ease;
  }
  .btn-light:hover{ background:var(--paper); color:var(--ink-deep); }

  /* ---------- FOOTER ---------- */

  footer{ padding-block:clamp(28px,4.5vw,44px); }
  .footer-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
    font-size:12.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--ink-soft);
  }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
  @media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } }

  /* Franja superior del footer: la marca cierra el sitio a buen tamaño */
  .footer-top{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--gap); flex-wrap:wrap;
    padding-bottom:clamp(24px,3.5vw,40px);
    margin-bottom:clamp(24px,3.5vw,40px);
    border-bottom:1px solid var(--line);
  }

  /* El PNG trae mucho margen transparente; se recorta ópticamente igual que en
     el header para que no abra un hueco enorme alrededor. */
  .footer-logo{ display:block; line-height:0; overflow:hidden; flex:none; }
  .footer-logo img{
    display:block;
    width:clamp(190px, 24vw, 320px);
    height:auto;
    margin:-31% 0;
  }

  .footer-claim{
    font-family:'Archivo', sans-serif;
    text-transform:uppercase; font-weight:800; letter-spacing:-.02em;
    font-size:clamp(.95rem,1.5vw,1.3rem); line-height:1.1;
    max-width:20ch;
    text-align:right;
  }
  @media (max-width:640px){ .footer-claim{ text-align:left; } }

  .footer-base{
    display:flex; justify-content:space-between; gap:var(--gap); flex-wrap:wrap;
    margin-top:clamp(26px,4vw,44px);
    padding-top:18px;
    border-top:1px solid var(--line);
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft);
  }

  .footer-col-title{ color:var(--ink); display:block; margin-bottom:10px; }

  /* Red aún sin URL: se enuncia, pero no finge ser un enlace */
  .footer-col .soon{ display:block; padding-block:3px; opacity:.55; }
  .footer-col a{ display:block; padding-block:3px; }
  .footer-col a:hover{ color:var(--ink); }