/* === css/fuentes.css === */
/* Radiance · tipografías alojadas en el tema (4.1d). Sustituyen a la hoja de Google Fonts: mismas familias, mismos pesos.
   Inter y Manrope son fuentes variables (licencia SIL OFL 1.1, ver fonts/LEEME.txt): un archivo por subconjunto cubre todos los pesos.
   Pesos pedidos antes a Google: Manrope 400–600 e Inter 300–600. unicode-range igual al de Google: «latin-ext» solo se descarga si la página usa esos caracteres.
   Las rutas son relativas a css/ (este archivo se une a cada paquete css/pg-<página>.css en el build). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === css/v5.css === */
/* =========================================================
   Radiance v5 — look "Hannah Spa" (Framer), estructura sencilla
   Medido: Gilda Display 400 (titulares, interlineado 1.15,
   -0.03/-0.04em) + Inter (16px, gris cálido)
   Secciones alternas blanco / crema · una sección verde bosque
   Botones píldora con flecha (terracota → mostaza) · tarjetas 8px
   Los estilos de las secciones antiguas (productos, nosotras, reseñas,
   sedes, FAQ, cierre y pie) viven en v5-legado.css (solo propuestas hero-*).
   ========================================================= */
:root {
  --blanco: #FFFFFF;
  --crema: #FAF5EE;
  --crema-2: #F3EBDF;
  --verde: #215E4F;       /* verde de las piezas de Radiance */
  --verde-hondo: #17463A;
  --verde-claro: #E3EEE9;
  --acento: #CE893B;
  --acento-hondo: #A86A28;
  --acento-suave: #F5E6D0;
  --promo: #C63B2D;       /* insignia y precio de promoción (4.18): blanco encima y sobre blanco cumplen AA */
  --promo-suave: #FBE7E3;
  /* Botón principal mostaza «Seda cálida» (4.27, propuesta D que eligió Cristian el 29 oct): degradado cálido en diagonal,
     brillo suave arriba, reflejo de 1 px en el borde y sombra del mismo tono; al pasar, se «enciende» una luz por arriba.
     Respecto de la maqueta, los tonos van un 4 % más hondos, el brillo termina al 35 % del alto y la luz se queda en el
     borde superior: con el CSS exacto el texto blanco bajaba a 4,39:1 (3,38:1 en hover); así queda en 4,94:1 o más en
     toda la zona del texto, en los dos estados (5,3:1 en el centro). Un solo componente: .boton--principal, el botón
     del header y el «hover» mostaza de los demás botones. El brillo va como primera capa del fondo; la luz, en ::before
     (un degradado no se anima). */
  --boton-fondo: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 35%), linear-gradient(115deg, #8A5116 0%, #9C6126 38%, #955A1F 62%, #7E4618 100%);
  --boton-fondo-hover: var(--boton-fondo);
  --boton-sombra: inset 0 1px 0 rgba(255, 236, 206, .45), 0 12px 26px -12px rgba(160, 96, 30, .85), 0 3px 8px -4px rgba(80, 44, 10, .4);
  --boton-sombra-hover: inset 0 1px 0 rgba(255, 236, 206, .6), 0 18px 34px -12px rgba(176, 108, 36, .9), 0 3px 8px -4px rgba(80, 44, 10, .4);
  --boton-luz: radial-gradient(60% 60% at 50% 0%, rgba(255, 214, 150, .3), rgba(255, 214, 150, 0) 40%);
  --texto: #1F1A15;
  --texto-60: rgba(31, 26, 21, .62);
  --texto-45: rgba(31, 26, 21, .6); /* subido de .45 por contraste AA */
  --claro: #FFFFFF;
  --claro-80: rgba(255, 255, 255, .82);
  --claro-20: rgba(255, 255, 255, .2);

  --serif: "Manrope", "Inter", sans-serif; /* respaldo serif: "Gilda Display" (ver ?v=5.1) */
  --sans: "Inter", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 4.6vw, 4rem);
  --t-h2: clamp(2rem, 3.4vw, 3.25rem);
  /* Escala tipográfica (4.26): cada componente toma un escalón y nada baja de 12 px. Rige en el celular; desde 901 px
     suben tres escalones para mantener la proporción del escritorio. */
  --t-min: 12px;       /* insignias en mayúsculas (PROMO), contadores y duración de los videos */
  --t-nota: 13px;      /* mínimo del contenido: notas, etiquetas, precios tachados, «por sesión» y enlaces del pie */
  --t-chico: 14px;     /* líneas cortas de las tarjetas, «A partir de», «Ver más» y botón del menú */
  --t-texto: 16px;     /* texto, descripción del carrusel y botones */
  --t-entrada: 17px;   /* entradilla del carrusel en escritorio y títulos de las tarjetas pequeñas (¿Por qué?) */
  --t-precio: 18px;    /* precio principal de una tarjeta */
  --t-tarjeta: 20px;   /* nombre de una tarjeta (Manrope 600) */

  --contenedor: 1320px;
  --pad-x: 28px;
  --esp-seccion: 80px;
  --esp-junta: 32px;      /* 4.33: arriba de una sección blanca que sigue a otra blanca */
  --borde-tarjeta: rgba(31, 26, 21, .08); /* 4.33: borde fino de las tarjetas sobre fondo blanco */
  --r-tarjeta: 8px;
  --r-pildora: 99px;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-hover: cubic-bezier(.44, 0, .56, 1);
}
@media (min-width: 901px) { :root { --t-chico: 15px; --t-precio: 20px; --t-tarjeta: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanco); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.45; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, dl, dd, ul, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* sin border-radius: el anillo sigue la forma del elemento, sin saltos */
[id] { scroll-margin-top: 80px; }
.contenedor { width: 100%; max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; padding-inline: var(--pad-x); }
.seccion { padding: var(--esp-seccion) 0; }
/* 4.33 · Fondo blanco en toda la web: entre dos secciones blancas seguidas, la segunda empieza más cerca (hueco de
   112 px en escritorio y 80 en el celular, en vez de 160 y 112). La banda verde de Resultados (.ad-c) lleva su espacio.
   Especificidad de una clase: las secciones que fijan su propio espacio arriba lo conservan. */
:where(.seccion:not(.ad-c), .mv-zonas, .sv-lista, .pm) + .seccion:where(:not(.ad-c)) { padding-top: var(--esp-junta); }

/* ---------- Íconos (Lucide) ---------- */
.lucide { width: 18px; height: 18px; stroke-width: 1.75; flex: none; }

/* ---------- Tipografía ---------- */
.eti { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-hondo); font-size: var(--t-nota); font-weight: 500; letter-spacing: 0; }
.eti .lucide { width: 12px; height: 12px; }
.titulo { margin-top: 16px; font-family: var(--serif); font-size: var(--t-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.04em; }
.titulo em { font-style: normal; color: var(--acento-hondo); }
.parrafo { margin-top: 16px; max-width: 46ch; color: var(--texto-60); }
.cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r-pildora); font-size: var(--t-texto); font-weight: 600; white-space: nowrap; transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover), box-shadow .25s var(--curva), transform .25s var(--curva); }
.boton--principal { position: relative; isolation: isolate; flex-direction: row-reverse; padding: 0 20px 0 16px; background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); }
.boton--principal:hover { background: var(--boton-fondo-hover); box-shadow: var(--boton-sombra-hover); transform: translateY(-2px) scale(1.01); }
.boton--principal:active { transform: none; }
/* 4.27: la luz de arriba se enciende al pasar (capa detrás del texto: isolation en el botón, z-index -1 en la capa) */
.boton--principal::before, .nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--boton-luz); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.boton--principal:hover::before, .nav__cta:hover::before { opacity: 1; }
.boton--principal:focus-visible, .nav__cta:focus-visible { outline-color: var(--acento-hondo); } /* anillo a 3,9:1 sobre blanco */
.boton__icono.lucide, .boton .lucide { width: 16px; height: 16px; }
.boton--secundario { background: var(--claro-20); color: var(--claro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.boton--secundario:hover { background: var(--claro); color: var(--texto); }
.boton--oscuro { background: var(--verde); color: var(--claro); }
.boton--oscuro:hover { background: var(--boton-fondo); }
.boton--contorno { background: var(--crema-2); color: var(--texto); }
.boton--contorno:hover { background: var(--boton-fondo); color: var(--blanco); }
/* Celular (4.20b): botones con 48 px de zona táctil */
@media (max-width: 900px) { .boton { min-height: 48px; } }
/* 4.33 · Botones de texto más limpios y más altos: 52 px en escritorio y en el celular, sin la flecha. Los íconos con
   significado (regalo, copiar, Waze, mapa, WhatsApp) se quedan, como íconos de línea. Más fuerte que las medidas de cada
   sección, para que todos los botones midan lo mismo. «Cotiza y reserva» de la cabecera, 44 px en escritorio. */
body.v5 .boton { height: 52px; min-height: 52px; padding-inline: 28px; }
body.v5 .boton .lucide-arrow-right, body.v5 .boton .lucide-arrow-left, body.v5 .boton [data-lucide="arrow-right"], body.v5 .boton [data-lucide="arrow-left"] { display: none; }
@media (min-width: 901px) { body.v5 .nav .nav__cta { height: 44px; padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .boton, .nav__cta, .boton--principal::before, .nav__cta::before { transition: none; } .boton--principal:hover, .nav__cta:hover { transform: none; } }
/* 4.40 · Casilla propia en toda la web, con el dibujo de .bv-priv__caja (blog) y .ct-priv__caja (contacto): toda casilla
   nativa toma este estilo. Las que ya dibujan su caja ocultan el input con una regla posterior y no cambian. */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-block; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid rgba(31, 26, 21, .24); border-radius: 7px; background: var(--blanco) no-repeat center / 15px 15px; vertical-align: middle; cursor: pointer; transition: background-color .2s var(--curva-hover), border-color .2s var(--curva-hover), box-shadow .2s var(--curva-hover); }
input[type="checkbox"]:hover { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(206, 137, 59, .14); }
input[type="checkbox"]:checked { border-color: var(--acento); background-color: var(--acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.enlace { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; color: var(--texto-60); }
.enlace:hover { color: var(--acento-hondo); }

/* =========================================================
   NAV — transparente sobre el hero, blanca al bajar
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 50; background: var(--blanco); }
.nav__fila { max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; padding: 0 var(--pad-x); }
.nav__logo img { width: 100px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 13.5px; color: var(--texto-60); }
.nav__links a:hover { color: var(--texto); }
.nav__acciones { display: flex; align-items: center; gap: 12px; }
.nav__resumen { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--crema); }
.nav__contador { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pildora); background: var(--acento); color: var(--blanco); font-size: var(--t-min); font-weight: 600; line-height: 17px; text-align: center; letter-spacing: 0; }
.nav__cta { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border-radius: var(--r-pildora); background: var(--boton-fondo); color: var(--blanco); box-shadow: var(--boton-sombra); font-size: var(--t-chico); font-weight: 600; transition: background-color .2s var(--curva-hover), box-shadow .25s ease, transform .25s ease; }
.nav__cta:hover { background: var(--boton-fondo-hover); box-shadow: var(--boton-sombra-hover); transform: translateY(-2px) scale(1.01); }
.nav__cta:active { transform: none; }

/* =========================================================
   HERO DE PROMOCIONES — base (la home usa la variante C de hero-variantes.css)
   ========================================================= */
.hero { position: relative; height: clamp(580px, calc(100svh - 64px - 64px), 820px); margin-bottom: 60px; background: var(--crema); }
.hero__pista { position: absolute; inset: 0; overflow: hidden; }
.promo { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; max-width: calc(var(--contenedor) + var(--pad-x) * 2); margin-inline: auto; padding: 0 var(--pad-x) 70px; opacity: 0; visibility: hidden; transition: opacity .8s var(--curva), visibility 0s linear .8s; }
.promo.activa { opacity: 1; visibility: visible; transition: opacity .8s var(--curva), visibility 0s; }
.promo__texto { position: relative; z-index: 2; max-width: 600px; }
.promo__eti { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--r-pildora); background: var(--acento-suave); color: var(--acento-hondo); font-size: var(--t-nota); font-weight: 500; letter-spacing: 0; }
.promo__eti .lucide { box-sizing: content-box; width: 12px; height: 12px; padding: 5px; border-radius: 50%; background: var(--acento); color: var(--blanco); }
.promo__titulo { margin-top: 20px; font-family: var(--serif); font-size: clamp(2.75rem, 5.2vw, 4.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; }
.promo__titulo em { font-style: normal; color: var(--acento-hondo); }
.promo__sub { margin-top: 18px; max-width: 44ch; font-size: var(--t-entrada); color: var(--texto-60); }
.promo__beneficios { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-size: 14px; }
.promo__beneficios li { display: flex; align-items: center; gap: 10px; }
.promo__beneficios .lucide { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--acento); color: var(--acento-hondo); }
.promo__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.promo__ctas .boton { height: 50px; padding-inline: 24px 22px; }
.promo__ctas .boton--secundario { background: var(--blanco); color: var(--texto); }
.promo__ctas .boton--secundario:hover { background: var(--boton-fondo); color: var(--blanco); }
.promo__nota { margin-top: 16px; font-size: var(--t-nota); color: var(--texto-45); }
.promo.activa .promo__texto > * { animation: sube .8s var(--curva) both; }
.promo.activa .promo__texto > *:nth-child(2) { animation-delay: .07s; }
.promo.activa .promo__texto > *:nth-child(3) { animation-delay: .14s; }
.promo.activa .promo__texto > *:nth-child(4) { animation-delay: .21s; }
.promo.activa .promo__texto > *:nth-child(5) { animation-delay: .28s; }
@keyframes sube { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes llenar { to { width: 100%; } }

/* Imagen circular: se recorta contra el borde inferior del hero */
.promo__circulo { position: relative; justify-self: end; align-self: end; width: min(100%, 620px); aspect-ratio: 1; min-height: 0; margin-bottom: -120px; }
.promo__circulo::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: var(--acento-suave); opacity: .7; }
.promo__circulo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--curva); }
.promo.activa .promo__circulo img { transform: none; }

.tratamientos { padding-top: var(--esp-seccion); }

/* =========================================================
   TRATAMIENTOS · flechas y carriles comunes
   ========================================================= */
.tratamientos { padding-bottom: var(--esp-seccion); }
.flechas { display: flex; gap: 8px; }
.flecha { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--crema); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.flecha:hover { background: var(--acento); color: var(--blanco); }
.carril { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); scroll-padding-inline: max(var(--pad-x), calc((100% - var(--contenedor)) / 2)); }
.carril::-webkit-scrollbar { display: none; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testimonios { padding-bottom: var(--esp-seccion); }

/* ---------- Aviso y barra móvil ---------- */
.aviso { position: fixed; left: 50%; bottom: 28px; z-index: 80; padding: 12px 20px; border-radius: var(--r-pildora); background: var(--verde); color: var(--claro); font-size: 14px; white-space: nowrap; opacity: 0; transform: translate(-50%, 20px); transition: opacity .4s var(--curva), transform .4s var(--curva); pointer-events: none; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.barra-movil { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
}
@media (max-width: 900px) {
  :root { --pad-x: 18px; --esp-seccion: 56px; --esp-junta: 24px; }
  .nav__fila { height: 58px; }
  .nav__cta { display: none; }
  .hero { height: auto; margin-bottom: 0; padding-bottom: 20px; }
  .hero__pista { position: relative; display: grid; }
  .promo { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 22px; padding: 22px var(--pad-x) 8px; }
  .promo__circulo { align-self: center; justify-self: auto; width: min(78vw, 360px); margin: 18px 0 0; }
  .promo__circulo::before { inset: -14px; }
  .promo__titulo { font-size: 2.5rem; margin-top: 14px; }
  .promo__sub { font-size: var(--t-texto); margin-top: 12px; }
  .promo__beneficios { gap: 8px 14px; font-size: 13px; margin-top: 16px; }
  .promo__beneficios .lucide { padding: 6px; width: 14px; height: 14px; }
  .promo__ctas { margin-top: 20px; }
  .promo__ctas .boton { flex: 1 1 auto; height: 46px; }
  .tratamientos { padding-top: var(--esp-seccion); }
  .cabecera { margin-bottom: 24px; }
  .cabecera .flechas { display: none; }
  body { padding-bottom: 76px; }
  .barra-movil { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; padding: 6px; border-radius: var(--r-pildora); background: var(--verde); transform: translateY(140%); transition: transform .5s var(--curva); }
  .barra-movil.activa { transform: none; }
  .barra-movil .boton { flex: 1; height: 48px; }
  .barra-movil__wa { flex: none; display: grid; place-items: center; width: 48px; border-radius: 50%; background: var(--blanco); color: var(--verde); }
}

/* ---------- Títulos en Manrope (sans) ---------- */
:root:not(.titulos-serif) :is(h1, h2, h3, [class*="titulo"], [class*="nombre"], .fh__q, .pf__frase) { font-weight: var(--peso-titulo, 500); letter-spacing: var(--tracking-titulo, -0.035em); }

/* === css/carrito.css === */
/* =========================================================
   Mi pedido · piezas comunes (web v5) — se carga en TODAS las páginas, después de v5.css y home-ui.css.
   Lo usa js/carrito.js: el botón «Cotiza y reserva» del header lleva a pedido.html con el n.º de zonas dentro (4.22) y,
   al agregar, aparece el mini-carrito fijo abajo (4.18, maqueta «Cotiza y reserva» v3).
   1. Base  2. Fotos y vacío  3. Insignia PROMO, precio promo y desplegable (ventanas y pedido)  4. Mini-carrito
   5. Botón «Cotiza y reserva» del header
   ========================================================= */
:root {
  --cp-acento-txt: #8F5A22;          /* mostaza oscuro, AA sobre blanco y crema */
  --cp-linea: rgba(31, 26, 21, .1);
  --cp-borde: rgba(31, 26, 21, .16);
  --cp-error: #B3261E;
}

/* ---------- 1. Base ---------- */
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wa-ico { width: 21px; height: 21px; flex: none; }
@keyframes mc-pulso { 0% { box-shadow: 0 0 0 0 rgba(206, 137, 59, .45); } 100% { box-shadow: 0 0 0 12px rgba(206, 137, 59, 0); } }
@keyframes mc-salto { 0%, 100% { transform: none; } 40% { transform: scale(1.35); } }

/* ---------- 2. Fotos y estado vacío ---------- */
.pd-item__foto, .mini__foto { position: relative; display: block; overflow: hidden; flex: none; background: var(--crema-2); }
.pd-item__foto img, .mini__foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-vacia { display: grid; place-items: center; width: 100%; height: 100%; color: var(--cp-acento-txt); }
.foto-vacia .lucide { width: 40%; height: 40%; max-width: 32px; max-height: 32px; }
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vacio__icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--acento-suave); color: var(--cp-acento-txt); }
.vacio__icono .lucide { width: 26px; height: 26px; }
.vacio__t { margin-top: 16px; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.vacio__ctas { display: grid; gap: 12px; width: 100%; max-width: 300px; margin-top: 20px; }
.vacio__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: var(--r-pildora); background: var(--acento); color: var(--blanco); font-size: 15px; font-weight: 600; transition: background-color .2s var(--curva-hover); }
.vacio__cta:hover { background: var(--acento-hondo); }
.vacio__cta--b { background: var(--blanco); color: var(--texto); }
.vacio__cta--b:hover { background: var(--crema-2); }
.vacio__cta .lucide { width: 18px; height: 18px; }

/* ---------- 3. Insignia PROMO, precio promo y desplegable en píldora ---------- */
.eti-promo { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: var(--r-pildora); background: var(--promo); color: var(--blanco); font-family: var(--sans); font-size: var(--t-min); font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.precio-promo { color: var(--promo); }
.eti-promo.eti-cyber { background: #215E4F; }
.precio-promo.precio-cyber { color: #8F5A22; }
.sel { position: relative; display: inline-flex; align-items: center; }
.sel select { min-height: 40px; padding: 0 36px 0 16px; border: 1.5px solid var(--cp-borde); border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font: 600 14px/1.2 var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .2s var(--curva-hover); }
.sel select:hover { border-color: rgba(31, 26, 21, .32); }
.sel select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--texto-60); border-bottom: 2px solid var(--texto-60); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
/* «S/39.8 c/u · Ahorras S/296»: el ahorro en verde */
.c-u { color: var(--texto-60); font-size: 13px; font-variant-numeric: tabular-nums; }
.c-u .ahorro { color: var(--verde); font-weight: 600; }

/* ---------- 4. Mini-carrito fijo abajo (al agregar) ---------- */
.mini { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 12px; max-width: 480px; margin: 0 auto; padding: 12px; border: 1px solid var(--cp-linea); border-radius: 20px; background: var(--blanco); color: var(--texto); box-shadow: 0 18px 40px -18px rgba(31, 26, 21, .45); transform: translateY(calc(100% + 32px)); transition: transform .3s var(--curva); }
.mini.abierto { transform: none; }
.mini[hidden] { display: none; }
.mini__ok { display: flex; align-items: center; gap: 12px; }
.mini__foto { width: 40px; height: 40px; border-radius: 10px; }
.mini__txt { min-width: 0; line-height: 1.35; }
.mini__txt b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mini__txt span { display: block; color: var(--texto-60); font-size: 13px; }
.mini__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-pildora); font-size: 15px; font-weight: 600; text-align: center; transition: background-color .2s var(--curva-hover); }
.mini__btn--s { background: var(--crema-2); color: var(--texto); }
.mini__btn--s:hover { background: #EADFCF; }
.mini__btn--v { background: var(--verde); color: var(--blanco); }
.mini__btn--v:hover { background: var(--verde-hondo); }
.mini :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- 5. Botón «Cotiza y reserva» del header (4.22) ----------
   «Reservar» (→ contacto) y el ícono de carrito pasan a ser un solo botón → pedido con el n.º de zonas dentro: píldora con
   los colores invertidos del botón, oculta con el pedido vacío (js/carrito.js). Celular: mismo alto de 36 px (44 px para el
   dedo, home-ui.css); por debajo de 360 px dice «Cotiza». 4.20: ícono de pedido (lista, Hugeicons task-01, en línea en el
   HTML para que no salte al cargar) y sin «Consulta gratis» en el menú. */
.nav__resumen { display: none; } /* por si una página guardada en caché aún lo trae */
.nav .nav__cta { gap: 8px; padding: 0 20px 0 16px; }
.nav__cta-ico { flex: none; width: 18px; height: 18px; }
@media (max-width: 900px) { .nav .nav__cta { padding: 0 16px 0 12px; } .nav__cta-ico { width: 16px; height: 16px; } }
.nav__cta-t { white-space: nowrap; }
.nav__cta .nav__contador { position: static; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pildora); background: var(--blanco); color: var(--texto); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.nav__cta .nav__contador[hidden] { display: none; }
/* Con contador: la píldora interior queda a 8 px del borde derecho, como el alto */
.nav__cta:has(.nav__contador:not([hidden])) { padding-right: 8px; }
/* 4.36 (Cristian, 29 oct): en la portada el botón ya es marrón (4.27), así que el contador es blanco con el número oscuro,
   igual que en el resto de páginas (antes, negro sobre marrón: no se leía) */
/* Al agregar una zona: el botón late y el número salta */
.nav__cta--pulso { animation: mc-pulso .6s var(--curva); }
.nav__cta--pulso .nav__contador { animation: mc-salto .6s var(--curva); }
@media (max-width: 359px) {
  .nav__cta-mas { display: none; } /* «Cotiza» */
}

@media (prefers-reduced-motion: reduce) {
  .mini { transition: none !important; }
  .nav__cta--pulso, .nav__cta--pulso .nav__contador { animation: none; }
}

/* === css/pedido.css === */
/* =========================================================
   «Cotiza y reserva» (pedido.html) · web v5 · 4.21b: propuesta A de seo/maquetas/cotiza-y-reserva-v4/ con los ajustes
   de Cristian (26 oct 2026). Se carga después de v5.css (tokens) y carrito.css (insignia PROMO, precio promo, desplegable
   en píldora y línea «c/u · Ahorras»).
   Modo checkout: cabecera mínima, sin menú, sin cierre, sin pie y sin el botón flotante de WhatsApp.
   Celular primero: una columna (Tus zonas con el resumen · 1 Sede · 2 Día y turno · 3 Tus datos · beneficios) y el botón
   fijo abajo. Escritorio (≥ 1000 px): pasos a la izquierda y el resumen fijo a la derecha.
   Pedido vacío (4.22, body.ck--vacio): solo el paso de elegir zonas, en una columna y sin la barra del botón.
   Espaciados en múltiplos de 4; áreas táctiles de 44 px; contraste AA y bordes de controles a 3:1.
   1. Base y cabecera  2. Bloques y pasos  3. Tus zonas y resumen  4. Lista de zonas (vacío y hoja)  5. Sede
   6. Día y turno  7. Tus datos  8. Beneficios y botón  9. Hoja «Agregar zona»  10. Escritorio
   ========================================================= */
:root {
  --ck-linea: rgba(31, 26, 21, .1);
  --ck-control: rgba(31, 26, 21, .5); /* borde de radios, casilla, campos, desplegables y opciones: 3,3:1 sobre blanco */
  --ck-error: #B3261E;
  --ck-sombra: 0 10px 30px rgba(31, 26, 21, .08); /* 4.24: la misma sombra suave de las tarjetas de la portada */
  --ck-apagado: #ECEAE7; /* 4.24: botón desactivado en gris claro */
}

/* ---------- 1. Base y cabecera mínima ---------- */
body.ck { --pad-x: 16px; background: var(--blanco); } /* 4.33: blanco; los bloques llevan borde fino */
.ck [hidden] { display: none !important; }
.ck :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.js .ck-form:not(.ck-form--listo) { visibility: hidden; } /* hasta que js/pedido.js lo pinta: sin salto de diseño */
.ck-cab { background: var(--blanco); border-bottom: 1px solid var(--ck-linea); }
.ck-cab__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; height: 56px; margin: 0 auto; padding: 0 var(--pad-x); }
.ck-cab__logo { display: flex; align-items: center; min-height: 44px; }
.ck-cab__logo img { width: 104px; height: auto; } /* 4.31: el mismo logo que en la cabecera del resto de la web */
@media (min-width: 901px) { .ck-cab__in { height: 76px; } .ck-cab__logo img { width: 150px; } }
.ck-cab__volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--verde); font-size: 14px; font-weight: 600; }
.ck-cab__volver svg { width: 16px; height: 16px; flex: none; }
.ck-cab__volver:hover { color: var(--verde-hondo); text-decoration: underline; text-underline-offset: 3px; }
.ck--vacio .ck-cab__volver { display: none; } /* pedido vacío: la página ya es el paso de elegir zonas (4.22) */
.ck-main { padding: 16px 0 32px; }
.ck-in { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad-x); }
.ck-titulo { margin: 4px 0 16px; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; outline: none; }
.ck-titulo em { font-style: normal; color: var(--acento-hondo); }
.ck-form { display: grid; gap: 12px; margin: 0; }
.ck-lado, .ck-pasos { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* ---------- 2. Bloques y pasos numerados (1 Sede · 2 Día y turno · 3 Tus datos; «Tus zonas» va sin número) ---------- */
.ck-bloque { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px var(--ck-linea), var(--ck-sombra); scroll-margin-top: 16px; }
.ck-bloque__cab { display: flex; flex-direction: column; gap: 4px; }
.ck-bloque__t { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.ck-bloque__ayuda { margin: 0; color: var(--texto-60); font-size: 13px; }
.ck-pasos { counter-reset: paso; }
.ck-num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); font: 600 13px/1 var(--sans); letter-spacing: 0; counter-increment: paso; }
.ck-num::before { content: counter(paso); }
.ck-err { margin: 0; color: var(--ck-error); font-size: 13px; font-weight: 500; }
.ck-req { margin-left: 4px; color: var(--ck-error); font-weight: 600; }
.ck-bloque__t .ck-req { margin-left: -4px; } /* el título es flex con 8 px entre piezas: el asterisco queda a 4 px */
.ck-opcional { color: var(--texto-60); font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.ck-err:empty { display: none; }

/* ---------- 3. Tus zonas (filas sin foto) y resumen ---------- */
.ck-items { display: flex; flex-direction: column; gap: 12px; }
.pd-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--cp-linea); }
.pd-item:last-child { padding-bottom: 0; border-bottom: 0; }
.pd-item__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; }
.pd-item__nom { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-weight: 600; }
.pd-item__zona { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-item__gen { flex: none; color: var(--texto-60); font-size: var(--t-nota); font-weight: 400; }
/* 4.24: el total y debajo, en pequeño, «S/41 x sesión» */
.pd-item__precio { display: flex; flex-direction: column; align-items: flex-end; margin: 0; line-height: 1.25; }
.pd-item__precio b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-item__precio small { color: var(--texto-60); font-size: var(--t-nota); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ver la zona (4.24): ojo junto al nombre (28 px a la vista, 44 px para el dedo); toda la fila también abre la ficha */
.pd-item--ficha .pd-item__cab { cursor: pointer; }
.pd-item__ver { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--texto-60); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.pd-item__ver::after { content: ""; position: absolute; inset: -8px; }
.pd-item__ver svg { width: 18px; height: 18px; }
.pd-item__ver:hover, .pd-item--abierta .pd-item__ver { background: var(--crema); color: var(--texto); }
.pd-item__det { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; border-radius: 12px; background: var(--crema); }
.pd-item__det:not(:has(.pd-item__foto)) { grid-template-columns: minmax(0, 1fr); }
.pd-item__foto { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: var(--crema-2); }
.pd-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.pd-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; line-height: 1.4; }
.pd-item__info p { margin: 0; }
.pd-item__dur { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pd-item__dur svg { width: 14px; height: 14px; flex: none; }
.pd-item__nota { color: var(--texto-60); font-size: var(--t-nota); }
/* Quitar: 32 px a la vista, 44 px para el dedo */
.pd-item__quitar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--texto-60); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.pd-item__quitar::after { content: ""; position: absolute; inset: -6px; }
.pd-item__quitar:hover { background: var(--promo-suave); color: var(--promo); } /* 4.24: rojo suave */
.pd-item__quitar svg { width: 18px; height: 18px; }
.pd-item__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pd-item__pie .c-u { text-align: right; }
.ck .c-u .ahorro { color: var(--promo); }
.ck .sel select { min-height: 44px; border-color: var(--ck-control); } /* área táctil de 44 px y borde a 3:1 */
.pd-otra { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px dashed var(--cp-borde); border-radius: 12px; background: transparent; color: var(--verde); font-size: 15px; font-weight: 600; transition: background-color .2s var(--curva-hover), border-color .2s var(--curva-hover); }
.pd-otra:hover { border-color: var(--verde); background: var(--verde-claro); }
/* Pedido vacío: «Ver todas las zonas» (abre la misma hoja), con borde continuo y sin el «+» */
.pd-otra--todas { border-style: solid; border-color: var(--ck-control); }
.pd-otra--todas > [aria-hidden] { display: none; }
.pd-consulta { justify-self: center; align-self: center; padding: 8px 4px; color: var(--texto-60); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pd-consulta:hover { color: var(--texto); }
.ck-resumen { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ck-linea); }
.ck-resumen__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; }
.ck-resumen__fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-resumen__ahorro { color: var(--promo); font-weight: 600; }
.ck-resumen__total span { font-size: 16px; font-weight: 600; }
.ck-resumen__total small { margin-left: 4px; color: var(--texto-60); font-size: 13px; font-weight: 400; }
.ck-resumen__total b { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
/* Pedido vacío y botón tocado: la lista de zonas se resalta */
.ck-mal .ck-items--lista { border-radius: 12px; box-shadow: 0 0 0 2px var(--ck-error); }

/* ---------- 4. Lista de zonas (pedido vacío en la página y hoja «Agregar zona») ---------- */
.zl__cab { display: flex; flex-direction: column; gap: 8px; }
.zl__gen { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--crema-2); }
.zl__gen button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background-color .2s var(--curva-hover); }
.zl__gen .lucide { width: 16px; height: 16px; color: var(--acento-hondo); }
.zl__gen button::after { content: ""; position: absolute; inset: -2px 0; } /* área táctil de 44 px */
.zl__gen button[aria-pressed="true"] { background: var(--blanco); box-shadow: 0 1px 3px rgba(31, 26, 21, .15); }
.zl__lista { display: flex; flex-direction: column; }
.zl__grupo { margin: 0; padding: 12px 0 4px; color: var(--texto-60); font-size: var(--t-min); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.zl__nada { margin: 0; padding: 16px 0; color: var(--texto-60); font-size: 14px; }
.zfila { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--cp-linea); text-align: left; }
.zfila__foto { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--crema-2); }
.zfila__foto img { width: 100%; height: 100%; object-fit: cover; }
.zfila__txt { display: flex; flex-direction: column; min-width: 0; }
.zfila__txt b { display: block; font-size: 15px; font-weight: 600; }
/* PROMO pegada al nombre: va con la última palabra aunque el nombre ocupe dos líneas (4.22) */
.zfila__ult { white-space: nowrap; }
.zfila__txt .eti-promo { margin-left: 8px; vertical-align: 1px; }
.zfila__desde { color: var(--texto-60); font-size: 13px; }
.zfila__mas { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); font-size: 20px; line-height: 1; }
.zfila[aria-pressed="true"] .zfila__mas { background: var(--verde); color: var(--blanco); font-size: 14px; }
.zfila:hover .zfila__mas { box-shadow: 0 0 0 4px var(--verde-claro); }
/* Buscador (hoja y pedido vacío) */
.pd-entrada { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ck-control); border-radius: 12px; background: var(--blanco); transition: border-color .2s var(--curva-hover); }
.pd-entrada:focus-within { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.pd-entrada input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 16px; outline: none; }
.pd-entrada input::placeholder { color: var(--texto-60); }
.pd-entrada input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.ck .pd-entrada input:focus-visible, .pd-hoja .pd-entrada input:focus-visible { outline: none; } /* el foco lo marca el borde del campo */

/* ---------- 5. Sede: lista de radio separada por una línea ---------- */
.ck-sedes { display: flex; flex-direction: column; }
.ck-sede { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 56px; padding: 12px 0; cursor: pointer; }
.ck-sede + .ck-sede { border-top: 1px solid var(--ck-linea); }
.ck-radio { width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--ck-control); border-radius: 50%; background: var(--blanco); transition: border .15s var(--curva-hover); }
.ck-sede input:checked + .ck-radio { border: 6px solid var(--verde); }
.ck-sede:has(input:focus-visible) .ck-radio { outline: 2px solid var(--verde); outline-offset: 2px; }
.ck-sede:hover .ck-radio { border-color: var(--verde); }
.ck-sede__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ck-sede__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ck-sede__n { font-size: 16px; font-weight: 600; }
.ck-sede:has(input:checked) .ck-sede__n { color: var(--verde); }
.ck-sede__hor { color: var(--texto-60); font-size: 13px; }
.ck-sede__dir { font-size: 13px; line-height: 1.4; }
.ck-mal .ck-radio { border-color: var(--ck-error); }

/* ---------- 6. Día y turno: opciones con aspecto de botón ---------- */
.ck-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ck-eti { margin: 0; font-size: 14px; font-weight: 600; }
.ck-dias { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -8px; padding: 8px; }
.ck-dias::-webkit-scrollbar { display: none; }
.ck-op { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px; border: 1.5px solid var(--ck-control); border-radius: 12px; background: var(--blanco); line-height: 1.15; transition: border-color .15s var(--curva-hover), background-color .15s var(--curva-hover); }
.ck-op small { color: var(--texto-60); font-size: var(--t-nota); }
.ck-op b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-op:hover:not(:disabled) { border-color: var(--verde); }
/* Elegido: borde verde doble, fondo verde claro y la marca ✓ (no solo el color de fondo) */
.ck-op[aria-pressed="true"] { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); background: var(--verde-claro); color: var(--verde-hondo); }
.ck-op[aria-pressed="true"] small { color: var(--verde-hondo); }
.ck-op[aria-pressed="true"]::after { content: ""; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border: 2px solid var(--blanco); border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ck-op:disabled { border-style: dashed; background: var(--crema); color: var(--texto-60); cursor: not-allowed; }
.ck-op:disabled b { text-decoration: line-through; font-weight: 500; }
.ck-dia { flex: none; width: 52px; }
.ck-dia small { text-transform: capitalize; }
.ck-turnos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-nota { margin: 0; color: var(--texto-60); font-size: 13px; }
.ck-nota:empty { display: none; }

/* ---------- 7. Tus datos: una columna, casilla propia ---------- */
.ck-campos { display: flex; flex-direction: column; gap: 16px; }
.ck-campo { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 16px; }
.ck-campo__eti { font-size: 14px; font-weight: 600; }
.ck-entrada { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ck-control); border-radius: 12px; background: var(--blanco); transition: border-color .15s var(--curva-hover); }
.ck-entrada:focus-within { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.ck-entrada input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 16px; outline: none; }
.ck .ck-entrada input:focus-visible { outline: none; } /* el foco lo marca el borde del campo */
.ck-entrada__ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: var(--blanco); }
.ck-entrada__ok svg { width: 12px; height: 12px; }
.ck-mal .ck-entrada, .ck-mal .ck-entrada:focus-within { border-color: var(--ck-error); box-shadow: 0 0 0 1px var(--ck-error); }
.ck-check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ck-check__caja { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--ck-control); border-radius: 8px; background: var(--blanco); color: var(--blanco); transition: background-color .15s var(--curva-hover), border-color .15s var(--curva-hover); }
.ck-check__caja svg { width: 16px; height: 16px; opacity: 0; }
.ck-check:hover .ck-check__caja { border-color: var(--verde); }
.ck-check input:checked + .ck-check__caja { border-color: var(--verde); background: var(--verde); }
.ck-check input:checked + .ck-check__caja svg { opacity: 1; }
.ck-check input:focus-visible + .ck-check__caja { outline: 2px solid var(--verde); outline-offset: 2px; }
.ck-check a { text-decoration: underline; text-underline-offset: 2px; }
.ck-mal .ck-check__caja { border-color: var(--ck-error); }

/* ---------- 8. Beneficios y botón ---------- */
/* Dos columnas fijas: el corte de línea no depende de la fuente (CLS 0) */
.ck-beneficios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 0 4px; color: var(--verde); font-size: 13px; }
.ck-beneficios span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ck-beneficios svg { width: 14px; height: 14px; flex: none; }
.ck-accion { display: flex; flex-direction: column; }
/* Activo: verde sólido de la marca con texto blanco (7,56:1). Desactivado (aria-disabled; 4.24: en gris claro con texto
   gris, sin el verde ni sombra): sigue recibiendo el toque para llevar al primer dato que falta. */
.ck-enviar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: var(--r-pildora); background: var(--verde); color: var(--blanco); font-size: 16px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(33, 94, 79, .7); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
.ck-enviar:hover { background: var(--verde-hondo); }
.ck-enviar[aria-disabled="true"], .ck-enviar[aria-disabled="true"]:hover { background: var(--ck-apagado); color: var(--texto-60); box-shadow: none; cursor: not-allowed; }
.ck-enviar .wa-ico { width: 22px; height: 22px; }
@media (max-width: 999px) {
  .ck-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ck-linea); background: var(--blanco); box-shadow: 0 -8px 24px -12px rgba(31, 26, 21, .2); }
  .ck-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* la barra fija no tapa el final */
  /* Aviso de precios (4.15, js/carrito.js): encima de la barra del botón y sin pasar del ancho de la pantalla */
  body.ck .aviso { bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 90; width: max-content; max-width: calc(100% - 32px); white-space: normal; text-align: center; }
  /* Pedido vacío: no hay barra del botón */
  .ck--vacio .ck-main { padding-bottom: 32px; }
  body.ck--vacio .aviso { bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- 9. Hoja «Agregar zona»: inferior en celular, centrada en escritorio ---------- */
html.pd-bloqueo { overflow: hidden; }
dialog.pd-hoja { position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: 82dvh; margin: 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--blanco); color: var(--texto); overflow: hidden; transform: translateY(105%); transition: transform .28s var(--curva); }
dialog.pd-hoja[open] { display: flex; flex-direction: column; }
dialog.pd-hoja.abierta { transform: none; }
dialog.pd-hoja::backdrop { background: rgba(31, 26, 21, .4); }
.pd-hoja :focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.pd-hoja__cab { display: flex; flex-direction: column; gap: 12px; flex: none; padding: 8px 16px 12px; border-bottom: 1px solid var(--cp-linea); }
.pd-hoja__asa { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--cp-borde); }
.pd-hoja__fila { display: flex; align-items: center; justify-content: space-between; }
.pd-hoja__t { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.pd-hoja__cerrar { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; color: var(--texto-60); }
.pd-hoja__cerrar:hover { background: var(--crema); }
.pd-hoja__cerrar svg { width: 20px; height: 20px; }
.pd-hoja__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) {
  dialog.pd-hoja { inset: 0; width: min(520px, calc(100% - 32px)); max-height: 80vh; margin: auto; border-radius: 20px; transform: none; opacity: 0; transition: opacity .2s var(--curva); }
  dialog.pd-hoja.abierta { opacity: 1; }
  .pd-hoja__asa { display: none; }
}

/* ---------- 10. Escritorio: dos columnas, el resumen fijo a la derecha ---------- */
@media (min-width: 1000px) {
  body.ck { --pad-x: 32px; }
  .ck-main { padding: 40px 0 80px; }
  .ck-titulo { margin: 0 0 24px; font-size: 40px; }
  .ck-form { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
  .ck-lado { grid-column: 2; grid-row: 1; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 20px; }
  .ck-pasos { grid-column: 1; grid-row: 1; gap: 16px; }
  .ck-bloque { gap: 20px; padding: 24px; border-radius: 20px; }
  .ck-dias { overflow: visible; }
  .ck-dia { flex: 1 1 0; width: auto; min-width: 0; }
  .ck-accion { padding-top: 8px; }
  /* Pedido vacío: una sola columna con el paso de elegir zonas */
  .ck--vacio .ck-form { grid-template-columns: minmax(0, 640px); }
  .ck--vacio .ck-lado { grid-column: 1; position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.pd-hoja, .ck *, .ck *::after { transition: none !important; }
}

/* === css/utilidades.css === */
/* Radiance · clases generadas a partir de los estilos en línea de la maqueta (no editar a mano).
   !important conserva la prioridad que tenían como atributo style. */
.u-foco-68-40-foco-movil-50-18 { --foco: 68% 40% !important; --foco-movil: 50% 18% !important; }
.u-foco-10-40-foco-movil-55-18 { --foco: 10% 40% !important; --foco-movil: 55% 18% !important; }
.u-foco-64-40-foco-movil-50-18 { --foco: 64% 40% !important; --foco-movil: 50% 18% !important; }
.u-foco-65-40-foco-movil-60-18 { --foco: 65% 40% !important; --foco-movil: 60% 18% !important; }
.u-pos-50-40 { --pos: 50% 40% !important; }
.u-pos-58-40 { --pos: 58% 40% !important; }
.u-pos-55-50 { --pos: 55% 50% !important; }
.u-pos-55-38 { --pos: 55% 38% !important; }
.u-foco-72-50 { --foco: 72% 50% !important; }
.u-pos-12-50 { --pos: 12% 50% !important; }
.u-position-absolute { position: absolute !important; }
.u-object-position-center-60 { object-position: center 60% !important; }
.u-object-position-center-55 { object-position: center 55% !important; }
.u-margin-top-28px { margin-top: 28px !important; }
.u-retraso-12s { --retraso: .12s !important; }