/* OneLeaf — oneleaf.es
   Blanco cálido y tinta. Serif enorme para titulares, sans neutra para leer, píldoras negras.
   Detalle propio: teselas de azulejo pequeñas y discretas. Tabla del sistema: docs/oneleaf-web-diseno.md */

@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-latin-wght-normal.woff2) format('woff2-variations')}

:root{
 color-scheme:light;
 --fondo:#FAF8F3;   /* blanco cálido */
 --blanco:#FFFFFF;  /* tarjetas */
 --suave:#F3F0E8;   /* fondos de interfaz */
 --tinta:#121210;   /* texto y botones · 17,7:1 */
 --gris:#66625A;    /* navegación y texto secundario · 5,7:1 sobre fondo, 6,1:1 sobre blanco */
 --linea:#E4E0D6;   /* filetes y bordes */
 --abierto:#2E6B3D; /* «Abierto ahora» · 6,4:1 sobre blanco */
 --cerrado:#9E3A26; /* «Cerrado» · 6,8:1 sobre blanco */
 --burbuja:#E7F1E2; /* mensaje enviado */
 /* Teselas (solo decoración) */
 --azul:#2B5BA5;--ocre:#D99A2B;--verde:#4F8A5B;--teja:#C2573A;
 --serif:'Newsreader',Georgia,'Times New Roman',serif;
 --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;
 --gutter:20px;--ancho:1200px;--seccion:var(--s9);
 --radio:20px;--radio-s:12px;
 /* Movimiento */
 --ease-out:cubic-bezier(0.23,1,0.32,1);
 --ease-in-out:cubic-bezier(0.77,0,0.175,1);
 /* Muelle suave (Apple: bounce 0,2, 300 ms percibidos; se asienta a los 384 ms) */
 --muelle:linear(0, 0.047 4.2%, 0.156 8.3%, 0.293 12.5%, 0.434 16.7%, 0.565 20.8%, 0.679 25%, 0.774 29.2%, 0.848 33.3%, 0.905 37.5%, 0.947 41.7%, 0.975 45.8%, 0.994 50%, 1.006 54.2%, 1.012 58.3%, 1.015 62.5%, 1.015 66.7%, 1.014 70.8%, 1.012 75%, 1.010 79.2%, 1.008 83.3%, 1.006 87.5%, 1.004 91.7%, 1.003 95.8%, 1);
 --sombra:0 1px 2px rgb(18 18 16 / .04),0 8px 24px rgb(18 18 16 / .06);
}
@media(min-width:760px){:root{--gutter:40px;--seccion:var(--s11)}}

@view-transition{navigation:auto}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s5);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;interpolate-size:allow-keywords}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.6}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,blockquote{margin:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:420;line-height:1;letter-spacing:-.03em;font-optical-sizing:auto}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
::selection{background:var(--tinta);color:var(--fondo)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--tinta);color:var(--fondo);padding:var(--s3) var(--s4);border-radius:999px;z-index:20}
.skip:focus{top:var(--s2)}
.wrap{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:var(--seccion)}
.gris{color:var(--gris)}

/* Tesela de azulejo: <svg class="tesela"><use href="#tesela"/></svg> */
.tesela{width:12px;height:12px;flex:none;color:var(--azul)}
.tesela.ocre{color:var(--ocre)}.tesela.verde{color:var(--verde)}.tesela.teja{color:var(--teja)}

/* Píldoras */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:999px;background:var(--tinta);color:var(--fondo);text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;border:1px solid var(--tinta);cursor:pointer;white-space:nowrap}
.pill.clara{background:transparent;color:var(--tinta)}
.pill svg{width:18px;height:18px}

/* Etiqueta pequeña sobre titulares */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--gris);font-weight:500}

/* Cabecera */
.cab{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px)}
.cab .wrap{display:flex;align-items:center;gap:var(--s4);min-height:68px}
.marca{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:28px;line-height:1;text-decoration:none;letter-spacing:-.01em}
.cab nav{display:none;gap:var(--s1);margin-left:var(--s5)}
.cab nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);color:var(--gris);text-decoration:none;font-size:15px;border-radius:999px}
.reloj{margin-left:auto;font-size:14px;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.cab .pill{min-height:44px;padding:0 var(--s4);font-size:15px}
@media(min-width:900px){.cab nav{display:flex}}
@media(max-width:399px){.cab .wrap{gap:var(--s3)}.reloj{font-size:13px}.cab .pill{padding:0 14px}.marca{font-size:26px}}
@media(max-width:339px){.reloj .ciudad{display:none}}

/* Portada: solo el aviso y el titular */
.portada{min-height:calc(100svh - 68px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s6);padding-block:var(--s8) var(--s9)}
.aviso{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:1px solid var(--linea);border-radius:999px;background:var(--blanco);font-size:15px;text-decoration:none;color:var(--tinta)}
.aviso .flecha{color:var(--gris)}
.portada h1{font-size:clamp(36px,11.7vw,119px);line-height:.94;max-width:11ch;text-wrap:balance}

/* Dos públicos */
.publicos{display:grid;gap:var(--s5)}
@media(min-width:900px){.publicos{grid-template-columns:1fr 1fr}}
.publico{display:flex;flex-direction:column;gap:var(--s5)}
.publico h2{font-size:clamp(27px,2.8vw,37px);max-width:14ch}
.publico .pill{align-self:flex-start}
.escena{margin-top:auto;position:relative;padding:var(--s5) var(--s5) 0;background:var(--suave);border-radius:var(--radio-s);overflow:hidden;min-height:260px}

/* Fragmentos de interfaz (las «webs» de los clientes) */
.ui{background:var(--blanco);border:1px solid var(--linea);border-radius:8px 8px 0 0;padding:var(--s4);box-shadow:var(--sombra);font-size:15px}
.ui-cab{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s3);border-bottom:1px solid var(--linea);font-weight:600;font-size:14px}
.ui-cab .menu{display:grid;gap:3px;width:16px}
.ui-cab .menu i{display:block;height:1.5px;background:var(--tinta)}
.ui-nombre{font-family:var(--serif);font-size:44px;line-height:1;margin-top:var(--s4)}
.ui-sub{color:var(--gris);font-size:14px;margin-top:var(--s1)}
.estado{display:flex;flex-wrap:wrap;border-radius:14px!important;column-gap:6px;width:fit-content;max-width:100%;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:6px 12px;border-radius:999px;background:var(--suave);font-size:14px;color:var(--gris)}
.estado b{color:var(--abierto);font-weight:600}
.estado>*{white-space:nowrap}
.estado .punto{align-self:center}
.estado .punto{width:8px;height:8px;border-radius:50%;background:var(--abierto);flex:none}
.estado.cerrado b{color:var(--cerrado)}
.estado.cerrado .punto{background:var(--cerrado)}
.ui-boton{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:10px 16px;border-radius:999px;background:var(--tinta);color:var(--fondo);font-weight:600;font-size:14px}
.ui-boton svg{width:16px;height:16px}
.servicios{margin-top:var(--s3)}
.servicios li{display:flex;justify-content:space-between;gap:var(--s4);padding-block:10px;border-bottom:1px solid var(--linea)}
.servicios span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.servicios small{color:var(--gris);font-size:13px}

/* Cinta de barrios */
.cinta{overflow:hidden;border-block:1px solid var(--linea);padding-block:var(--s5);margin-top:var(--seccion)}
.cinta-pista{display:flex;width:max-content;animation:cinta 40s linear infinite}
.cinta ul{display:flex;align-items:center;gap:var(--s6);padding-right:var(--s6)}
.cinta li{display:flex;align-items:center;gap:var(--s6);font-family:var(--serif);font-size:clamp(22px,2.5vw,34px);line-height:1;white-space:nowrap}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Cómo funciona: interruptor y tres tarjetas */
.cabecera-seccion{display:grid;gap:var(--s4);justify-items:center;text-align:center;margin-bottom:var(--s7)}
.cabecera-seccion h2{font-size:clamp(34px,5vw,69px);max-width:14ch;text-wrap:balance}
.cabecera-seccion p{color:var(--gris);max-width:46ch}
.interruptor{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--blanco);border:1px solid var(--linea)}
.interruptor[hidden]{display:none}
.interruptor button{min-height:44px;min-width:88px;padding:0 var(--s5);border:0;border-radius:999px;background:transparent;cursor:pointer;font-weight:600;font-size:15px;color:var(--gris)}

.pasos{display:grid;gap:var(--s5)}
.pasos[hidden]{display:none}
@media(min-width:1000px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.paso .escena{margin-top:0;border-radius:0;min-height:236px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s5)}
.paso-texto{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s4);padding:var(--s5)}
.paso-texto h4{font-size:28px;line-height:1.05}
.paso-texto p{grid-column:1/-1;color:var(--gris);font-size:16px}
@media(min-width:600px) and (max-width:999px){.paso-texto{grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto}.paso-texto p{grid-column:auto}}
.repetir{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;background:var(--blanco);cursor:pointer;color:var(--tinta);grid-row:1;grid-column:-2}
.repetir svg{width:18px;height:18px}
.cierre{display:grid;justify-items:center;gap:var(--s4);text-align:center;margin-top:var(--s9)}
.cierre h2{font-size:clamp(34px,5vw,69px);max-width:12ch;text-wrap:balance}
.cierre .nota{font-size:14px;color:var(--gris)}

/* Chat */
.chat{display:flex;flex-direction:column;gap:var(--s2);font-size:15px}
.burbuja{max-width:85%;padding:10px 14px;border-radius:16px;background:var(--blanco);box-shadow:var(--sombra);line-height:1.4}
.burbuja.entra{align-self:flex-start;border-bottom-left-radius:4px}
.burbuja.sale{align-self:flex-end;background:var(--burbuja);border-bottom-right-radius:4px}
.burbuja small{display:block;margin-top:2px;font-size:12px;color:var(--gris);text-align:right}
.escribiendo{align-self:flex-end;display:flex;gap:4px;padding:12px 14px;border-radius:16px;background:var(--burbuja)}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--gris)}
.informe{background:var(--blanco);border-radius:16px;padding:var(--s4);box-shadow:var(--sombra);font-size:15px;line-height:1.45}
.informe-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2);font-weight:600;font-size:14px}
.ejemplo{font-size:12px;font-weight:600;color:var(--gris)}
.informe strong{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1}
.etiqueta-grande{display:grid;gap:var(--s3);justify-items:start}
.etiqueta-grande .ui-nombre{margin:0;font-size:36px}
.conmuta{position:relative;display:inline-grid}
.conmuta>*{grid-area:1/1}
.conmuta.fin{justify-self:end;justify-items:end}
.ui.suelta{border-radius:8px}
/* Sin JavaScript (o antes de animar): estado final, sin el «escribiendo…» ni el «Cerrado» superpuesto */
.a-esc,.off{visibility:hidden}
.anima .a-esc,.anima .off{visibility:visible}

/* Animaciones de los fragmentos: solo cuando la tarjeta tiene .play */
.play .a1{animation:entra .3s .3s both var(--ease-out)}
.play .a-esc{animation:aparece-sale 1.4s 1s both}
.play .a2{animation:entra .3s 2.4s both var(--ease-out)}
.play .a-esc i{animation:salto 1s infinite}
.play .a-esc i:nth-child(2){animation-delay:.15s}.play .a-esc i:nth-child(3){animation-delay:.3s}
.play .off{animation:fuera .2s 1.4s both var(--ease-out)}
.play .on{animation:entra .3s 1.5s both var(--ease-out)}
.play .informe{animation:entra .3s .5s both var(--ease-out)}
.anima .a1,.anima .a2,.anima .on,.anima .informe{opacity:0}
.anima .a-esc{opacity:0}
.punto.vivo{position:relative}
.punto.vivo::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--abierto);animation:latido 2.4s var(--ease-out) infinite}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fuera{to{opacity:0;transform:translateY(-6px)}}
@keyframes aparece-sale{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes salto{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}
@keyframes latido{0%{transform:scale(1);opacity:.45}60%,100%{transform:scale(2.5);opacity:0}}


/* Trabajos: índice en filas */
.indice-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}
.indice-cab h2{font-size:clamp(34px,5vw,69px)}
.indice-cab p{color:var(--gris);font-size:15px}
.columnas{display:none}
.indice{border-top:1px solid var(--tinta)}
.indice li{position:relative;border-bottom:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:var(--s1) var(--s4);align-items:center;padding-block:var(--s5);text-decoration:none}
.fila .nombre{font-family:var(--serif);font-size:clamp(25px,3.3vw,44px);line-height:1}
.fila .meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:15px;color:var(--gris);grid-column:1}
.fila .previa{grid-column:2;grid-row:1/span 2;width:96px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--linea)}
.marca-ejemplo{font-size:13px;color:var(--gris)}
@media(min-width:900px){
 .columnas{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,1fr) minmax(0,2fr);gap:var(--s5);padding-block:var(--s2);font-size:13px;color:var(--gris)}
 .fila{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,1fr) minmax(0,2fr);gap:var(--s5)}
 .fila .meta{display:contents}
 .fila .meta .estado-fila{justify-self:end}
 .fila .previa{display:none}
}
@media(min-width:900px) and (hover:hover) and (pointer:fine){
 .fila .previa{display:block;position:absolute;right:22%;top:50%;width:300px;margin:0;transform:translateY(-50%) rotate(-2deg);opacity:0;visibility:hidden;pointer-events:none;z-index:3;box-shadow:0 16px 40px rgb(18 18 16 / .16);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s 200ms}
 .fila:hover .previa,.fila:focus-visible .previa{opacity:1;visibility:visible;transform:translateY(-50%) rotate(0);transition-delay:0s}
}

/* Cifras */

/* Precios */
.planes{display:grid;gap:var(--s5)}
@media(min-width:900px){.planes{grid-template-columns:1fr 1fr}}
.plan{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) var(--s5);background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio)}
@media(min-width:760px){.plan{padding:var(--s7)}}
.plan h3{font-size:clamp(27px,2.7vw,34px)}
.plan .para{color:var(--gris)}
.precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);padding-block:var(--s2)}
.precio strong{font-family:var(--serif);font-weight:400;font-size:clamp(50px,5.5vw,69px);line-height:1;letter-spacing:-.02em}
.precio span{color:var(--gris)}
.terminos{border-top:1px solid var(--tinta)}
.terminos div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--s4);padding-block:var(--s3);border-bottom:1px solid var(--linea);font-size:16px}
.terminos dt{color:var(--gris)}
.terminos dd{font-variant-numeric:tabular-nums}
.letra{font-size:14px;color:var(--gris)}
.plan .pill{align-self:flex-start;margin-top:auto}
.comun{margin-top:var(--s6);text-align:center;color:var(--gris)}
.comun strong{color:var(--tinta);font-weight:600}

/* Quién: collage y misión */
.collage{position:relative;height:340px;margin-bottom:var(--s8)}
.collage img{position:absolute;border-radius:10px;border:1px solid var(--linea);box-shadow:0 12px 32px rgb(18 18 16 / .12);background:var(--blanco)}
.collage .c1{width:62%;left:0;top:20px;transform:rotate(-3deg)}
.collage .c2{width:30%;right:2%;top:0;transform:rotate(4deg)}
.collage .c3{width:52%;right:6%;bottom:0;transform:rotate(2deg)}
.collage .c4,.collage .c5{display:none}
@media(min-width:760px){
 .collage{height:560px}
 .collage .c1{width:44%;left:2%;top:60px}
 .collage .c2{width:15%;left:40%;top:0;right:auto}
 .collage .c3{width:38%;right:0;bottom:30px}
 .collage .c4{display:block;width:14%;left:56%;bottom:0;transform:rotate(-5deg)}
 .collage .c5{display:block;width:26%;right:4%;top:10px;transform:rotate(-2deg)}
}
.mision{display:grid;gap:var(--s5)}
@media(min-width:900px){.mision{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:start}}
.mision h2{font-size:clamp(28px,3.6vw,50px);line-height:1.05}
.mision .texto{display:grid;gap:var(--s4);color:var(--gris);font-size:18px}
.mision .firma{color:var(--tinta);font-family:var(--serif);font-size:28px;line-height:1}

/* Preguntas */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:44px;padding-block:var(--s5);cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(19px,2vw,25px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--tinta);border-bottom:1.5px solid var(--tinta);transform:rotate(45deg) translate(-3px,-3px)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding-bottom:var(--s5);color:var(--gris);max-width:62ch}

/* Banda final y pie */
.final{text-align:center;display:grid;justify-items:center;gap:var(--s5);padding-block:var(--seccion)}
.final h2{font-size:clamp(50px,9.4vw,137px);line-height:.92}
.final p{color:var(--gris);max-width:40ch}
.pie{border-top:1px solid var(--linea);padding-block:var(--s7) var(--s8);font-size:15px}
.pie-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
.pie-cols .marca{font-size:32px}
.pie h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:var(--s2)}
.pie li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.pie .primera{grid-column:1/-1;display:grid;gap:var(--s3)}
.pie .primera p{color:var(--gris);max-width:30ch}
.teselas{display:flex;gap:6px}
.pie-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--linea);color:var(--gris);font-size:14px}
@media(min-width:900px){.pie-cols{grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr))}.pie .primera{grid-column:auto}}
.arriba{position:fixed;right:var(--gutter);bottom:var(--s5);z-index:15;box-shadow:var(--sombra);opacity:0;visibility:hidden;transform:translateY(8px)}
@media(max-width:759px){.arriba{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}.arriba .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.arriba.visible{opacity:1;visibility:visible;transform:none}

/* Páginas interiores (proyectos y legales) */
.interior{padding-block:var(--s7) var(--s9)}
.volver{display:inline-flex;align-items:center;min-height:44px;color:var(--gris);text-decoration:none}
.interior h1{font-size:clamp(44px,7vw,100px);line-height:.94;margin-top:var(--s4)}
.ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);margin-block:var(--s6) var(--s7);padding-top:var(--s4);border-top:1px solid var(--tinta)}
.ficha dt{font-size:13px;color:var(--gris)}
.ficha dd a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:900px){.ficha{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lamina{border:1px solid var(--linea);border-radius:var(--radio-s);overflow:hidden;background:var(--blanco)}
.lamina img{width:100%}
figcaption{margin-top:var(--s3);font-size:14px;color:var(--gris)}
.bloque{display:grid;gap:var(--s4);padding-block:var(--s8)}
@media(min-width:900px){.bloque{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7)}}
.bloque h2{font-size:clamp(25px,2.8vw,37px)}
.bloque .texto{display:grid;gap:var(--s4);max-width:62ch}
.bloque .texto .grande{font-family:var(--serif);font-size:clamp(22px,2.3vw,31px);line-height:1.15}
.moviles{display:grid;grid-auto-flow:column;grid-auto-columns:240px;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3)}
.moviles figure{scroll-snap-align:start}
@media(min-width:760px){.moviles{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,300px));overflow:visible;gap:var(--s6)}}
.paleta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.paleta li{display:flex;align-items:center;gap:var(--s2);font-size:15px}
.paleta span{width:24px;height:24px;border-radius:6px;border:1px solid var(--linea)}
.siguiente{display:grid;gap:var(--s2);padding-block:var(--s7);border-top:1px solid var(--tinta);text-decoration:none}
.siguiente .nombre{font-family:var(--serif);font-size:clamp(34px,5.5vw,75px);line-height:1}
.legal{max-width:760px}
.legal h1{font-size:clamp(37px,5.5vw,62px);margin-bottom:var(--s5)}
.legal h2{font-size:30px;margin:var(--s6) 0 var(--s2)}
.legal p{margin-bottom:var(--s3)}
.legal dt{font-weight:600}
.legal dd{margin:0 0 var(--s3)}
.legal a{display:inline-flex;align-items:center;min-height:44px}
.proyecto-espiga .lamina-principal{view-transition-name:espiga}
.proyecto-ruiz .lamina-principal{view-transition-name:ruiz}

/* Movimiento reducido: todo quieto y en su estado final */
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important}
 .anima .a1,.anima .a2,.anima .on,.anima .informe,.anima .cuenta{opacity:1}
 .anima .a-esc,.anima .off{display:none}
 .cinta-pista{width:auto}
 .cinta ul{flex-wrap:wrap;justify-content:center;row-gap:var(--s3);padding-inline:var(--gutter)}
 .cinta ul[aria-hidden]{display:none}
 .repetir{display:none}
}

/* Newsreader: peso y espaciado para todo lo que va en serif */
:is(.marca,.cinta li,.precio strong,.fila .nombre,.faq summary,.ui-nombre,.informe strong,.firma,.siguiente .nombre,.paso-texto h4){font-weight:420;letter-spacing:-.03em;font-optical-sizing:auto}

/* ── Tactilidad (skills mobile-native, emil-design-eng, animate) ─────────────── */

/* Controles: respuesta inmediata al tocar, sin retraso ni selección de texto al mantener */
:is(.pill,.aviso,.repetir,.interruptor button,.faq summary,.fila){touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Pulsación: se encoge un 3 % y vuelve en 160 ms */
:is(.pill,.aviso,.repetir){transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
:is(.pill,.aviso,.repetir):active{transform:scale(.97)}
.arriba{transition:opacity 200ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s 200ms}
.arriba.visible{transition:opacity 200ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s}
.arriba.visible:active{transform:scale(.97)}

/* Interruptor Bar / Taller: una pastilla que se desliza con muelle suave.
   La copia activa (texto claro sobre tinta) se recorta a la mitad elegida; texto y fondo cambian a la vez. */
.interruptor{transition:transform 160ms var(--ease-out)}
.interruptor:has(button:active){transform:scale(.98)}
.interruptor button{position:relative}
.interruptor-activo{position:absolute;inset:4px;display:grid;grid-template-columns:1fr 1fr;border-radius:999px;background:var(--tinta);color:var(--fondo);font-weight:600;font-size:15px;pointer-events:none;clip-path:inset(0 50% 0 0 round 999px)}
.interruptor-activo span{display:grid;place-items:center}
.interruptor[data-activo="taller"] .interruptor-activo{clip-path:inset(0 0 0 50% round 999px)}
.interruptor[data-listo] .interruptor-activo{transition:clip-path 384ms var(--muelle)}

/* Preguntas: la respuesta se abre fluida (altura 250 ms) y el texto entra con un fundido */
.faq summary::after{transition:transform 200ms var(--ease-out)}
.faq details p{opacity:0;transition:opacity 200ms var(--ease-out)}
.faq details[open] p{opacity:1}
@supports selector(::details-content){
 .faq details::details-content{block-size:0;overflow:hidden;transition:block-size 250ms var(--ease-out),content-visibility 250ms allow-discrete}
 .faq details[open]::details-content{block-size:auto}
}
.faq summary{border-radius:12px;margin-inline:calc(-1 * var(--s3));padding-inline:var(--s3);transition:background-color 200ms ease}
.faq summary:active{background:var(--suave);transition-duration:80ms}

/* Filas de trabajos: al tocar se tiñen (texto que se lee: no se escala) */
.fila{border-radius:12px;margin-inline:calc(-1 * var(--s3));padding-inline:var(--s3);transition:background-color 200ms ease}
.fila:active{background:var(--suave);transition-duration:80ms}

/* Hover solo con ratón: en táctil se queda pegado después de tocar */
@media(hover:hover) and (pointer:fine){
 .pill:hover{background:#2B2A26;color:var(--fondo)}
 .pill.clara:hover{background:var(--suave)}
 .cab nav a:hover{color:var(--tinta)}
 .aviso:hover{border-color:var(--tinta)}
 .cinta:hover .cinta-pista{animation-play-state:paused}
 .repetir:hover{border-color:var(--tinta)}
 .interruptor button:hover{color:var(--tinta)}
 .fila:hover .nombre{font-style:italic}
 .faq summary:hover{background:var(--suave)}
 .pie li a:hover{text-decoration:underline}
 .volver:hover{color:var(--tinta)}
 .siguiente:hover .nombre{font-style:italic}
}

/* Movimiento reducido: sin escalas ni muelle; los cambios de estado son instantáneos */
@media(prefers-reduced-motion:reduce){
 :is(.pill,.aviso,.repetir,.arriba.visible,.interruptor):active,.interruptor:has(button:active){transform:none}
 .faq details p{opacity:1}
}

/* Cinta: se puede parar (WCAG 2.2.2: lo que se mueve más de 5 s necesita pausa) */
.cinta{position:relative}
.cinta[data-pausada] .cinta-pista{animation-play-state:paused}
.cinta-pausa{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linea);border-radius:50%;background:var(--fondo);color:var(--tinta);cursor:pointer;touch-action:manipulation;transition:transform 160ms var(--ease-out)}
.cinta-pausa:active{transform:scale(.97)}
.cinta-pausa svg{width:16px;height:16px}
.cinta-pausa .play-i,.cinta[data-pausada] .cinta-pausa .pausa-i{display:none}
.cinta[data-pausada] .cinta-pausa .play-i{display:block}
.cinta-pausa[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.cinta-pausa{display:none}}

/* Pies de los fragmentos y del collage: dicen que son ejemplos */
.pie-escena{margin-top:calc(-1 * var(--s3));font-size:14px;color:var(--gris)}
.pie-collage{margin:calc(-1 * var(--s6)) 0 var(--s7);font-size:14px;color:var(--gris);text-align:center}
.sprite{position:absolute}
.siguiente{margin-top:var(--s8)}
/* Muestras de color de las páginas de proyecto */
.muestra[data-color="#FAF5EC"]{background:#FAF5EC}.muestra[data-color="#2A1E14"]{background:#2A1E14}.muestra[data-color="#8F4A1C"]{background:#8F4A1C}.muestra[data-color="#E7B547"]{background:#E7B547}
.muestra[data-color="#ECEDEA"]{background:#ECEDEA}.muestra[data-color="#15191D"]{background:#15191D}.muestra[data-color="#1E3A5C"]{background:#1E3A5C}.muestra[data-color="#F2B705"]{background:#F2B705}
@media(max-width:599px){.escena{padding:var(--s4) var(--s4) 0}.escena .ui{padding:var(--s3) var(--s4)}}