/* Maricarmen Díaz · MD Makeup · hoja de estilos del sitio.
   Una sola paleta: neutros de la familia crema (croma ≤ 12, tono 70-90°, L ≥ 70) y los azules de su marca en titulares y
   botones. El marrón vive sólo en las fotos y el maquillaje.
   Orden: 1 tokens · 2 base · 3 barra · 4 comparador · 5 portada · 6 Mis trabajos · 7 su frase · 8 caminos · 9 talleres ·
   10 opiniones · 11 sobre mí · 12 cita paso a paso · 13 piel · 14 aprende · 15 preguntas · 16 arma tu cita · 17 pie y
   barra de WhatsApp · 18 antes y después (sólo con pares autorizados) · 19 tableta y celular · 20 movimiento reducido. */

/* ---------- 1. Tokens ---------- */
:root {
  --crema: #F3EEE7;          /* fondo claro */
  --arena: #EDE4D8;          /* secciones que alternan */
  --panel: #E4D9CB;          /* huecos «Falta» y tarjetas sobre arena (la portada del celular y la tableta usa --panel-portada desde v1.2, §5) */
  --fusion: #D7C9B8;         /* el fondo de la portada en computadora, debajo de la pared que sigue (§5) */
  --topo: #BCAC9C;           /* topo cálido: franjas */
  --titular: #2E3D4C;        /* azul profundo de su marca: titulares */
  --tinta: #1F2A36;          /* texto: casi negro azulado */
  --tinta-2: #46525F;        /* texto secundario, sólo sobre crema, arena y panel */
  --linea: rgba(46,61,76,.22);
  --detalle: #8AA9C8;        /* el azul del logo: sólo líneas y adornos que no son texto */
  --boton: #4D6378;          /* azul pizarra: sobre crema, arena y la fusión */
  --boton-hover: #435A6E;
  --boton-topo: #2E3D4C;     /* azul profundo: el botón sobre topo cálido */
  --boton-topo-hover: #253241;
  --boton-texto: #F7F4EF;
  --foco: #2E3D4C;
  --banda: #2E3D4C;
  --banda-tinta: #F3EEE7;
  --banda-tinta-2: #D9DFE5;
  --banda-linea: rgba(243,238,231,.32);
  --vidrio: rgba(243,238,231,.70);
  --vidrio-borde: rgba(255,255,255,.62);
  --sombra-ui: 31,42,54;
  --orilla: clamp(20px, 6.67vw, 96px);
  --x0: clamp(24px, 3.4vw, 56px);   /* orilla del bloque de la portada y de la barra */
  --radio: 2px;              /* fotos, tarjetas y campos; los botones son cápsulas (§2) y los controles de ícono, círculos */
  --display: 'Playfair Display', Georgia, serif;
  --texto: 'Montserrat', system-ui, sans-serif;
  --sale: cubic-bezier(.16,1,.3,1);        /* entradas editoriales */
  --ease-out: cubic-bezier(.23,1,.32,1);   /* respuesta de la interfaz */
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* scroll suave sólo al navegar con un enlace de la página; el scroll por código es inmediato */
html:focus-within { scroll-behavior: smooth; }
/* lo enfocado con el teclado y el destino de un enlace no quedan debajo de la barra fija (WCAG 2.4.11) */
html { scroll-padding-top: 76px; }
body { background: var(--crema); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--titular); color: var(--crema); }
a, button { color: inherit; }
a, button, summary, label, [role="button"] { touch-action: manipulation; }
.boton, button, summary, .chip span, .flecha { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: 16px; }
a:focus-visible, button:focus-visible, summary:focus-visible, .chip input:focus-visible + span, .campo:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: var(--radio); }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--boton); color: var(--boton-texto); padding: 10px 16px; border-radius: var(--radio); }
.saltar:focus { top: 12px; }
.titulo { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.015em; color: var(--titular); text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; color: var(--titular); }
p { text-wrap: pretty; }
.ico { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-wa { --m: url(../icons/phosphor/regular/whatsapp-logo.svg); }
.ico-flechas { --m: url(../icons/phosphor/regular/arrows-horizontal.svg); }
.ico-izq { --m: url(../icons/phosphor/regular/caret-left.svg); }
.ico-der { --m: url(../icons/phosphor/regular/caret-right.svg); }
.ico-play { --m: url(../icons/phosphor/regular/play.svg); }
.ico-pausa { --m: url(../icons/phosphor/regular/pause.svg); }
.ico-mas { --m: url(../icons/phosphor/regular/plus.svg); }
.ico-ig { --m: url(../icons/phosphor/regular/instagram-logo.svg); }
.ico-cal { --m: url(../icons/phosphor/regular/calendar-blank.svg); }
.ico-regalo { --m: url(../icons/phosphor/regular/gift.svg); }
.ico-guia { --m: url(../icons/phosphor/regular/book-open-text.svg); }
.ico-amiga { --m: url(../icons/phosphor/regular/heart.svg); }
.ico-flecha { --m: url(../icons/phosphor/regular/arrow-right.svg); }
.ico-descarga { --m: url(../icons/phosphor/regular/download-simple.svg); }   /* v10.6: la guía «Mis básicos» */

/* Materia: grano fino de papel sobre los fondos lisos, sólo en escritorio (en el celular no se pide: velocidad). */
.con-grano { position: relative; isolation: isolate; }
@media (min-width: 721px) {
  .con-grano::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(../img/grano-256.webp) 0 0 / 256px 256px repeat; mix-blend-mode: soft-light; opacity: .5; }
}

/* «Falta: …»: el dato que todavía se le pide a ella. Desde v10.6 (decisión 60) no se escribe en el sitio (datos/faltas.json,
   «mostrar»: false); estas reglas quedan para cuando vuelvan a verse, siempre empezando con «Falta:». */
.falta { display: inline; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--tinta); border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.faltas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }

/* Botones: uno por intención; el texto cabe en una línea; planos y en cápsula (B, 28 oct §5: el radio completo de «Menú» y
   del aviso, para que la portada hable una sola forma en sus controles). El relleno de los lados (26 y 30 px) ya es la mitad
   del alto (52 y 58 px): el ícono empieza donde termina la curva. El anillo del foco sigue la cápsula.
   Azul pizarra sobre crema, arena y la fusión; azul profundo sobre topo cálido. */
.boton { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 26px; background: var(--boton); color: var(--boton-texto); text-decoration: none; font-weight: 600; font-size: 16px; border-radius: 999px; white-space: nowrap; transition: background-color .2s ease, transform .16s var(--ease-out); }
.boton:focus-visible { border-radius: 999px; }
.boton:active { transform: scale(.97); }
.boton-grande { height: 58px; padding: 0 30px; }
.sobre-topo .boton { background: var(--boton-topo); }
.secundario { display: inline-block; padding: 13px 0; font-weight: 500; font-size: 16px; color: var(--tinta); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }

/* Entradas suaves al hacer scroll: 16 px y opacidad, 700 ms, una sola vez. Sólo con Motion y sin «reducir movimiento»;
   sin JavaScript todo se ve desde el principio. */
.con-mov [data-entra] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--sale), transform .7s var(--sale); }
.con-mov [data-entra].dentro { opacity: 1; transform: none; }
.con-mov [data-entra="2"] { transition-delay: .08s; }
.con-mov [data-entra="3"] { transition-delay: .16s; }

/* ---------- 3. Barra: sobre la portada sólo el logo y «Menú»; al pasar la portada se fija en crema con los enlaces y
   el botón de WhatsApp. ---------- */
.barra { position: absolute; z-index: 20; inset: 0 0 auto 0; height: 76px; display: flex; align-items: center; gap: 52px; padding: 0 var(--orilla); transition: background-color .3s ease, box-shadow .3s ease; }
.marca { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.marca img { width: 58px; height: auto; }
.marca span { font-weight: 500; font-size: 15px; letter-spacing: .01em; color: var(--tinta); }
.nav { display: flex; align-items: center; gap: 30px; flex: 1; }
.nav > a:not(.boton) { font-size: 15px; font-weight: 500; text-decoration: none; padding: 12px 0; color: var(--tinta); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.boton-barra { display: none; height: 44px; padding: 0 18px; font-size: 14.5px; gap: 10px; margin-left: auto; }
.boton-barra .ico { width: 18px; height: 18px; }
.barra.fija { position: fixed; background: color-mix(in srgb, var(--crema) 92%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--linea); height: 68px; }
.barra.fija .boton-barra { display: inline-flex; }
.menu-movil { display: none; position: relative; margin-left: auto; }
.menu-movil summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-movil summary::-webkit-details-marker { display: none; }
/* el menú sale de su botón (arriba a la derecha) y entra en 200 ms; al cerrar se va de inmediato */
.menu-hoja { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); background: var(--crema); border-radius: var(--radio); box-shadow: 0 24px 60px -24px rgba(var(--sombra-ui),.45); padding: 10px; display: grid; z-index: 40; transform-origin: top right; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@starting-style { .menu-movil[open] > .menu-hoja { opacity: 0; transform: scale(.96); } }
.menu-hoja a:not(.boton) { padding: 13px 12px; text-decoration: none; font-weight: 500; color: var(--tinta); border-bottom: 1px solid var(--linea); }
.menu-hoja .boton { margin-top: 12px; justify-content: center; }

/* ---------- 4. Comparador: el retrato grande. El «Después» a la izquierda de la línea y el «Antes» a la derecha; en reposo
   la línea está en la esquina de abajo a la derecha (donde las dos fotos ya son iguales) y sólo se ve la manija junto al
   aviso. Mouse, dedo y teclado (flechas). La geometría de la foto la pone la portada; el script lee la caja de la foto. ---------- */
.comparar { margin: 0; }
.marco { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; }
.foto { position: absolute; display: block; pointer-events: none; }
.foto img { display: block; width: 100%; height: 100%; max-width: none; }
.foto.antes { visibility: hidden; }
.comparar[data-antes] .foto.antes { visibility: visible; clip-path: inset(0 0 0 var(--corte, 100%)); }
/* la línea se mueve con transform y no con left (v6): así su caja no cambia de lugar y no cuenta como «brinco» (CLS) */
.linea { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 1px; transform: translateX(calc(var(--x, 0px) - .5px)); background: rgba(250,248,245,.92); box-shadow: 0 0 0 .5px rgba(var(--sombra-ui),.18); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.comparar:not([data-estado="reposo"]) .linea { opacity: 1; }
.manija { position: absolute; z-index: 3; left: var(--x, 70%); top: var(--y, 45%); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(250,248,245,.95); color: var(--titular); display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(var(--sombra-ui),.55), 0 0 0 1px rgba(46,61,76,.14); pointer-events: none; transition: transform .2s ease; }
.manija .ico { width: 22px; height: 22px; }
.marco:active .manija { transform: scale(.94); }
.comparar:has(.rango:focus-visible) .manija { outline: 2px solid var(--tinta); outline-offset: 3px; }
.etiqueta { position: absolute; z-index: 3; left: 0; top: 0; padding: 6px 10px; border-radius: 999px; background: rgba(247,244,239,.92); font-size: 12.5px; font-weight: 600; color: var(--tinta); pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .35s ease; }
.et-despues { transform: translate(var(--edx, 0px), var(--edy, 0px)); }
.et-antes { transform: translate(var(--eax, 0px), var(--eay, 0px)); }
.comparar:not([data-estado="reposo"]) .etiqueta:not(.sin-lugar) { opacity: 1; }
.etiqueta.sin-lugar { display: none; }
.aviso { position: absolute; z-index: 3; left: 0; top: 0; width: max-content; max-width: 150px; padding: 7px 11px; border-radius: 12px; background: rgba(247,244,239,.94); font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--tinta); pointer-events: none; box-shadow: 0 8px 20px -14px rgba(var(--sombra-ui),.6); transform: translate(var(--ax, 0px), var(--ay, 0px)); }
/* sin JavaScript no hay manija; el aviso queda en la esquina de abajo de la foto, igual que con JavaScript */
html:not(.js) .manija, html:not(.js) .etiqueta { display: none; }
/* sin JavaScript se ven las copias de <noscript>, no los marcadores de las imágenes diferidas */
html:not(.js) img[data-diferida] { display: none; }
html:not(.js) .comparar picture.foto:not(.sin-js) { display: none; }
/* v8.1 (AUDIT-v8 B1): el <picture> que envuelve un marcador tiene alto propio (estudio y «Cómo cuido tu piel»): también se
   esconde (queda la copia de <noscript>) */
html:not(.js) picture:has(> img[data-diferida]) { display: none; }
.rango { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

/* ---------- 5. Portada: la foto a sangre y la cara como protagonista; titular, párrafo y botón en un solo bloque a la
   altura de la mirada, sin tocar el pelo.
   En el original (5056 × 3392) la modelo lleva el pelo recogido: la coronilla está en la fila 110, la línea de los ojos en
   la 1410 y la barbilla en la 2520. Lo más a la izquierda de la persona está en x 2600 en las filas del titular y en x 2590
   (las pestañas) en las del párrafo; a la izquierda de eso sólo hay pared. La brocha baja a la derecha (cerdas en
   x 3720-4450, y 1710-2340; el mango negro sale por la orilla) y los dedos empiezan en x 4895, fuera de la pantalla. La
   foto sólo se corre a la derecha si hace falta para que cada renglón quede a ≥ 30 px de la persona; la cara no cambia. ---------- */
/* --w1 / --w2: ancho de «Cierra los ojos.» y de «Yo te maquillo.» en em; --wmax: la línea más ancha (la 2.ª lleva .28em
   de sangría); --base: de la parte de arriba de la línea a su línea base (medidos con estas mismas letras). */
.portada { --w1: 6.344; --w2: 6.031; --base: .89em; --wmax: 6.344; }

.portada {
  --alto: max(100svh, 680px);
  /* Las filas 0 a 3000 del original llenan el alto de la portada: arriba, la coronilla (fila 110) con su aire; abajo, la
     brocha con su mango. La orilla derecha de la pantalla es la x 4890 del original: entra el mango y no entran los dedos. */
  --hf: calc(var(--alto) * 1.130667);                                           /* alto de la foto = alto × 3392 / 3000 */
  /* La foto no se mueve (28 oct §2): --hf, --izq y --arriba dan la misma caja que en v3. --fs-foto es la regla del titular
     de v3 (60 px en 1440 × 900) y sólo sirve para colocar la foto; el titular de computadora va con --fs (abajo). */
  --fs-foto: clamp(50px, calc(var(--alto) * .0667), 68px);
  /* la foto: la x 4890 en la orilla derecha; sólo se corre a la derecha si hace falta para que
     (b) cada renglón del titular de v3 termine ≥ 30 px antes de la cara (lo más a la izquierda de la persona en sus filas: x 2600 → .766509);
     (c) el párrafo y el botón de v3 (304 px) queden ≥ 30 px antes de las pestañas (x 2590 → .763561). */
  --izq: max(calc(100vw - var(--hf) * 1.441627),
             calc(var(--x0) + var(--fs-foto) * var(--wmax) + 30px - var(--hf) * .766509),
             calc(var(--x0) + 334px - var(--hf) * .763561));
  --arriba: 0px;
  /* El bloque en computadora, reajustado a la modelo nueva (28 oct §3): la cara quedó más chica en el cuadro y el bloque de
     v3 (60 px, pegado a la orilla) dejaba ≈300 px de pared sin función entre él y la mejilla. Ahora el bloque se compone con
     la cara: el titular crece con la foto y el bloque se acerca a ella. Desde v6 (A, 28 oct §5) el titular se amarra a los
     ojos: la línea de base de «Yo te maquillo.» va sobre la línea de las pestañas cerradas, y el titular es más grande.
     --cara / --cara-p: dónde empieza la persona en las filas del titular (x 2600) y del párrafo (x 2590, las pestañas). */
  --cara: calc(var(--izq) + var(--hf) * .766509);
  --cara-p: calc(var(--izq) + var(--hf) * .763561);
  /* --firma: donde empieza «Maricarmen Díaz» en la barra (el logo de 78 px y su espacio de 14). */
  --firma: calc(var(--x0) + 92px);
  /* el titular (A, v6): 10 % del alto (90 px en 1440 × 900, 108 en 1920 × 1080), de 50 a 112 px, sin pasar del ancho que
     deja el bloque alineado con «Maricarmen Díaz» y 40 px de aire hasta la cara (78 px en 1280 × 800). 90 en 1440 es lo más
     grande que cabe así: con 92 el bloque ya se correría a la izquierda de la firma. Donde la cara está más a la izquierda y
     el bloque ya iba con el logo (1280 × 1024), sigue la regla de v5: 8.89 % del alto, con 40 px de aire desde el logo
     (66 px); así ninguna medida queda con el titular más chico que en v5. */
  --fs: clamp(50px, max(min(calc(var(--alto) * .1), calc((var(--cara) - 40px - var(--firma)) / var(--wmax))),
                        min(calc(var(--alto) * .0889), calc((var(--cara) - 40px - var(--x0)) / var(--wmax)))), 112px);
  --ancho-t: calc(var(--fs) * var(--wmax));
  /* dónde empieza el bloque: alineado con «Maricarmen Díaz» mientras entre el titular y la cara queden de 40 px de pantalla
     a 400 px de la foto original (120 px de pantalla en 1440 × 900); en las pantallas más anchas el bloque se acerca a la
     cara hasta esos 400 px, para que la pared vacía quede afuera y no en medio; nunca más a la izquierda que el logo. */
  --bloque-x: max(var(--x0), calc(var(--cara) - var(--hf) * .117925 - var(--ancho-t)), min(var(--firma), calc(var(--cara) - 40px - var(--ancho-t))));
  --sub-fs: clamp(17px, calc(var(--fs) * .225), 20px);                           /* párrafo: 20 px con el titular de 90 */
  --hueco-1: calc(var(--fs) * .55);                                              /* titular → párrafo: 49.5 px en 1440 × 900 */
  --hueco-2: calc(var(--sub-fs) * 1.9);                                          /* párrafo → botón: 38 px en 1440 × 900 */
  /* A (v6): el titular amarrado a los ojos. La línea de las pestañas cerradas está en la fila 1416 del original (la fila más
     oscura de las pestañas: 1426 en el ojo de la izquierda y 1406 en el de la derecha; 1416 = .417453 del alto). La línea de
     base de «Yo te maquillo.» queda ahí: el primer renglón mide .96 em y, dentro del segundo, la base está a .89 em de arriba
     (--base). Debajo siguen el párrafo, el botón, «Ver próximos talleres» y la nota «Falta», como un solo bloque. Nunca a
     menos de 20 px de la barra. */
  --bloque-y: max(96px, calc(var(--arriba) + var(--hf) * .417453 - var(--fs) * 1.85));
  /* el aviso, abajo a la derecha, en una sola cápsula con la manija (§5, «Computadora»): termina a 20 px de la orilla derecha
     y a 16 de la de abajo, donde termina la manija en reposo (su centro va a 38 y 34 px, sitio.js §2). Detrás tiene el hombro
     (#94613B) y la pared (#D4C7BF) en el mismo renglón; ningún color de letra llega a 4.5:1 sobre los dos (tinta 2.1:1 sobre el
     hombro, marfil 1.4:1 sobre la pared), así que lleva fondo crema (sólo en computadora; en la tableta y el celular va sobre
     el panel, sin caja). */
  /* el panel de la portada del celular y la tableta: el tono de la pared en la unión (ΔE ≤ 1); el resto del sitio sigue con --panel */
  --panel-portada: #E8DFD3;
  --aviso-der: 20px; --aviso-abajo: 16px; --aviso-color: var(--tinta);
  position: relative; height: var(--alto); overflow: hidden; isolation: isolate; background: var(--fusion);
}
/* En las pantallas más anchas que 1.63:1 la foto (de x 0 a 4890) no llega a la orilla izquierda: la pared sigue con su
   mismo tono (medido en la orilla izquierda del original, x 0-120, por bandas de filas) y la orilla de la foto se funde en
   ella a lo largo de su 6 % (x 0-303: sólo pared). En 1440 × 900 la orilla queda fuera de la pantalla. */
.portada .comparar { position: absolute; inset: 0; z-index: auto;
  background: linear-gradient(180deg, #E9E0D4 0%, #EAE1D6 12.5%, #EDE3D7 25%, #EEE4D7 37.5%, #EEE4D7 50%, #EBE2D6 62.5%, #E9E0D4 75%, #E5DBCF 87.5%, #E3D9CD 100%) 0 var(--arriba) / 100% var(--hf) no-repeat, #E3D9CD; }
.portada .foto { height: var(--hf); width: calc(var(--hf) * 1.490566); left: var(--izq); top: var(--arriba);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%); mask: linear-gradient(90deg, transparent, #000 6%); }
.portada .texto { position: relative; z-index: 2; }
.portada h1 { font-family: var(--display); font-weight: 400; font-size: var(--fs); line-height: .96; letter-spacing: -0.02em; color: var(--titular); }
.portada h1 span { display: block; white-space: nowrap; }
.portada h1 .l2 { font-style: italic; }
.portada .accion { position: relative; z-index: 2; }
.portada .sub { font-size: 18px; line-height: 1.6; color: var(--tinta); }
.portada .acciones { margin-top: 26px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.portada .falta-linea { margin-top: 12px; }
/* la nota «Falta» va en una etiqueta crema: sobre la foto se lee igual en cualquier fondo */
.portada .falta-linea .falta { background: rgba(243,238,231,.78); padding: 2px 7px 3px; border-radius: var(--radio); }
/* «Ver próximos talleres →» (retoque B, CD v1.1): chico, bajo el botón, sin competirle. Es texto con su subrayado en el azul
   del logo sólo bajo las palabras; la caja tocable mide 44 px. El letrero «Falta» queda a 4 px de esa caja. */
.portada .a-talleres { margin-top: 4px; }
.portada .a-talleres a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--titular); text-decoration: none; }
.portada .a-talleres-texto { text-decoration: underline; text-decoration-color: var(--detalle); text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* la flecha «→» va como ícono de Phosphor (arrow-right, del kit): Montserrat y Playfair no traen ese glifo y saldría con
   otra letra del sistema */
.portada .a-talleres .flecha-texto { width: 15px; height: 15px; margin-left: .4em; transition: transform .25s var(--ease-out); }
.portada .a-talleres a:focus-visible { outline-offset: 2px; }
.portada .a-talleres + .falta-linea { margin-top: 4px; }

/* «Yo te maquillo.» se descubre con el barrido (H, 28 oct): de izquierda a derecha, en el mismo tramo que la línea sobre la
   cara (empieza con ella, 1.5 s, la misma curva); el recorte cuadro por cuadro lo pone sitio.js (§2). Sin JavaScript o con
   movimiento reducido no se cubre nunca: la clase entra-l2 la pone el script de la cabecera sólo con movimiento. Seguro: si
   sitio.js no llegara, a los 7 s la frase se descubre sola (con el script, el seguro se quita). */
html.entra-l2 .portada h1 .l2 { clip-path: inset(-.3em calc(100% + .3em) -.4em -.3em); animation: l2-seguro 1ms 7s forwards; }
html.entra-l2 .portada h1 .l2.entra { clip-path: none; }
@keyframes l2-seguro { to { clip-path: none; } }

/* El grano de la foto (sin la luz de los párpados de antes: con el maquillaje champaña de esta modelo no aportaba). */
.grano { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .10; }
.fundido { display: none; }   /* sólo en el celular */
.capas-listas .grano { background: url(../img/grano-128.png) 0 0 / 96px 96px repeat; }

/* La entrada (al cargar): con movimiento, el «Antes» es la primera foto y se ve completo mientras llega el «Después»; luego
   la línea barre al «Después» en 1.5 s, una vez, y termina arriba del renglón del aviso. Durante el barrido no se ven la
   manija ni las etiquetas; al final la línea se esconde y la manija queda en la esquina. */
html.k7 .comparar .foto.antes { visibility: visible; clip-path: inset(0 0 0 var(--corte, 0px)); }
.portada .manija { transition: opacity .25s ease, transform .2s ease; }
.comparar[data-k7="espera"] .manija, .comparar[data-k7="espera"] .linea { opacity: 0; }
.comparar[data-estado="barrido"] .linea { opacity: 1; transition: opacity .2s ease; }
.portada .comparar[data-estado="barrido"] .manija { opacity: 0; transition: none; }
.portada .comparar[data-estado="barrido"] .linea { bottom: 64px; }
.portada .comparar[data-estado="barrido"] .etiqueta:not(.sin-lugar) { opacity: 0; }
/* C (v6, 28 oct §5): durante la entrada, el paso del «Antes» al «Después» es una franja de luz suave, no una línea de 1 px.
   El «Antes» no se corta en seco: su máscara va de transparente a opaco en 56 px, del lado del «Después» (de --corte − 56 px
   a --corte). Del lado izquierdo para que no se adelante nada: al empezar, esos 56 px caen antes de la x 2510 del original
   (donde las dos fotos empiezan a ser distintas) y al terminar, a la derecha de la x 4220 (donde vuelven a ser iguales); así
   el cuadro final es idéntico al reposo. Encima, en esos mismos 56 px, la luz: crema sin orilla, más clara al centro, que
   aclara la piel (screen) y se desvanece arriba y abajo. Al usar el comparador vuelven el corte preciso y la línea de 1 px
   (los estados «activo» y «reposo» no cambian). */
.portada .comparar[data-estado="barrido"] .foto.antes { clip-path: none;
  -webkit-mask: linear-gradient(90deg, transparent calc(var(--corte, 0px) - 56px), #000 var(--corte, 0px));
  mask: linear-gradient(90deg, transparent calc(var(--corte, 0px) - 56px), #000 var(--corte, 0px)); }
.portada .comparar[data-estado="barrido"] .linea { width: 56px; transform: translateX(calc(var(--x, 0px) - 56px)); box-shadow: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(243,238,231,0) 0%, rgba(243,238,231,.07) 20%, rgba(243,238,231,.22) 38%, rgba(250,246,240,.46) 50%, rgba(243,238,231,.22) 62%, rgba(243,238,231,.07) 80%, rgba(243,238,231,0) 100%);
  -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
/* mientras dura la entrada, el «Antes» y la franja van en su propia capa: así, en cada cuadro sólo se vuelve a pintar la
   máscara y no la foto (con la CPU 4× más lenta, en 1440 se perdían 8 a 14 cuadros de 41; en su capa, 0 de 76). Al
   terminar la entrada se suelta la capa. */
html.k7 .portada .comparar:not([data-k7="hecho"]) :is(.foto.antes, .linea) { will-change: transform; }
html.js .comparar .foto.sin-js { display: none; }

/* Manija de 28 px en la esquina de abajo, al pie de la línea escondida, con doble aro (claro por dentro y azul casi negro por
   fuera). En la tableta y el celular va sobre el panel, en azul profundo (abajo, §20). En computadora, desde el 28 oct (G),
   es de 36 px, crema con borde azul profundo, y forma una sola cápsula con el aviso (§5, «Computadora»). */
.portada .manija { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(31,42,54,.22); box-shadow: none; border: 1.5px solid rgba(250,244,236,.95); outline: 1px solid rgba(31,42,54,.78); outline-offset: 0; color: #FAF4EC; z-index: 4; }
.portada .manija .ico { width: 13px; height: 13px; }
.portada .etiqueta { background: rgba(31,42,54,.74); color: #F7F4EF; z-index: 4; font-size: 12px; padding: 5px 9px; }
.portada .linea { background: rgba(247,239,230,.85); box-shadow: none; top: 76px; }   /* empieza debajo de la barra */
.portada .rango { z-index: 5; }
/* el aviso: un pie de foto abajo, en la esquina de la imagen, junto a la manija; sin caja (en computadora es una cápsula con la
   manija, abajo) */
.portada .comparar[data-aviso="esquina"] .aviso { transform: none; top: auto; left: var(--aviso-izq, auto); right: var(--aviso-der, auto); bottom: var(--aviso-abajo, 18px);
  max-width: none; width: max-content; padding: 0; border-radius: 0; background: none; box-shadow: none; z-index: 4;
  font-size: 12.5px; line-height: 1.3; font-weight: 500; letter-spacing: .02em; color: var(--aviso-color, var(--tinta)); }

@media (min-width: 721px) {
  .portada .bloque { position: absolute; z-index: 2; left: var(--bloque-x, var(--x0)); top: var(--bloque-y); width: max-content; }
  .portada h1 .l2 { padding-left: .28em; }
  .portada .accion { margin-top: var(--hueco-1); width: 304px; }
  .portada .acciones { margin-top: var(--hueco-2); }
  .portada .sub { font-size: 17px; }
  .barra { padding-left: var(--x0); }
  /* el logo, 78 px de ancho en computadora (también en la barra fija) */
  .marca img { width: 78px; }
  /* «Menú» va encima de la foto: en su pastilla crema (letra de 17.5 px y pastilla de 42 px de alto) */
  .barra:not(.fija) .menu-movil summary { height: 42px; padding: 0 16px; font-size: 17.5px; border-radius: 999px; text-decoration: none; background: rgba(243,238,231,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (min-width: 1101px) {
  .barra:not(.fija) .nav { display: none; }
  .barra:not(.fija) .menu-movil { display: block; }
}
/* Computadora (la foto a la derecha; la tableta vertical va apilada y no cambia): el párrafo en 3 renglones (22.2 em), con
   la letra que va con el titular, y nunca a menos de 40 px de las pestañas. */
@media (min-width: 721px) and (min-aspect-ratio: 2301/2000) {
  /* alineación óptica: la «C» de 80 px tiene 5 px de aire a la izquierda; así su trazo queda en la misma vertical que
     «Maricarmen Díaz», el párrafo y el botón (±2 px) */
  .portada h1 { margin-left: -.035em; }
  .portada .accion { width: auto; }
  .portada .sub { font-size: var(--sub-fs); max-width: min(22.2em, calc(var(--cara-p) - 40px - var(--bloque-x))); }
  /* G (28 oct; v5): el aviso y la manija son una sola cápsula («pegada a la pastilla del aviso como una sola pieza»,
     decisión del 28 oct §4): 36 px de alto, los de la manija, 0 px entre las dos y un solo contorno azul profundo que las
     rodea, con relleno crema opaco (--crema). Opaco y no al 92 %: detrás de la cápsula está el hombro iluminado, un tono medio, y ahí
     ni el azul profundo ni un crema translúcido llegan a 3:1 (2.98:1 en el peor punto); con el crema opaco el componente
     tiene ≥ 3.1:1 contra cualquier fondo, porque el borde (luminancia 0.044) o el relleno (0.86) siempre contrastan.
     Las dos mitades además se ven del mismo color. La manija descansa en el extremo derecho de la cápsula y ahí sólo pone
     sus flechas: el aro es el de la cápsula. Al usar el comparador recupera su relleno y su aro y viaja con la línea,
     encima del texto del aviso (S1 del Auditor v3); en reposo vuelve a su lugar. Sin vaivén. Sin JavaScript no hay
     manija, y la cápsula no le guarda lugar. */
  .portada .comparar[data-aviso="esquina"] .aviso { display: flex; align-items: center; height: 36px; padding: 0 16px; border: 1.5px solid var(--titular); border-radius: 999px; background: var(--crema); }
  /* el lugar de la manija: el texto termina 8 px antes de su aro (36 + 8 − el borde). Así el anillo del foco de teclado
     (3 + 2 px) no toca la última letra, y de la letra a las flechas quedan 18 px, casi lo mismo que de la orilla izquierda
     a la primera letra (17.5) */
  html.js .portada .comparar[data-aviso="esquina"] .aviso { padding-right: 42.5px; }
  .portada .manija { width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--crema); border: 1.5px solid var(--titular); outline: none; color: var(--titular); z-index: 5;
    transition: opacity .25s ease, transform .2s ease, background-color .2s ease, border-color .2s ease; }
  .portada .manija .ico { width: 16px; height: 16px; }
  /* en reposo (y durante la entrada, cuando no se ve) la manija no pinta relleno ni aro: los pone la cápsula */
  .portada .comparar:is([data-estado="reposo"], [data-estado="barrido"]) .manija { background-color: transparent; border-color: transparent; }
}
/* en las pantallas de densidad 1 el navegador pinta el borde de 1.5 px con 1 px, y en las diagonales del círculo se aclara
   (2.3:1 contra la pared): ahí va de 2 px, para que el borde se lea a ≥ 3:1 en toda la vuelta (la cápsula, igual) */
@media (min-width: 721px) and (min-aspect-ratio: 2301/2000) and (max-resolution: 1.49dppx) {
  .portada .manija, .portada .comparar[data-aviso="esquina"] .aviso { border-width: 2px; }
  html.js .portada .comparar[data-aviso="esquina"] .aviso { padding-right: 42px; }
}

/* ---------- 6. Mis trabajos: carrusel de Embla con fotos reales de tamaños distintos y la tarjeta del video ---------- */
.trabajos { position: relative; z-index: 2; background: var(--arena); padding: 72px 0 104px; }
.trabajos-cabeza { padding: 0 calc(var(--orilla) + 140px) 0 var(--orilla); }
.trabajos h2 { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 5.2vw, 76px); line-height: .98; letter-spacing: -0.02em; color: var(--titular); }
.trabajos-titulo > p:not(.faltas) { margin-top: 14px; font-size: 17px; color: var(--tinta-2); }
.trabajos .faltas { margin-top: 10px; }
/* las flechas van después del carrusel en el HTML (orden del teclado); en escritorio se ven arriba a la derecha, a la altura
   del título, y en el celular debajo de las fotos */
.flechas { position: absolute; top: 80px; right: var(--orilla); display: flex; gap: 12px; }
.flecha { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--titular); background: transparent; color: var(--titular); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.flecha .ico { width: 22px; height: 22px; }
.flecha:active:not(:disabled) { transform: scale(.94); }
.flecha:disabled { border-color: rgba(46,61,76,.45); color: rgba(46,61,76,.45); cursor: default; }
.flecha:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 50%; }
html:not(.js) .flechas { display: none; }
.carrusel { margin-top: 40px; padding: 0 var(--orilla); }
/* sin JavaScript (o mientras llega Embla) la tira se recorre con scroll horizontal; con Embla lista, la mueve Embla */
.carrusel-vista { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel-vista::-webkit-scrollbar { display: none; }
.carrusel.listo .carrusel-vista { overflow: hidden; scroll-snap-type: none; cursor: grab; }
.carrusel.listo .carrusel-vista:active { cursor: grabbing; }
.carrusel-vista:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.carrusel-tira { list-style: none; padding: 0; margin: 0; display: flex; align-items: flex-end; touch-action: pan-y pinch-zoom; }
.carrusel-tira .pz { flex: 0 0 auto; min-width: 0; margin-right: 20px; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: var(--radio); background: var(--panel); }
.carrusel-tira .pz:last-child { margin-right: 0; }
.carrusel-tira .pz img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* tamaños: las fotos son 4:5 y se ven enteras; el detalle de los ojos es cuadrado */
.t-g { width: 416px; height: 520px; }
.t-m { width: 352px; height: 440px; }
.t-c { width: 288px; height: 360px; }
.t-cuadro { width: 320px; height: 320px; }   /* el detalle mide 540 px: a DPR 2 no se estira más de 1.2× */
.t-video { width: 352px; height: 440px; }
.video-hueco { height: 100%; background: var(--panel); border: 1px dashed var(--linea); display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; text-align: center; border-radius: var(--radio); }
.video-hueco .ico { width: 44px; height: 44px; color: var(--titular); }
.video-hueco strong { font-weight: 600; font-size: 15px; color: var(--tinta); }
/* con movimiento: al llegar a la sección, cada foto se descubre de abajo hacia arriba, una tras otra */
.con-mov .carrusel-tira .pz img, .con-mov .carrusel-tira .video-hueco { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--sale); }
.con-mov .carrusel-tira .pz.dentro img, .con-mov .carrusel-tira .pz.dentro .video-hueco { clip-path: inset(0 0 0 0); }

/* ---------- 7. Su frase (una sola, con sus palabras) y el compacto con paralaje leve ---------- */
.frase { background: var(--crema); padding: 120px var(--orilla) 70px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; }
.frase blockquote { margin: 0; }
.frase blockquote p { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 3.9vw, 58px); line-height: 1.12; letter-spacing: -0.018em; color: var(--titular); text-wrap: balance; }
.frase figcaption { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--tinta-2); }
.frase figcaption::before { content: ""; width: 40px; height: 1px; background: var(--detalle); }
.frase-objeto { position: relative; justify-self: center; width: min(100%, 380px); }
.frase-objeto img { width: 100%; filter: drop-shadow(0 34px 28px rgba(28,30,32,.20)) drop-shadow(0 8px 8px rgba(28,30,32,.12)); transform: rotate(-9deg); }
.con-mov [data-paralaje] { transform: translateY(var(--py, 0px)); will-change: transform; }
.con-mov .frase-objeto [data-paralaje] { transform: translateY(var(--py, 0px)) rotate(-9deg); }

/* ---------- 8. Dos caminos ---------- */
.caminos { background: var(--crema); padding: 40px var(--orilla) 130px; }
.caminos .titulo { max-width: 18ch; }
.caminos-grid { margin-top: 48px; display: grid; grid-template-columns: 7fr 5fr; gap: 28px; align-items: stretch; }
.camino { display: grid; border-radius: var(--radio); background: var(--arena); overflow: hidden; }
.camino-evento { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.camino-evento .camino-foto { background: var(--topo); position: relative; }
.camino-evento .camino-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.camino-taller { grid-template-rows: auto 1fr; }
.camino-taller .camino-foto { overflow: hidden; }
.camino-taller .camino-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.camino-cuerpo { padding: 34px 34px 36px; display: grid; align-content: start; gap: 0; }
.camino .lead { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--tinta); }
.camino .incluye { margin-top: 10px; font-size: 15.5px; color: var(--tinta); }
.precios { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.precios dt { font-size: 13.5px; color: var(--tinta-2); }
.precios dd { margin: 2px 0 0; font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--titular); font-variant-numeric: lining-nums; }
.precios dd.precio-nota { margin-top: 4px; font-family: var(--texto); font-size: 13.5px; line-height: 1.4; color: var(--tinta-2); }
.nota { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }
.caminos-falta { margin-top: 22px; }
/* v10 · la ficha de cada camino (2 nov: duración, qué incluye, qué va aparte, zonas, anticipo y cupo): una etiqueta corta
   arriba de cada dato, sin rayas entre renglones; el botón y su «Falta» cierran la tarjeta, abajo. */
.camino-ficha { padding: 0 34px 36px; display: grid; align-content: start; gap: 24px; }
.ficha { display: grid; gap: 16px; align-content: start; }
.ficha > div { break-inside: avoid; }
.ficha dt { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--titular); }
.ficha dd { margin: 3px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }
.ficha dd + dd { margin-top: 4px; }
.camino-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 4px; }
.camino-pie .faltas { margin-top: 0; }
/* la tabla de clases (A1): la personalizada sola arriba y, en grupo, el precio por persona en 4 renglones con su guía de
   puntos, como una carta; el número en Playfair, igual que los precios de maquillaje */
.tarifas { display: grid; }
.tarifa-sola { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.tarifa-nombre { font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--tinta); }
.tarifa-nombre small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; color: var(--tinta-2); }
.tarifa-precio { font-family: var(--display); font-size: 24px; line-height: 1.1; color: var(--titular); font-variant-numeric: lining-nums; white-space: nowrap; }
.tarifa-sola .tarifa-precio { font-size: 30px; }
.tarifa-precio small { font-family: var(--texto); font-size: 13px; color: var(--tinta-2); }
.tarifas-cab { margin-top: 16px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--titular); }
.tarifas-grupo { list-style: none; padding: 0; margin: 6px 0 0; display: grid; }
.tarifas-grupo li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; }
.tarifa-personas { flex: 1; display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: var(--tinta); white-space: nowrap; }
.tarifa-personas::after { content: ""; flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(46,61,76,.45); transform: translateY(-4px); }

/* ---------- 9. Próximos talleres: la sección se fija y la historia avanza al bajar ---------- */
.talleres { background: var(--arena); padding-bottom: 96px; }
.talleres-pista { position: relative; }
.con-mov .talleres-pista { height: 320vh; }
.talleres-fijo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: 110px var(--orilla) 60px; }
.con-mov .talleres-fijo { position: sticky; top: 0; height: 100svh; padding-top: 68px; padding-bottom: 0; }
.talleres-visual { position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 3.4; background: var(--panel); box-shadow: 0 40px 80px -50px rgba(var(--sombra-ui),.55); }
.talleres-visual img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--z, 1)); transition: transform 1s var(--sale), transform-origin 1s var(--sale); }
.talleres-texto h2 { font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; color: var(--titular); }
.talleres-sub { margin-top: 12px; color: var(--tinta-2); }
.momentos { list-style: none; padding: 0 0 0 26px; margin-top: 34px; position: relative; display: grid; gap: 22px; }
.momentos::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--linea); }
.momentos::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--titular); transform-origin: top; transform: scaleY(var(--avance, 1)); }
.momento { display: grid; grid-template-rows: auto 1fr; transition: grid-template-rows .5s var(--sale); }
.momento h3 { transition: color .4s ease; }
.momento p { margin-top: 4px; font-size: 16px; color: var(--tinta); min-height: 0; overflow: hidden; }
/* con movimiento sólo el momento activo abre su texto; los demás quedan como títulos en un tono que sigue pasando AA */
.con-mov .momento:not(.activo) { grid-template-rows: auto 0fr; }
.con-mov .momento:not(.activo) h3 { color: color-mix(in srgb, var(--titular) 80%, var(--arena)); }
.fechas { margin: 0 var(--orilla); transform: translateY(-40px); position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--crema); border-radius: var(--radio); padding: 30px 34px; box-shadow: 0 30px 60px -40px rgba(var(--sombra-ui),.45); }
.fechas[hidden] { display: none; }
.con-mov .fechas, .con-mov .fechas-lista { transform: none; margin-top: -24px; }
.fechas-cal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--arena); color: var(--titular); }
.fechas-cal .ico { width: 28px; height: 28px; }
.fechas h3 { font-size: 24px; }
.fechas-cuerpo > p:not(.faltas) { margin-top: 6px; color: var(--tinta-2); font-size: 15.5px; }
/* con fechas (talleres.json): una tarjeta por fecha, con su propio botón */
.fechas-lista { list-style: none; margin: 0 var(--orilla); padding: 0; transform: translateY(-40px); position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fechas-lista[hidden] { display: none; }
.fecha { display: grid; gap: 10px; align-content: start; background: var(--crema); border-radius: var(--radio); padding: 26px 28px 28px; box-shadow: 0 30px 60px -40px rgba(var(--sombra-ui),.45); }
.fecha[hidden] { display: none; }
.fecha-dia { font-family: var(--display); font-size: 28px; line-height: 1.1; color: var(--titular); }
.fecha-datos { font-size: 15.5px; color: var(--tinta-2); }
.fecha-precio { font-weight: 600; color: var(--tinta); }
.fecha-cupo { font-size: 14.5px; font-weight: 600; color: var(--titular); }
.fecha .boton { justify-self: start; margin-top: 6px; }
.fechas-pie { margin: -16px var(--orilla) 0; }
.pago-linea { margin: 18px var(--orilla) 0; }

/* ---------- 10. Lo que dicen mis clientas (la única banda oscura, en su azul profundo) ---------- */
.banda { position: relative; overflow: hidden; background: var(--banda); color: var(--banda-tinta); padding: 124px var(--orilla); isolation: isolate; }
.banda-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; z-index: -1; opacity: .92; }
.banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--banda) 86%, transparent) 0, color-mix(in srgb, var(--banda) 70%, transparent) 55%, color-mix(in srgb, var(--banda) 40%, transparent) 100%); }
.banda .titulo, .banda h3 { color: var(--banda-tinta); }
.banda-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 72px; align-items: start; }
.opiniones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.opinion { border: 1px dashed var(--banda-linea); background: color-mix(in srgb, var(--banda) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--radio); padding: 20px 22px; min-height: 130px; display: grid; align-content: space-between; gap: 10px; }
.opinion-grande { grid-column: 1 / -1; min-height: 190px; }
.comillas { font-family: var(--display); font-size: 54px; line-height: .6; color: var(--detalle); }
.opinion-hueco { font-size: 15px; color: var(--banda-tinta-2); }
.banda .falta { color: var(--banda-tinta); }
/* reseñas con permiso (28 oct §10): la tarjeta llena va con borde continuo; el punteado queda sólo para el lugar que falta */
.opinion.con-texto { margin: 0; border-style: solid; }
.opinion-texto { margin: 0; }
.opinion-texto p { font-family: var(--display); font-size: 19px; line-height: 1.45; color: var(--banda-tinta); text-wrap: pretty; }
.opinion-grande .opinion-texto p { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
.opinion-firma { font-size: 13.5px; line-height: 1.45; letter-spacing: .02em; color: var(--banda-tinta-2); }
.opinion-nombre { display: block; font-weight: 600; color: var(--banda-tinta); }
.opinion-sep { display: none; }
/* v10.6 (decisión 60, sugerencia 1 aceptada): en lugar de las reseñas de Google que todavía no existen, la invitación a
   contarle cómo le fue (WhatsApp) y sus clientas en Instagram. Botón claro sobre la banda: crema con texto azul profundo. */
/* en computadora va en la columna del título, debajo de él; de 1100 para abajo, después de los testimonios */
.opina { display: grid; justify-items: start; gap: 18px; max-width: 26em; }
@media (min-width: 1101px) {
  .banda-dentro { grid-template-rows: auto 1fr; }
  .banda-cab { grid-column: 1; grid-row: 1; }
  .opiniones-grid { grid-column: 2; grid-row: 1 / span 2; }
  .opina { grid-column: 1; grid-row: 2; }
}
.opina-frase { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--banda-tinta); }
.boton-claro { background: var(--banda-tinta); color: var(--titular); }
.opina-ig { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--banda-tinta); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--banda-linea); }
.opina-ig .ico { width: 18px; height: 18px; }
/* v10.7 (AUDIT-v10.6 B1): el anillo del foco general es azul profundo, el mismo color de la banda: aquí no se veía (1.0–1.11:1).
   Dentro de la banda el anillo es crema (--banda-tinta), ~9.6:1 sobre el azul. Sólo cambia el color del foco; el reposo no. */
.banda :focus-visible { outline-color: var(--banda-tinta); }

/* ---------- 11. Hola, soy Maricarmen ---------- */
.sobre { background: var(--crema); padding: 130px var(--orilla); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
/* v10.2 (decisión del 3 nov): el arco es una ventana. v10.4 (decisión del 4 nov): adentro, su foto de la sesión profesional
   (1-1, a color, 4 : 5.6, la proporción del arco) llena todo el arco; sin pared ni rectángulo. Al tocar «Mira cómo me
   maquillo», el tutorial corre ahí mismo, sin sonido (sitio.js §9.2). La foto chica (la 1-2 de la sesión, en blanco y negro,
   con las brochas; antes iba la foto con su mamá y la clase se quedó .sobre-mama) va encimada en la esquina de abajo a
   la derecha. Todo se mide contra el ancho del bloque (unidades cqw del contenedor .sobre-arte):
   - el arco mide 90 cqw de ancho y 126 cqw de alto; el botón va montado en su orilla de abajo, a la izquierda (centro en 126 cqw);
   - con el bloque de 480 px o más (computadora, como el boceto), la foto chica cuelga de la esquina: 29 cqw, su orilla
     izquierda en 71 cqw (el 79 % del arco, donde ya es cabello) y 6 cqw abajo del arco; el botón termina antes de ella;
   - con menos de 480 px (celular y tableta) el botón y la foto chica no caben en el mismo renglón: la foto (27 cqw) sube y
     queda arriba del botón, a 10 px, con su orilla izquierda en 73 cqw (el 81 % del arco, a un lado de la oreja).
   Tope: el arco no pasa de 536 px (v10.4: se queda ese tamaño; la 1-1 se publica hasta 1600 px, así que ya no se estira). */
.sobre-arte { position: relative; container-type: inline-size; width: 100%; max-width: 595px; }
.sobre-foto { position: relative; width: 90%; aspect-ratio: 4 / 5.6; margin-bottom: 26px; border-radius: 999px 999px var(--radio) var(--radio); overflow: hidden; background: var(--panel); box-shadow: 0 40px 80px -56px rgba(var(--sombra-ui),.6); }
.sobre-foto img, .sobre-foto video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* v10.5 (AUDIT-v10.4 H1): de la foto de estudio (fondo gris oscuro) al tutorial (pared crema) y de regreso cambia mucho la
   luz; el fundido dura 0.7 s, sólo opacidad, para que no se lea como un corte. Curva «ease» (la de color, §8.1 regla 4) y no
   el ease-out fuerte: el ease-out hace 55 % del cambio en los primeros 100 ms (salto de ~43/255 de luz media) y «ease» lo
   reparte (≤ 25/255 por cada 100 ms). Con «reducir movimiento», cambio directo (§21). */
.sobre-foto video { display: none; opacity: 0; background: transparent; transition: opacity .7s ease; }
/* v10.4 (decisión del 4 nov): la foto del arco es la 1-1 de la sesión, ya no un cuadro del tutorial. El video (1080 × 1512,
   la misma proporción 4 : 5.6 del arco) se ve con su cuadro completo, centrado (object-fit: cover, arriba): sin el recorte del
   póster viejo. Al terminar, el fundido regresa a la 1-1. */
.sobre-arte[data-estado] .sobre-foto video { display: block; }
.sobre-arte[data-estado="corre"] .sobre-foto video, .sobre-arte[data-estado="pausa"] .sobre-foto video { opacity: 1; }
.sobre-mama { position: absolute; z-index: 1; right: 0; top: calc(92.25cqw - 34px); width: 27cqw; margin: 0; padding: clamp(4px, 1.1cqw, 7px); background: var(--crema); border-radius: var(--radio); box-shadow: 0 22px 44px -24px rgba(var(--sombra-ui),.65), 0 0 0 1px rgba(46,61,76,.06); transition: opacity .3s var(--ease-out); }
/* mientras corre el tutorial, la foto chica se aparta (un fundido): el video ocupa todo el arco y nada le tapa la cara ni las manos */
.sobre-arte[data-estado="corre"] .sobre-mama, .sobre-arte[data-estado="pausa"] .sobre-mama { opacity: 0; pointer-events: none; }
.sobre-mama picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--panel); }
.sobre-mama img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* el botón: cápsula crema montada en la orilla de abajo del arco, con el disco azul pizarra y el ícono de reproducir */
.tutorial-boton { position: absolute; z-index: 2; left: 4cqw; top: 126cqw; translate: 0 -50%; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 15px 6px 6px; border-radius: 999px; background: var(--crema); color: var(--titular); text-decoration: none; white-space: nowrap; box-shadow: 0 14px 30px -16px rgba(var(--sombra-ui),.6), 0 0 0 1px rgba(46,61,76,.14); touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color .2s ease, transform .16s var(--ease-out); }
.tutorial-disco { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--boton); color: var(--boton-texto); }
.tutorial-disco .ico { width: 14px; height: 14px; margin-left: 2px; }
.ico-play-lleno { --m: url(../icons/phosphor/fill/play-fill.svg); }
.tutorial-texto { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.tutorial-dura { font-size: 12px; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tutorial-boton:active { transform: scale(.97); }
/* v10.7 (AUDIT-v10.6 S1): el botón va montado en la orilla del arco, mitad sobre la foto (casi negra) y mitad sobre crema;
   el anillo azul profundo solo daba 1.89:1 sobre la foto. Anillo doble con la misma cápsula del botón: crema por dentro
   (outline de 2 px, 17.7:1 sobre la foto) y azul pizarra por fuera (sombra hasta 7 px; 3.3:1 sobre la foto casi negra,
   5.4:1 sobre crema y 3.5:1 sobre la crema que oscurece la sombra del botón). El azul profundo por fuera daba 1.84:1 sobre la
   foto y el anillo medido no pasaba de 3:1. Las dos sombras del reposo siguen igual. */
.tutorial-boton:focus-visible { outline: 2px solid var(--crema); outline-offset: 2px; border-radius: 999px; box-shadow: 0 14px 30px -16px rgba(var(--sombra-ui),.6), 0 0 0 1px rgba(46,61,76,.14), 0 0 0 7px var(--boton); }
.tutorial-boton[hidden] { display: none; }
/* mientras se pide el video: el disco late (sin movimiento con «reducir movimiento») */
.sobre-arte[data-estado="cargando"] .tutorial-disco .ico { animation: tutorial-late 0.9s ease infinite alternate; }
@keyframes tutorial-late { to { opacity: .35; } }
/* mientras corre: la pausa, redonda, en el lugar del disco */
.tutorial-pausa { left: calc(4cqw + 2px); right: auto; top: 126cqw; bottom: auto; translate: 0 -50%; display: none; opacity: 1; transition: opacity .2s var(--ease-out), background-color .2s ease, transform .16s var(--ease-out); }
.tutorial-pausa:not([hidden]) { display: grid; }
@starting-style { .tutorial-pausa:not([hidden]) { opacity: 0; } }
@container (min-width: 480px) {
  .sobre-foto { margin-bottom: max(6cqw, 26px); }
  .sobre-mama { top: 95.75cqw; width: 29cqw; }
  .tutorial-boton { gap: 10px; min-height: 48px; padding-right: 18px; }
  .tutorial-disco { width: 36px; height: 36px; }
  .tutorial-texto { font-size: 15px; }
  .tutorial-dura { font-size: 12.5px; }
}
.sobre-texto .titulo { margin-bottom: 26px; }
.sobre-cita p { font-family: var(--display); font-size: 23px; line-height: 1.45; color: var(--titular); }
.sobre-texto > p:not(.faltas) { margin-top: 20px; color: var(--tinta); }

/* ---------- 12. Cómo es una cita (la franja en topo cálido) ---------- */
.proceso { background: var(--topo); padding: 110px var(--orilla); }
.proceso .titulo { color: var(--titular); }
.pasos { list-style: none; padding: 0; margin-top: 50px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: paso; position: relative; }
.paso { position: relative; padding: 34px 30px 0 0; border-top: 1px solid rgba(31,42,54,.32); counter-increment: paso; }
.paso::before { content: counter(paso); position: absolute; top: -17px; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--topo); border: 1px solid var(--titular); color: var(--titular); font-size: 14px; font-weight: 600; display: grid; place-items: center; }
.paso p { margin-top: 10px; font-size: 15.5px; color: var(--tinta); }
/* v10 (A8): anticipo, cambio de fecha y cancelación, en tres columnas sobre crema (una debajo de otra en el celular) */
.politicas { margin-top: 56px; padding: 26px 30px 28px; border-radius: var(--radio); background: var(--crema); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; }
.politicas dt { font-size: 15px; font-weight: 600; color: var(--titular); }
.politicas dd { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta); }

/* ---------- 13. Cómo cuido tu piel ---------- */
.higiene { position: relative; min-height: 640px; display: grid; align-items: center; padding: 100px var(--orilla); overflow: hidden; isolation: isolate; background: var(--arena); }
.higiene-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -1; }
.higiene-texto { max-width: 440px; }
.higiene .titulo, .higiene .falta { color: var(--titular); }
/* v10 (B3): «Las marcas que uso», sólo texto: dos tiras de nombres con separadores finos, sobre la pared lisa de la foto */
.marcas { margin-top: 24px; }
.marcas h3 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--titular); }
.marcas-grupo { margin-top: 14px; }
.marcas-cab { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--titular); }
/* cada nombre lleva su separador delante; el del primer nombre de cada renglón queda fuera del grupo (overflow), así ningún
   renglón empieza ni termina con una raya */
.marcas-grupo { overflow: hidden; }
.marcas-lista { list-style: none; padding: 0; margin: 4px 0 0 calc(-1.24em - 1px); display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 15px; }
.marcas-lista li { line-height: 1.6; font-weight: 500; color: var(--tinta); white-space: nowrap; }
.marcas-lista li::before { content: ""; display: inline-block; width: 1px; height: .8em; margin: 0 .62em; vertical-align: -.06em; background: rgba(46,61,76,.4); }
/* v8: sus fotos reales (productos y brochas) en su propio bloque, debajo del título; la foto de fondo (ambiente) no cambia */
.higiene { align-content: center; row-gap: 36px; }
/* el ancho sigue a la foto de fondo: las 2 fotos quedan sobre la pared lisa, sin tapar los objetos de la derecha (1101 a 1440+) */
.higiene-fotos { display: grid; grid-template-columns: repeat(2, clamp(220px, 19.5vw, 280px)); gap: 16px; }
.higiene-fotos picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radio); background: var(--panel); box-shadow: 0 22px 44px -28px rgba(var(--sombra-ui), .6); }
.higiene-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* v10: con las marcas, el texto ya no cabe en la pared lisa de la tableta; de 721 a 1100 la foto de ambiente va como banda
   arriba (como en el celular) y abajo el texto y las 2 fotos lado a lado */
@media (min-width: 721px) and (max-width: 1100px) {
  .higiene { min-height: 0; padding: 0 0 84px; row-gap: 0; align-items: end; background: var(--arena); }
  .higiene-fondo { position: relative; height: clamp(320px, 42vw, 440px); object-position: 74% 50%; }
  .higiene-texto { padding: 44px var(--orilla) 0; max-width: none; }
  .higiene-texto .marcas { max-width: 64ch; }
  .higiene-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 34px var(--orilla) 0; }
}
@media (max-width: 720px) { .higiene { row-gap: 0; } .higiene-fotos { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 20px 0; } }

/* ---------- 14. Aprende conmigo ---------- */
.aprende { background: var(--crema); padding: 120px var(--orilla); }
.aprende-grid { margin-top: 46px; display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: 18px; align-items: stretch; }
.aprende-grid .pieza-guia { grid-row: 1 / span 2; }
.aprende-grid .pieza:not(.pieza-guia) { align-content: center; }
.pieza { border-radius: var(--radio); background: var(--arena); padding: 30px; display: grid; align-content: start; gap: 10px; }
.pieza .ico { width: 30px; height: 30px; color: var(--boton); }
.pieza-guia { background: var(--topo); padding: 0 40px 40px; }
.pieza-foto { margin: 0 -40px 14px; overflow: hidden; aspect-ratio: 16 / 8; }
.pieza-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.pieza-guia .ico { color: var(--titular); }
.pieza-guia h3 { font-size: 34px; }
.pieza-guia p:not(.faltas) { max-width: 46ch; color: var(--tinta); }
/* v10.6 (decisión 60 y las 3 piezas de «Aprende conmigo» del 4 nov): cada pieza termina con su botón (la guía,
   que por ahora va a Instagram; el regalo por WhatsApp; compartir la página) */
.pieza > p:not(.faltas) { color: var(--tinta); }
.pieza > p.pieza-chica { font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }   /* la condición del regalo por recomendar */
.pieza { grid-template-columns: minmax(0, 1fr); }
/* el botón nunca pasa del ancho de su tarjeta: si no cabe en un renglón (tableta, 320 px), usa dos */
.pieza .boton { justify-self: start; margin-top: 8px; max-width: 100%; white-space: normal; height: auto; min-height: 52px; padding-block: 12px; line-height: 1.3; }
.pieza .boton .ico { width: 20px; height: 20px; color: inherit; }
.pieza-guia .boton { background: var(--boton-topo); }
/* v10.6: en la tableta (721–1100) las piezas del regalo y de recomiéndame son más altas que la guía; para que la guía no quede
   con un hueco abajo, va a todo el ancho y las otras dos, lado a lado debajo */
@media (min-width: 721px) and (max-width: 1100px) {
  .aprende-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* la guía a lo ancho, con su foto a la izquierda (a la mitad, para que la foto de 1200 px no se estire: lección S6) */
  .aprende-grid .pieza-guia { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(4, auto) 1fr; column-gap: 32px; padding: 32px 32px 32px 0; }
  .pieza-guia .pieza-foto { grid-column: 1; grid-row: 1 / -1; margin: -32px 0; aspect-ratio: auto; min-height: 300px; }
  .pieza-guia > .ico { grid-column: 2; grid-row: 2; }
  .pieza-guia > h3 { grid-column: 2; grid-row: 3; }
  .pieza-guia > p { grid-column: 2; grid-row: 4; }
  .pieza-guia > .boton { grid-column: 2; grid-row: 5; }
  .aprende-grid .pieza:not(.pieza-guia) { align-content: start; }
}

/* ---------- 15. Preguntas, en vidrio ---------- */
.preguntas { position: relative; padding: 120px var(--orilla); overflow: hidden; isolation: isolate; background: var(--arena); }
.preguntas-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* velo claro del lado del título: la foto se sigue viendo detrás del vidrio y el título no cae sobre hojas oscuras */
.preguntas::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--crema) 86%, transparent) 0, color-mix(in srgb, var(--crema) 72%, transparent) 34%, transparent 58%); }
.preguntas-dentro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.preguntas .titulo { position: sticky; top: 110px; }
.vidrio { border-radius: var(--radio); background: var(--vidrio); border: 1px solid var(--vidrio-borde); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 30px 70px -40px rgba(var(--sombra-ui),.4); padding: 8px 30px; }
@media (prefers-reduced-transparency: reduce) { .vidrio { background: var(--crema); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.vidrio details { border-bottom: 1px solid var(--linea); }
.vidrio details:last-child { border-bottom: 0; }
.vidrio summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; font-weight: 600; font-size: 16.5px; color: var(--tinta); }
.vidrio summary::-webkit-details-marker { display: none; }
.vidrio summary .ico { width: 18px; height: 18px; color: var(--titular); transition: transform .3s var(--sale); }
.vidrio details[open] summary .ico { transform: rotate(45deg); }
/* la respuesta entra con un fundido corto; la altura cambia de inmediato */
.respuesta { padding: 0 34px 22px 0; color: var(--tinta); font-size: 16px; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.respuesta p + p { margin-top: 10px; }   /* v10: respuestas de 2 párrafos («¿Cuánto cuesta?», «¿Qué marcas usas?») */
@starting-style { .vidrio details[open] > .respuesta { opacity: 0; transform: translateY(-4px); } }

/* ---------- 16. Arma tu cita: el armador y, a su lado, su mesa de trabajo ---------- */
.cita { background: var(--arena); padding: 120px var(--orilla); }
.cita-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.cita-cab p { margin-top: 14px; color: var(--tinta-2); }
.cita-controles { margin-top: 40px; }
.grupo { border: 0; padding: 0; margin: 0 0 26px; }
.grupo legend, .grupo > label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 12px; color: var(--tinta); }
.grupo > label { display: flex; align-items: center; min-height: 44px; margin: -10px 0 2px; }
.grupo { min-width: 0; min-inline-size: 0; }
.grupo[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--radio); border: 1px solid rgba(46,61,76,.34); background: var(--crema); font-size: 15px; font-weight: 500; color: var(--tinta); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.chip:active span { transform: scale(.97); }
.chip input:checked + span { background: var(--titular); border-color: var(--titular); color: var(--crema); }
/* v10 (A3): el campo de personas va de 2 a 8; la ayuda lo dice debajo */
.campo-ayuda { margin-top: 8px; font-size: 13.5px; color: var(--tinta-2); }
.campo { height: 50px; width: min(280px, 100%); padding: 0 14px; border-radius: var(--radio); border: 1px solid color-mix(in srgb, var(--tinta) 45%, transparent); background: var(--crema); color: var(--tinta); font: inherit; font-size: 16px; accent-color: var(--titular); }
.cita-visual { position: relative; }
.cita-foto { position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -50px rgba(var(--sombra-ui),.55); }
.cita-foto img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 40% 50%; }
.tarjeta-cita { position: absolute; left: -64px; bottom: 44px; width: min(360px, 82%); border-radius: var(--radio); background: var(--crema); padding: 28px; display: grid; gap: 16px; box-shadow: 0 36px 70px -36px rgba(var(--sombra-ui),.5); }
.burbuja { background: var(--arena); color: var(--tinta); border-radius: var(--radio) 14px 14px 14px; padding: 16px 18px; font-size: 15.5px; line-height: 1.5; }
.tarjeta-cita .boton { justify-self: start; }
/* El aviso de privacidad simplificado, en un desplegable al pie de la tarjeta (CD v1.1): se abre sin JavaScript; el texto
   entra con un fundido corto y la altura cambia de inmediato, como las preguntas. */
.aviso-plegable { border-top: 1px solid var(--linea); }
.aviso-plegable summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.aviso-plegable summary::-webkit-details-marker { display: none; }
.aviso-plegable summary .ico { width: 16px; height: 16px; color: var(--titular); transition: transform .3s var(--sale); }
.aviso-plegable[open] summary .ico { transform: rotate(45deg); }
.aviso-plegable p { padding: 4px 0 2px; font-size: 13px; line-height: 1.6; color: var(--tinta); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@starting-style { .aviso-plegable[open] > p { opacity: 0; transform: translateY(-4px); } }
.aviso-plegable a, .aviso-corto a { color: var(--titular); font-weight: 600; text-decoration: underline; text-decoration-color: var(--detalle); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 17. Pie y barra de WhatsApp del celular ---------- */
.pie { background: var(--arena); padding: 80px var(--orilla) 40px; }
.pie-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 48px; }
.pie-marca img { width: 170px; height: auto; }
.pie h3 { font-size: 22px; margin-bottom: 12px; }
.pie p:not(.faltas) { font-size: 15px; color: var(--tinta); margin-top: 6px; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.pie ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 500; color: var(--tinta); text-underline-offset: 5px; }
.legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--tinta); }
/* el aviso de privacidad simplificado, tal cual, con su enlace a la página del aviso integral */
.pie p.aviso-corto { margin-top: 12px; max-width: 104ch; font-size: 13.5px; line-height: 1.6; color: var(--tinta); }
/* la barra de WhatsApp y su colchón sólo existen en el celular (elemento 3) */
.pildora, .pie-colchon { display: none; }
/* «Mi estudio» (v10, C6): el recorrido en video es la pieza principal y sus 2 fotos reales (5337 y 5340, los mismos archivos)
   lo acompañan, una arriba de otra, a su lado: miden la mitad de ancho del video menos 6.4 px, así las dos juntas (más su
   separación de 16 px) llegan justo al alto del video y todo queda en 4:5 sin recorte. En computadora (≥ 1101): el texto a
   la izquierda, centrado; de 721 a 1100: el texto arriba y debajo el video con las fotos; en el celular, el video a lo ancho
   y las 2 fotos lado a lado debajo. El lugar del video mide 4:5 desde el principio (sin salto). */
.estudio-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--panel); }
.estudio-foto picture { display: block; width: 100%; height: 100%; }
.estudio-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.estudio-video { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--panel); box-shadow: 0 34px 70px -44px rgba(var(--sombra-ui),.6); }
.estudio-video picture, .estudio-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.estudio-video img, .estudio-video video { width: 100%; height: 100%; object-fit: cover; }
/* el video y su botón sólo existen cuando el JavaScript lo puso a correr (data-modo="video"); sin JavaScript o con «reducir
   movimiento» se ve la imagen fija */
.estudio-video video, .estudio-video .video-pausa { display: none; }
.estudio-video[data-modo="video"] video { display: block; }
.estudio-video[data-modo="video"] .video-pausa { display: grid; }
.video-pausa { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; place-items: center; background: rgba(243,238,231,.88); color: var(--titular); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(var(--sombra-ui),.7), 0 0 0 1px rgba(46,61,76,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .2s ease, transform .16s var(--ease-out); }
.video-pausa .ico { width: 18px; height: 18px; }
.video-pausa:active { transform: scale(.97); }
.video-pausa:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 50%; }
@media (min-width: 721px) {
  .pie-grid { grid-template-areas: "marca . escribe" "estudio estudio estudio"; row-gap: 64px; }
  .pie-marca { grid-area: marca; }
  .pie-escribe { grid-area: escribe; }
  .estudio { grid-area: estudio; display: grid; gap: 16px; }
  .estudio-video { grid-row: 2 / span 2; grid-column: 1; }
  .estudio > .estudio-foto { grid-column: 2; }
  .estudio-texto { grid-column: 1 / -1; grid-row: 1; max-width: 62ch; margin-bottom: 10px; }
  /* el video, a lo más 604 px: su archivo mide 1080 y con DPR 2 no se estira más de 1.12× (lección S6) */
  .estudio { --wv: min(calc((100% - 9.6px) / 1.5), 604px); grid-template-columns: var(--wv) calc(var(--wv) / 2 - 6.4px); }
}
@media (min-width: 1101px) {
  .estudio { --wv: min(38vw, 540px); grid-template-columns: minmax(0, 1fr) var(--wv) calc(var(--wv) / 2 - 6.4px); }
  .estudio-texto { grid-column: 1; grid-row: 1 / span 2; align-self: center; max-width: 34ch; margin: 0 32px 0 0; }
  .estudio-video { grid-column: 2; grid-row: 1 / span 2; }
  .estudio > .estudio-foto { grid-column: 3; }
}
@media (max-width: 720px) {
  .estudio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .estudio-texto { grid-column: 1 / -1; margin-bottom: 8px; }
  .estudio-video { grid-column: 1 / -1; }
}

/* ---------- 18. Antes y después de clientas (sólo con pares autorizados en galeria.json) ---------- */
.antes-despues { background: var(--crema); padding: 100px var(--orilla); }
.ad-lista { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 28px; }
.ad-par { margin: 0; display: grid; gap: 12px; }
.ad-marco { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--panel); aspect-ratio: 4 / 5; }
.ad-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-marco .ad-antes { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ad-marco .ad-linea { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: rgba(250,248,245,.92); pointer-events: none; }
.ad-etiquetas { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.ad-rango { width: 100%; height: 44px; accent-color: var(--titular); }

/* ---------- 19. Hover sólo con puntero real (en el celular el toque dispararía hovers falsos) ---------- */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--boton-hover); }
  .sobre-topo .boton:hover, .pieza-guia .boton:hover { background: var(--boton-topo-hover); }
  .boton-claro:hover { background: #FFFFFF; }
  .opina-ig:hover { text-decoration-color: currentColor; }
  .nav > a:not(.boton):hover { text-decoration: underline; }
  .flecha:hover:not(:disabled) { background: var(--titular); color: var(--crema); }
  .pie ul a:hover { text-decoration: underline; }
  .chip:hover input:not(:checked) + span { border-color: var(--titular); }
  .video-pausa:hover { background: var(--crema); }
  .tutorial-boton:hover { background: #FAF7F2; }
  .tutorial-boton:hover .tutorial-disco { background: var(--boton-hover); }
  .portada .a-talleres a:hover .a-talleres-texto, .aviso-plegable a:hover, .aviso-corto a:hover { text-decoration-color: var(--titular); }
  .portada .a-talleres a:hover .flecha-texto { transform: translateX(3px); }
}

/* ---------- 20. Tableta y celular ---------- */
/* Pantallas más altas que anchas arriba de 720 px (la tableta en vertical): la portada de computadora no cabe (la cara se
   saldría por la derecha), así que va apilada como en el celular, con la foto de escena encuadrada como se dice abajo; abajo,
   el bloque. */
@media (min-width: 721px) and (max-aspect-ratio: 23/20) {
  /* se ven las filas 0 a 3100 del original (la coronilla con su aire, la cara y la brocha); la orilla derecha es la x 4890. */
  .portada { --alto: auto; --caja: clamp(520px, calc(100svh - 380px), 1100px); --hf: calc(var(--caja) * 1.094194);
    --izq: calc(100vw - var(--hf) * 1.441627); --arriba: 0px; --fs: clamp(50px, 7.2vw, 68px);
    --aviso-der: 60px; --aviso-abajo: 20px; --aviso-color: #2E3D4C;
    height: auto; overflow: visible; padding-bottom: 44px; background: var(--panel-portada); }
  .portada .comparar { position: relative; inset: auto; height: var(--caja); overflow: hidden; }
  /* la unión de la foto (retoque A, CD v1.1): el panel es el tono de la pared y el degradado empieza 12 px bajo la barbilla
     (fila 2520 = 81.29 % del alto), con una curva suave de 72 px; abajo, panel liso. */
  .portada .fundido { display: block; position: absolute; left: 0; right: 0; top: calc(81.29% + 12px); bottom: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(232,223,211,0) 0px, rgba(232,223,211,.03) 7.2px, rgba(232,223,211,.1) 14.4px, rgba(232,223,211,.2) 21.6px, rgba(232,223,211,.33) 28.8px, rgba(232,223,211,.5) 36px, rgba(232,223,211,.67) 43.2px, rgba(232,223,211,.8) 50.4px, rgba(232,223,211,.9) 57.6px, rgba(232,223,211,.97) 64.8px, rgba(232,223,211,1) 72px, var(--panel-portada) 100%); }
  /* el aviso, sobre el panel: sin caja */
  .portada .comparar[data-aviso="esquina"] .aviso { padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .portada .manija { background: rgba(243,238,231,.55); border-color: var(--titular); outline: none; color: var(--titular); }
  .portada .comparar[data-estado="barrido"] .linea { bottom: 56px; }
  .portada .bloque { position: static; width: auto; padding: 18px var(--x0) 0; }
  .portada h1 .l2 { padding-left: .5em; }
  .portada .accion { margin-top: 18px; width: auto; max-width: 34em; }
  .portada .acciones { margin-top: 22px; }
}
/* Tableta: los dos caminos uno debajo del otro, cada uno con su foto a la izquierda */
@media (min-width: 721px) and (max-width: 1000px) {
  .caminos-grid { grid-template-columns: minmax(0, 1fr); }
  .camino-taller { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; }
  .camino-taller .camino-foto img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 46px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  /* reseñas: el título arriba y las tarjetas a todo el ancho, para que la chica no quede en una columna de 150 px */
  .banda-dentro { grid-template-columns: minmax(0, 1fr); }
  /* v7.1 (AUDIT-v7 B1): los letreros, uno por renglón como en el celular, para que queden en el lado oscuro y no sobre la peonía */
  .banda .faltas { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-movil { display: block; }
  .barra.fija .menu-movil summary { text-decoration: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 0; scroll-padding-bottom: 84px; }
  /* la barra va encima de la foto, sin franja; el logo y «Menú» en sus pastillas crema */
  .barra, .barra.fija { position: absolute; inset: 0 0 auto 0; height: 60px; padding: 0 20px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .marca span { display: none; }
  .barra .marca, .barra .menu-movil summary { background: rgba(243,238,231,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; }
  .barra .marca { min-height: 46px; padding: 0 12px; }
  .barra .marca img { width: 57px; }
  .barra .menu-movil summary { height: 46px; padding: 0 19px; font-size: 17.5px; color: var(--tinta); text-decoration: none; }
  .boton-grande { height: 54px; padding: 0 24px; }
  .secundario { font-size: 15px; }
  .titulo { font-size: 34px; }
  .manija { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .aviso, .etiqueta { font-size: 12px; }

  /* la portada: la foto a sangre desde arriba (3:4) con el logo y «Menú» encima; abajo se funde con el panel del bloque,
     sin línea de corte; el aviso y la manija dentro de la imagen, en su esquina de abajo, sobre el fundido; luego el
     titular, el párrafo y el botón. Retoque A (CD v1.1), con la modelo nueva (v1.2): el panel es el tono de la pared en la
     unión (--panel-portada #E8DFD3, ΔE 0.5-0.8) y el degradado es una curva suave de 11 pasos del 78.2 % al 86.7 % del alto
     de la foto (44 px en 390), justo bajo la barbilla (77.5 %). Recorte movil-cerca: x 2440-4880, y 0-3253 del original (3:4). */
  .portada { --alto: auto; --fs: calc((100vw - 40px) / 7.6);
    --aviso-izq: auto; --aviso-der: 54px; --aviso-abajo: 18px; --aviso-color: #2E3D4C;
    height: auto; overflow: visible; padding-bottom: 30px; background: var(--panel-portada); }
  .portada .comparar { position: relative; inset: auto; height: 133.333vw; overflow: hidden; }
  /* E+ (K9, aprobado el 26 oct): en los celulares bajos (iPhone con las barras de Safari) la foto sube lo justo para que
     la barra de WhatsApp, que ahí sale desde el inicio, quede a unos 12 px de la tinta de «Yo te maquillo.»; tope de 40 px.
     La orilla de abajo del titular está en 158.596vw (foto de 133.333vw + 10 px + 2 renglones de .96 × (100vw − 40px) / 7.6)
     y la cola de la «q» baja unos 5 px más; la barra mide 44 px más el área segura. Se calcula en CSS, sin esperar al
     JavaScript, para que la portada no brinque después de pintarse: 15 px en 390 × 664, 25 en 393 × 659, 0 en 390 × 844.
     Sin JavaScript no hay barra, así que tampoco sube (html.js). */
  .portada { --subir: clamp(0px, calc(158.596vw + 61px + env(safe-area-inset-bottom, 0px) - 100svh), 40px); }
  html.js .portada .comparar { margin-top: calc(var(--subir) * -1); }
  .portada .foto { left: 0; top: 0; width: 100%; height: 100%; }
  .portada .comparar { background: none; }
  .portada .foto { -webkit-mask: none; mask: none; }
  .portada .fundido { display: block; position: absolute; left: 0; right: 0; top: 78.2%; bottom: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(232,223,211,0) 0.00%, rgba(232,223,211,0.03) 3.88%, rgba(232,223,211,0.1) 7.76%, rgba(232,223,211,0.2) 11.64%, rgba(232,223,211,0.33) 15.53%, rgba(232,223,211,0.5) 19.41%, rgba(232,223,211,0.67) 23.29%, rgba(232,223,211,0.8) 27.17%, rgba(232,223,211,0.9) 31.05%, rgba(232,223,211,0.97) 34.93%, rgba(232,223,211,1) 38.81%, var(--panel-portada) 100%); }
  /* sobre el fundido, la manija va en azul profundo (contraste ≥ 3:1) */
  .portada .manija { background: rgba(243,238,231,.55); border-color: var(--titular); outline: none; color: var(--titular); }
  .portada .bloque { position: static; }
  .portada .texto, .portada .accion { position: relative; width: auto; padding: 0 20px; }
  .portada .texto { margin-top: 10px; }
  .portada h1 .l2 { padding-left: .5em; }
  .portada .sub { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .portada .acciones { margin-top: 16px; gap: 4px 22px; }
  .portada .comparar[data-aviso="esquina"] .aviso { font-size: 12px; }
  html.js .portada .linea { top: calc(60px + var(--subir)); }   /* la línea del barrido empieza debajo del logo y «Menú» */
  .portada .linea { top: 60px; }
  .portada .comparar[data-estado="barrido"] .linea { bottom: 50px; }

  .trabajos { padding: 56px 0 72px; }
  .trabajos-cabeza { padding: 0 20px; }
  .trabajos h2 { font-size: 44px; }
  .trabajos-titulo > p:not(.faltas) { font-size: 15.5px; }
  .flechas { position: static; justify-content: flex-end; margin: 16px 20px 0; }
  .flecha { width: 44px; height: 44px; }
  .carrusel { margin-top: 24px; padding: 0 20px; }
  .carrusel-tira .pz { margin-right: 12px; }
  .t-g { width: 304px; height: 380px; }
  .t-m { width: 264px; height: 330px; }
  .t-c { width: 224px; height: 280px; }
  .t-cuadro { width: 210px; height: 210px; }   /* a DPR 3, 1.17× */
  .t-video { width: 264px; height: 330px; }

  .frase { grid-template-columns: minmax(0, 1fr); padding: 84px 20px 24px; gap: 6px; }
  .frase blockquote p { font-size: 31px; line-height: 1.16; }
  .frase figcaption { margin-top: 18px; font-size: 14px; }
  .frase-objeto { justify-self: end; width: 190px; margin: -6px 0 0 0; }
  .caminos { padding: 28px 20px 80px; }
  .caminos-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; }
  .camino-evento { grid-template-columns: minmax(0, 1fr); }
  .camino-evento .camino-foto img { aspect-ratio: 1 / 1; height: auto; object-position: 50% 48%; }
  .camino-cuerpo { padding: 24px 22px 26px; }
  .precios dd { font-size: 26px; }
  .talleres-fijo { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 70px 20px 30px; }
  .con-mov .talleres-pista { height: 300svh; }
  .con-mov .talleres-fijo { padding-top: 72px; align-content: start; }
  .talleres-visual { aspect-ratio: 16 / 10; }
  .talleres-texto h2 { font-size: 36px; }
  .momentos { margin-top: 18px; gap: 12px; }
  .momento h3 { font-size: 20px; }
  .momento p { font-size: 14.5px; }
  .fechas { grid-template-columns: minmax(0, 1fr); margin: 0 20px; gap: 14px; padding: 24px 22px; transform: none; }
  .fechas-lista { margin: 0 20px; transform: none; grid-template-columns: minmax(0, 1fr); }
  .fechas-pie, .pago-linea { margin-left: 20px; margin-right: 20px; }
  .fechas-cal { display: none; }
  .fechas h3 { font-size: 21px; }
  .talleres { padding-bottom: 64px; }
  .banda { padding: 80px 20px; }
  .banda-fondo { height: 340px; bottom: auto; object-position: 82% 40%; -webkit-mask: linear-gradient(180deg, #000 52%, transparent); mask: linear-gradient(180deg, #000 52%, transparent); }
  .banda-dentro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .opiniones-grid { grid-template-columns: minmax(0, 1fr); }
  .opinion, .opinion-grande { min-height: 0; }
  .opinion-texto p { font-size: 17.5px; }
  .opinion-grande .opinion-texto p { font-size: 29px; }
  .opina { margin-top: 6px; gap: 14px; }
  .opina-frase { font-size: 20px; }
  .sobre { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 80px 20px; }
  .sobre-arte { max-width: 480px; }
  .sobre-cita p { font-size: 19px; }
  .proceso { padding: 80px 20px; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 34px; }
  .paso { border-top: 0; border-left: 1px solid rgba(31,42,54,.32); padding: 0 0 26px 30px; margin-left: 17px; }
  .paso::before { top: -4px; left: -17px; }
  .higiene { min-height: 0; padding: 0 0 56px; align-items: end; background: var(--arena); }
  .higiene-fondo { position: relative; height: 300px; object-position: 76% 50%; }
  .higiene-texto { padding: 28px 20px 0; max-width: none; }
  .aprende { padding: 80px 20px; }
  .aprende-grid { grid-template-columns: minmax(0, 1fr); }
  .pieza-guia { padding: 0 24px 30px; }
  .pieza-foto { margin: 0 -24px 12px; aspect-ratio: 16 / 9; }
  .pieza-guia h3 { font-size: 28px; }
  .pieza:not(.pieza-guia) { padding: 26px 24px; }
  .pieza .boton { justify-self: stretch; justify-content: center; text-align: center; padding-inline: 20px; }
  .preguntas { padding: 80px 20px; }
  .preguntas-dentro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .preguntas .titulo { position: static; }
  .vidrio { padding: 4px 18px; }
  .vidrio summary { font-size: 15.5px; padding: 18px 0; }
  .respuesta { padding-right: 0; font-size: 15px; }
  .cita { padding: 80px 20px; }
  .cita-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cita-controles { margin-top: 28px; }
  .cita-foto { aspect-ratio: 16 / 10; }
  .tarjeta-cita { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 14px 0; }
  .antes-despues { padding: 80px 20px; }
  .pie { padding: 64px 20px 40px; }
  .pie-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* el colchón deja libre el lugar de la barra de WhatsApp al final de la página: ahí la barra nunca tapa el pie */
  .pie-colchon { display: block; height: calc(92px + env(safe-area-inset-bottom, 0px)); background: var(--arena); }
  /* la barra flota casi siempre sobre crema o arena: azul pizarra, con su filo crema (la separa de la banda azul) y, por
     fuera, un hilo en el azul de la tinta (la separa del topo cálido) */
  .pildora { display: inline-flex; position: fixed; z-index: 30; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); justify-content: center; height: 54px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 60ms linear, transform 60ms linear;
    background: var(--boton); outline: 2px solid rgba(243,238,231,.92); outline-offset: 0; box-shadow: 0 0 0 3.5px rgba(31,42,54,.9), 0 16px 34px -16px rgba(var(--sombra-ui),.7); }
  /* aparece en 300 ms y se aparta en 60: cuando va a pasar encima de algo, se quita casi de inmediato */
  .pildora.visible { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .3s var(--sale); }
  /* Retoque E (CD v1.1): en las pantallas donde el botón de la portada no cabe al cargar (iPhone con las barras de Safari),
     la barra sale desde el inicio, pegada al borde de abajo y a lo ancho: 44 px más el área segura, sin esquinas, con un
     filo crema de 1 px. Así deja libres las letras del titular (la flotante de v1 tapaba 26 px en 390 × 664). Ésta no va en
     cápsula (B): es una barra de orilla a orilla, pegada al borde de la pantalla, y con esquinas redondas dejaría ver la
     página por los dos lados de abajo. La flotante (arriba) sí es cápsula. */
  html.boton-no-cabe .pildora { left: 0; right: 0; bottom: 0; height: calc(44px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: 0; outline: none; box-shadow: 0 -1px 0 rgba(243,238,231,.92); }
  /* S2 (28 oct): con la barra desde el inicio, su orilla de arriba ya no parte un renglón del párrafo de la portada (en
     375 × 667 y 360 × 640 cortaba el primero a la mitad). El párrafo empieza en 158.596vw − --subir + 12 px (E+, arriba) y
     sus renglones miden 22.5 px, con la letra del px 1 al 20 de cada uno; --corte es lo que asoma, sobre la barra, del renglón
     que ella corta. Si asoma letra (menos de 20 px), el párrafo baja eso mismo (redondeado al px de arriba, para que lo de
     abajo sólo se recorra y no cambie de medio px) y ese renglón queda entero detrás de la barra. El titular, la foto y lo
     demás del celular no se mueven. */
  @supports (margin-top: mod(10px, 3px)) and (margin-top: round(up, 10.5px, 1px)) {
    html.boton-no-cabe .portada .sub {
      --corte: mod(max(0px, 100svh - 44px - env(safe-area-inset-bottom, 0px) - 158.596vw + var(--subir) - 12px), 22.5px);
      margin-top: calc(12px + round(up, min(var(--corte), max(0px, (20px - var(--corte)) * 1000)), 1px));
    }
  }
}

@media (max-width: 380px) {
  .boton { padding: 0 16px; gap: 10px; font-size: 15px; }
  .boton-grande { padding: 0 18px; }
  .camino-cuerpo { padding: 22px 18px 24px; }
  .fechas { padding: 22px 18px; }
  .fecha { padding: 22px 18px 24px; }
  .tarjeta-cita { margin: -56px 6px 0; padding: 22px 18px; }
  /* v10.6: en 320–380 el botón de la pieza puede ocupar dos renglones antes que salirse de su tarjeta */
  .pieza .boton { padding: 12px 16px; }
}
/* ---------- 20.1 v10: los caminos con su ficha, la foto de ella en el arco y las políticas, por medida ----------
   Computadora y tableta (≥ 721): la tarjeta de evento lleva la foto (3:4 completa) y el cuerpo arriba, y la ficha a todo el
   ancho de la tarjeta en dos columnas, con el botón al pie. La de clases: en computadora (≥ 1001), la foto 16:10 arriba; en
   la tableta, la foto (recorte cuadrado) junto al cuerpo y la ficha abajo, como la de evento. Los botones de las dos
   tarjetas quedan abajo, a la misma altura. */
@media (min-width: 721px) {
  .camino-evento { grid-template-rows: auto 1fr; }
  .camino-evento .camino-foto { grid-column: 1; grid-row: 1; aspect-ratio: 3 / 4; }
  .camino-evento .camino-cuerpo { grid-column: 2; grid-row: 1; }
  .camino-evento .camino-ficha { grid-column: 1 / -1; grid-row: 2; padding-top: 30px; grid-template-rows: auto 1fr; }
  .camino-evento .ficha { display: block; column-count: 2; column-gap: 36px; }
  .camino-evento .ficha > div { display: inline-block; width: 100%; margin-bottom: 16px; }
  .camino-pie { align-self: end; }
}
@media (min-width: 1001px) {
  .camino-taller { grid-template-rows: auto auto 1fr; }
  .camino-taller .camino-ficha { grid-template-rows: auto auto 1fr; }
  .camino-taller .camino-cuerpo { padding-bottom: 26px; }
  .camino-taller .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
}
/* en pantallas muy anchas la tarjeta de clases se queda en 660 px: su foto mide 1179 y con DPR 2 no se estira más de 1.12× */
@media (min-width: 1601px) {
  .caminos-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 660px); }
}
@media (min-width: 1101px) {
  .camino-evento .camino-foto { aspect-ratio: 2 / 3; }
  .camino-evento .camino-foto img { object-position: 42% 0; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .camino-taller { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; }
  .camino-taller .camino-foto { grid-column: 1; grid-row: 1; }
  .camino-taller .camino-cuerpo { grid-column: 2; grid-row: 1; }
  .camino-taller .camino-ficha { grid-column: 1 / -1; grid-row: 2; padding-top: 30px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 36px; }
  .camino-taller .camino-ficha .camino-pie { grid-column: 1 / -1; }
  .camino-taller .camino-foto img { height: 100%; aspect-ratio: auto; object-position: 0% 50%; }
  .politicas { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .sobre { gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* v10.3 (AUDIT-v10.2 S2 / crítica H4): en tableta el arco sube a la altura del título y crece (6 : 5, en 768 pasa de 278
   a 307 px de ancho); la columna del texto no baja de 280 px para que la cita no se vuelva una tira. */
@media (min-width: 721px) and (max-width: 1000px) {
  .sobre { align-items: start; gap: 40px; grid-template-columns: minmax(0, 6fr) minmax(280px, 5fr); }
}
@media (min-width: 1101px) {
  .sobre-arte { justify-self: end; }
}
/* v10.5 (AUDIT-v10.4 H3): de 721 a 860 px la sección se apila como en el celular: el arco arriba, en 432 px (el bloque de
   480 px, así que la foto chica cuelga de la esquina como en la computadora), y el texto debajo, en la misma columna de
   480 px, con su orilla izquierda en la del arco. La columna va centrada en la página. De 861 a 1100, como en v10.4. */
@media (min-width: 721px) and (max-width: 860px) {
  .sobre { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 48px; }
  .sobre-arte { max-width: 480px; }
  .sobre-texto { width: 100%; max-width: 480px; }
}
/* en una pantalla angosta de DPR 3 o más, el arco llega a 358 px (v10.4: el tamaño se queda igual; la 1-1 tiene archivos de 1200 y 1600 px) */
@media (max-width: 720px) and (min-resolution: 2.5dppx) {
  .sobre-arte { max-width: 398px; }
}
@media (max-width: 720px) {
  .camino-ficha { padding: 0 22px 26px; gap: 22px; }
  .camino-evento .camino-ficha { padding-top: 4px; }
  .camino-taller .camino-cuerpo { padding-bottom: 18px; }
  .tarifa-sola .tarifa-precio { font-size: 28px; }
  .politicas { grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding: 22px 22px 24px; gap: 16px; }
  .marcas h3 { font-size: 22px; }
  .chip span { padding: 0 15px; }
}
@media (max-width: 380px) {
  .camino-ficha { padding: 0 18px 24px; }
}

/* ---------- 21. Movimiento reducido: sin desplazamientos ni escalas; se quedan los fundidos cortos de color y opacidad ---------- */
@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .12s !important; transition-delay: 0s !important; }
  .pildora { transform: none; }
  .portada .a-talleres .flecha-texto { transform: none !important; }
  .sobre-foto video { transition: none !important; }   /* v10.5 (H1): de la foto al tutorial, cambio directo */
}