/* 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», tarjetas sobre arena y, desde v1.1 (retoque A), la portada del celular y la tableta vertical */
  --fusion: #D7C9B8;         /* el fondo de la foto de la portada mientras carga, en computadora */
  --topo: #BCAC9C;           /* topo cálido: franjas */
  --topo-pared: #C9BAA8;
  --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;              /* botones, fotos, tarjetas y campos; los controles de ícono son 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-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); }

/* 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. Discreto pero visible; siempre empieza 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, esquina de 2 px.
   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: var(--radio); white-space: nowrap; transition: background-color .2s ease, transform .16s var(--ease-out); }
.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%)); }
.linea { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--x, 70%); width: 1px; margin-left: -.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; }
.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 orilla de los mechones a la izquierda de la cara está en x 2383 en las filas 880-1160,
   baja a x 2252-2364 en las filas 1180-1360 (los pelitos que salen hacia la pared) y a x 2157-2204 en las filas 1380-1600
   (el rizo). El titular vive en las filas 850-1110, el párrafo junto al rizo y el botón debajo de él. La foto sólo se corre
   a la derecha lo justo para que cada renglón quede a ≥ 30 px de los mechones de sus filas (unos 35 px en 1440, 19 en 1280
   y 0 en 1920); 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);
  --hf: max(calc(var(--alto) * 1.696), 106vw);                                 /* alto de la foto */
  --fs: clamp(50px, calc(var(--hf) * .0393), 68px);                            /* titular: ≈ 60 px en 1440, 53 en 1280, 68 en 1920 */
  /* la foto: x 3049 del original al centro, corrida a la derecha sólo si hace falta para que
     (b) cada renglón del titular termine ≥ 30 px antes de los mechones de sus filas (x 2383 → .702535);
     (c) el párrafo, que pasa junto al rizo, quede ≥ 30 px antes de él (tinta de 268 px + 30; x 2157 → .635908);
     (d) el botón (304 px) quede ≥ 30 px antes de los mechones de sus filas (x 2252 → .663915). */
  --izq: max(calc(50vw - var(--hf) * .898880),
             calc(var(--x0) + var(--fs) * var(--wmax) + 30px - var(--hf) * .702535),
             calc(var(--x0) + 300px - var(--hf) * .635908),
             calc(var(--x0) + 334px - var(--hf) * .663915));
  --arriba: min(calc(var(--alto) * .40 - var(--hf) * .362618), calc(var(--alto) - 40px - var(--hf) * .692807));
  /* el bloque: el titular empieza en la fila 850 del original (arriba de los pelitos) y nunca a menos de 20 px de la barra */
  --bloque-y: max(96px, calc(var(--arriba) + var(--hf) * .250590));
  --hueco-1: 88px;                                                             /* titular → párrafo */
  --hueco-2: 56px;                                                             /* párrafo → botón, debajo del rizo */
  /* el aviso, abajo a la derecha sobre el pelo (oscuro), a la izquierda de la manija y a su misma altura */
  --aviso-der: 64px; --aviso-abajo: 26px; --aviso-color: #FBF7F1;
  position: relative; height: var(--alto); overflow: hidden; isolation: isolate; background: var(--fusion);
}
.portada .comparar { position: absolute; inset: 0; z-index: auto; }
.portada .foto { height: var(--hf); width: calc(var(--hf) * 1.490566); left: var(--izq); top: var(--arriba); }
.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.» llega con el barrido (sube 12 px y aparece en 600 ms). Sin JavaScript o con movimiento reducido no se
   esconde nunca: la clase entra-l2 la pone el script de la cabecera sólo con movimiento. */
html.entra-l2 .portada h1 .l2 { opacity: 0; transform: translateY(12px); }
html.entra-l2 .portada h1 .l2.entra { opacity: 1; transform: none; transition: opacity .6s var(--sale), transform .6s var(--sale); }

/* La luz de los párpados (después del barrido) y el grano. La caja de los dos párpados es x 2520-3540, y 1060-1380 del
   original, la misma de la máscara parpados-mascara-v41.png. Una franja por ojo, cobre dorado, fusión screen al 23 %. */
.capa-parpados { position: absolute; left: 49.842%; top: 31.25%; width: 20.174%; height: 9.434%; pointer-events: none; mix-blend-mode: screen; visibility: hidden; }
.capas-listas .capa-parpados { visibility: visible; -webkit-mask: url(../img/parpados-mascara-v41.png) center / 100% 100% no-repeat; mask: url(../img/parpados-mascara-v41.png) center / 100% 100% no-repeat; }
.barrido { position: absolute; inset: 0; opacity: calc(var(--bo, 0) * .23); --c: 255,142,84;
  background: linear-gradient(98deg, rgba(var(--c),0) calc(var(--b, -20%) - var(--w) / 2), rgba(var(--c),1) calc(var(--b, -20%) - var(--w) / 2 + 2.6%), rgba(var(--c),1) calc(var(--b, -20%) + var(--w) / 2 - 2.6%), rgba(var(--c),0) calc(var(--b, -20%) + var(--w) / 2)); }
.barrido.ojo-1 { --w: 11.5%; clip-path: inset(0 50% 0 0); }
.barrido.ojo-2 { --w: 18.5%; clip-path: inset(0 0 0 50%); }
.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; }
html.js .comparar .foto.sin-js { display: none; }

/* Manija de 28 px en la esquina de abajo, al pie de la línea escondida. Doble aro (claro por dentro y azul casi negro por
   fuera) para que se vea igual sobre pelo oscuro y sobre mechones claros. */
.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, sin caja, junto a la manija */
.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(--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ú» cae en la orilla del pelo: va 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; }
}

/* ---------- 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; }
.nota { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }
.camino .boton { margin-top: 24px; justify-self: start; }
.caminos-falta { margin-top: 22px; }

/* ---------- 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); }
.google { margin-top: 40px; }
.google h3 { font-size: 22px; }

/* ---------- 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; }
.sobre-foto { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radio) var(--radio); background: var(--topo-pared) center / cover no-repeat; display: grid; place-items: center; padding: 30px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 40px 80px -56px rgba(var(--sombra-ui),.6); }
/* el fondo del arco se pide cuando la sección se acerca, para no quitarle ancho de banda a la foto de la portada */
.sobre-foto.con-fondo, html:not(.js) .sobre-foto { background-image: url(../img/arco-pared-800.webp); }
.sobre-foto .marca-agua { width: 42%; opacity: .55; }
.sobre-foto .falta { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); }
.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); }
.sobre-video { margin-top: 28px; display: flex; gap: 16px; align-items: center; }
.sobre-video .cuadro { width: 72px; height: 72px; border-radius: var(--radio); background: var(--panel); display: grid; place-items: center; color: var(--titular); flex: none; }
.sobre-video .cuadro .ico { width: 26px; height: 26px; }
.sobre-video strong { font-weight: 600; font-size: 15px; }

/* ---------- 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); }
.politicas { margin-top: 56px; padding: 22px 26px; border-radius: var(--radio); background: var(--crema); }
.politicas p:not(.faltas) { font-size: 15.5px; }

/* ---------- 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); }

/* ---------- 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); }

/* ---------- 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); }
@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); }
.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; }

/* ---------- 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 { background: var(--boton-topo-hover); }
  .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); }
  .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, pero con la foto de escena encuadrada en la cara: se ven
   las filas 250 a 2750 del original (la cara completa, sin la costura de la fila 2900), centrada; abajo, el bloque. */
@media (min-width: 721px) and (max-aspect-ratio: 23/20) {
  .portada { --alto: auto; --caja: clamp(520px, calc(100svh - 380px), 1100px); --hf: calc(var(--caja) * 1.3568);
    --izq: calc(50vw - var(--hf) * .898880); --arriba: calc(var(--hf) * -.073703); --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 .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 (#E4D9CB, ΔE 0.48) y el degradado empieza
     12 px bajo la barbilla, con una curva suave de 72 px; abajo, panel liso. Así el cuello no se agrisa. */
  .portada .fundido { display: block; position: absolute; left: 0; right: 0; top: calc(82.56% + 12px); bottom: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(228,217,203,0) 0px, rgba(228,217,203,.03) 7.2px, rgba(228,217,203,.1) 14.4px, rgba(228,217,203,.2) 21.6px, rgba(228,217,203,.33) 28.8px, rgba(228,217,203,.5) 36px, rgba(228,217,203,.67) 43.2px, rgba(228,217,203,.8) 50.4px, rgba(228,217,203,.9) 57.6px, rgba(228,217,203,.97) 64.8px, rgba(228,217,203,1) 72px, var(--panel) 100%); }
  .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) {
  .higiene-texto { max-width: 300px; }
}
@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): el panel es el tono de la pared (#E4D9CB) y el degradado es una
     curva suave de 11 pasos del 86.1 % al 94.6 % del alto de la foto (44 px en 390), justo bajo la barbilla (85.4 %): el
     cuello ya no se agrisa y la pared de la orilla queda igual al panel. */
  .portada { --alto: auto; --fs: calc((100vw - 40px) / 7.6); --cp-l: 7.778%; --cp-t: 31.667%; --cp-w: 56.667%; --cp-h: 13.333%;
    --aviso-izq: auto; --aviso-der: 54px; --aviso-abajo: 18px; --aviso-color: #2E3D4C;
    height: auto; overflow: visible; padding-bottom: 30px; background: var(--panel); }
  .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 .fundido { display: block; position: absolute; left: 0; right: 0; top: 86.1%; bottom: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(228,217,203,0) 0%, rgba(228,217,203,.03) 6.12%, rgba(228,217,203,.1) 12.23%, rgba(228,217,203,.2) 18.35%, rgba(228,217,203,.33) 24.46%, rgba(228,217,203,.5) 30.58%, rgba(228,217,203,.67) 36.69%, rgba(228,217,203,.8) 42.81%, rgba(228,217,203,.9) 48.92%, rgba(228,217,203,.97) 55.04%, rgba(228,217,203,1) 61.15%, var(--panel) 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; }
  .capa-parpados { left: var(--cp-l); top: var(--cp-t); width: var(--cp-w); height: var(--cp-h); }
  .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; }
  .google { margin-top: 26px; }
  .sobre { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 80px 20px; }
  .sobre-foto { aspect-ratio: 4 / 4.4; }
  .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; }
  .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). */
  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); }
}

@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; }
}
/* en las pantallas más angostas la barbilla queda un poco más arriba: el degradado de A va del 85.4 % al 93 % */
@media (max-width: 340px) {
  .portada .fundido { top: 85.4%; background: linear-gradient(180deg, rgba(228,217,203,0) 0%, rgba(228,217,203,.03) 5.21%, rgba(228,217,203,.1) 10.41%, rgba(228,217,203,.2) 15.62%, rgba(228,217,203,.33) 20.82%, rgba(228,217,203,.5) 26.03%, rgba(228,217,203,.67) 31.23%, rgba(228,217,203,.8) 36.44%, rgba(228,217,203,.9) 41.64%, rgba(228,217,203,.97) 46.85%, rgba(228,217,203,1) 52.05%, var(--panel) 100%); }
}

/* ---------- 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; }
  .barrido { display: none; }
  .pildora { transform: none; }
  .portada .a-talleres .flecha-texto { transform: none !important; }
}