/* ---------- FUENTES PROPIAS ----------
   Servidas desde este mismo dominio. Antes venian de los servidores de
   Google, lo que enviaba la IP de cada visitante a un tercero fuera de
   la UE y ademas bloqueaba el primer pintado. */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/space-grotesk-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/space-grotesk-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fuentes/space-grotesk-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/instrument-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/instrument-sans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/jetbrains-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/jetbrains-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
    --cal:#F5F1E8;
    --tarjeta:#FCFAF5;
    --hundida:#EBE5D7;
    --borde:#DFD8C7;
    --borde-fuerte:#938B79; /* era #C7BDA8: 1,65:1, casi invisible */
    --tinta:#1B1917;
    --tinta-2:#6C6559;
    --tinta-3:#746D60;      /* era #948C7D: 2,95:1, por debajo del minimo */
    --bermellon:#C8442A;
    --bermellon-osc:#A5321C;
    --bermellon-tenue:#F6E1DA;
    --anil:#2F5D8C;
    --anil-tenue:#E3ECF5;

    --display:'Space Grotesk', system-ui, sans-serif;
    --texto:'Instrument Sans', system-ui, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, monospace;

    --col:min(1400px, 100% - 6vw);
    --lectura:min(66ch, 100%);
  }

  /* El modo claro es el de partida, siempre. El oscuro se activa a mano. */
  html{color-scheme:light; background:#F5F1E8;}
  html[data-tema="oscuro"], html[data-tema="oscuro"] body{
    color-scheme:dark; background:#17140F;
    --cal:#17140F; --tarjeta:#211C16; --hundida:#1D1913;
    --borde:#342D23; --borde-fuerte:#686156;
    --tinta:#F2EDE2; --tinta-2:#A29785; --tinta-3:#887D6E;
    --bermellon:#E0603F; --bermellon-osc:#EE7854; --bermellon-tenue:#2E1E17;
    --anil:#7FB2E4; --anil-tenue:#16212E;
  }
  body, header, .obra, .tema{
    transition:background-color .32s ease, color .32s ease, border-color .32s ease;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; min-height:100%;}
  body{
    margin:0; background:#F5F1E8; background:var(--cal); color:var(--tinta);

    font-family:var(--texto); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{width:var(--col); margin-inline:auto;}

  /* Capa de fondo fija: garantiza el color aunque el contenedor lo anule */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:var(--cal); pointer-events:none;
  }
  main, footer{background:var(--cal);}

  ::selection{background:var(--bermellon); color:var(--cal);}
  a{color:var(--bermellon-osc);}
  :focus-visible{outline:2px solid var(--bermellon); outline-offset:3px; border-radius:2px;}

  /* Enlace de salto: invisible hasta que alguien navega con teclado */
  .salto{
    position:absolute; left:50%; transform:translate(-50%,-140%);
    z-index:80; background:var(--bermellon); color:#FCFAF5;
    padding:10px 18px; border-radius:0 0 10px 10px; text-decoration:none;
    font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    transition:transform 180ms var(--asiento);
  }
  .salto:focus{transform:translate(-50%,0);}

  /* ---------- LOGOTIPO ---------- */
  .marca{display:inline-flex; align-items:center; gap:9px; text-decoration:none;}
  .iso{
    width:clamp(26px,2.2vw,32px); height:clamp(26px,2.2vw,32px);
    border-radius:7px; background:transparent; border:1.5px solid var(--anil);
    display:flex; align-items:center; justify-content:center; gap:1px;
    font-family:var(--display); font-weight:700; font-size:clamp(11px,.9vw,13px);
    color:var(--anil); flex:none;
  }
  .logotipo{
    display:flex; align-items:baseline;
    font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,24px);
    letter-spacing:-0.03em; color:var(--tinta); line-height:1;
  }
  .cuna{margin:0 1px;}
  .logotipo .on{color:var(--anil);}

  /* ---------- CABECERA ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:var(--cal);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease;
  }
  header.pegado{border-bottom-color:var(--borde);}
  header .wrap{display:flex; justify-content:space-between; align-items:center; padding:15px 0;}
  .lugar{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--tinta-3);}
  .zona-dcha{display:flex; align-items:center; gap:13px;}
  .tema{
    appearance:none; -webkit-appearance:none; background:transparent;
    border:1px solid var(--borde-fuerte); color:var(--tinta-2);
    width:32px; height:32px; border-radius:999px; padding:0; flex:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .tema:hover{color:var(--tinta); border-color:var(--tinta-3); background:var(--hundida);}
  .tema svg{display:block;}

  /* ---------- RÓTULOS DE SECCIÓN ---------- */
  .rotulo{
    font-family:var(--mono); font-size:clamp(10.5px, .82vw, 12.5px); letter-spacing:.2em;
    text-transform:uppercase; color:var(--tinta-2);
    text-align:center; margin-bottom:clamp(26px, 3vw, 44px);
  }
  .rotulo b{font-weight:500; color:var(--anil);}

  section{padding:clamp(64px, 8vw, 132px) 0;}

  /* ---------- HERO ---------- */
  .hero{padding:clamp(44px, 6vw, 96px) 0 clamp(60px, 8vw, 120px); text-align:center;}
  h1{
    font-family:var(--display); font-weight:500;
    font-size:clamp(31px, 6.6vw, 92px); line-height:1.03; letter-spacing:-0.04em;
    margin:0 auto clamp(20px, 2.4vw, 34px); max-width:15ch; color:var(--tinta);
  }
  .lede{
    font-size:clamp(15.5px, 1.5vw, 21px); color:var(--tinta-2);
    max-width:56ch; margin:0 auto clamp(26px, 3vw, 40px);
  }
  .lede strong{color:var(--tinta); font-weight:500;}

  .acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .cta{
    display:inline-block; text-decoration:none; font-family:var(--texto);
    font-size:clamp(14.5px, 1.05vw, 16.5px); font-weight:500;
    padding:clamp(12px,1vw,16px) clamp(24px,2.2vw,34px); border-radius:999px;
    background:var(--bermellon); color:#FCFAF5; border:1px solid transparent;
    transition:transform .16s ease, background .16s ease;
  }
  .cta:hover{background:var(--bermellon-osc); transform:translateY(-1px);}
  .cta.linea{background:transparent; color:var(--anil); border-color:var(--anil); }
  .cta.linea:hover{background:var(--anil-tenue); border-color:var(--anil);}

  /* ---------- LA PALANCA ---------- */
  /* Sin touch-action:none. Lo bloqueaba todo: el dedo que empezaba el gesto
     encima de la palanca no podia hacer scroll, y la palanca esta justo en
     el centro del hero, que es donde la gente pone el pulgar. */
  .palanca-zona{margin:clamp(32px,4vw,54px) auto clamp(28px,3vw,40px); max-width:clamp(340px, 46vw, 620px);}
  .palanca{width:100%; height:auto; display:block; overflow:visible;}


  /* ---------- CAPACIDADES ---------- */
  .capacidades{display:grid; gap:0;}
  .cap{
    padding:clamp(26px, 3.2vw, 46px) 0; border-top:1px solid var(--borde);
    text-align:center;
  }
  .cap:last-child{border-bottom:1px solid var(--borde);}
  .cap .tri{
    display:block; width:0; height:0; margin:0 auto clamp(11px,1.2vw,17px);
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-bottom:13px solid var(--bermellon);
  }
  .cap h3{
    font-family:var(--display); font-weight:500;
    font-size:clamp(19px, 2.1vw, 30px);
    letter-spacing:-0.025em; margin:0 0 clamp(7px,.8vw,12px); color:var(--tinta);
  }
  .cap p{
    margin:0 auto clamp(12px,1.2vw,18px); font-size:clamp(15px,1.15vw,17.5px);
    color:var(--tinta-2); max-width:var(--lectura);
  }
  .marcas{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
  .marcas i{
    font-style:normal; font-family:var(--mono); letter-spacing:.04em;
    padding:4px 11px; border-radius:999px; border:1px solid var(--borde-fuerte);
    color:var(--tinta-2); font-size:clamp(10px,.78vw,12px);
  }

  /* ---------- PROCESO ---------- */
  .pasos{list-style:none; margin:0; padding:0; counter-reset:p;}
  .pasos{position:relative;}
  /* la espina: el proceso como una línea que baja */
  .pasos::before{
    content:""; position:absolute; left:50%; top:14px; bottom:14px; width:1px;
    background:var(--borde); transform:translateX(-.5px);
  }
  .pasos li{
    padding:clamp(24px,3vw,44px) 0; text-align:center; position:relative;
    border-radius:14px;
  }
  .plazo{
    display:inline-block; font-family:var(--mono);
    font-size:clamp(9.5px,.72vw,11px); letter-spacing:.16em; text-transform:uppercase;
    color:var(--tinta-3); margin-top:clamp(9px,1vw,13px);
    padding:3px 11px; border:1px solid var(--borde); border-radius:999px;
    background:var(--cal);
  }
  .pasos .num-wrap{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:0;
    margin-bottom:clamp(11px,1.2vw,17px);
  }
  .pasos .num-corchete{
    font-family:var(--mono); font-size:clamp(11px,.85vw,13px);
    color:var(--anil); letter-spacing:.16em;
    white-space:nowrap;
    transition:transform 320ms var(--asiento);
  }
  .pasos .num-izq{
    transform:translateX(0);
    margin-right:6px;
  }
  .pasos .num-der{
    transform:translateX(0);
    margin-left:6px;
  }
  .pasos .num{
    font-family:var(--mono); font-size:clamp(11px,.85vw,13px);
    color:var(--anil); letter-spacing:.16em;
  }
  .pasos h3{
    font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,24px);
    margin:0 0 clamp(5px,.6vw,9px); letter-spacing:-0.02em;
  }
  .pasos p{
    margin:0 auto; font-size:clamp(15px,1.1vw,17px); color:var(--tinta-2);
    max-width:var(--lectura);
  }

  /* ---------- PROYECTOS ---------- */
  .obras{display:flex; flex-wrap:wrap; gap:clamp(12px,1.2vw,20px); justify-content:center;}
  .obra{
    flex:1 1 300px; max-width:450px;
    background:var(--tarjeta); border:1px solid var(--borde); border-radius:14px;
    padding:clamp(22px,2.2vw,34px) clamp(20px,2vw,28px); text-align:center;
  }
  @media(max-width:700px){.obra{flex-basis:100%;}}
  .obra .tipo{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--anil); display:block; margin-bottom:9px;
  }
  /* El resumen es un <button> de verdad, no un div que escucha clics.
     Safari en iOS no dispara clics fiables sobre elementos no interactivos,
     y ademas asi funciona con teclado y lo anuncia un lector de pantalla. */
  .obra-cab{
    appearance:none; -webkit-appearance:none; background:none; border:0;
    font:inherit; color:inherit; width:100%; padding:0; margin:0;
    text-align:center; cursor:pointer; display:block;
  }
  .obra .senal{
    display:block; margin-top:12px;
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--tinta-3); transition:color var(--medio) var(--asiento);
  }
  .obra .senal::after{content:"  +"; }
  .obra.abierta .senal{color:var(--bermellon-osc);}
  .obra.abierta .senal::after{content:"  \2013";}
  .obra h3{font-family:var(--display); font-weight:500; font-size:18px; margin:0 0 7px; letter-spacing:-0.02em;}
  .obra p{margin:0; font-size:clamp(14.5px,1.05vw,16px); color:var(--tinta-2);}

  /* detalle que se despliega: SOLO en la tarjeta que está bajo hover o fue clickeada */
  .obra-mas{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows 320ms var(--asiento), opacity 240ms var(--asiento), margin-top 320ms var(--asiento);
    margin-top:0;
  }
  .obra-mas > div{overflow:hidden;}
  .obra-mas dl{margin:0; display:grid; gap:8px; text-align:left;}
  .obra-mas .par{
    display:flex; justify-content:space-between; gap:12px;
    padding-top:8px; border-top:1px solid var(--borde);
    font-size:clamp(12.5px,.9vw,13.5px);
  }
  .obra-mas dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--anil); white-space:nowrap;}
  .obra-mas dd{margin:0; color:var(--tinta-2); text-align:right;}
  .obra .abrir{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--tinta-3); margin-top:14px; display:block;
    transition:color var(--medio) var(--asiento);
  }

  /* Al pasar ratón sobre esta tarjeta específica */
  @media (hover:hover){
    .obra:hover .obra-mas{grid-template-rows:1fr; opacity:1; margin-top:16px;}
    .obra:hover .abrir, .obra:hover .senal{color:var(--bermellon-osc);}
  }

  /* Al tocar esta tarjeta específica en móvil */
  .obra.abierta .obra-mas{grid-template-rows:1fr; opacity:1; margin-top:16px;}
  .obra.abierta .abrir{color:var(--bermellon-osc);}

  /* ---------- QUIÉN ---------- */
  .quien{text-align:center;}
  .quien p{font-size:clamp(16px,1.35vw,20px); color:var(--tinta-2); max-width:var(--lectura); margin:0 auto clamp(14px,1.4vw,20px);}
  .quien strong{color:var(--tinta); font-weight:500;}

  /* ---------- CONTACTO ---------- */
  .contacto{text-align:center; border-top:1px solid var(--borde); }
  .contacto .reclamo{
    font-family:var(--display); font-weight:500;
    font-size:clamp(25px, 4.8vw, 64px); letter-spacing:-0.038em;
    margin:0 auto clamp(16px,1.8vw,26px); max-width:18ch; line-height:1.08;
  }
  .contacto p{color:var(--tinta-2); max-width:46ch; margin:0 auto clamp(26px,2.6vw,38px); font-size:clamp(15.5px,1.2vw,18px);}
  .correo{
    display:inline-block; font-family:var(--mono); font-size:clamp(15px,1.4vw,21px);
    color:var(--tinta); text-decoration:none; border-bottom:1.5px solid var(--bermellon);
    padding-bottom:2px;
  }

  footer{padding:26px 0 40px; border-top:1px solid var(--borde); background:var(--cal);}
  footer .wrap{
    display:flex; justify-content:center; gap:8px 16px; flex-wrap:wrap;
    font-family:var(--mono); font-size:10.5px; color:var(--tinta-3); letter-spacing:.08em;
  }

  /* ---------- MOVIMIENTO ---------- */
  /* Un solo idioma: asentarse, no flotar. Curva única y tiempos cortos. */
  :root{ --asiento:cubic-bezier(.2,.8,.3,1); --rapido:150ms; --medio:240ms; }

  /* barra de progreso: un instrumento de precisión, no un adorno */
  .progreso{
    position:fixed; top:0; left:0; height:2px; z-index:60;
    background:var(--bermellon); width:0%;
    transition:width 90ms linear;
  }

  /* filas de capacidades: se asientan al acercarte */
  .cap{transition:background-color var(--medio) var(--asiento);}
  /* el triángulo da media vuelta y apunta al bloque que estás mirando */
  .cap .tri{transition:transform 320ms var(--asiento);}
  @media (hover:hover){
    .cap:hover{background:var(--hundida);}
    .cap:hover .tri{transform:rotate(180deg);}
  }
  /* En movil no hay raton: la fila se enciende sola al pasar por el centro
     de la pantalla (clase .enfoque, la pone el JS). El :active se queda
     como acuse de recibo al tocar. */
  .cap:active, .cap.enfoque{background:var(--hundida);}
  .cap:active .tri, .cap.enfoque .tri{transform:rotate(180deg);}

  /* fases: el número se abre y se enciende */
  .pasos li{transition:background-color var(--medio) var(--asiento);}
  @media (hover:hover){
    .pasos li:hover{background:var(--hundida);}
    .pasos li:hover .num-izq{transform:translateX(-12px);}
    .pasos li:hover .num-der{transform:translateX(12px);}
  }
  .pasos li.enfoque{background:var(--hundida);}
  .pasos li:active .num-izq, .pasos li.enfoque .num-izq{transform:translateX(-12px);}
  .pasos li:active .num-der, .pasos li.enfoque .num-der{transform:translateX(12px);}

  /* tarjetas: suben un paso, sin crecer */
  .obra{transition:transform var(--medio) var(--asiento), border-color var(--medio) var(--asiento), box-shadow var(--medio) var(--asiento);}
  @media (hover:hover){
    .obra:hover{transform:translateY(-3px); border-color:var(--borde-fuerte); box-shadow:0 10px 26px rgba(27,25,23,.07);}
  }
  .obra:active{transform:translateY(-1px);}

  /* botones: acuse de recibo al pulsar, que en el móvil es lo único que hay */
  .cta:active{transform:translateY(1px) scale(.985);}
  .cta{transition:transform var(--rapido) var(--asiento), background var(--rapido) ease, border-color var(--rapido) ease;}

  /* el triángulo del nombre bascula al pasar por la marca */
  .cuna{transition:transform var(--medio) var(--asiento); transform-origin:50% 100%;}
  @media (hover:hover){
    .marca:hover .cuna{transform:rotate(-11deg);}
  }

  /* enlaces y correo: el subrayado crece desde el centro */
  .correo{position:relative; border-bottom-color:transparent;}
  .correo::after{
    content:""; position:absolute; left:50%; right:50%; bottom:0; height:1.5px;
    background:var(--bermellon); transition:left var(--medio) var(--asiento), right var(--medio) var(--asiento);
  }
  .correo::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--borde-fuerte);
  }
  @media (hover:hover){ .correo:hover::after{left:0; right:0;} }

  /* interruptor de tema: el círculo gira media vuelta */
  .tema svg{transition:transform 420ms var(--asiento);}
  html[data-tema="oscuro"] .tema svg{transform:rotate(180deg);}

  /* ---------- REVELADO ---------- */
  /* El contenido es visible por defecto. Solo se oculta para animarlo si el
     JavaScript ha podido marcar <html class="js">. Si el JS falla o esta
     bloqueado, la web se lee entera, sin animacion pero completa. */
  html.js .rev{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);}
  html.js .rev.visible{opacity:1; transform:none;}

  /* ---------- LA PALANCA: estado activo ---------- */
  .palanca-zona{
    transition:transform 560ms var(--asiento), filter 560ms ease;
    will-change:transform;
  }
  .palanca-zona.activa{transform:scale(1.035);}
  .pista{transition:opacity 400ms ease, color 400ms ease;}
  .palanca-zona.activa + .pista{color:var(--bermellon);}


  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition-duration:.01ms !important;}
    html.js .rev{opacity:1; transform:none;}
    html{scroll-behavior:auto;}
  }


  /* ---------- CONTACTO: varias vias, no solo correo ---------- */
  .vias{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(20px,2vw,30px);}
  .via{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-family:var(--texto); font-size:clamp(14.5px,1.05vw,16.5px); font-weight:500;
    padding:clamp(12px,1vw,15px) clamp(20px,1.8vw,28px); border-radius:999px;
    border:1px solid var(--borde-fuerte); color:var(--tinta);
    transition:transform var(--rapido) var(--asiento), background var(--rapido) ease, border-color var(--rapido) ease;
  }
  .via:hover{background:var(--hundida); border-color:var(--tinta-3); transform:translateY(-1px);}
  .via:active{transform:translateY(1px) scale(.985);}
  .via.principal{background:var(--bermellon); border-color:transparent; color:#FCFAF5;}
  .via.principal:hover{background:var(--bermellon-osc);}
  .via svg{flex:none;}
  .zona{
    font-family:var(--mono); font-size:clamp(10.5px,.8vw,12px); letter-spacing:.14em;
    text-transform:uppercase; color:var(--tinta-3); margin-top:clamp(22px,2.4vw,34px);
  }

  /* ---------- FICHA DE PROYECTO ---------- */
  .volver{
    display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--tinta-2); text-decoration:none; margin-bottom:clamp(20px,2.4vw,34px);
  }
  .volver:hover{color:var(--bermellon-osc);}
  .ficha-cab{text-align:center; padding:clamp(30px,4vw,60px) 0 clamp(26px,3vw,44px);}
  .ficha-cab .tipo{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--anil); display:block; margin-bottom:12px;
  }
  .ficha-cab h1{font-size:clamp(30px,5.4vw,64px); max-width:20ch;}
  .ficha-cab .resumen{
    font-size:clamp(15.5px,1.4vw,20px); color:var(--tinta-2);
    max-width:58ch; margin:0 auto;
  }
  .bloque{padding:clamp(34px,4.4vw,64px) 0; border-top:1px solid var(--borde);}
  .bloque h2{
    font-family:var(--mono); font-size:clamp(10.5px,.82vw,12.5px); letter-spacing:.2em;
    text-transform:uppercase; color:var(--tinta-2); font-weight:400;
    margin:0 0 clamp(14px,1.6vw,22px); text-align:center;
  }
  .bloque h2 b{font-weight:500; color:var(--anil);}
  .bloque p{
    margin:0 auto clamp(12px,1.2vw,18px); max-width:var(--lectura);
    font-size:clamp(15px,1.15vw,17.5px); color:var(--tinta-2); text-align:center;
  }
  .bloque p:last-child{margin-bottom:0;}
  .datos{
    margin:0 auto; max-width:var(--lectura); display:grid; gap:0;
  }
  .datos .par{
    display:flex; justify-content:space-between; gap:16px; align-items:baseline;
    padding:11px 0; border-bottom:1px solid var(--borde);
  }
  .datos dt{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--anil); white-space:nowrap;
  }
  .datos dd{margin:0; color:var(--tinta-2); text-align:right; font-size:clamp(14.5px,1.05vw,16px);}
  .otras{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  .otras a{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    text-decoration:none; color:var(--tinta-2);
    padding:9px 16px; border:1px solid var(--borde-fuerte); border-radius:999px;
  }
  .otras a:hover{color:var(--bermellon-osc); border-color:var(--tinta-3); background:var(--hundida);}