/* =====================================================================
   JED 2026 · v4 — LA TIPOGRAFÍA ES LA INTERFAZ
   No hay secciones apiladas ni tarjetas. El scroll atraviesa palabras
   por zoom; las letras entran, salen y ruedan. El contenido va colgado
   de la tipografía, no al revés.
   Rejilla y nomenclatura del tema escac26 / Code Barcelona.
   REGLA: el CSS nunca esconde contenido. Sin JS se lee todo.
   ===================================================================== */
:root{
  --ground:#E8E9E5;      /* gris frío, no papel */
  --paper:#E8E9E5;       /* superficies sólidas: modal, menú y bloques */
  --ink:#0E0F12;
  --ink-2:#5A5D63;
  --accent:#2118F0;
  --acid:#2118F0;
  --gap:15px;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Consolas,monospace;
  --fontxs:calc(10px + .1vw); --fonts:calc(13px + .2vw); --fontm:calc(15px + .35vw);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Scrollbar propia, mismo patron que en el resto de proyectos: pista plana del
   color de fondo, thumb sin esquinas redondeadas en un gris neutro (no el
   azul de acento, que se reserva para llamadas a la accion) y una divisoria
   fina entre pista y contenido en vez de sombra o degradado. */
html{scrollbar-width:thin;scrollbar-color:var(--ink-2) var(--ground);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--ground);border-left:1px solid color-mix(in srgb,currentColor 18%,transparent);}
::-webkit-scrollbar-thumb{background-color:var(--ink-2);background-clip:content-box;border:2px solid var(--ground);}
::-webkit-scrollbar-thumb:hover{background-color:var(--ink);}
::-webkit-scrollbar-corner{background:var(--ground);}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--ground);color:var(--ink);font-family:var(--display);
  font-size:var(--fonts);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background-color .55s var(--ease),color .55s var(--ease);}
/* la inversión es el sistema, no un adorno: mismo layout, mundo dado la vuelta */
body.inv{--ground:#0E0F12;--ink:#E8E9E5;--ink-2:#8B8F97;--accent:#2118F0;}
/* todas las líneas heredan del texto, así invierten solas */
.hairline{border-color:color-mix(in srgb, currentColor 18%, transparent);}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#fff;}

/* ---------- utilidades de rejilla heredadas ---------- */
.contentxlarge{width:calc(1280px + 20vw);max-width:calc(100% - 40px);margin:auto;}
.contentmid{width:calc(820px + 8vw);max-width:calc(100% - 40px);margin:auto;}
.row{display:flex;flex-wrap:wrap;}
.rowmargined{margin-left:calc(0px - var(--gap));margin-right:calc(0px - var(--gap));}
.rowmargined [class^="col"]>.cinner{margin-left:var(--gap);margin-right:var(--gap);}
[class^="col"]{min-height:1px;}
.col50{width:50%}.col33{width:33.3333%}.col25{width:25%}.col66{width:66.6666%}.col40{width:40%}.col60{width:60%}
/* col30 y col70 se usaban en landings, portada y ficha de proyecto sin que
   existiera la regla: al no tener ancho, el bloque del titulo se comia la fila
   entera y el texto de al lado caia debajo, pegado al encabezado. */
.col30{width:30%}.col70{width:70%}
/* El titular de estas columnas estrechas no pasa por fitHeadings() —no lleva
   data-chars— asi que hereda el tamaño de .hmid pensado para ancho completo y
   se sale por la derecha. Aqui manda el ancho de la columna. */
.col30 .hmid{font-size:clamp(26px,3.1vw,46px);overflow-wrap:break-word;hyphens:auto;}

.slabel{font-family:var(--mono);font-size:var(--fontxs);letter-spacing:.24em;text-transform:uppercase;}
.sbody{font-size:var(--fontm);line-height:1.62;max-width:60ch;}
.dim{color:var(--ink-2);}

/* ---------- EL MOTOR TIPOGRÁFICO ---------- */
/* Palabra a pantalla completa que el scroll atraviesa por zoom */
/* 165vh: lo justo para el viaje. A 240vh sobraban ~1,4 pantallas vacías
   después de que la palabra se desvaneciera. */
.zoomword{position:relative;height:165vh;}
.zoomword .zwstick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;}
.zoomword .zwtype{
  font-weight:900;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(64px,17vw,320px);line-height:.78;letter-spacing:-.07em;
  white-space:nowrap;will-change:transform,opacity;
  /* difference: negro sobre blanco y blanco sobre negro, sin tocar el color */
  color:#fff;mix-blend-mode:difference;
}
.zoomword .zwtype span{display:inline-block;will-change:transform;}
.zoomword .zwmeta{position:absolute;left:0;bottom:8vh;width:100%;text-align:center;}

/* Titular partido en letras */
.hline{display:block;}
.hline + .hline{margin-top:-.06em;}
.chars{display:block;overflow:visible;text-wrap:nowrap;}
.chars .wd{display:inline-block;white-space:nowrap;}
.chars .ch{display:inline-block;will-change:transform,opacity;}
.chars .chspace{display:inline-block;width:.26em;}

/* Cilindro de palabras que rueda */
.roller{display:inline-flex;flex-direction:column;overflow:hidden;height:1em;vertical-align:bottom;
  will-change:transform;}
.roller > span{display:block;height:1em;white-space:nowrap;}

/* Texto en círculo */
.ring{width:clamp(112px,12vw,190px);aspect-ratio:1;position:relative;}
.ring svg{width:100%;height:100%;}
.ring text{font-family:var(--mono);font-size:8.4px;letter-spacing:.32em;text-transform:uppercase;fill:currentColor;}
.ring i{position:absolute;inset:0;margin:auto;width:8px;height:8px;background:var(--accent);border-radius:50%;}

.hgiant{font-weight:900;font-stretch:108%;text-transform:uppercase;
  font-size:clamp(44px,10.4vw,196px);line-height:.8;letter-spacing:-.065em;margin:0;}
.hmid{font-weight:800;font-stretch:100%;text-transform:uppercase;
  font-size:clamp(28px,5vw,88px);line-height:.86;letter-spacing:-.05em;margin:0;}
.hsmall{font-weight:700;font-size:calc(17px + .8vw);line-height:1.02;letter-spacing:-.035em;margin:0;}

/* ---------- cabecera mínima ---------- */
.chead{position:fixed;inset:0 0 auto 0;z-index:800;padding:20px 0;mix-blend-mode:difference;color:#fff;}
/* El menu movil a pantalla completa es descendiente de .chead, asi que sin
   esto se pintaba dentro del mismo grupo que difference invierte: el overlay
   opaco del menu se restaba pixel a pixel contra el contenido de la pagina de
   detras, en vez de taparlo, y salia ese mejunje ilegible. Con el menu
   abierto no hace falta invertir nada -el overlay ya tapa la cabecera-, asi
   que se desactiva el blend mientras esta abierto. */
body.menu-open .chead{mix-blend-mode:normal;}
/* La cabecera no tiene animación de entrada, a propósito. Es navegación: si
   su visibilidad depende de que una animación termine, cualquier cosa que
   pare el motor —pestaña en segundo plano, GSAP que no arranca, un error más
   arriba— deja la web sin menú y con aspecto de colgada. Aparece y ya está. */
.cheadinner{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.cmenu{display:flex;align-items:center;}
.cmenulinks{display:flex;gap:20px;}
/* El logo y el pie (idioma + Diagnostico) del panel movil van ocultos aqui:
   en el nav horizontal de escritorio esas piezas ya estan en .cheadlogo y
   .cheadaside, repetirlas seria duplicado. Solo se muestran dentro del
   panel a pantalla completa, ver body.menu-open mas abajo. */
.cmenuextra{display:none;}
.clang{display:flex;gap:9px;align-items:baseline;}
.clang a{display:inline-flex;align-items:center;min-height:24px;margin:-6px -2px;padding:6px 2px;opacity:.5;cursor:pointer;transition:opacity .3s;}
.clang a:hover{opacity:1;}
@media (max-width:760px){.clang{display:none;}}
.cta{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--fontxs);
  letter-spacing:.2em;text-transform:uppercase;padding:14px 22px;border:1px solid currentColor;
  position:relative;overflow:hidden;isolation:isolate;}
.cta>span{position:relative;z-index:2;transition:color .45s var(--ease);}
.cta:before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);
  transition:transform .55s var(--ease);z-index:1;}
.cta:hover:before{transform:translateY(0);}
.cta:hover>span{color:#fff;}

/* ---------- bloques de contenido: columna estrecha, sin cajas ---------- */
.block{padding:14vh 0;}
.rule{height:1px;background:currentColor;opacity:.16;}
/* las marquesinas de sector son width:max-content: sin esto desbordan la página */
#sectores{overflow:hidden;}
/* cards de sector: lenguaje distinto al resto de la página, a propósito */
.cardgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.scard{display:flex;flex-direction:column;position:relative;border:1px solid color-mix(in srgb, currentColor 16%, transparent);
  background:color-mix(in srgb,var(--ink) 3%,transparent);transition:border-color .4s,transform .55s var(--ease),background .4s;}
.scard:hover{border-color:var(--accent);background:color-mix(in srgb,var(--ink) 6%,transparent);transform:translateY(-8px);}
.scardimg{aspect-ratio:5/3.35;position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--ink-2);}
/* Las fotos de Pexels vienen en cualquier proporcion, muchas en vertical.
   Se recortan contra la caja 4/3 en vez de deformarse o dejar franjas. */
.scardimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.scardimg:after{content:"";position:absolute;inset:0;opacity:.58;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.4)),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);
  transition:opacity .45s var(--ease);}
.scard:hover .scardimg:after{opacity:.16;}
.scardbody{display:flex;flex:1;flex-direction:column;padding:17px 16px 16px;}
.scardn{display:flex;align-items:center;gap:9px;margin-bottom:19px;color:var(--accent);}
.scardn:after{content:"";display:block;width:24px;height:1px;background:currentColor;opacity:.8;}
.scardt{font-weight:760;font-size:calc(17px + .45vw);line-height:1;letter-spacing:-.045em;margin:0 0 10px;}
.scardp{font-size:calc(12.5px + .12vw);line-height:1.5;margin:0;color:var(--ink-2);max-width:31ch;}
.scardfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);}
.scardarrow{display:grid;place-items:center;width:26px;height:26px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);font-family:var(--sans);font-size:15px;line-height:1;transition:background .35s,color .35s,transform .35s var(--ease);}
.scard:hover .scardarrow{background:var(--accent);border-color:var(--accent);color:var(--bg);transform:rotate(45deg);}
@media (max-width:1100px){.cardgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cardgrid{grid-template-columns:1fr;}}

.marqrow{display:flex;width:max-content;white-space:nowrap;align-items:center;}
.marqrow > *{padding:0 .26em;flex:none;}
.marqrow a{transition:color .3s;}
.marqrow a:hover{color:var(--accent);}
.marqrow .mqs{font-size:.42em;opacity:.4;transform:translateY(-.1em);}
.metarow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* proyectos: filas tipográficas, no tarjetas */
.plist{border-top:1px solid color-mix(in srgb, currentColor 18%, transparent);}
.prow{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:calc(16px + 1.4vw) 0;border-bottom:1px solid color-mix(in srgb, currentColor 18%, transparent);overflow:hidden;}
.prow .pname{font-weight:800;font-stretch:100%;text-transform:uppercase;
  font-size:calc(24px + 2.6vw);line-height:.9;letter-spacing:-.05em;
  transition:transform .6s var(--ease),color .4s;}
#proyectos .recenttitle{font-size:clamp(32px,5.75vw,104px);}
#proyectos .prow .pname{font-size:calc(22px + 2.25vw);}
.prow:hover .pname{transform:translateX(calc(8px + 1.2vw));color:var(--accent);}
.prow .pmeta{flex:none;transition:transform .6s var(--ease);}
.prow:hover .pmeta{transform:translateX(calc(-4px - .6vw));}
.pnum{position:absolute;left:0;top:14px;font-family:var(--mono);font-size:9.5px;opacity:.4;}

/* cifras con cilindro */
.figrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:clamp(20px,2vw,42px);}
.fig{display:flex;align-items:flex-start;min-width:0;}
/* rodillo de dígitos — mismo patrón que jqnumbers en escac26:
   una columna por dígito, 31 celdas de 1em, y se desplaza a -(20+d)*100% */
.fignum{font-weight:900;font-stretch:106%;font-size:clamp(62px,4vw,84px);letter-spacing:-.07em;
  line-height:1.12;display:flex;align-items:flex-start;}
.jqnumbers{display:inline-block;overflow:visible;height:auto;line-height:1.12;}
.digit-col{display:flex;flex-direction:column;will-change:transform;}
.digit-number,.digit-static{display:block;height:1.12em;line-height:1.12em;}
.figplus{line-height:1.12;}
.figtxt{margin-top:10px;max-width:20ch;}

/* precios como líneas tipográficas */
.priceline{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(26px,6vw,110px);
  padding:calc(18px + 1.2vw) 0;border-bottom:1px solid color-mix(in srgb, currentColor 18%, transparent);}
.pricecopy{max-width:54ch;}.pricecopy .hsmall{display:block;font-size:clamp(32px,3.55vw,66px);font-weight:850;line-height:.9;letter-spacing:-.06em;}.pricecontext{font-size:var(--fontxs);line-height:1.52;color:var(--ink-2);max-width:49ch;margin:13px 0 0;}
.pricelink{transition:color .25s var(--ease);}.pricelink span{font:400 .75em/1 var(--mono);display:inline-block;margin-left:.28em;transition:transform .25s var(--ease);}.pricelink:hover{color:var(--accent);}.pricelink:hover span{transform:translate(3px,-3px);}
.pricefig{font-weight:700;font-stretch:100%;font-size:clamp(24px,2.15vw,42px);letter-spacing:-.05em;line-height:1;white-space:nowrap;padding-top:4px;}
.pricefigproject{font-size:clamp(24px,2.15vw,42px);}

/* ---------- pie ---------- */
.cfooter{padding:12vh 0 34px;}
.cfooterbottom{border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
  margin-top:calc(20px + 2vw);padding-top:20px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.clangfoot{display:inline-flex;align-items:baseline;gap:9px;}

/* índice final = los 53 enlaces, en tipografía */
.indexgrid{columns:4;column-gap:calc(16px + 2vw);}
.indexgrid a{display:block;padding:5px 0;color:var(--ink-2);
  transition:color .3s,transform .4s var(--ease);}
.indexgrid a:hover{color:var(--ink);transform:translateX(5px);}
/* Cada grupo es un nav propio: se mantiene entero dentro de su columna en vez
   de partirse por la mitad, que es lo que pasaba con los encabezados sueltos. */
.indexcol{break-inside:avoid;display:block;margin-bottom:22px;}
.indexcol:first-child{margin-top:0;}
.indexcoltitle{display:block;margin:0 0 8px;}

/* Tarjeta flotante de proyecto: sigue al cursor sobre las filas.
   Ancho fijo y alto automático: la imagen conserva su proporción real
   en vez de recortarse contra una caja 4/3. */
.pcard{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;opacity:0;
  width:clamp(240px,24vw,340px);margin:-9vw 0 0 -7vw;will-change:transform;}
.pcardimg{aspect-ratio:auto;position:relative;overflow:hidden;background:var(--ink-2);}
.pcardimg img{display:block;width:100%;height:auto;}
/* El video se superpone a la imagen y solo aparece cuando ya esta rodando.
   La imagen queda debajo haciendo de poster: si el clip no carga, no se ve
   ni el hueco. */
.pcardimg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s var(--ease);}
.pcardimg video.on{opacity:1;}
.pcardcap{display:flex;justify-content:space-between;gap:10px;padding:9px 2px 0;}
.ph-a{background:radial-gradient(120% 85% at 32% 20%,#4e4e5c,#181920 60%,#0b0b10);}
.ph-b{background:radial-gradient(120% 85% at 68% 24%,#544733,#1d1811 58%,#0b0a07);}
.ph-c{background:radial-gradient(120% 85% at 46% 76%,#2f4553,#141c23 58%,#080c10);}
.ph-d{background:radial-gradient(120% 85% at 24% 40%,#48374f,#19131c 58%,#0a080e);}
.ph-e{background:radial-gradient(120% 85% at 60% 30%,#3f5142,#161d17 58%,#080b09);}
.ph-f{background:radial-gradient(120% 85% at 40% 55%,#54404a,#1c1519 58%,#0b0809);}
@media (max-width:900px){.pcard{display:none;}}

/* cursor */
.cur{position:fixed;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--ink);pointer-events:none;z-index:9990;opacity:0;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;}
body.hov .cur{width:46px;height:46px;margin:-23px 0 0 -23px;background:transparent;border:2px solid var(--accent);
  mix-blend-mode:normal;}
@media (hover:none){.cur{display:none;}}

/* ---------- ficha de proyecto ---------- */
/* La apertura arranca bajo la cabecera fija y no a pantalla completa: la
   portada ya hace el numero del zoom, y repetirlo en cada ficha lo gasta. */
.pfhero{padding:22vh 0 0;}
.pfback{margin-bottom:calc(14px + 1vw);}
.pfname{font-size:clamp(44px,9.2vw,168px);line-height:.86;margin:0;
  padding-top:.14em;margin-top:-.14em;}
.pfclaim{font-size:calc(19px + 1.5vw);line-height:1.14;letter-spacing:-.035em;
  font-weight:500;max-width:22ch;margin:calc(18px + 1.6vw) 0 0;}

.pfmeta{display:flex;flex-wrap:wrap;gap:calc(18px + 2.6vw);padding-top:20px;}
.pfmeta > div{display:flex;flex-direction:column;gap:6px;}
.pfmeta b{font-family:var(--display);font-size:var(--fonts);font-weight:600;
  letter-spacing:0;text-transform:none;}
.pfmeta a{border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);}

.pfshot{padding:calc(30px + 4vh) 0 0;}
.pfshotframe{display:flex;justify-content:center;padding:clamp(14px,2.4vw,42px);background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 9%,var(--paper)),color-mix(in srgb,var(--ink) 3%,var(--paper)));box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 8%,transparent);}
.pfshotimg{display:block;width:min(100%,1000px);height:auto;box-shadow:0 16px 45px rgba(0,0,0,.14);}
.pfshotvideo{display:block;width:100%;aspect-ratio:16/9;border:0;background:#111;}

.pfbody{font-size:calc(17px + .55vw);line-height:1.5;letter-spacing:-.015em;
  max-width:46ch;margin:0;}

/* Las piezas alternan lado para que la lectura no caiga en columna muerta. */
.pfpieza{padding:calc(24px + 4vh) 0;
  border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);}
.pfpieza:nth-child(even) .row{flex-direction:row-reverse;}
.pfpiezaimg{display:block;width:100%;height:auto;}
.pfpiezat{margin:10px 0 12px;}
.pfpiezasrv{display:inline-block;margin-top:6px;
  border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition:color .3s;}
.pfpiezasrv:hover{color:var(--accent);}
.caseblocks{padding:12vh 0 5vh;}.caseblocks .hmid{margin-top:17px;}.caseblockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:7vh;border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:color-mix(in srgb,currentColor 18%,transparent);}.caseblock{background:var(--paper);padding:clamp(22px,3vw,48px);min-height:280px;}.caseblockmedia{margin:-1px -1px 26px;overflow:hidden;background:#d9d9d5;}.caseblockmedia video,.caseblockmedia img{width:100%;height:auto;display:block;}.caseblock h3{font-size:clamp(24px,2.5vw,43px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase;margin:22px 0 16px;}.caseblock p{font-size:var(--fontxs);line-height:1.55;color:var(--ink-2);margin:0;max-width:38ch;}
.casegallery{padding:12vh 0 5vh;}.casegallery .hmid{margin-top:17px;}.casegallerygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,40px);margin-top:7vh;align-items:start;}.casegalleryitem{margin:0;background:color-mix(in srgb,currentColor 8%,transparent);}.casegalleryitem:nth-child(3n+1){grid-column:span 2;display:flex;justify-content:center;padding:clamp(14px,2.4vw,42px);background:linear-gradient(135deg,color-mix(in srgb,var(--ink) 9%,var(--paper)),color-mix(in srgb,var(--ink) 3%,var(--paper)));box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 8%,transparent);}.casegalleryitem:nth-child(3n+1) img{width:min(100%,1000px);box-shadow:0 16px 45px rgba(0,0,0,.14);}.casegalleryitem img{display:block;width:100%;height:auto;}
.casegalleryopening{padding:calc(30px + 4vh) 0 5vh;}.casegalleryopening .casegallerygrid{margin-top:0;}

@media (max-width:900px){
  .col50,.col33,.col25,.col66,.col40,.col60,.col30,.col70{width:100%;}
/* Apiladas, el titulo de seccion necesita aire antes del primer bloque. */
.col30+.col70>.cinner{margin-top:clamp(18px,3vw,30px);}
  .indexgrid{columns:2;}
  .zoomword{height:180vh;}
  .cmenu{display:none;}
  .pfhero{padding-top:17vh;}
  .pfpieza:nth-child(even) .row{flex-direction:row;}
  .caseblockgrid{grid-template-columns:1fr;}.caseblock{min-height:0;}.casegallerygrid{grid-template-columns:1fr;gap:20px;}.casegalleryitem:nth-child(3n+1){grid-column:auto;}
}

/* ---------- cuaderno editorial ---------- */
.articlegrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,4vw,66px) clamp(16px,2.8vw,44px);padding-bottom:16vh;}
.articlecard{grid-column:span 4;}.articlecard:nth-child(5n+1),.articlecard:nth-child(5n+4){grid-column:span 6;}/* Wordmark en SVG, dimensionado por altura para acompañar a las etiquetas del
   menu. Los trazos van con fill="currentColor" para heredar el color de .chead,
   que es blanco con mix-blend-mode:difference: asi el logo se invierte solo
   segun lo que tenga detras, igual que hacia el texto, y no hace falta una
   segunda version para fondo claro. */
.cheadlogo{display:inline-flex;align-items:center;color:inherit;}
/* A 30px el wordmark mide 228px de ancho, y entre 901 y 1080 conviven logo,
   menu completo y grupo derecho: no caben. Se escala con el viewport y llega
   a los 30px en cuanto hay sitio. */
.cheadlogo .jedlogo{height:clamp(17px,2.2vw,30px);width:auto;display:block;transition:opacity .3s var(--ease);}
.cheadlogo:hover .jedlogo{opacity:.6;}
/* El reloj es decoracion: en cuanto el ancho aprieta, cede su sitio al
   selector de idioma y al boton de menu, que si son navegacion. */
@media (max-width:1200px){#reloj{display:none;}}
/* El menu completo pasaba a hamburguesa en 900px y entre 901 y 1000 se salia
   de la caja por veintitres pixeles. Con el wordmark ocupando mas ancho que
   el texto anterior, el corte tiene que subir. */
@media (max-width:1000px){.cmenu{display:none;}.menubtn{display:block;}}
/* Reloj, idioma y boton de menu. Estaba con estilo en linea, lo que impedia
   ajustar la separacion por ancho de pantalla. */
.cheadaside{display:flex;align-items:center;gap:20px;}

/* Red de seguridad en movil. Los titulares grandes se parten en caracteres por
   JS y toman medidas del layout; si ese script falla o llega tarde, el titular
   no envuelve y el articulo entero se puede desplazar en horizontal. Con clip
   —y no hidden— se corta el desbordamiento sin crear contenedor de scroll, asi
   que no interfiere con el scroll suave ni con position:sticky. */
@media (max-width:900px){
  .article,.articlehero,.landinghero,.archivehero{overflow-x:clip;}
  .hgiant{max-width:100%;overflow-wrap:break-word;}
}

/* Area tactil de la navegacion. El boton de menu media 51x21 y el logo 129x17:
   por debajo de los 44px recomendados para el dedo. Se amplia con un
   pseudoelemento en lugar de con padding para no mover nada de sitio. Los
   enlaces dentro de un parrafo quedan fuera: la norma los exceptua y
   agrandarlos rompe el ritmo de lectura. */
.menubtn,.cheadlogo,.articleback,.clang a{position:relative;}
/* Solo se amplia en vertical. Un pseudoelemento de 44px de ancho sobre los
   enlaces de idioma, que van pegados al margen derecho, sobresalia once
   pixeles y ensanchaba el documento en movil. */
.menubtn::after,.cheadlogo::after,.articleback::after,.clang a::after{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:44px;
}
/* Pantallas muy estrechas: el wordmark y la separacion ceden lo justo para
   que el boton de menu quede entero dentro del margen. */
@media (max-width:360px){.cheadlogo .jedlogo{height:12px;}.cheadaside{gap:12px;}}

.articlemedia{aspect-ratio:4/3;overflow:hidden;background:#d9d9d5;}
/* Buena parte del archivo heredado no trae imagen de portada. Sin esto la
   rejilla se convierte en un muro de rectangulos grises; con el año en grande
   la tarjeta se lee como ficha de archivo y no como imagen que falta. */
.articlemedia.isempty{display:flex;align-items:flex-end;background:var(--ink);color:var(--ground);padding:14px 16px;}
.articlemedia.isempty span{font-family:var(--display);font-size:clamp(48px,7vw,104px);line-height:.82;letter-spacing:-.06em;opacity:.5;transition:opacity .5s var(--ease),color .5s var(--ease);}
.articlecard:hover .articlemedia.isempty span{opacity:1;color:var(--accent);}.articlemedia img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}.articlecard:hover .articlemedia img{transform:scale(1.045);}/* Reglas del modo sin movimiento. Hoy no se activan: la web anima siempre.
   Se conservan porque el camino degradado sigue escrito en el JS y, si algun
   dia vuelve a respetarse la preferencia del sistema, esto es lo que hace
   falta para que ademas se apaguen las transiciones y el cursor propio. */
.sin-movimiento,
.sin-movimiento body{cursor:auto;}
.sin-movimiento a,.sin-movimiento button{cursor:pointer;}
.sin-movimiento *,
.sin-movimiento *::before,
.sin-movimiento *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.12s !important;scroll-behavior:auto !important;}

/* Cuerpo propio de cada landing. */
/* Prueba visual a mitad de landing. Va a sangre completa, sin el contenedor
   de contenido, porque su trabajo es cortar una pagina que hasta aqui es solo
   texto. La altura se limita con vh para que no ocupe pantallas enteras en un
   monitor grande ni se quede en una franja en un movil. */
.moneyproof{padding:clamp(30px,5vw,70px) 0 clamp(24px,4vw,56px);}
/* El marco lo pone .pfshotframe, el mismo de la ficha de proyecto: la pieza se
   ve entera y a su proporcion. Aqui solo se limita el alto, porque una captura
   de pagina larga puede medir mucho mas que la ventana. */
.moneyproof .pfshotimg{max-height:78vh;width:auto;max-width:min(100%,1000px);}
.moneyproof .pfshotvideo{width:min(100%,1000px);}
.moneyproofmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(16px,2.4vw,34px);padding-top:clamp(14px,1.8vw,22px);}
.moneyproofmeta h2{margin:0;}
.moneyproofmeta p{margin:0;max-width:46ch;flex:1 1 240px;}
.moneyproofmore{border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap;}

/* Bloque de enlaces al final del articulo. Va dentro del cuerpo, con el ancho
   de lectura, para que se lea como parte del texto y no como un widget. */
.postimpulso{margin:3em 0 0;padding:clamp(20px,2.6vw,32px) 0 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);}
.postimpulso ul{list-style:none;padding:0;margin:14px 0 0;}
.postimpulso li{margin:0 0 14px;line-height:1.45;}
.postimpulso li:last-child{margin-bottom:0;}
.postimpulso a{font-weight:700;border-bottom:1px solid currentColor;}
.postimpulso a:hover{color:var(--accent);}
.postimpulsowhy{display:block;font-size:var(--fontxs);line-height:1.5;color:var(--ink-2);margin-top:4px;}

/* Landings hermanas: una fila por destino, con el motivo al lado. Se lee como
   una lista de continuaciones, no como un bloque de enlaces de relleno. */
.landingsiblings{padding:2vh 0 8vh;}
.siblinglist{list-style:none;padding:0;margin:clamp(28px,4vw,56px) 0 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);}
.siblinglist li{border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);}
.siblinglist a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;align-items:baseline;gap:12px clamp(16px,2.6vw,40px);padding:clamp(16px,2vw,26px) 0;}
.siblingname{font-weight:700;font-size:clamp(17px,1.5vw,24px);line-height:1.15;letter-spacing:-.02em;}
.siblingwhy{font-size:var(--fontxs);line-height:1.5;color:var(--ink-2);}
.siblingarrow{justify-self:end;}
.siblinglist a:hover .siblingname{color:var(--accent);}
@media (max-width:760px){
  .siblinglist a{grid-template-columns:minmax(0,1fr) auto;}
  .siblingwhy{grid-column:1 / -1;}
}

.moneybody{padding:clamp(40px,6vw,90px) 0;}
.moneybodyblock+.moneybodyblock{margin-top:clamp(28px,3.4vw,48px);}
.moneybodyblock h3{font-size:clamp(19px,1.6vw,26px);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;max-width:26ch;}
.moneybodyblock p{margin:0;max-width:62ch;}

/* Fecha y categoria en extremos opuestos. Una categoria de dos palabras no
   cabe junto a la fecha en un movil estrecho y empujaba el documento entero,
   asi que se permite que baje de linea antes que desbordar. */
.articlemeta{display:flex;justify-content:space-between;gap:10px;margin-top:13px;flex-wrap:wrap;min-width:0;}
.articlemeta>span{min-width:0;}/* En la rejilla de dos columnas del movil la tarjeta mide 161px y palabras
   como "FARMACEUTICOS" en mayusculas no caben: se cortaban contra el borde.
   Con guionado parten donde toca en vez de desaparecer. */
.articlecard h2{font-size:clamp(26px,3.1vw,52px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:8px 0 10px;overflow-wrap:break-word;hyphens:auto;}.articlecard p{font-size:var(--fontxs);line-height:1.5;color:var(--ink-2);max-width:52ch;margin:0;}.articlemore{display:inline-block;margin-top:16px;border-bottom:1px solid currentColor;padding-bottom:4px;}.articlepagination{padding-bottom:16vh;}/* Con once paginas la fila no cabe en un movil y se salia por la derecha. */
.articlepagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:14px 18px;padding:0;margin:0;}.articlepagination a,.articlepagination .current{display:block;padding:8px 0;border-bottom:1px solid color-mix(in srgb,currentColor 24%,transparent);}.articlepagination .current{color:var(--accent);}
.articlehero{padding:21vh 0 8vh;max-width:1400px;}.articlehero .hgiant{font-size:clamp(42px,8vw,148px);max-width:12ch;margin-top:clamp(26px,5vw,72px);}.articleback{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:4px;}.articlehero .articlemeta{justify-content:flex-start;gap:20px;margin-top:28px;}.articleshot{padding-bottom:11vh;}.articleshot img{width:100%;height:auto;display:block;}.articlecontent{padding-bottom:10vh;}.articlebody{max-width:780px;margin:0 auto;font-size:clamp(18px,1.45vw,23px);line-height:1.58;}.articlebody>*{margin:0 0 1.25em;}.articlebody h2,.articlebody h3{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;margin-top:2.1em;}.articlebody h2{font-size:clamp(30px,3.8vw,62px);}.articlebody h3{font-size:clamp(25px,2.6vw,43px);}.articlebody a{border-bottom:1px solid currentColor;}.articlebody img{display:block;width:100%;height:auto;margin:2em 0;}.articlebody blockquote{font-size:1.25em;line-height:1.25;border-left:2px solid var(--accent);padding-left:1em;margin:2em 0;}.articlebody ul,.articlebody ol{padding-left:1.2em;}.articlemoregrid{padding-top:2vh;}
@media (max-width:900px){.articlegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;}.articlecard,.articlecard:nth-child(5n+1),.articlecard:nth-child(5n+4){grid-column:span 1;}.articlecard h2{font-size:clamp(22px,6.5vw,35px);}.articlecard p{display:none;}.articlehero{padding-top:17vh;}.articlecontent{padding-bottom:5vh;}.articlebody{margin:0;}.articlebody p{font-size:18px;}.articlebody h2{font-size:36px;}.articleshot{padding-bottom:8vh;}}

/* ---------- archivo de proyectos ---------- */
.menubtn{display:none;background:none;color:inherit;border:0;padding:0;font:inherit;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
.archivehero,.landinghero{padding:22vh 0 9vh;}
.archivehero .hgiant,.landinghero .hgiant{max-width:12ch;margin-top:18px;}
.landinghero .hgiant.chars{max-width:100%;text-wrap:wrap;white-space:normal;}
.archiveintro,.landingintro{margin-top:clamp(32px,6vw,88px);align-items:flex-end;}
.archivefilters{padding:0 0 5vh;}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);padding-top:16px;}
.filterbtn{font:inherit;text-transform:uppercase;letter-spacing:.12em;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 25%,transparent);padding:9px 11px;cursor:pointer;transition:color .25s,background .25s,border-color .25s;}
.filterbtn span{opacity:.5;margin-left:4px;}.filterbtn:hover,.filterbtn.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.archivegrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(22px,3.4vw,56px) clamp(14px,2.4vw,36px);padding-bottom:15vh;}
.acard{grid-column:span 4;transition:opacity .35s,transform .35s;}.acard:nth-child(5n+1),.acard:nth-child(5n+4){grid-column:span 6;}
.acard[hidden]{display:none;}.acardmedia{position:relative;overflow:hidden;background:#d9d9d5;aspect-ratio:16/10;display:grid;place-items:center;}.acardmedia img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .8s var(--ease),filter .5s;}.acard:hover .acardmedia img{transform:scale(1.02);filter:contrast(1.04);}
.acardnum,.acardgo{position:absolute;z-index:2;}.acardnum{left:12px;top:12px;color:#fff;mix-blend-mode:difference;}.acardgo{right:12px;top:8px;font-size:28px;color:#fff;opacity:0;transform:translate(-8px,8px);transition:opacity .35s,transform .35s;}.acard:hover .acardgo{opacity:1;transform:none;}
.acardmeta{display:flex;justify-content:space-between;gap:10px;margin-top:13px;}.acardtitle{font-size:clamp(28px,3.5vw,58px);line-height:.88;letter-spacing:-.055em;text-transform:uppercase;margin:7px 0 9px;}.acardclaim{font-size:var(--fontxs);line-height:1.45;color:var(--ink-2);margin:0;max-width:48ch;}
.archiveclose{padding-bottom:18vh;}.archivecloseinner{max-width:72ch;padding-top:clamp(38px,7vw,100px);}.archiveclose .hmid{margin:18px 0 36px;}

/* ---------- landings ---------- */
.landingintro .cta{margin-top:8px;}.landingcopy{padding-top:5vh;padding-bottom:8vh;}.landingcopy .pfbody p:first-child{margin-top:0;}.landingcopy .pfbody p{margin:0 0 1.2em;}
.moneyanswer{padding:11vh 0 8vh;}.moneyeyebrow{max-width:58ch;margin:0 0 20px;line-height:1.55;}.moneyanswer .hmid{margin:0 0 28px;}.moneyanswer .pfbody{max-width:36ch;margin:0;}.moneycontext{max-width:56ch;margin:28px 0 0;line-height:1.55;}.moneypillars{padding:7vh 0 11vh;}/* Antes iba en flex con justify-content:space-between: la etiqueta a la
   izquierda y el titular empujado al extremo derecho. Dentro de su propia
   caja el texto ya estaba alineado a la izquierda, pero esa caja quedaba
   pegada al borde derecho, asi que el titular parecia flotar suelto en vez
   de continuar la etiqueta. Se apila igual que ya hacia en movil. */
.moneysectionhead{display:block;padding:28px 0 0;}.moneysectionhead .hmid{margin:20px 0 0;max-width:14ch;}.moneypillargrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:7vh;border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:color-mix(in srgb,currentColor 18%,transparent);}.moneypillar{background:var(--paper);padding:clamp(25px,3.5vw,54px);min-height:290px;}.moneypillar h3{font-size:clamp(25px,2.7vw,46px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase;margin:52px 0 18px;max-width:10ch;}.moneypillar p{font-size:var(--fontxs);line-height:1.55;color:var(--ink-2);max-width:31ch;margin:0;}.moneyscope{padding:11vh 0;}.moneyscope .hmid{margin:20px 0 0;}.money-scope-intro{max-width:49ch;margin:0 0 30px;line-height:1.55;}.moneyscopelist{list-style:none;padding:0;margin:0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);}.moneyscopelist li{font-size:clamp(19px,2vw,31px);letter-spacing:-.035em;line-height:1.05;padding:20px 44px 20px 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent);position:relative;}.moneyscopelist li:after{content:'↗';position:absolute;right:4px;top:19px;font-family:var(--display);font-size:18px;}.moneyfaq{padding:10vh 0 13vh;}.moneyfaq .hmid{margin:20px 0 0;}.moneyfaqrows{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);}.moneyfaq details{border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent);}.moneyfaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:22px;padding:22px 0;font-size:clamp(21px,2.2vw,36px);line-height:1;letter-spacing:-.045em;font-weight:700;}.moneyfaq summary::-webkit-details-marker{display:none;}.moneyfaq summary span{font:400 28px/1 var(--mono);transition:transform .25s var(--ease);}.moneyfaq details[open] summary span{transform:rotate(45deg);}.moneyfaq p{max-width:58ch;margin:0 0 24px;font-size:var(--fontxs);line-height:1.6;color:var(--ink-2);}
.moneyspecific{padding:1vh 0 11vh;}.moneyspecific .hmid{max-width:15ch;margin:0 0 24px;}.moneyspecific .pfbody{max-width:39ch;margin:0;}
.landingmethod{padding:8vh 0 12vh;}.landingmethodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,72px);padding-top:28px;}.landingmethodgrid h2{font-size:clamp(28px,3vw,50px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;margin:16px 0 14px;}.landingmethodgrid p{font-size:var(--fontxs);line-height:1.5;color:var(--ink-2);max-width:30ch;margin:0;}
.landingcasegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,46px);margin-top:7vh;}.lcase{display:block;}.lcasemedia{aspect-ratio:4/3;overflow:hidden;background:#d9d9d5;margin-bottom:12px;}.lcasemedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease);}.lcase:hover img{transform:scale(1.05);}.lcase strong{display:block;font-size:clamp(24px,2.5vw,40px);line-height:.9;text-transform:uppercase;letter-spacing:-.05em;margin-top:7px;}
.landingcontact{padding-bottom:16vh;}.landingcontactbox{border:1px solid color-mix(in srgb,currentColor 18%,transparent);padding:clamp(26px,6vw,88px);max-width:1000px;}.landingcontactbox .hmid{margin:20px 0 22px;}.contactactions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px;}.contactphone{border-bottom:1px solid currentColor;padding-bottom:4px;}
/* Formulario desplegado en /contacto/: mismo .jedleadform del popup, aqui sin
   el panel ni el fondo de modal, a ancho de columna. */
.jedleadforminline{margin-top:30px;max-width:640px;}
.contactactionsinline{margin-top:26px;}
.contactmail{border-bottom:1px solid currentColor;padding-bottom:4px;}
.awardmarquee{padding:4vh 0 14vh;overflow:hidden;}.awardmarqueeviewport{overflow:hidden;width:100%;}.awardmarqueetrack{display:flex;width:max-content;animation:award-marquee 78s linear infinite;will-change:transform;}.awardmarqueeset{display:flex;align-items:flex-start;gap:clamp(12px,1.5vw,24px);padding-right:clamp(12px,1.5vw,24px);flex:none;}.awardmarqueecard{flex:none;margin:0;display:block;}.awardmarqueecard img{display:block;width:auto;height:clamp(330px,46vw,660px);max-width:none;}.awardmarquee:hover .awardmarqueetrack{animation-play-state:paused;}@keyframes award-marquee{to{transform:translateX(-50%);}}
.distributiva{padding-bottom:15vh;}.distrow{display:grid;grid-template-columns:70px minmax(0,1.15fr) minmax(200px,.7fr) 32px;align-items:baseline;gap:22px;padding:clamp(26px,4vw,68px) 0;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);}.distrow h2{font-size:clamp(34px,5vw,88px);line-height:.84;letter-spacing:-.065em;text-transform:uppercase;margin:0;transition:transform .5s var(--ease),color .3s;}.distrow p{font-size:var(--fontxs);line-height:1.5;color:var(--ink-2);margin:0;max-width:30ch;}.distarrow{font-size:26px;transition:transform .4s var(--ease);}.distrow:hover h2{transform:translateX(10px);color:var(--accent);}.distrow:hover .distarrow{transform:translate(5px,-5px);}

/* ---------- formulario emergente ---------- */
body.lead-open{overflow:hidden;}.jedlead{--ink:#0E0F12;--ink-2:#59606a;--accent:#2118F0;position:fixed;z-index:10050;inset:0;color:var(--ink);}.jedleadoverlay{position:absolute;z-index:0;inset:0;background:rgba(12,12,13,.48);backdrop-filter:blur(7px);}.jedleadpanel{position:relative;z-index:1;max-height:calc(100vh - 24px);overflow:auto;width:min(980px,calc(100% - 32px));margin:12px auto;background:#E8E9E5;padding:clamp(28px,3vw,38px) clamp(26px,5vw,74px) 26px;box-shadow:0 20px 80px rgba(0,0,0,.35);}.jedleadclose{position:absolute;top:18px;right:22px;border:0;background:none;color:inherit;cursor:pointer;}.jedleadpanel .hmid{font-size:clamp(42px,4vw,60px);line-height:.82;margin:10px 0;max-width:13ch;}.jedleadpanel>.sbody{margin:0;max-width:58ch;}.jedleadform{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:17px;}.jedleadform label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:var(--fontxs);letter-spacing:.12em;text-transform:uppercase;}.jedleadform label span{opacity:.55;}.jedleadform input:not([type="checkbox"]),.jedleadform textarea{appearance:none;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);background:transparent;color:inherit;padding:8px 0;font:400 16px/1.35 var(--display);outline:0;}.jedleadform textarea{resize:vertical;min-height:72px;}.jedleadform input:focus,.jedleadform textarea:focus{border-color:var(--accent);}.jedleadmessage,.jedconsent,.jedleadform button,.jedleadstatus{grid-column:1/-1;}.jedconsent{flex-direction:row!important;align-items:flex-start;gap:9px!important;line-height:1.4;letter-spacing:.08em!important;text-transform:none!important;}.jedconsent input{margin:2px 0 0;accent-color:var(--accent);}.jedleadform .cta{justify-self:start;background:transparent;color:inherit;cursor:pointer;}.jedleadform .cta:disabled{opacity:.55;cursor:wait;}.jedleadstatus{min-height:1.4em;margin:0;color:var(--accent);}.jedhoneypot{position:absolute!important;left:-10000px!important;opacity:0!important;pointer-events:none!important;}

@media (max-width:900px){
  .rowmargined{margin-left:0;margin-right:0;}.rowmargined [class^="col"]>.cinner{margin-left:0;margin-right:0;}
  .menubtn{display:block;}.cheadinner{gap:12px;}.cheadinner > div{gap:12px!important;}.chead .cta{padding:12px 10px;font-size:9px;}.chead .dim{display:none;}
  /* El panel a pantalla completa se organiza en tres bloques —logo arriba,
     enlaces en medio, idioma y Diagnostico abajo— en vez de una lista sola
     centrada: era la unica pieza del sitio sin ningun punto de referencia ni
     llamada a la accion, y quedaba plana comparada con el resto. */
  body.menu-open .cmenu{display:flex;position:fixed;inset:0;background:var(--paper);color:var(--ink);z-index:850;flex-direction:column;align-items:stretch;justify-content:space-between;padding:9vw 9vw 7vw;font-family:var(--display);}
  body.menu-open .menubtn{position:relative;z-index:860;color:var(--ink);}
  body.menu-open .cmenuextra{display:flex;}
  body.menu-open .cmenulogo{width:clamp(120px,32vw,180px);color:var(--ink);}
  body.menu-open .cmenulogo .jedlogo{width:100%;height:auto;display:block;}
  body.menu-open .cmenulinks{display:flex;flex-direction:column;gap:4px;font-size:clamp(26px,9.5vw,46px);letter-spacing:-.06em;font-weight:800;text-transform:uppercase;line-height:1.12;}
  body.menu-open .cmenufoot{align-items:center;justify-content:space-between;gap:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);}
  body.menu-open .cmenufoot .clang{display:flex;gap:14px;font-size:var(--fontxs);letter-spacing:.1em;}
  body.menu-open .cmenufoot .cta{font-size:12px;padding:14px 20px;}
  .archivehero,.landinghero{padding-top:17vh;}.archivegrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px;}.acard,.acard:nth-child(5n+1),.acard:nth-child(5n+4){grid-column:span 1;}.acardtitle{font-size:clamp(23px,7vw,37px);}.acardclaim{display:none;}
  .landingmethodgrid,.landingcasegrid,.moneypillargrid{grid-template-columns:1fr;}.moneyanswer,.moneypillars,.moneyscope,.moneyfaq{padding:9vh 0;}.moneysectionhead{display:block;}.moneysectionhead .hmid{margin-top:20px;}.moneypillar{min-height:0;padding:28px 22px;}.moneypillar h3{margin:36px 0 16px;}.moneyscope .hmid,.moneyfaq .hmid{margin-bottom:35px;}.moneyfaq summary{font-size:clamp(22px,7vw,34px);}.landingcasegrid{gap:30px;}.lcase{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:14px;align-items:end;}.lcasemedia{grid-row:span 2;margin:0;}.lcase strong{font-size:clamp(25px,7vw,39px);}.lcase strong,.lcase>.slabel{min-width:0;overflow-wrap:anywhere;}.landingcontactbox{padding:28px 22px;}
  .priceline .hsmall{font-size:clamp(30px,5.4vw,54px);}.pricefig,.pricefigproject{font-size:clamp(22px,3.2vw,34px);}.jedleadpanel{margin:2vh auto;max-height:96vh;padding:50px 22px 28px;}.jedleadpanel .hmid{font-size:clamp(40px,12vw,58px);}.jedleadform{grid-template-columns:1fr;gap:15px;}.jedleadmessage,.jedconsent,.jedleadform button,.jedleadstatus{grid-column:auto;}
  .distrow{grid-template-columns:38px 1fr 24px;gap:12px;}.distrow p{grid-column:2/4;}.distrow h2{font-size:clamp(33px,10vw,54px);}.distarrow{font-size:20px;}
  .awardmarquee{padding:3vh 0 10vh;}.awardmarqueetrack{animation-duration:48s;}.awardmarqueecard img{height:72vw;}
}
@media (max-width:560px){
  .landinghero .hgiant{font-size:clamp(38px,10.2vw,42px);}
  .hmid.chars{text-wrap:wrap;white-space:normal;}
  .acardtitle{font-size:clamp(21px,6vw,29px);overflow-wrap:anywhere;hyphens:auto;}.acardmeta{font-size:9px;letter-spacing:.14em;}.acardmeta span{min-width:0;overflow-wrap:anywhere;}
  .prow{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:9px;padding-top:32px;}
  .prow .pname{min-width:0;overflow-wrap:anywhere;}.prow .pmeta{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  .priceline{flex-direction:column;gap:20px;}.pricefig,.pricefigproject{align-self:flex-end;}
  .distrow h2{font-size:clamp(27px,7.6vw,34px);overflow-wrap:anywhere;hyphens:auto;}
}

/* =====================================================================
   HERO CON TINTA · la portada abre aquí
   Debajo del texto corre una simulación de fluidos en WebGL (js/jed-ink.js).
   El plano de contenido va en difference, así que el titular se invierte
   solo allí donde pasa la tinta: la misma inversión del resto de la home,
   pero hecha materia en vez de disparada por scroll.
   Sin WebGL el canvas se queda transparente y el hero se lee igual.
   ===================================================================== */

/* isolation:isolate encierra el blend aquí dentro; sin esto el difference
   sube al root y mezcla con toda la página. El fondo propio garantiza que
   haya papel bajo el texto desde el primer pixel, antes de que WebGL pinte
   su primer frame. */
.jedhero{position:relative;isolation:isolate;background:var(--ground);
  min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.jedinkc{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;}

.jedheroin{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  color:#fff;mix-blend-mode:difference;pointer-events:none;}
/* El plano no captura el puntero: así el ratón sigue removiendo la tinta
   por debajo. Solo lo pulsable lo recupera. */
.jedheroin a,.jedheroin button{pointer-events:auto;}

.jedherobody{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:13vh;}
.jedherobajo{display:flex;align-items:flex-end;justify-content:space-between;
  gap:calc(20px + 2vw);margin-top:clamp(24px,4.5vh,56px);}
/* flex:1 o el párrafo se encoge contra el sello y el claim sale en cuatro
   líneas cortas en vez de tres anchas. */
.jedheroclaim{flex:1 1 auto;max-width:62ch;}
.jedheroclaim .sbody{margin:0;max-width:none;}
.jedhero .ring{flex:none;animation:jedgira 26s linear infinite;}
.jedhero .ring i{background:#fff;}
@keyframes jedgira{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.jedhero .ring{animation:none;}}

.jedheropie{padding-bottom:30px;}

@media (max-width:900px){
  .jedhero{min-height:92svh;}
  .jedherobody{padding-top:15vh;}
  .jedherobajo{flex-direction:column;align-items:flex-start;}
  .jedhero .ring{display:none;}
  /* Tres columnas en 375px se envuelven y descuadran el pie. Se queda la
     que sitúa y la que invita a seguir; el año ya está en el texto. */
  .jedheropie .metarow{flex-wrap:nowrap;}
  .jedheropie .metarow span:nth-child(2){display:none;}
}

/* =====================================================================
   LA SESIÓN DE DIAGNÓSTICO
   No es un entregable que se manda por correo: es una sesión de trabajo
   en directo. La ficha pone la cifra donde se busca y el guion por tramos
   dice exactamente qué se compra.
   ===================================================================== */
.dxhint{margin:16px 0 0;line-height:1.7;}
.dxsesion{padding:6vh 0 12vh;}
.dxhead{margin-top:clamp(30px,5vw,72px);align-items:flex-end;}

/* La ficha: el precio grande a la izquierda, los datos duros al lado. */
.dxficha{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,5vw,88px);
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  padding:clamp(24px,3.4vw,44px);margin-top:clamp(32px,5vw,68px);}
.dxprecio{display:flex;flex-direction:column;gap:8px;}
.dxprecio .pricefig{font-size:clamp(38px,4.6vw,74px);}
.dxdesc{color:var(--accent);}
.dxdatos{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,52px);margin:0;}
.dxdatos > div{display:flex;flex-direction:column;gap:6px;max-width:30ch;}
.dxdatos dt{margin:0;}
.dxdatos dd{margin:0;font-family:var(--display);font-size:var(--fonts);
  letter-spacing:0;text-transform:none;line-height:1.45;}

/* El guion. Los minutos en mono y tabulares para que las cifras cuadren
   en columna aunque cambien los tramos. */
.dxtramos{list-style:none;margin:clamp(34px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,38px);}
.dxtramos li{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);
  padding-top:16px;}
.dxmin{display:block;margin-bottom:12px;font-variant-numeric:tabular-nums;
  color:var(--accent);}
.dxtramos h3{margin:0 0 9px;}
.dxtramos p{margin:0;font-size:calc(12.5px + .12vw);line-height:1.5;color:var(--ink-2);}

.dxcierre{margin:clamp(32px,5vw,64px) 0 0;max-width:64ch;}

@media (max-width:1100px){
  .dxtramos{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .dxtramos{grid-template-columns:1fr;}
  .dxficha{gap:24px;}
  .dxdatos{gap:18px;}
}