/* La Cejería · El después, antes de tu cita
   Estructura: la maqueta del recorrido de compra (8 nov 2026). Marca: Monda para títulos (con la «i»
   con punto de su alternativa salt), Ubuntu para el texto y Aloevera Display Thin solo en números
   grandes (precios de la vitrina, el 4.8 de Google y los pasos). PALETA A (versión 6). Texto solo en #1A1A1A, #5C5C5C o blanco; terracota solo en formas; oro solo con texto #1A1A1A.
   Cinco tamaños de texto: 42/64, 30/44, 21/24, 16/18 y 13/14 px (teléfono/escritorio).
   Los cortes van en em (40em = 640 px, 48em = 768, 64em = 1024, 80em = 1280, 90em = 1440 con la letra
   normal), para que la página cambie de arreglo cuando alguien agranda la letra del navegador. */

@font-face { font-family: "Monda"; src: url("../fuentes/monda.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aloevera Display"; src: url("../fuentes/aloevera-display-thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fuentes/ubuntu-regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fuentes/ubuntu-medium-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fuentes/ubuntu-bold-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* PALETA A (versión 6, pedido de Fa del 10 nov 2026). Los nombres de antes quedan como alias */
  --bosque: #0f3d3a;     /* Deep Forest */
  --oro: #f4b13b;        /* Golden Hour: solo con texto #1A1A1A */
  --terracota: #e0745e;  /* Terracotta Clay: solo como forma */
  --arena: #f2e6d6;      /* Warm Sand */
  --niebla: var(--arena);
  --petroleo: var(--bosque);
  --mandarina: var(--terracota);
  --noche: var(--bosque);
  --tinta: #1a1a1a;
  --gris: #5c5c5c;
  --display: "Monda", "Ubuntu", system-ui, sans-serif;
  --acento: "Aloevera Display", "Ubuntu", system-ui, sans-serif;
  --texto: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margen: clamp(1.25rem, 4.5vw, 2.75rem);  /* formato más ancho (pedido de Fa): margen de 2.75rem como máximo */
  --t1: 2.625rem;   /* 42 */
  --t2: 1.875rem;   /* 30 */
  --t3: 1.3125rem;  /* 21 */
  --t4: 1rem;       /* 16 */
  --t5: 0.8125rem;  /* 13 */
  --barra: calc(4.5rem + env(safe-area-inset-bottom));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (width >= 64em) {
  :root { --t1: 4rem; --t2: 2.75rem; --t3: 1.5rem; --t4: 1.125rem; --t5: 0.875rem; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; font: 400 var(--t4)/1.55 var(--texto); color: var(--tinta); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, address { margin: 0; }
p { max-width: 72ch; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: 0.22em; }
::selection { background: var(--mandarina); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }
/* Sobre noche, el anillo de foco va en blanco: el petróleo no llega a 3:1 contra ese fondo */
.pie :focus-visible, .barra :focus-visible { outline-color: #fff; }
a:not(.boton):hover { text-decoration-thickness: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; z-index: 60; left: 1rem; top: -5rem; padding: 0.75rem 1.1rem; border-radius: 999px; background: var(--tinta); color: #fff; }
.saltar:focus { top: 1rem; }
.marco { width: min(100% - 2 * var(--margen), 90rem); margin-inline: auto; }  /* antes 82rem */

/* Tipos */
.m { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; }
.mi { font-feature-settings: "salt" 1; }
.acc { font-family: var(--acento); font-weight: 100; letter-spacing: 0; }
h1 { font: 400 var(--t1)/1.04 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
h1 .linea { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
h1 .linea > span { display: block; }
h2 { font: 400 var(--t2)/1.1 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
h3 { font: 400 var(--t3)/1.25 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.precio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Acciones: un botón principal, siempre «Agendar por WhatsApp»; la segunda acción es un enlace */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.5rem;
  border-radius: 999px; background: var(--petroleo); color: #fff; font-size: var(--t4); font-weight: 600; line-height: 1;
  text-decoration: none; transition: background-color 0.2s;
}
.boton:hover { background: var(--noche); }
.boton--claro { background: #fff; color: var(--tinta); }
.boton--claro:hover { background: var(--niebla); }
.enlace { display: inline-block; padding-block: 0.75rem; font-size: var(--t4); text-decoration: underline; }
.chip { display: inline-flex; align-items: center; padding: 0.45rem 0.7rem; border-radius: 999px; background: #fff; color: var(--tinta); font-size: var(--t5); font-weight: 600; line-height: 1; }

/* Cabecera: solo la marca */
.cabecera .marco { display: flex; align-items: center; height: 4rem; }
.cabecera__logo { flex-shrink: 0; }
.cabecera__logo img { width: auto; height: 3.375rem; }

/* 1. Inicio */
.inicio { display: grid; padding-bottom: 3rem; }
.inicio__texto { display: grid; gap: 0.75rem; padding-top: 0.25rem; }
.inicio__apoyo { max-width: 30rem; text-wrap: pretty; }
.vitrina { display: grid; margin-top: 1.25rem; }
.selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; margin: 0; padding: 0.25rem; border: 0; border-radius: 999px; background: var(--niebla); }
.selector__opcion { position: relative; display: grid; place-items: center; min-height: 2.75rem; padding: 0 0.4rem; border-radius: 999px; font-size: var(--t5); font-weight: 600; text-align: center; cursor: pointer; }
.selector__opcion input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.selector__opcion:has(input:checked) { background: var(--tinta); color: #fff; }
.selector__opcion:has(input:focus-visible) { outline: 2px solid var(--petroleo); outline-offset: 3px; }
.vitrina__panel { display: grid; }
.vitrina:has(input[value="total-look"]:checked) [data-panel]:not([data-panel="total-look"]),
.vitrina:has(input[value="lifting"]:checked) [data-panel]:not([data-panel="lifting"]),
.vitrina:has(input[value="organic"]:checked) [data-panel]:not([data-panel="organic"]) { display: none; }
.panel__foto { margin: 0.75rem calc(-1 * var(--margen)) 0; }
.panel__pie { padding: 0.6rem var(--margen) 0; color: var(--gris); font-size: var(--t5); }
.panel__info { display: grid; gap: 0.15rem; margin-top: 1rem; }
.servicio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font: 400 var(--t3)/1.25 var(--display); letter-spacing: -0.01em; }
.panel__nota { color: var(--gris); font-size: var(--t5); font-weight: 500; }
.panel__accion { display: grid; justify-items: center; margin-top: 1rem; }
.panel__accion .boton { width: 100%; }

/* Comparador de antes y después */
.comparador { position: relative; overflow: hidden; aspect-ratio: 5 / 3; background: var(--niebla); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.comparador__asa { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 999px; background: #fff; color: var(--tinta); }
.comparador__asa svg { width: 1.3rem; height: 1.3rem; }
.comparador__chip { position: absolute; bottom: 0.75rem; pointer-events: none; }
.comparador__chip--antes { left: 0.75rem; }
.comparador__chip--despues { right: 0.75rem; }
.comparador input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y;
}
.comparador input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.comparador input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 4rem; height: 100%; border: 0; background: transparent; }
.comparador input[type="range"]::-moz-range-track { height: 100%; background: transparent; border: 0; }
.comparador input[type="range"]::-moz-range-thumb { width: 4rem; height: 100%; border: 0; border-radius: 0; background: transparent; }
/* Foco del comparador: anillo petróleo pegado al asa blanca, con más de 3:1 contra ella y contra la piel */
.comparador:has(input:focus-visible) .comparador__asa { outline: 3px solid var(--petroleo); outline-offset: 0; }

/* Movimiento, solo si el sistema no pide menos. Al abrir: el título sube por líneas, la foto se abre y
   la línea del comparador se asoma al después; todo queda quieto antes de 2.7 s. Al bajar: cada servicio,
   cada paso, la calificación y la foto de la entrada llegan una vez. Nada queda escondido sin JavaScript. */
@property --pos { syntax: "<number>"; inherits: true; initial-value: 50; }
@media (prefers-reduced-motion: no-preference) {
  .js h1:not([data-title-intro]) .linea > span { transform: translateY(105%); animation: sube 0.8s var(--ease-expo) forwards; animation-delay: calc(0.1s + var(--i) * 0.11s); }
  .js .inicio [data-llega] { opacity: 0; transform: translateY(12px); animation: llega 0.5s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
  .js .inicio .panel__foto { clip-path: inset(0 0 100% 0); animation: abre 1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
  .comparador.muestra { animation: muestra 1.5s cubic-bezier(0.3, 0.7, 0.2, 1) 1.15s backwards; }
  .js [data-revela] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
  .js [data-revela].dentro { opacity: 1; transform: none; }
  .boton { transition: transform 0.12s var(--ease-out), background-color 0.2s; }
  .boton:active { transform: scale(0.97); }
  @keyframes sube { to { transform: none; } }
  @keyframes llega { to { opacity: 1; transform: none; } }
  @keyframes abre { to { clip-path: inset(0); } }
  @keyframes muestra { 0% { --pos: 50; } 40% { --pos: 24; } 100% { --pos: 50; } }
}

/* Servicio sin par todavía: se dice tal cual */
.pendiente { display: grid; align-content: center; justify-items: start; gap: 0.5rem; aspect-ratio: 5 / 3; padding: 1.5rem var(--margen); background: var(--niebla); }
.pendiente__tilde { width: 3.5rem; height: auto; color: var(--mandarina); }
.pendiente__texto { max-width: 22rem; font: 400 var(--t3)/1.25 var(--display); letter-spacing: -0.01em; }

/* Secciones */
.bloque { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.bloque--niebla { background: var(--niebla); }
.cabeza { display: grid; gap: 0.75rem; }
.cabeza__apoyo { max-width: 34rem; text-wrap: pretty; }

/* 2. Elige tu servicio */
.servicios { display: grid; gap: 3rem; margin-top: 2.5rem; }
.servicio { display: grid; gap: 0.6rem; align-content: start; }
.servicio__linea { text-wrap: pretty; }
.servicio__nota { color: var(--gris); font-size: var(--t5); font-weight: 500; }
.servicio .boton { margin-top: 0.75rem; }
.servicio__galeria { display: grid; gap: 1rem; margin-top: 0.5rem; }
.duo { display: grid; gap: 0.5rem; }
.duo__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.duo__foto { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; }
.duo__foto img { width: 100%; height: 100%; object-fit: cover; }
.duo__foto .chip { position: absolute; left: 0.5rem; bottom: 0.5rem; }
.duo figcaption { color: var(--gris); font-size: var(--t5); }
.otros { margin-top: 3rem; background: #fff; }
.otros summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0 1.25rem; font-weight: 600; cursor: pointer; list-style: none; }
.otros summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: no-preference) { .otros summary .ico { transition: transform 0.25s var(--ease-out); } }
.otros[open] summary .ico { transform: rotate(45deg); }
.otros__cuerpo { display: grid; gap: 2rem; padding: 0 1.25rem 1.5rem; }
.otros:not([open]) .otros__cuerpo { display: none; }
.otros__tabla { width: 100%; border-collapse: collapse; }
.otros__tabla th, .otros__tabla td { padding: 0.85rem 0; border-top: 1px solid rgb(26 26 26 / 0.12); text-align: left; vertical-align: top; font-weight: inherit; }
.otros__tabla td { padding-left: 1rem; text-align: right; font-size: var(--t3); line-height: 1.25; }
.otros__nombre { display: block; font-weight: 500; }
.otros__nota { display: block; margin-top: 0.15rem; color: var(--gris); font-size: var(--t5); }
.otros__hombres { display: grid; gap: 0.75rem; max-width: 26rem; }
.otros__titulo { font-size: var(--t3); line-height: 1.25; }
.otros .boton { justify-self: start; }

/* 3. Google */
.google { display: grid; gap: 1rem; align-items: end; }
.google__dato { display: grid; justify-items: start; gap: 0.25rem; }
.google__cifra { font-size: var(--t3); line-height: 1.25; }

/* 4. Así agendas */
.pasos { display: grid; gap: 2rem; margin-block: 2.5rem; }
.paso { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.paso__num { font-size: var(--t2); line-height: 1; text-align: center; }
.paso p { margin-top: 0.35rem; text-wrap: pretty; }

/* 5. Masaryk 178 */
.ubicacion { display: grid; gap: 2.5rem; }
.ubicacion__texto { display: grid; gap: 1rem; align-content: start; }
.ubicacion address { max-width: 26rem; }
.ubicacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.75rem; }
.ubicacion__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ubicacion__foto figcaption { margin-top: 0.6rem; color: var(--gris); font-size: var(--t5); }

/* Pie */
.pie { padding-block: 3.5rem; background: var(--noche); color: #fff; }
.pie__rejilla { display: grid; gap: 1.5rem; }
.pie__rejilla img { width: auto; height: 3rem; }
.pie address { max-width: 48ch; }
.pie__enlaces { display: grid; gap: 0.5rem; }
.pie__legal { max-width: 60ch; font-size: var(--t5); }

/* Barra fija de agenda, en teléfono y tableta: aparece cuando el inicio ya pasó */
.barra { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; padding: 0.65rem var(--margen) calc(0.65rem + env(safe-area-inset-bottom)); background: var(--noche); }
.barra .boton { flex: 1; }
.js .barra { transform: translateY(105%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .barra.visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .barra { transition: none; } }
/* Con la barra, el foco de teclado nunca queda debajo de ella (WCAG 2.4.11) */
@media (width < 64em) { body { padding-bottom: var(--barra); } html { scroll-padding-bottom: calc(var(--barra) + 1rem); } }

/* Tableta */
@media (width >= 40em) {
  .panel__foto { margin-inline: 0; }
  .panel__pie { padding-inline: 0; }
  .panel__accion { justify-items: start; }
  .panel__accion .boton { width: auto; }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2.5rem; }
  .servicio .boton { justify-self: start; }
  /* Nombre, línea, nota, fotos y botón de cada servicio quedan a la misma altura entre columnas. */
  @supports (grid-template-rows: subgrid) {
    .servicios { row-gap: 0.6rem; }
    .servicio { grid-row: span 5; grid-template-rows: subgrid; }
    .servicio:nth-child(n + 3) { margin-top: 2.4rem; }
  }
  .pie__rejilla { grid-template-columns: auto 1fr; column-gap: 3rem; }
}

/* Solo en tableta: si el último servicio queda solo en su fila, ocupa el ancho completo, con el texto
   a la izquierda y sus fotos a la derecha, en vez de dejar media fila vacía. */
@media (40em <= width < 64em) {
  .servicios > .servicio:nth-child(odd):last-child {
    grid-column: 1 / -1; grid-row: auto; grid-template-rows: auto auto auto 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem; row-gap: 0.6rem;
  }
  .servicios > .servicio:nth-child(odd):last-child > * { grid-column: 1; }
  .servicios > .servicio:nth-child(odd):last-child > .servicio__galeria { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .servicios > .servicio:nth-child(odd):last-child > .boton { align-self: start; }
}

/* Desde 768 px, la calificación y los pasos usan todo el ancho */
@media (width >= 48em) {
  /* El título y la calificación comparten línea base, en vez de quedar desfasados */
  .google { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 4.5%; align-items: baseline; }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  /* La dirección y la foto de la entrada, lado a lado como en escritorio: en tableta la foto sola
     ocupaba casi una pantalla. */
  .ubicacion { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4.5%; align-items: center; }
  .ubicacion__foto img { aspect-ratio: 1; }
}

/* Escritorio: el inicio en dos columnas, como la maqueta */
@media (width >= 64em) {
  .cabecera .marco { height: 5.5rem; }
  .cabecera__logo img { height: 3.7125rem; }
  .inicio {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "texto foto" "selector foto" "info foto" "accion foto";
    grid-template-rows: auto auto auto 1fr; column-gap: 4.5%; align-content: start; padding-block: 1rem 5rem;
  }
  .inicio__texto { grid-area: texto; gap: 1.25rem; padding-top: 2rem; }
  .inicio h1 { font-size: min(var(--t1), 4.6vw); }
  .vitrina, .vitrina__panel { display: contents; }
  .selector { grid-area: selector; max-width: 29rem; margin-top: 2rem; }
  .panel__foto { grid-area: foto; align-self: start; margin: 0; }
  .panel__info { grid-area: info; max-width: 29rem; margin-top: 1.5rem; }
  .panel__accion { grid-area: accion; display: flex; align-items: center; align-self: start; gap: 1.5rem; margin-top: 1.75rem; }
  .comparador, .pendiente { aspect-ratio: 5 / 4; }
  .pendiente { padding: 2.5rem; }
  .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @supports (grid-template-rows: subgrid) {
    .servicio:nth-child(n + 3) { margin-top: 0; }
    .servicio:nth-child(n + 4) { margin-top: 2.4rem; }
  }
  .ubicacion { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4.5%; align-items: center; }
  .ubicacion__foto img { aspect-ratio: 1; }
  .pie__rejilla { grid-template-columns: auto 1fr auto; align-items: start; }
  .pie__legal { grid-column: 1 / -1; }
  .barra { display: none; }
}

/* ───────── Base común de las versiones nuevas (9 nov 2026) ───────── */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
.bloque--noche { background: var(--noche); color: #fff; }
.bloque--noche :focus-visible { outline-color: #fff; }
.bloque--noche figcaption { color: #fff; }
.lista { display: grid; gap: 0.5rem; }
.lista__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem 1.25rem; padding: 0.95rem 1.1rem; border-radius: 1rem; background: var(--niebla); }
.lista__nombre { display: block; font-weight: 600; }
.lista__nota { display: block; margin-top: 0.15rem; color: var(--gris); font-size: var(--t5); }
.lista__precio { font: 400 var(--t3)/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.lista__agendar { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; background: #fff; color: var(--tinta); font-size: var(--t5); font-weight: 600; text-decoration: none; }
.lista__agendar:hover { background: var(--petroleo); color: #fff; }
.hombres { display: grid; gap: 0.75rem; max-width: 28rem; }
.hombres__titulo { font-size: var(--t3); line-height: 1.25; }
@media (width >= 40em) {
  .lista__fila { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lista__agendar { grid-column: auto; }
}
/* Google y «Así agendas» juntos: la cifra grande a la izquierda, los pasos a la derecha */
.confianza { display: grid; gap: 3rem; }
.confianza__google { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
.confianza__cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.confianza__cifra .acc { font-size: clamp(5.5rem, 4rem + 6vw, 9rem); line-height: 1.05; }
.confianza__google h2 { margin-bottom: 0.5rem; }
.confianza__texto { font: 400 var(--t3)/1.25 var(--display); letter-spacing: -0.01em; }
.confianza .pasos { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-block: 2rem 0; }
.precios { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (width >= 48em) {
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confianza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4.5%; }
}
@media (width >= 64em) {
  .confianza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4.5%; }
  .hombres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 4.5%; max-width: none; }
  .hombres__titulo { font-size: var(--t2); line-height: 1.1; }
}

/* La llegada escalonada de la portada también aplica a esta versión */
@media (prefers-reduced-motion: no-preference) {
  /* Versión 6: la llegada no queda aplicada al terminar (fill backwards). Con fill forwards el transform final
     dejaba sin desenfoque al vidrio de las píldoras, que viven dentro de un bloque que llega */
  .js [data-inicio] [data-llega] { animation: llega-desde 0.5s var(--ease-out) var(--d, 0s) backwards; }
  @keyframes llega-desde { from { opacity: 0; transform: translateY(12px); } }
}

/* ───────── Versión nueva 4 · Vitrina (referencia DriveGo) ─────────
   La portada es una vitrina de un solo resultado real. El comparador ocupa el lugar del auto destacado;
   las tarjetas de servicio se encajan en una muesca blanca de su esquina inferior izquierda; el precio de lista
   flota sobre la foto en una tarjeta blanca y cuatro hechos reales van en píldoras noche. En el teléfono,
   las tarjetas, el botón y las píldoras van debajo de la foto. */
:root { --radio-foto: 2rem; }
.h1-enlace { font-size: 0.56em; color: var(--gris); letter-spacing: -0.01em; }
.cabecera__rejilla { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4rem; }
.cabecera__nav, .cabecera__boton { display: none; }
.cabecera__nav ul { display: flex; gap: 0.25rem; }
.cabecera__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; color: var(--tinta); font-size: var(--t5); font-weight: 600; text-decoration: none; }
.cabecera__nav a:hover { background: var(--niebla); }
.cabecera__nav a[aria-current] { background: var(--noche); color: #fff; }
.escena { display: grid; gap: 1.25rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.escena__texto { order: 1; display: grid; gap: 0.9rem; }
.escena h1 { font-size: clamp(3.25rem, 2.5rem + 3vw, 4rem); }
.escena__apoyo { max-width: 30rem; text-wrap: pretty; }
.escena__google { display: flex; align-items: center; gap: 0.9rem; }
.escena__cifra { font-size: calc(var(--t1) * 1.1); line-height: 0.9; }
.escena__resenas { max-width: 15rem; font-size: var(--t5); line-height: 1.4; }
.escena__panel { display: contents; }
.escena:has(#op-total-look:checked) .escena__panel:not([data-panel="total-look"]),
.escena:has(#op-lifting:checked) .escena__panel:not([data-panel="lifting"]),
.escena:has(#op-organic:checked) .escena__panel:not([data-panel="organic"]) { display: none; }
.escena__foto { order: 2; position: relative; }
.escena__foto .comparador { aspect-ratio: 4 / 3; border-radius: var(--radio-foto); }
.escena .comparador__chip { top: 1rem; bottom: auto; }
.flota { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 3; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; border-radius: 1.1rem; background: #fff; pointer-events: none; }
.flota__numero { font-size: 1.75rem; line-height: 1; }
.flota__texto { color: var(--gris); font-size: var(--t5); font-weight: 500; line-height: 1.3; }
.tarjetas { order: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tarjeta { position: relative; display: grid; gap: 0.45rem; padding: 0.45rem 0.45rem 0.6rem; border-radius: 1.1rem; background: var(--niebla); font-size: var(--t5); font-weight: 600; text-align: center; cursor: pointer; }
.tarjeta input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tarjeta__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.75rem; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta:has(input:checked) { background: #fff; outline: 2px solid var(--petroleo); outline-offset: -2px; }
.tarjeta:has(input:focus-visible) { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.escena__servicio { font-size: var(--t3); line-height: 1.25; }
.escena__linea { max-width: 30rem; text-wrap: pretty; }
.acciones { display: grid; justify-items: center; gap: 0.25rem; margin-top: 0.6rem; }
.acciones .boton { width: 100%; }
.pildoras { order: 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.pildoras li { display: flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1rem; border-radius: 999px; background: var(--niebla); font-size: var(--t5); font-weight: 600; line-height: 1.25; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: translate 0.3s var(--ease-out); }
  .tarjeta:hover { translate: 0 -0.2rem; }
}
/* Teléfono: la tarjeta de precio queda compacta en la esquina, sin cruzar la línea; el 4.8 se queda, más chico */
@media (width < 40em) {
  .flota { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.5rem 0.75rem; }
  .flota__extra { display: none; }
  .escena__foto .comparador { aspect-ratio: 16 / 10; }
  .escena__cifra { font-size: 2.25rem; }
  .escena__google { gap: 0.7rem; }
  .pildoras { display: flex; flex-wrap: wrap; }
  .pildoras li { white-space: nowrap; }
  .lista__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; }
  .lista__texto { grid-row: 1 / span 2; align-self: center; }
  .lista__precio { justify-self: end; }
  .lista__agendar { grid-column: 2; justify-self: end; }
}
@media (width >= 40em) {
  .acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.25rem 1.5rem; }
  .acciones .boton { width: auto; }
  .pildoras { display: flex; flex-wrap: wrap; }  /* en línea, y se parten si no caben (letra grande) */
  /* Tableta: el número de WhatsApp en la cabecera, para que haya botón en la primera pantalla */
  .cabecera__boton { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0 1.25rem; border-radius: 999px; background: var(--niebla); color: var(--tinta); font-size: var(--t5); font-weight: 600; text-decoration: none; }
  .cabecera__boton:hover { background: var(--petroleo); color: #fff; }
}
@media (width >= 64em) {
  .cabecera__rejilla { height: 5.5rem; }
  .cabecera__nav { display: block; }
  .escena { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "texto foto" "accion foto"; column-gap: 4.5%; row-gap: 2rem; padding-top: 0.25rem; }
  .escena__texto { grid-area: texto; gap: 1.1rem; padding-top: 2.25rem; }
  .escena h1 { font-size: min(5rem, 5.4vw); }
  .escena__foto { grid-area: foto; }
  .escena__foto .comparador { aspect-ratio: 5 / 4; }
  /* El precio flota bajo el chip «Después», sobre la frente: lejos del ojo y de la manija */
  .flota { top: 4.25rem; right: 1.25rem; bottom: auto; padding: 0.85rem 1.1rem; }
  .flota__numero { font-size: 2.5rem; }
  /* La muesca: un recorte blanco en la esquina inferior izquierda de la foto, con las tarjetas adentro */
  .tarjetas { position: relative; grid-area: foto; align-self: end; justify-self: start; z-index: 4; width: min(29rem, 62%); gap: 0.6rem; padding: 0.9rem 0.9rem 0 0; border-radius: 0 1.75rem 0 0; background: #fff; }
  /* Los dos filetes cóncavos de la muesca: la foto dobla su esquina hacia la muesca arriba y a la derecha */
  .tarjetas::before, .tarjetas::after { content: ""; position: absolute; width: 1.75rem; height: 1.75rem; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M0 0V28H28A28 28 0 0 1 0 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
  .tarjetas::before { top: -1.75rem; left: 0; }
  .tarjetas::after { right: -1.75rem; bottom: 0; }
  /* Píldoras translúcidas y de peso medio: se leen como datos, no como botones */
  .pildoras { grid-area: foto; align-self: end; justify-self: end; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin: 0 1.25rem 1.25rem 0; pointer-events: none; }
  .pildoras li { min-height: 2.1rem; padding: 0.35rem 0.9rem; background: rgb(10 52 56 / 0.66); color: #fff; font-weight: 500; }
}

/* ───────── Vitrina · distribución como la referencia (pedidos de Fa, 9 nov 2026) ─────────
   La portada no lleva el bloque de Google: en su lugar va la descripción del servicio elegido.
   En escritorio la composición sigue a DriveGo, con una sola tarjeta dentro de la foto:
   - la rejilla tiene cuatro columnas: descripción (--desc), aire (--hueco), la banda de las dos primeras
     tarjetas (--sobra = 2 tarjetas + 2 espacios) y la foto. El titular y el botón ocupan las tres primeras;
   - las dos primeras tarjetas quedan sobre el blanco de la página; solo la tercera entra en la foto, en una
     muesca blanca del mismo margen por los tres lados (--placa);
   - la descripción va a la izquierda de las tarjetas, con su primera línea a la altura de las miniaturas,
     donde la referencia pone «Why choose us»; el botón sube bajo el apoyo, donde la referencia pone su flecha;
   - debajo de la muesca la foto sigue, un escalón más a la derecha, con sus esquinas redondas;
   - las píldoras van en la esquina inferior derecha de la foto: 2 × 2, o en una columna si no caben.
   La foto crece hasta el alto de la columna del texto, para que el escalón siempre llegue a su pie. */
.escena__nota { max-width: 30rem; color: var(--gris); font-size: var(--t5); font-weight: 500; }
.escena__servicio { margin-bottom: 0.15rem; }
@media (width >= 64em) {
  .escena {
    /* Los mínimos en rem quedan topados por el ancho de la ventana, para que con letra grande en el
       navegador las columnas no le quiten la foto */
    --carta: min(clamp(7.5rem, 10vw, 9.25rem), 12vw); --entre: min(1rem, 1.6vw); --placa: min(0.9rem, 1.5vw);
    --sobra: calc(2 * var(--carta) + 2 * var(--entre));
    --desc: min(clamp(11rem, 15vw, 14rem), 18vw); --hueco: min(1.25rem, 2vw); --aire: 2.5rem;
    --paso: 4.5rem; --franja: 5.5rem; --r: 1.75rem;
    grid-template-columns: var(--desc) var(--hueco) var(--sobra) minmax(0, 1fr); column-gap: 0; row-gap: 0;
    grid-template-rows: auto auto minmax(1.5rem, 1fr) auto var(--franja);
    grid-template-areas:
      "texto texto texto foto"
      "cta cta cta foto"
      ". . . foto"
      "desc . tarjetas foto"
      "desc . . foto";
  }
  .escena__texto { margin-right: var(--aire); }
  /* La foto: 1.08 de proporción, sin pasar del alto de la ventana (para que sus píldoras se vean al abrir)
     y nunca más baja que la columna del texto */
  .escena__foto .comparador { width: 100%; aspect-ratio: 1.08; max-height: max(30rem, 100svh - 7rem); min-height: 100%; }
  /* El botón, bajo el apoyo (la ficha del servicio está en el bloque «Versión 6 · ficha») */
  .acciones { grid-area: cta; justify-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin: 1.75rem var(--aire) 0 0; }
  /* La placa blanca: empieza en la columna de la banda y se sale hacia la foto lo justo para la tercera tarjeta */
  .tarjetas {
    grid-area: tarjetas; align-self: end; justify-self: start;
    grid-template-columns: repeat(3, var(--carta)); width: auto; gap: var(--entre);
    margin: 0; padding: var(--placa); border-radius: 0 var(--r) var(--r) 0;
  }
  .tarjeta { padding: 0.5rem 0.5rem 0.75rem; border-radius: 1.25rem; font-size: var(--t5); }
  .tarjeta__foto { aspect-ratio: 1.12; border-radius: 0.85rem; }
  /* Filete arriba: la foto dobla su esquina hacia la muesca, justo antes de la tercera tarjeta */
  .tarjetas::before { top: calc(-1 * var(--r)); left: var(--sobra); right: auto; bottom: auto; width: var(--r); height: var(--r); }
  /* Debajo: el escalón blanco hasta el pie de la foto, con las dos esquinas redondas de la foto de abajo */
  .tarjetas::after {
    top: 100%; left: var(--sobra); right: auto; bottom: auto; width: calc(var(--paso) + var(--r)); height: var(--franja);
    border-left: var(--paso) solid #fff;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M0 0H28A28 28 0 0 0 0 28Z'/%3E%3C/svg%3E") right top / var(--r) var(--r) no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M0 0V28H28A28 28 0 0 1 0 0Z'/%3E%3C/svg%3E") right bottom / var(--r) var(--r) no-repeat;
  }
  .pildoras { display: grid; grid-template-columns: repeat(2, max-content); justify-content: end; gap: 0.4rem; margin: 0 1.25rem 1.25rem 0; }
  .pildoras li { justify-content: center; }
}
/* Hasta 1439 px la foto no deja espacio para la tarjeta de precio larga: queda compacta, sin su dato
   (que ya va en la descripción), para no cruzar la línea del comparador */
@media (64em <= width < 90em) {
  .flota { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 0.85rem; }
  .flota__extra { display: none; }
  .flota__numero { font-size: 2rem; }
}
/* Hasta 1279 px la foto es más angosta: las píldoras van en una columna */
@media (64em <= width < 80em) {
  .pildoras { grid-template-columns: max-content; }
}

/* ───────── Vitrina · jerarquía del titular (pedido de Fa, 9 nov 2026) ─────────
   Todo el titular usa Monda 400, con tamaño, interlineado y espaciado uniformes.
   La jerarquía se conserva en el tono y las cejas:
   - tono: las de enlace en gris, las clave en tinta;
   - forma: bajo cada palabra clave, detrás del texto y bajo la línea base, la tilde-ceja del logo en
     mandarina. Bajo «GlowUp» va reflejada, como el par de cejas: su parte gruesa queda bajo «Up» y no
     encima de «mirada!». Nada va encima de las letras (una marca arriba se leería como acento).
   Las dos cejas miden lo mismo en em. El tamaño baja lo justo para que «¡Dale un GlowUp» quepa en una
   línea: se mide contra el ancho de la columna del texto (cqi) y nunca pasa del tamaño anterior.
   (Elegida por un panel de tres jueces entre cinco variantes.) */
.escena__texto { container-type: inline-size; }
/* Titular: escala aprobada 0.924, incluido el último aumento del 5 %. */
.escena h1 {
  line-height: 1.1;
  font-size: calc(min(clamp(3.25rem, 2.5rem + 3vw, 4rem), 12.5vw) * .924);
  font-size: calc(min(clamp(3.25rem, 2.5rem + 3vw, 4rem), 100cqi / 6.8) * .924);
}
.escena h1 .h1-enlace { font-family: inherit; font-weight: inherit; font-size: 1em; line-height: inherit; letter-spacing: inherit; color: var(--gris); }
.escena h1 .h1-clave { color: var(--tinta); letter-spacing: inherit; background-repeat: no-repeat; background-size: 2.5em 0.24em; }
.escena h1 .linea:last-child .h1-clave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 51.667' preserveAspectRatio='none'%3E%3Cpath fill='%23E0745E' d='M0 51.667 13 17.667C36.361 4.492 62.582 0 88.996 0 107.869 0 126.558 3.71 144 10.919 93.759 14.742 44.794 28.598 0 51.667Z'/%3E%3C/svg%3E");
  background-position: 0.08em 0.78em;
}
.escena h1 .linea:first-child .h1-clave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 51.667' preserveAspectRatio='none'%3E%3Cpath fill='%23E0745E' transform='translate(144 0) scale(-1 1)' d='M0 51.667 13 17.667C36.361 4.492 62.582 0 88.996 0 107.869 0 126.558 3.71 144 10.919 93.759 14.742 44.794 28.598 0 51.667Z'/%3E%3C/svg%3E");
  background-position: right 0.55em top 0.78em;
}
@media (width >= 64em) {
  .escena h1 { font-size: calc(min(5rem, 4.9vw) * .924); font-size: calc(min(5rem, 5.4vw, 100cqi / 6.8) * .924); }
}

/* ───────── Versión 6 · PALETA A, fotos más cerca y vidrio (pedido de Fa, 10 nov 2026) ─────────
   PALETA A: Deep Forest (botón, borde de la tarjeta elegida, secciones oscuras), Warm Sand (superficies
   claras), Terracotta Clay (solo forma: las cejas del titular) y Golden Hour (acento: la tarjeta elegida, el
   botón al pasar el cursor y el botón sobre fondo oscuro, siempre con texto #1A1A1A).
   Fotos grandes: el acercamiento de esta versión (--zoom) se quitó el mismo día; ver «Encuadre» al final.
   Vidrio: lo que va sobre la foto grande (chips, precio y píldoras) es blanco translúcido con el fondo
   desenfocado, y su texto va en #1A1A1A para leerse sobre cualquier parte de la foto. */
.boton:hover { background: var(--oro); color: var(--tinta); }
.boton--claro { background: var(--oro); color: var(--tinta); }
.boton--claro:hover { background: #fff; }
.tarjeta:has(input:checked) { background: var(--oro); }
/* Material de etiquetas consolidado en mejoras.css · N07. */

/* ───────── Versión 6 · ficha del servicio sobre las tarjetas (pedido de Fa, 10 nov 2026) ─────────
   «Más grande y con más jerarquía»: el nombre del servicio elegido y su línea salen de la columna angosta y se
   vuelven el título de la banda de tarjetas. En escritorio van justo encima de ella, de la orilla izquierda al
   borde de la foto, con el nombre en Monda (alrededor de 0.55 del titular) y la línea en tinta, pegados abajo
   a la banda. La nota (el dato real) se queda en la columna angosta, junto a las tarjetas, donde DriveGo pone
   «Why choose us». Jerarquía: titular > nombre > línea > nota (tamaño, letra y tono).
   Solo se muestra la ficha elegida (:has, sin JavaScript). Para que al cambiar de servicio no se muevan ni
   las tarjetas ni el botón: en escritorio todas miden lo mismo (nombre en un renglón, línea con dos reservados,
   2lh); en teléfono y tableta, donde la letra grande cambia los renglones, se apilan en una celda.
   En el teléfono la ficha va bajo la foto y sobre las tarjetas; la nota baja después del botón, para que el
   botón siga en la primera pantalla. (Variante «banda», elegida por tres jueces entre cuatro, con sus mejoras.) */
.escena__fichas { order: 3; display: grid; }
.escena__ficha { align-self: end; display: grid; gap: 0.3rem; }
.escena:has(#op-total-look:checked) .escena__ficha:not([data-ficha="total-look"]),
.escena:has(#op-lifting:checked) .escena__ficha:not([data-ficha="lifting"]),
.escena:has(#op-organic:checked) .escena__ficha:not([data-ficha="organic"]) { display: none; }
/* Teléfono y tableta: con letra grande los nombres y las líneas cambian de renglones; ahí las tres fichas se
   apilan en una celda y las no elegidas solo se ocultan, así la celda mide lo de la más alta y las tarjetas no
   saltan bajo el dedo. El nombre no pasa de 8.5vw, para quedar en un renglón y debajo del titular */
@supports selector(:has(*)) {
  @media (width < 64em) {
    .escena__ficha { grid-area: 1 / 1; }
    .escena:has(#op-total-look:checked) .escena__ficha:not([data-ficha="total-look"]),
    .escena:has(#op-lifting:checked) .escena__ficha:not([data-ficha="lifting"]),
    .escena:has(#op-organic:checked) .escena__ficha:not([data-ficha="organic"]) { display: grid; visibility: hidden; }
  }
}
.escena__ficha .escena__servicio { margin: 0; font-size: var(--t2); line-height: 1.08; }
.escena__ficha .escena__servicio .m { letter-spacing: -0.025em; }
.escena__ficha .escena__linea { max-width: 34rem; min-height: 2lh; font-size: 1.1875rem; line-height: 1.4; text-wrap: balance; }
.escena .tarjetas { order: 4; }
.escena .acciones { order: 5; margin-top: 0; }
.escena .escena__nota { order: 6; text-wrap: pretty; }
.escena .pildoras { order: 7; }
/* Teléfono: la ficha queda más cerca de las tarjetas que de la foto, y la nota, centrada bajo «o reserva en
   línea», se lee como la letra chica del botón */
@media (width < 40em) {
  .escena { gap: 1rem; }
  .escena__fichas { margin-top: 0.25rem; }
  .escena .escena__nota { justify-self: center; max-width: 34ch; margin-top: -0.25rem; text-align: center; text-wrap: balance; }
}
@media (width >= 64em) {
  .escena {
    --franja: 3.5rem;
    /* El aire entre el botón y la ficha (de 2.75 a 4.75rem, según el alto de la ventana) es el doble o más del
       que hay entre la ficha y las tarjetas: así el botón se agrupa con el titular y la ficha con las tarjetas,
       y el botón no se lee como etiqueta del nombre */
    grid-template-rows: auto auto minmax(clamp(2.75rem, 100svh - 51.5rem, 4.75rem), 1fr) auto auto var(--franja);
    grid-template-areas:
      "texto texto texto foto"
      "cta cta cta foto"
      ". . . foto"
      "ficha ficha ficha foto"
      "nota . tarjetas foto"
      "nota . . foto";
  }
  .escena__texto { padding-top: 0.5rem; }
  /* Menos aire a la derecha del botón: el enlace de AgendaPro cabe a su lado también a 1024 px */
  .escena .acciones { margin: 1.75rem 1rem 0 0; }
  /* La ficha: de la orilla izquierda al borde de la foto (menos el aire), pegada abajo a la banda */
  .escena__fichas { grid-area: ficha; align-self: end; margin: 0 var(--aire) 0.5rem 0; }
  .escena__ficha { gap: 0.4rem; }
  /* Nombre: alrededor de 0.56 del titular, y --t2 (el de los títulos de sección) desde 1440 px */
  .escena__ficha .escena__servicio { font-size: clamp(1.875rem, 3.05vw, 2.75rem); line-height: 1.05; }
  /* Línea: hasta --t3; con 17em de ancho y balance, los tres servicios quedan en dos renglones */
  .escena__ficha .escena__linea { max-width: 17em; font-size: clamp(1.125rem, 2.5vw - 0.75rem, var(--t3)); line-height: 1.35; }
  /* La nota, sola en la columna angosta, con su primera línea a la altura de las miniaturas */
  .escena .escena__nota { grid-area: nota; align-self: start; max-width: 18ch; margin-top: calc(var(--placa) + 0.5rem); font-size: 1rem; line-height: 1.5; }
  /* Lo que va sobre la foto, a la misma distancia de sus orillas que la muesca */
  .escena .comparador__chip { top: 0.9rem; }
  .escena .comparador__chip--antes { left: 0.9rem; }
  .escena .comparador__chip--despues { right: 0.9rem; }
  .escena .flota { right: 0.9rem; }
  .pildoras { margin: 0 0.9rem 0.9rem 0; }
}
/* Escritorio angosto (1024 a 1279 px): la foto llega cerca del pie de la ventana; el alto que sobra queda
   entre el botón y la ficha, para que la ficha se lea con las tarjetas y no con el botón */
@media (64em <= width < 80em) {
  .escena__foto .comparador { min-height: max(100%, min(100svh - 8rem, 42rem)); }
}
/* Escritorio de 1024 a 1439 px: el apoyo baja uno o dos puntos para quedar en dos líneas (con 18 px pasa a
   tres y empuja la foto fuera de la pantalla). Sigue más chico que la línea de la ficha, que es lo elegido */
@media (64em <= width < 80em) { .escena__apoyo { font-size: 1rem; } }
@media (80em <= width < 90em) { .escena__apoyo { font-size: 1.0625rem; } }
/* Ventanas de escritorio bajas (1280 × 800, 1366 × 768, 1280 × 720): ceden el pie de la foto y los márgenes
   de arriba, nunca el aire entre el botón y la ficha, para que las tarjetas y las píldoras sigan en la primera
   pantalla */
@media (width >= 64em) and (height < 52.5em) {
  .escena { --franja: 2.5rem; }
  .escena__texto { gap: 0.8rem; padding-top: 0.25rem; }
  .escena .acciones { margin-top: 1.25rem; }
}
@media (width >= 64em) and (height < 49em) {
  .escena { --franja: 2.25rem; }
  .escena__texto { gap: 0.6rem; padding-top: 0; }
  .escena .acciones { margin-top: 1rem; }
  .escena__fichas { margin-bottom: 0.25rem; }
}
/* El precio de la tarjeta de vidrio, al tamaño de los títulos de sección cuando hay espacio (una medida menos) */
@media (width >= 90em) { .escena .flota__numero { font-size: var(--t2); } }
/* Tableta: la tarjeta de precio sube bajo el chip «Después», como en escritorio, y deja libre el pie de la foto
   que da a la ficha (abajo se leía como etiqueta del nombre del servicio) */
@media (40em <= width < 64em) {
  .escena .flota { top: 3.5rem; right: 0.75rem; bottom: auto; }
}
/* El botón cambia de fondo y de texto en el mismo cuadro: si el fondo se funde y el texto no, por un instante
   queda tinta sobre Deep Forest o blanco sobre Golden Hour */
.boton { transition: none; }
@media (prefers-reduced-motion: no-preference) { .boton { transition: transform 0.12s var(--ease-out); } }
/* Teléfono y tableta: el nombre del servicio no pasa de 8.5vw, para quedar en un renglón y debajo del titular
   también con letra grande */
@media (width < 64em) { .escena__ficha .escena__servicio { font-size: min(var(--t2), 8.5vw); } }

/* ───────── Versión 6.1 · Encuadre de los antes y después (pedido de Fa, 10 nov 2026) ─────────
   «Que se muestre más de la imagen dentro de la misma caja». Las fotos son apaisadas (5:3 y 3:2) y la caja grande
   es casi cuadrada en escritorio: al cubrirla se perdía un tercio de cada foto, y el acercamiento de la versión 6
   cortaba todavía más. Ahora cada foto se escala para que su sujeto (las dos cejas con sus ojos, el ojo con sus
   pestañas, la ceja con su ojo) quepa completo en la caja, en la zona libre de chips, precio y píldoras, y nunca
   se acerca más que «cubrir». Si así la foto no llena la caja, se ve su fondo (.capa__fondo): la misma foto en
   miniatura, continuada en espejo y desenfocada desde armar.py; la orilla nítida se funde en él.
   Datos (en el HTML, desde PARES de armar.py): --r proporción de la foto; --sx --sy --sw --sh rectángulo del sujeto
   en fracciones de la foto; --foco su centro, para el respaldo. Las cuentas usan unidades de contenedor:
   100cqw y 100cqh son el ancho y el alto de la caja. */
.capa { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.comparador .capa--despues { clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.capa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.tarjeta__foto { position: relative; }
.tarjeta__foto img { object-position: var(--foco, 50% 50%); }
.capa__fondo { display: none; }
.comparador__linea, .comparador__chip, .comparador input[type="range"], .duo__foto .chip { z-index: 2; }
@supports (width: 1cqw) {
  .comparador, .duo__foto, .tarjeta__foto { container-type: size; --libre-arr: 0px; --libre-aba: 0px; --libre-izq: 0px; --libre-der: 0px; --holgura: 1.05; }
  /* Zona libre: la foto centra su sujeto debajo de los chips (y del precio) y encima de las píldoras y la tarjeta */
  @media (width >= 40em) { .escena__foto .comparador { --libre-arr: 3.25rem; } }
  @media (width >= 64em) { .escena__foto .comparador { --libre-arr: 3.5rem; --libre-aba: 4.5rem; } }
  .capa, .tarjeta__foto img {
    --cubre: max(100cqw, 100cqh * var(--r));       /* ancho de la foto si llena la caja */
    --contiene: min(100cqw, 100cqh * var(--r));    /* ancho de la foto si se ve entera */
    --zona-w: calc(100cqw - var(--libre-izq) - var(--libre-der));
    --zona-h: calc(100cqh - var(--libre-arr) - var(--libre-aba));
    --ajusta: min(var(--zona-w) / (var(--sw) * var(--holgura)), var(--zona-h) * var(--r) / (var(--sh) * var(--holgura)));
    --iw0: clamp(var(--contiene), var(--ajusta), var(--cubre));
    /* Si a la foto le falta poco para llenar la caja (menos del 8 %), la llena: una banda delgada parece error */
    --iw: min(var(--cubre), var(--iw0) + max(0px, var(--iw0) - 0.92 * var(--cubre)) * 1000);
    --ih: calc(var(--iw) / var(--r));
    --izq: clamp(min(0px, 100cqw - var(--iw)), var(--libre-izq) + var(--zona-w) / 2 - (var(--sx) + var(--sw) / 2) * var(--iw), max(0px, 100cqw - var(--iw)));
    --arr: clamp(min(0px, 100cqh - var(--ih)), var(--libre-arr) + var(--zona-h) / 2 - (var(--sy) + var(--sh) / 2) * var(--ih), max(0px, 100cqh - var(--ih)));
  }
  .tarjeta__foto img { --iw: var(--cubre); }  /* la miniatura siempre llena su caja; solo se centra en el sujeto */
  .capa > img, .tarjeta__foto img { position: absolute; inset: auto; left: var(--izq); top: var(--arr); width: var(--iw); height: var(--ih); max-width: none; object-fit: fill; }
  .capa > img {
    z-index: 1;
    /* Si queda banda, la orilla de la foto nítida se funde hasta 4rem en su fondo, como profundidad de campo. En el
       lash lifting las puntas de las pestañas ya vienen cortadas en la foto original: así se desvanecen en lugar
       de cortarse en seco. Sin banda, no se funde */
    --pluma-a: min(max(0px, var(--arr)) * 3, 4rem);
    --pluma-b: min(max(0px, 100cqh - var(--arr) - var(--ih)) * 3, 4rem);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--pluma-a), #000 calc(100% - var(--pluma-b)), transparent); /* taste-skill-ignore: máscara de la orilla, no relleno */
    mask-image: linear-gradient(to bottom, transparent, #000 var(--pluma-a), #000 calc(100% - var(--pluma-b)), transparent); /* taste-skill-ignore: máscara de la orilla, no relleno */
  }
  /* El fondo mide tres veces la foto y se centra en ella: la caja nunca ve su orilla. Es una miniatura de 1 a 3 KB
     ya desenfocada: no se baja nada más ni se desenfoca al arrastrar */
  .capa__fondo { display: block; position: absolute; z-index: 0; left: calc(var(--izq) - var(--iw)); top: calc(var(--arr) - var(--ih));
    width: calc(var(--iw) * 3); height: calc(var(--ih) * 3); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
}
/* Teléfono y tableta: el precio va compacto, abajo a la derecha del después, y nunca cruza la línea del comparador
   en reposo (no pasa de la mitad de la foto). Así tapa lo menos posible del ojo y de las pestañas. Sigue de vidrio.
   El dato extra y «Precio de lista» van completos en escritorio */
@media (width < 64em) {
  .escena .flota { top: auto; bottom: 0.6rem; right: 0.6rem; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.45rem; row-gap: 0;
    max-width: calc(50% - 1.6rem); padding: 0.35rem 0.75rem 0.4rem; }
  .escena .flota__numero { font-size: 1.5rem; }
  .escena .flota__extra { display: none; }
}
/* Solo va la cifra: «Precio de lista» se queda para los lectores de pantalla (y no se lee como etiqueta del nombre
   del servicio, que va justo debajo de la foto) */
@media (width < 64em) {
  .escena .flota__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Dúo de hombres: los chips van arriba, en la frente, para no tapar la cola de la ceja ni el ojo abierto */
.duo__foto .chip { top: 0.5rem; bottom: auto; }
/* ───────── fin del encuadre ───────── */