/*!
███╗   ██╗███████╗ █████╗ ██████╗ ██╗   ██╗██╗███████╗██╗   ██╗ █████╗ ██╗
████╗  ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██║██╔════╝██║   ██║██╔══██╗██║
██╔██╗ ██║█████╗  ███████║██████╔╝██║   ██║██║███████╗██║   ██║███████║██║
██║╚██╗██║██╔══╝  ██╔══██║██╔══██╗╚██╗ ██╔╝██║╚════██║██║   ██║██╔══██║██║
██║ ╚████║███████╗██║  ██║██║  ██║ ╚████╔╝ ██║███████║╚██████╔╝██║  ██║███████╗
╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝  ╚═══╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝
by Ys — NearVisual · https://nearvisualstudio.com

Candy Art — hoja ÚNICA del sitio.

Se escribe primero el teléfono y al final se abre a escritorio con UN solo
corte (≥1000px). Antes había capas que se pisaban y por eso el escritorio
no se parecía al teléfono: aquí el mismo componente crece, no se reescribe.

Orden del archivo:
   1. Reset y fichas de color        7. Secciones del inicio
   2. Botones y tonos                8. Catálogo y ficha de pieza
   3. Estructura de sección          9. Personalizador
   4. Cabecera y barra inferior     10. Hojas, visor y cargador
   5. Portada                       11. Pie
   6. Tarjetas                      12. ESCRITORIO (≥1000px)
*/

/* ═══════════════════ 1. RESET Y FICHAS DE COLOR ═══════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* Sin scroll-behavior: el desplazamiento suave lo controla js/interfaz.js.
       Con «smooth» el navegador ignoraba los saltos a sección desde la barra. */
    scroll-padding-top: 16px;
    touch-action: manipulation;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--crema);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
/* Los adornos que asoman por los lados (::before de las bandas) dejaban
   ~60 px de scroll horizontal en escritorio y un «bamboleo» en Safari iOS.
   «clip» recorta sin crear contenedor de scroll, así que no rompe sticky. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

img, svg, video, iframe, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }
ul, ol { padding: 0; }
[hidden] { display: none !important; }

:root {
    /* ── Tipografía ───────────────────────────────────────────────────
       Outfit titula, Manrope se lee. El peso es la jerarquía: 800 manda,
       700 acompaña, 500 explica.                                        */
    --titulo: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── Color ────────────────────────────────────────────────────────
       Tres planos de fondo, no uno: la página (crema), las tarjetas
       (papel) y las bandas que tienen que hundirse (vino).              */
    --crema: #F7F0E8;
    --papel: #FFFFFF;
    --papel-tibio: #FCF7F2;

    --acento: #B4436F;
    --acento-fuerte: #93335A;
    --acento-luz: #F8E5EC;
    --acento-bruma: #FDF4F7;
    --vino: #6E2442;
    --vino-hondo: #4A1730;

    --panel: linear-gradient(155deg, #8E3358 0%, #6E2442 48%, #4A1730 100%);
    --banda: linear-gradient(155deg, #C04E7B 0%, #93335A 100%);

    /* Un color por familia de producto: da variedad sin romper la unidad. */
    --fam-pinata: #D9503A;
    --fam-pinata-luz: #FDEAE4;
    --fam-tocado: #8355A8;
    --fam-tocado-luz: #F1E9F8;
    --fam-lazo: #2E8C6A;
    --fam-lazo-luz: #E1F2EA;
    --fam-extra: #B57C12;
    --fam-extra-luz: #FBF0DA;

    --oro: #C6A02E;
    --verde: #2E8C6A;

    /* Tinta en tres pesos: título, texto, apoyo. */
    --tinta: #3A2230;
    --tinta-2: #6B5260;
    --tinta-3: #9A8794;
    --linea: #E9DBE1;

    /* Cuatro alturas de sombra: pegado, apoyado, levantado, flotando. */
    --sombra-0: 0 2px 8px rgba(74, 23, 48, .06);
    --sombra: 0 10px 28px rgba(74, 23, 48, .10);
    --sombra-alta: 0 22px 50px rgba(74, 23, 48, .20);
    --sombra-acento: 0 10px 22px rgba(180, 67, 111, .30);

    /* ── Forma y espacio ─────────────────────────────────────────── */
    --r-xl: 28px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;
    --ancho: 1200px;

    --arriba: env(safe-area-inset-top, 0px);
    --abajo: env(safe-area-inset-bottom, 0px);
    --barra-h: 66px;
}

h1, h2, h3, h4 {
    font-family: var(--titulo);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.015em;
    color: var(--tinta);
}

.saltar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 3000;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--acento);
    font-weight: 700;
    box-shadow: var(--sombra);
    transform: translateY(-180%);
    transition: transform .2s ease;
}
.saltar:focus { transform: none; }


a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}

::selection { background: var(--acento-luz); color: var(--vino); }

/* ═══════════════════ 2. BOTONES Y TONOS ═══════════════════ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-pill);
    font-family: var(--titulo);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.boton svg { flex-shrink: 0; width: 19px; height: 19px; }
.boton:active { transform: scale(.97); }
.boton[disabled] { opacity: .5; pointer-events: none; }

.boton--principal { background: var(--acento); color: #fff; box-shadow: var(--sombra-acento); }
.boton--principal:hover { background: var(--acento-fuerte); }
.boton--claro { background: #fff; color: var(--vino); box-shadow: var(--sombra); }
.boton--fantasma { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.boton--fantasma:hover { background: rgba(255, 255, 255, .2); }
.boton--suave { background: var(--acento-luz); color: var(--acento-fuerte); }
.boton--suave:hover { background: #F2D5E0; }
.boton--borde { background: #fff; color: var(--acento); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton--borde:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
.boton--wa { background: var(--verde); color: #fff; box-shadow: 0 10px 22px rgba(46, 140, 106, .28); }
.boton--wa:hover { background: #24714F; }
.boton--sm { min-height: 42px; padding: 0 16px; font-size: .85rem; }
.boton--sm svg { width: 17px; height: 17px; }
.boton--xs { min-height: 38px; padding: 0 12px; gap: 6px; font-size: .82rem; }
.boton--xs svg { width: 15px; height: 15px; }
.boton--bloque { width: 100%; }

/* Enlace de acción: sin caja, pero con la misma voz que los botones. */
.enlace {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 8px 0;
    font-family: var(--titulo);
    font-size: .88rem;
    font-weight: 600;
    color: var(--acento);
}
.enlace:hover { text-decoration: underline; }
.enlace svg { width: 17px; height: 17px; }

.boton__flecha { transition: transform .2s ease; }
.boton:hover .boton__flecha,
.enlace:hover svg { transform: translateX(3px); }

/* Tonos de icono. Un mismo cuadrado redondeado en toda la interfaz:
   accesos rápidos, razones, formas de pago y hoja «Más». */
.tono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 18px;
}
.tono svg { width: 24px; height: 24px; }
.tono--rosa { background: var(--acento-luz); color: var(--acento); }
.tono--lila { background: var(--fam-tocado-luz); color: var(--fam-tocado); }
.tono--verde { background: var(--fam-lazo-luz); color: var(--fam-lazo); }
.tono--ambar { background: var(--fam-extra-luz); color: var(--fam-extra); }
.tono--coral { background: var(--fam-pinata-luz); color: var(--fam-pinata); }
.tono--vino { background: #F0E1E7; color: var(--vino); }

/* ═══════════════════ 3. ESTRUCTURA DE SECCIÓN ═══════════════════ */
.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 16px;
}

.seccion { padding: 32px 0 6px; }
.seccion--banda { margin-top: 30px; padding: 30px 0; background: var(--banda); }
.seccion--banda .seccion__titulo,
.seccion--banda .seccion__antetitulo { color: #fff; }
.seccion--banda .seccion__bajada { color: rgba(255, 238, 245, .86); }
.seccion--papel { background: var(--papel-tibio); }

.seccion__cabeza {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.seccion__cabeza--centro { flex-direction: column; align-items: center; text-align: center; }

.seccion__antetitulo {
    font-family: var(--titulo);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento);
}

.seccion__titulo {
    font-size: 1.62rem;
    font-weight: 800;
    line-height: 1.12;
    color: var(--vino);
}
.seccion__antetitulo + .seccion__titulo { margin-top: 4px; }

.seccion__bajada {
    margin-top: 6px;
    font-size: .93rem;
    line-height: 1.45;
    color: var(--tinta-2);
}
.seccion__cabeza--centro .seccion__bajada { max-width: 56ch; }

.seccion__cta { flex-shrink: 0; margin-top: 2px; }

.reja { display: grid; gap: 14px; }
.centrado { text-align: center; }
/* minmax(0, 1fr): sin esto la columna crecía al ancho del texto más largo
   y en 320–400 px la página de contacto se salía de la pantalla. */
.apilar { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.apilar > * { min-width: 0; overflow-wrap: anywhere; }


/* ═══════════════ 4. CABECERA Y BARRA INFERIOR ═══════════════ */
/* En teléfono la navegación vive abajo, al alcance del pulgar: la cabecera
   se esconde entera y la portada trae su propia fila con marca y WhatsApp. */
.cabecera { display: none; }

.barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 56px;
    padding: 6px 6px calc(6px + var(--abajo));
    border-radius: 24px 24px 0 0;
    /* Vino sobre las partes claras; clara cuando pasa sobre una sección
       vino (js/interfaz.js pone .barra-inferior--clara). Así nunca se
       confunde con lo que tiene detrás. */
    background: var(--vino);
    box-shadow: 0 -8px 26px rgba(74, 23, 48, .22);
    transition: background-color .35s ease, box-shadow .35s ease;
    /* Compone en su propia capa: sin esto la barra tiembla en Android al
       aparecer y desaparecer la barra de direcciones. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Sin relleno bajo el pie: la barra se esconde al llegar a él, así que no
   hace falta dejarle hueco (antes quedaba una franja crema debajo). */
body { padding-bottom: 0; }
.pie { padding-bottom: calc(18px + var(--abajo)); }
/* En los creadores la barra se quita (el recorrido ES la página). */
body.pagina-creador { padding-bottom: 0; }

.barra-inferior__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: none;
    font-family: var(--titulo);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 233, 242, .72);
    cursor: pointer;
    transition: color .35s ease;
}
.barra-inferior__item.activo,
.barra-inferior__item[aria-expanded="true"] { color: #fff; font-weight: 700; }

.barra-inferior__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--r-pill);
    transition: background-color .2s ease;
}
.barra-inferior__icono svg { width: 22px; height: 22px; }
.barra-inferior__item.activo .barra-inferior__icono { background: rgba(255, 255, 255, .16); }
/* El logo de Inicio se pinta como máscara con el color del texto: blanco
   sobre la barra vino y vino sobre la barra clara, sin dos archivos. */
.barra-inferior__logo {
    display: block;
    width: 26px;
    height: 26px;
    background: currentColor;
    -webkit-mask: url(/assets/logo/candy-art-logo-blanco-96.webp) center / contain no-repeat;
    mask: url(/assets/logo/candy-art-logo-blanco-96.webp) center / contain no-repeat;
}
.barra-inferior__item:not(.activo) .barra-inferior__logo { opacity: .85; }

.barra-inferior { transform-origin: 50% 100%; transition: background-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.barra-inferior--oculta { transform: translateY(70%) scaleX(.72); opacity: 0; pointer-events: none; }
.barra-inferior--clara { background: #fff; box-shadow: 0 -8px 26px rgba(74, 23, 48, .14); }
.barra-inferior--clara .barra-inferior__item { color: var(--tinta-3); }
.barra-inferior--clara .barra-inferior__item.activo,
.barra-inferior--clara .barra-inferior__item[aria-expanded="true"] { color: var(--acento); }
.barra-inferior--clara .barra-inferior__item.activo .barra-inferior__icono { background: var(--acento-bruma); }
.barra-inferior__texto { font-size: 11px; line-height: 13px; white-space: nowrap; }

/* ── Hoja «Más» ───────────────────────────────────────────────── */
.hoja {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .34s;
}
.hoja.abierta { visibility: visible; pointer-events: auto; transition: visibility 0s; }

.hoja__fondo {
    position: absolute;
    inset: 0;
    background: rgba(58, 34, 48, .5);
    opacity: 0;
    transition: opacity .3s ease;
}
.hoja.abierta .hoja__fondo { opacity: 1; }

.hoja__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 10px;
    padding: 10px 16px calc(18px + var(--abajo));
    border-radius: 28px 28px 0 0;
    background: var(--crema);
    transform: translateY(105%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.hoja.abierta .hoja__panel { transform: none; }

.hoja__agarre {
    justify-self: center;
    width: 42px;
    height: 5px;
    margin-bottom: 4px;
    border-radius: 3px;
    background: #DCC9D2;
}

.hoja__reja {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}

.hoja__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: var(--r-lg);
    background: #fff;
    font-family: var(--titulo);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--vino);
}
.hoja__item .tono { width: 46px; height: 46px; border-radius: 16px; }

/* Crear: tres tarjetas con la imagen de cada familia. */
.hoja__crear {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.hoja__crea {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 6px 12px;
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sombra-0);
    text-align: center;
    transition: transform .15s ease;
}
.hoja__crea:active { transform: scale(.96); }
.hoja__crea-foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; }
.hoja__crea-foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja__crea-texto {
    font-family: var(--titulo);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vino);
}
/* Entrada escalonada al abrir: la hoja sube y su contenido la sigue. */
.hoja__crea, .hoja__item, .hoja__panel > .boton {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.hoja.abierta .hoja__crea, .hoja.abierta .hoja__item, .hoja.abierta .hoja__panel > .boton { opacity: 1; transform: none; }
.hoja.abierta .hoja__crea:nth-child(1) { transition-delay: .06s; }
.hoja.abierta .hoja__crea:nth-child(2) { transition-delay: .1s; }
.hoja.abierta .hoja__crea:nth-child(3) { transition-delay: .14s; }
.hoja.abierta .hoja__item:nth-child(1) { transition-delay: .17s; }
.hoja.abierta .hoja__item:nth-child(2) { transition-delay: .2s; }
.hoja.abierta .hoja__item:nth-child(3) { transition-delay: .23s; }
.hoja.abierta .hoja__panel > .boton { transition-delay: .26s; }
.hoja__item .tono svg { width: 22px; height: 22px; }

/* ═══════════════════ 5. PORTADA ═══════════════════ */
.portada { position: relative; }

/* Una sola columna sobre el vino: todo centrado. */
.portada__panel {
    position: relative;
    overflow: hidden;
    padding: calc(var(--arriba) + 14px) 18px 64px;
    background: var(--panel);
    color: #fff;
}

.portada__fila {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.portada__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portada__marca img { width: 38px; height: 38px; }
.portada__marca b { display: block; font-family: var(--titulo); font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.portada__marca span { display: block; font-size: .72rem; color: rgba(255, 233, 242, .75); }
.portada__redondo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.portada__redondo svg { width: 21px; height: 21px; }

.portada__centro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    text-align: center;
}

/* El patrón: el mismo logotipo en blanco, mucho más grande y casi
   transparente, centrado detrás del logo a color. */
.portada__patron {
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: -1;
    width: 150%;
    max-width: 640px;
    height: auto;
    opacity: .08;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.portada__logo {
    width: 58%;
    max-width: 210px;
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
}

.portada__nombre {
    margin-top: 4px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.portada__nombre span {
    display: block;
    margin-top: 10px;
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: rgba(255, 233, 242, .88);
}

.portada__lema {
    margin-top: 4px;
    font-family: var(--titulo);
    font-size: .95rem;
    font-style: italic;
    font-weight: 500;
    color: #FFD36B;
}

.portada__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}
.portada__acciones .boton { min-width: 150px; }

/* La bandeja que monta sobre el panel: es la que le da el gesto de app. */
.portada__bandeja {
    position: relative;
    z-index: 3;
    margin-top: -38px;
    padding: 18px 16px 4px;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--crema);
}

.accesos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.acceso {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 6px 6px 10px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    text-align: center;
    transition: transform .15s ease, box-shadow .2s ease;
}
.acceso:active { transform: scale(.96); }
.acceso__foto {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
}
.acceso__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.acceso__texto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: var(--titulo);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vino);
}
.acceso__texto svg { width: 15px; height: 15px; color: var(--acento); }

.promos { display: grid; gap: 10px; margin-top: 14px; }

.promo {
    display: flex;
    align-items: center;
    /* Es un <button>, y los botones centran su texto por defecto: sin
       esto, al ocupar todo el ancho la pastilla se leía descuadrada. */
    text-align: left;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: var(--r-lg);
    background: var(--banda);
    color: #fff;
    box-shadow: var(--sombra-acento);
    transition: transform .15s ease;
}
.promo:active { transform: scale(.98); }

.promo__lienzo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .14);
}
.promo__lienzo img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
/* Cuando el retrato es una foto de pieza, llena el recuadro y no se
   acolcha: es la pieza, no un icono. */
.promo__lienzo--foto { overflow: hidden; }
.promo__lienzo--foto img { padding: 0; object-fit: cover; border-radius: 18px; }
.promo--tocado { background: linear-gradient(155deg, #9A62BE 0%, #6F3F93 100%); box-shadow: 0 10px 22px rgba(111, 63, 147, .3); }

.promo__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo__texto strong { font-family: var(--titulo); font-size: 1.02rem; font-weight: 700; line-height: 1.15; }
.promo__texto small { font-size: .76rem; line-height: 1.25; color: rgba(255, 238, 245, .85); }

.promo__ir {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--acento);
}
.promo__ir svg { width: 20px; height: 20px; }

/* ── Portada de página interior ──────────────────────────────── */
.portada-interior { padding: 0; }

.portada-interior__panel {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: calc(var(--arriba) + 20px) 18px 28px;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
    background: var(--panel);
    color: #fff;
}
.portada-interior__panel--simple { grid-template-columns: minmax(0, 1fr); }

.portada-interior__volver {
    position: absolute;
    top: calc(var(--arriba) + 14px);
    left: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(28, 6, 18, .55);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.portada-interior__volver svg { width: 21px; height: 21px; }
.portada-interior__panel:has(.portada-interior__volver) { padding-top: calc(var(--arriba) + 70px); }

.portada-interior__arte { position: relative; align-self: stretch; min-height: 110px; }
.portada-interior__arte img {
    position: absolute;
    top: 50%;
    left: -8px;
    z-index: 1;
    width: 112px;
    height: auto;
    object-fit: contain;
    transform: translateY(-50%);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}
.portada-interior__arte .burbuja--oro { width: 50px; height: 50px; top: -26px; right: 4px; bottom: auto; left: auto; }
.portada-interior__arte .burbuja--lila { width: 58px; height: 58px; bottom: -30px; left: 58px; }

.portada-interior__texto { position: relative; z-index: 2; }
.portada-interior__antetitulo { font-family: var(--titulo); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFD36B; }
.portada-interior__titulo { margin-top: 4px; font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: #fff; }
.portada-interior__bajada { margin-top: 8px; font-size: .9rem; line-height: 1.45; color: rgba(255, 233, 242, .82); }
.portada-interior__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Variante con el collage de fondo (páginas de piñatas, tocados, lazos). */
.portada-interior--fondo .portada-interior__panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    min-height: 400px;
    padding: calc(var(--arriba) + 64px) 18px 34px;
    text-align: center;
}
.portada-interior__fondo {
    position: absolute;
    inset: -4% -8%;
    z-index: 0;
    width: 116%;
    height: 108%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: .92;
    filter: brightness(.86) saturate(1.05);
}
.portada-interior--fondo .portada-interior__texto {
    justify-self: center;
    max-width: 520px;
    padding: 18px 20px 20px;
    isolation: isolate;
}
/* El velo: una mancha oscura y difuminada detrás del texto. */
.portada-interior--fondo .portada-interior__texto::before {
    content: '';
    position: absolute;
    inset: -14% -12%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(28, 6, 18, .88), rgba(28, 6, 18, .66) 55%, transparent);
    filter: blur(16px);
}
.portada-interior--fondo .portada-interior__titulo { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.portada-interior--fondo .portada-interior__bajada { color: rgba(255, 240, 246, .92); }
.portada-interior--fondo .portada-interior__acciones { justify-content: center; }

/* Portada compacta: guías y legales. Menos alta que la de categoría. */
.portada-interior--compacta .portada-interior__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-height: 150px;
    padding: calc(var(--arriba) + 14px) 16px 18px;
}
.portada-interior--compacta .portada-interior__fondo { filter: brightness(.55) saturate(1.1); opacity: 1; }
.portada-interior__fila {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
}
.portada-interior--compacta .portada-interior__volver { position: static; grid-column: 1; }
.portada-interior__logo { grid-column: 2; justify-self: center; }
.portada-interior__logo img { width: 34px; height: 34px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.portada-interior__wa {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.portada-interior__wa svg { width: 21px; height: 21px; }
.portada-interior--compacta .portada-interior__antetitulo { position: relative; z-index: 2; text-align: center; }
.pagina-texto { padding-top: 22px; }

/* Portada que se encoge (sólo teléfono). La portada es «sticky» con un
   tope negativo igual a su alto menos la franja: al bajar, lo de arriba
   sale de la vista y queda pegada su última franja.

   La franja NO es una segunda barra que aparece encima de la primera: es
   la misma fila de botones, que se queda quieta arriba mientras el panel
   se encoge por debajo de ella (--despegue la sostiene) y se transforma
   con --m (0 = portada abierta, 1 = franja). El logo se corre y deja
   entrar el nombre; el círculo de WhatsApp se estira hasta la pastilla.
   js/interfaz.js mide --recorte y escribe --despegue y --m.            */
.portada-interior {
    position: sticky;
    top: calc(-1 * var(--recorte, 0px));
    z-index: 900;
    --m: 0;
}
.portada-interior__compacta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    height: calc(62px + var(--arriba));
    padding: var(--arriba) 12px 0;
    visibility: hidden;
    transform: translate3d(0, calc(-1 * var(--despegue, 0px)), 0);
    will-change: transform;
}
html.con-js .portada-interior__compacta { visibility: visible; }
/* Con la franja activa, los botones originales ceden su lugar (siguen
   ocupando su espacio para que la portada no salte). */
html.con-js .portada-interior__fila > *,
html.con-js .portada-interior__volver { visibility: hidden; }

.portada-interior__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: var(--panel);
    opacity: var(--m);
    pointer-events: none;
}
.portada-interior__panel { transition: box-shadow .3s ease; }
.portada-interior--compactada .portada-interior__panel { box-shadow: 0 10px 24px rgba(74, 23, 48, .28); }

.portada-interior__compacta-volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(28, 6, 18, .55);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Se achica un poco al llegar a la franja. */
    transform: scale(calc(1 - var(--m) * .09));
}
.portada-interior__compacta-volver svg { width: 21px; height: 21px; }

.portada-interior__compacta-centro {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 44px;
    container-type: inline-size;
}
/* El logo empieza al centro (como en la portada) y termina a la izquierda:
   el recorrido se calcula con el ancho del propio hueco (cqw). */
.portada-interior__compacta-logo {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    transform: translateX(calc((50cqw - 17px) * (1 - var(--m)))) scale(calc(1 - var(--m) * .18));
    transform-origin: 0 50%;
}
.portada-interior__compacta-logo img { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.portada-interior__compacta-titulo {
    position: absolute;
    top: 50%;
    left: 38px;
    right: 0;
    overflow: hidden;
    font-family: var(--titulo);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    /* Entra en la segunda mitad del recorrido, desde la derecha. */
    opacity: clamp(0, calc(var(--m) * 2 - 1), 1);
    transform: translate(calc((1 - var(--m)) * 18px), -50%);
}

/* La acción: en las guías es el círculo de WhatsApp que se estira hasta
   ser pastilla; --cta-ancho lo mide el script con el texto dentro. */
.portada-interior__compacta-cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: #fff;
    font-family: var(--titulo);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vino);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    opacity: clamp(0, calc(var(--m) * 1.6 - .4), 1);
    transform: scale(calc(.7 + var(--m) * .3));
    transform-origin: 100% 50%;
}
.portada-interior__compacta-cta--wa {
    width: calc(44px + var(--m) * (var(--cta-ancho, 128px) - 44px));
    height: 44px;
    padding: 0 0 0 11.5px;
    background: #25D366;
    color: #fff;
    opacity: 1;
    transform: scale(calc(1 - var(--m) * .09));
}
.portada-interior__compacta-cta svg { width: 21px; height: 21px; flex-shrink: 0; }
.portada-interior__compacta-cta--wa .portada-interior__compacta-texto { opacity: clamp(0, calc(var(--m) * 2.2 - 1.2), 1); }
/* Mientras no llegue a la franja, lo que no se ve tampoco se toca. */
.portada-interior:not(.portada-interior--compactada) .portada-interior__compacta-cta:not(.portada-interior__compacta-cta--wa) { pointer-events: none; }
/* Fuera de las guías no hay logo arriba: aparece con la franja. */
.portada-interior:not(.portada-interior--compacta) .portada-interior__compacta-logo {
    opacity: var(--m);
    transform: scale(calc(.6 + var(--m) * .22));
}
.portada-interior:not(.portada-interior--compacta):not(.portada-interior--compactada) .portada-interior__compacta-logo { pointer-events: none; }

/* Categorías con pocas piezas: sin filtro, una indicación y más aire. */
.seccion--pocas { padding-top: 28px !important; padding-bottom: 18px; }
.categoria__elige {
    margin-bottom: 16px;
    font-family: var(--titulo);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--vino);
}
.reja-piezas--pocas { max-width: 640px; margin-inline: auto; }

/* ═══════════════════ 6. TARJETAS ═══════════════════ */
/* ── Control segmentado (una sola pastilla con las opciones dentro) ── */
.segmentado {
    display: flex;
    gap: 2px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 4px;
    overflow-x: auto;
    border-radius: var(--r-pill);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.segmentado::-webkit-scrollbar { display: none; }

/* ── Razones ─────────────────────────────────────────────────── */
.razones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
}
.razon {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.razon .tono { width: 44px; height: 44px; border-radius: 14px; }
.razon .tono svg { width: 22px; height: 22px; }
.razon h3 { font-size: .95rem; font-weight: 700; line-height: 1.2; color: var(--vino); }
.razon p { margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--tinta-2); }

/* ── Cantidad (lazos y conjuntos por pedido) ─────────────────── */
.porcantidad { display: grid; gap: 14px; }

.porcantidad__tarjeta {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.porcantidad__lienzo {
    align-self: start;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 18px;
    background: var(--fam-lazo-luz);
}
.porcantidad__lienzo img { width: 100%; height: 100%; object-fit: cover; }
.porcantidad__nombre { font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: var(--vino); }
.porcantidad__nota { margin-top: 4px; font-size: .82rem; line-height: 1.4; color: var(--tinta-2); }
.porcantidad__tarjeta .boton { min-height: 46px; padding: 0 12px; font-size: .88rem; }

.contador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 12px 0;
    padding: 5px;
    border-radius: var(--r-pill);
    background: var(--acento-bruma);
}
.contador__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--acento);
    box-shadow: var(--sombra-0);
}
.contador__btn svg { width: 18px; height: 18px; }
.contador__btn:active { transform: scale(.92); }
.contador__btn[disabled] { opacity: .4; pointer-events: none; }
.contador__valor { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.contador__valor > span { font-family: var(--titulo); font-size: 1.25rem; font-weight: 800; color: var(--vino); }
.contador__valor small { font-size: .7rem; color: var(--tinta-2); }

/* ── Galería corta del inicio ────────────────────────────────── */
.tira {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tira__foto {
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 18px;
    background: var(--acento-luz);
    box-shadow: var(--sombra-0);
}
.tira__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .4s ease;
}
.tira__foto button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }

.tira__todas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1;
    padding: 12px;
    border-radius: 18px;
    background: var(--banda);
    color: #fff;
    text-align: center;
    box-shadow: var(--sombra-acento);
    transition: transform .18s ease;
}
.tira__todas:active { transform: scale(.97); }
.tira__todas strong { font-family: var(--titulo); font-size: .98rem; font-weight: 700; line-height: 1.2; }
.tira__todas small { font-size: .76rem; line-height: 1.25; color: rgba(255, 238, 245, .85); }
.tira__todas-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .18);
}
.tira__todas-icono svg { width: 26px; height: 26px; }

/* ── Formas de pago ──────────────────────────────────────────── */
.pagos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
}
.pago {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.pago .tono { width: 44px; height: 44px; border-radius: 14px; }
.pago .tono svg { width: 22px; height: 22px; }
.pago h3 { font-size: .93rem; font-weight: 700; line-height: 1.2; color: var(--vino); }
.pago p { margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--tinta-2); }
.pago__metodos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; list-style: none; }
.pago__metodos li {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--acento-bruma);
    font-size: .78rem;
    font-weight: 600;
    color: var(--acento-fuerte);
}

/* ── Calificación en Google ── */
.resenas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    font-size: .84rem;
    color: var(--tinta-2);
    transition: transform .15s ease, box-shadow .2s ease;
}
.resenas:active { transform: scale(.97); }
.resenas__estrellas { display: inline-flex; gap: 1px; }
.resenas__google { width: 18px; height: 18px; flex-shrink: 0; }
.resenas--portada { margin: 14px auto 0; background: rgba(255, 255, 255, .95); }
.resenas__estrellas svg { width: 15px; height: 15px; fill: #F2B632; }
.resenas strong { font-family: var(--titulo); font-size: .95rem; color: var(--vino); }
.resenas--lugar { margin: 14px 0 0; background: var(--acento-bruma); box-shadow: none; }

/* ── Dónde estamos ───────────────────────────────────────────── */
/* Foto de la fachada y mapa, lado a lado: la fachada dice cómo se ve el
   local al llegar y el mapa dónde está. La tarjeta va debajo. */
.lugar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lugar--sin-mapa { grid-template-columns: minmax(0, 1fr); }

.lugar__fachada {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: var(--r-xl);
    background: var(--acento-luz);
    box-shadow: var(--sombra);
}
.lugar__fachada img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.lugar__fachada:active img { transform: scale(1.03); }
.lugar__sello {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--sombra-0);
    font-family: var(--titulo);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--vino);
    transform: translateX(-50%);
}
.lugar__sello svg { width: 15px; height: 15px; color: var(--acento); }

.lugar__mapa {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: var(--r-xl);
    background: var(--acento-luz);
    box-shadow: var(--sombra);
}
.lugar__mapa iframe { width: 100%; height: 100%; border: 0; }

.lugar__tarjeta {
    padding: 18px;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra);
}
.lugar__cabeza { display: flex; gap: 12px; }
.lugar__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--fam-pinata-luz);
    color: var(--fam-pinata);
}
.lugar__pin svg { width: 22px; height: 22px; }
.lugar__nombre { font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--vino); }
.lugar__dir { margin-top: 3px; font-size: .88rem; color: var(--tinta-2); }

.lugar__filas { display: grid; gap: 10px; margin: 16px 0; list-style: none; }
.lugar__filas li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.45; color: var(--tinta-2); }
.lugar__filas svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--acento); }
.lugar__filas strong { margin-right: 4px; color: var(--vino); font-weight: 600; }
.lugar__acciones { display: grid; gap: 8px; margin-top: 16px; }

/* Entrega: acordeón. Es el contenido que en Carlitos interrumpía con una
   ventana al entrar; aquí vive dentro de la sección y no tapa nada. */
.entregas { display: grid; gap: 8px; margin-top: 16px; }

.entrega {
    overflow: hidden;
    border-radius: 18px;
    background: var(--papel-tibio);
    box-shadow: var(--sombra-0);
}
.entrega__cabeza {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 0;
    background: none;
    text-align: left;
}
.entrega__icono { display: inline-flex; width: 40px; height: 40px; border-radius: 13px; }
.entrega__icono svg { width: 20px; height: 20px; }
.entrega__texto { display: flex; flex-direction: column; min-width: 0; }
.entrega__titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: var(--titulo); font-size: .95rem; font-weight: 700; color: var(--vino); }
.entrega__sello {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--fam-lazo-luz);
    font-size: .66rem;
    font-weight: 700;
    color: var(--fam-lazo);
}
.entrega__nota { font-size: .78rem; line-height: 1.3; color: var(--tinta-2); }

.entrega__signo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--acento-bruma);
    color: var(--acento);
    transition: transform .25s ease, background-color .2s ease, color .2s ease;
}
.entrega__signo svg { width: 16px; height: 16px; }
.entrega.abierta .entrega__signo { transform: rotate(180deg); background: var(--acento); color: #fff; }

.entrega__cuerpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.entrega.abierta .entrega__cuerpo { grid-template-rows: 1fr; }
.entrega__lista { display: grid; gap: 6px; min-height: 0; overflow: hidden; margin: 0 14px; list-style: none; }
.entrega.abierta .entrega__lista { padding: 10px 0 12px; border-top: 1px solid var(--linea); }
.entrega__lista li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--vino); }
.entrega__lista svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--acento); }

/* Enlaces dentro de un párrafo: subrayado discreto, del color del acento. */
.enlace-texto { color: var(--acento-fuerte); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.seccion__nota { margin: -4px 0 14px; font-size: .9rem; }

/* ── Texto descriptivo ───────────────────────────────────────── */
.texto-largo {
    padding: 22px 18px;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.texto-largo h2 { font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--vino); }
.texto-largo__cols { display: grid; gap: 14px; margin-top: 14px; }
.texto-largo h3 { font-size: .98rem; font-weight: 700; color: var(--vino); }
.texto-largo p { margin-top: 4px; font-size: .88rem; line-height: 1.6; color: var(--tinta-2); }

/* ── Preguntas ───────────────────────────────────────────────── */
.preguntas { display: grid; gap: 10px; }

.pregunta {
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.pregunta summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--titulo);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--vino);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__signo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--acento-bruma);
    color: var(--acento);
    transition: transform .25s ease, background-color .2s ease, color .2s ease;
}
.pregunta__signo svg { width: 16px; height: 16px; }
.pregunta[open] > summary .pregunta__signo { transform: rotate(180deg); background: var(--acento); color: #fff; }
.pregunta__cuerpo {
    overflow: hidden;
    padding: 0 16px 16px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--tinta-2);
}

/* ── Contacto ────────────────────────────────────────────────── */
.contacto__panel {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 200px;
    padding: 26px 20px 70px;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--panel);
    color: #fff;
}
.contacto__arte { position: relative; align-self: stretch; }
.contacto__arte img {
    position: absolute;
    top: 50%;
    left: -12px;
    z-index: 1;
    width: 126px;
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35));
}
.contacto__arte .burbuja--lila { width: 62px; height: 62px; top: 8px; left: 46px; bottom: auto; }
.contacto__arte .burbuja--oro { width: 34px; height: 34px; bottom: 6px; right: -6px; }
.contacto__intro { position: relative; z-index: 2; }
.contacto__titulo { font-size: 1.75rem; font-weight: 800; color: #fff; }
.contacto__bajada { margin-top: 6px; font-size: .9rem; line-height: 1.45; color: rgba(255, 233, 242, .82); }

.contacto__tarjetas {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 12px;
    margin: -44px 10px 0;
}

.tarjeta {
    padding: 18px;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra);
}
.tarjeta__titulo { font-size: 1.1rem; font-weight: 700; color: var(--vino); }
.tarjeta__bajada { margin: 4px 0 14px; font-size: .87rem; line-height: 1.45; color: var(--tinta-2); }

/* ── Formularios ─────────────────────────────────────────────── */
.campo { margin-bottom: 14px; }
.campo > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--titulo);
    font-size: .88rem;
    font-weight: 600;
    color: var(--vino);
}
.pista { font-size: .8rem; line-height: 1.4; color: var(--tinta-3); }
.pista a,
.hoja-info__cuerpo p a,
.texto-largo a,
.pregunta__cuerpo a { color: var(--acento); font-weight: 700; text-decoration: underline; }
.campo .pista { margin: -2px 0 6px; }

.entrada {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    background: var(--acento-bruma);
    font-family: var(--sans);
    /* 16px exactos: por debajo, iOS hace zoom al enfocar y descuadra todo. */
    font-size: 16px;
    color: var(--vino);
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.entrada::placeholder { color: var(--tinta-3); }
.entrada:focus { border-color: var(--acento); background: #fff; }
textarea.entrada { min-height: 110px; resize: vertical; }

.campo--error .entrada { border-color: #B4302B; background: #FDECEA; }
.error-campo { display: block; margin-top: 6px; font-size: .82rem; font-weight: 600; color: #B4302B; }

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--acento-luz);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--vino);
}
.aviso svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--acento); }
.aviso a { font-weight: 700; color: var(--acento-fuerte); text-decoration: underline; }

/* Variantes del aviso. Las pinta el JavaScript en caliente (errores de
   validación, resumen de lo elegido), así que llevan sus nombres. */
.aviso--atencion { background: #FDECEA; color: #7E2018; }
.aviso--atencion svg { color: #B4302B; }
.aviso img { border-radius: 10px; flex: 0 0 auto; }

/* Botón de WhatsApp suelto: el JS lo escribe sin la clase .boton, así que
   tiene que valerse solo. */
.boton-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--verde);
    color: #fff;
    font-family: var(--titulo);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(46, 140, 106, .28);
    transition: background-color .2s ease, transform .15s ease;
}
.boton-wa:hover { background: #24714F; }
.boton-wa:active { transform: scale(.97); }
.boton-wa svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Girito de «Guardando…» dentro del botón que se está enviando. */
.cargando {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -3px;
    animation: girar .7s linear infinite;
}

/* Detalles opcionales del recorrido: plegados para no alargar el paso. */
.pz__extras {
    margin-top: 18px;
    padding: 0 16px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.pz__extras summary {
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--titulo);
    font-size: .92rem;
    font-weight: 600;
    color: var(--acento);
}
.pz__extras summary::-webkit-details-marker { display: none; }
.pz__extras summary::after { content: " +"; font-weight: 800; }
.pz__extras[open] summary::after { content: " −"; }
.pz__extras > div { padding-bottom: 8px; }

/* Alias del antetítulo: lo usan las fichas que arma el JavaScript. */
.antetitulo {
    font-family: var(--titulo);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento);
}

/* Bloque de resultado (folio, solicitud enviada). */
.resultado {
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.folio {
    display: inline-block;
    margin: 8px 0;
    padding: 12px 22px;
    border-radius: var(--r-md);
    background: var(--acento-bruma);
    font-family: var(--titulo);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--acento);
}

/* ── Pasos numerados ─────────────────────────────────────────── */
.pasos { display: grid; gap: 10px; list-style: none; counter-reset: paso; }
.pasos li {
    position: relative;
    padding: 16px 18px 16px 56px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    counter-increment: paso;
}
.pasos li::before {
    content: counter(paso);
    position: absolute;
    top: 18px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acento);
    font-family: var(--titulo);
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
}
.pasos h3 { font-size: 1rem; font-weight: 700; color: var(--vino); }
.pasos p { margin-top: 4px; font-size: .86rem; line-height: 1.5; color: var(--tinta-2); }

/* ═══════════════ 7. CATÁLOGO Y FICHA DE PIEZA ═══════════════ */
/* El filtro se queda en su sitio, arriba de la reja: no sigue al scroll.
   Con la barra de arriba y la de abajo ya fijas, una tercera franja fija
   le comía media pantalla al catálogo. */
.filtros {
    position: relative;
    z-index: 500;
    padding: 14px 0 12px;
}
.filtro__indicador { display: none; }
.filtros__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}
/* Un solo botón «Filtrar por: Todas» que abre un menú propio. Fijo al
   hacer scroll, pero ocupa una línea: antes todas las categorías
   desplegadas tapaban media pantalla. */
.filtro { position: relative; flex: 1 1 auto; min-width: 0; }
.filtro__boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 44px;
    padding: 0 14px 0 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--papel);
    box-shadow: var(--sombra-0), inset 0 0 0 1px var(--linea);
    font-family: var(--titulo);
    font-size: .9rem;
    color: var(--tinta-2);
    transition: box-shadow .2s ease;
}
.filtro__etiqueta { white-space: nowrap; }
.filtro__actual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--vino); }
.filtro__flecha { width: 18px; height: 18px; flex-shrink: 0; color: var(--acento); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.filtro__boton[aria-expanded="true"] { box-shadow: var(--sombra), inset 0 0 0 1.5px var(--acento); }
.filtro__boton[aria-expanded="true"] .filtro__flecha { transform: rotate(180deg); }

.filtro__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    display: grid;
    gap: 2px;
    width: min(290px, calc(100vw - 32px));
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-alta), inset 0 0 0 1px var(--linea);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.97);
    transform-origin: top left;
    transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
}
.filtro__menu.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.filtro__menu .chip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    font-size: .92rem;
    text-align: left;
}
.filtro__menu .chip.activo { background: var(--acento-luz); color: var(--acento-fuerte); box-shadow: none; }
.filtro__menu .chip.activo::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--acento); }
.filtros__barra .filtros__cuenta { margin-left: 0; padding-left: 2px; }
.filtros__barra::-webkit-scrollbar { display: none; }

.filtros__cuenta {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tinta-3);
}

/* Pastilla de categoría. Vive dentro de .segmentado, que es la cápsula
   que se desliza con el dedo cuando hay más categorías que pantalla. */
.chip {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    font-family: var(--titulo);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--tinta-2);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.chip.activo {
    background: var(--acento);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(180, 67, 111, .3);
}

.reja-piezas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}

.pieza {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 10px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    transition: transform .18s ease, box-shadow .2s ease;
}
.pieza [aria-busy="true"] { opacity: .6; }

/* La cara: foto y nombre. Abre la ficha rápida; los botones de abajo
   quedan fuera de ella para que «Pedir» no dispare también la ficha. */
.pieza__cara {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.pieza__cara:active { transform: scale(.98); }

.pieza__mas-fotos {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0 2px;
}
.pieza__mas-fotos img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--linea);
}
.pieza__mas-fotos-num {
    font-family: var(--titulo);
    font-size: .72rem;
    font-weight: 700;
    color: var(--tinta-3);
}

.pieza__acciones {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    margin-top: auto;
    padding: 10px 0 0;
}
.pieza__acciones .boton { width: 100%; }

/* Última casilla de una reja del inicio: la puerta al catálogo. */
.pieza--todo {
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 100%;
    padding: 22px 12px;
    background: var(--banda);
    color: #fff;
    text-align: center;
    box-shadow: var(--sombra-acento);
}
.pieza--todo:active { transform: scale(.97); }
.pieza--todo strong { font-family: var(--titulo); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.pieza--todo small { font-size: .78rem; line-height: 1.3; color: rgba(255, 238, 245, .85); }
.pieza__todo-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .18);
}
.pieza__todo-icono svg { width: 26px; height: 26px; }

/* Cierre de sección: la otra ruta, la de crearla desde cero. */
.ruta-crear {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
    padding: 16px;
    border-radius: var(--r-lg);
    background: var(--acento-bruma);
    text-align: center;
}
/* La pregunta arriba, a lo ancho, y debajo los botones en dos columnas.
   Si sólo hay un botón, ocupa las dos. */
.ruta-crear p { grid-column: 1 / -1; font-family: var(--titulo); font-size: .95rem; font-weight: 600; color: var(--vino); }
.ruta-crear .boton { width: 100%; min-width: 0; padding-inline: 10px; white-space: normal; line-height: 1.15; text-align: center; }
.ruta-crear p + .boton:last-child { grid-column: 1 / -1; justify-self: center; width: auto; padding-inline: 20px; }

/* ── Tarjetas del recorrido ─────────────────────────────────────── */
.reja--crear { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.crear {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 10px 12px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .2s ease;
}
.crear:active { transform: scale(.97); }
.crear__lienzo { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--acento-bruma); }
.crear__lienzo img { width: 100%; height: 100%; object-fit: cover; }
.crear__texto { display: flex; flex-direction: column; gap: 2px; }
.crear__texto strong { font-family: var(--titulo); font-size: .98rem; font-weight: 700; line-height: 1.2; color: var(--vino); }
.crear__texto small { font-size: .78rem; line-height: 1.3; color: var(--tinta-2); }
.crear .boton { width: 100%; margin-top: auto; }

.crear-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crear-col .crear { flex: 1; }
.crear-col__guia { width: 100%; padding-inline: 10px; font-size: .82rem; }
.reja--crear { margin-bottom: 24px; }
/* Tres creadores: en teléfono piñata y tocado lado a lado y el lazo abajo,
   a lo ancho, con la foto a un lado. */
.reja--tres { max-width: 980px; margin-inline: auto; }
.reja--tres > .crear-col:nth-child(3) { grid-column: 1 / -1; }
.reja--tres > .crear-col:nth-child(3) .crear { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; text-align: left; }
.reja--tres > .crear-col:nth-child(3) .crear .boton { grid-column: 1 / -1; }

/* ── Temporada alta: mosaico de colecciones ── */
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mosaico__foto { overflow: hidden; border-radius: var(--r-md); background: var(--acento-bruma); }
.mosaico__foto button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mosaico__foto img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.mosaico__foto--grande { grid-column: 1 / -1; }
.mosaico__foto--grande img { aspect-ratio: 16 / 10; }
.mosaico__pedir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 1;
    padding: 12px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--panel);
    color: #fff;
    text-align: center;
    box-shadow: var(--sombra-acento);
    transition: transform .15s ease;
}
.mosaico__pedir:active { transform: scale(.97); }
.mosaico__pedir-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
}
.mosaico__pedir-icono svg { width: 28px; height: 28px; }
.mosaico__pedir strong { font-family: var(--titulo); font-size: 1.05rem; font-weight: 800; }
.mosaico__pedir small { font-size: .78rem; color: rgba(255, 238, 245, .85); }

/* Formulario corto (pedido por mayoreo) dentro de la hoja informativa. */
.form-corto { display: grid; gap: 12px; }
.form-corto .campo { margin: 0; }
.form-corto textarea { min-height: 110px; resize: vertical; }
.form-corto__aviso:empty { display: none; }
.form-corto__listo { display: grid; gap: 12px; text-align: center; }

.mosaico__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.mosaico__acciones .boton { flex: 1 1 220px; }

.guias-rapidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 22px;
}

.pieza__foto {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--acento-bruma);
}
.pieza__foto img { width: 100%; height: 100%; object-fit: cover; }

.marca-temporada {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    font-family: var(--titulo);
    font-size: .68rem;
    font-weight: 700;
    color: var(--acento);
    box-shadow: var(--sombra-0);
}

.pieza__cuerpo { display: flex; flex-direction: column; min-width: 0; padding: 10px 4px 0; }
.pieza__nombre { font-family: var(--titulo); font-size: .92rem; font-weight: 700; line-height: 1.22; color: var(--vino); }
.pieza__meta { margin-top: 2px; font-size: .76rem; color: var(--tinta-3); }

.vacio {
    padding: 34px 18px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    text-align: center;
    color: var(--tinta-2);
}

/* ── Ficha ───────────────────────────────────────────────────── */
.ruta { padding: 14px 0; font-size: .82rem; color: var(--tinta-3); }
.ruta a { color: var(--acento); font-weight: 600; }

.ficha { display: grid; gap: 22px; }

.ficha__principal {
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra);
}
.ficha__principal img { width: 100%; height: auto; }

.origen-foto { margin-top: 8px; font-size: .78rem; color: var(--tinta-3); }

.ficha__tiras { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.ficha__tiras::-webkit-scrollbar { display: none; }
.ficha__tira {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    transition: box-shadow .2s ease;
}
.ficha__tira img { width: 100%; height: 100%; object-fit: cover; }
.ficha__tira[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acento); }

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; list-style: none; }
.etiquetas li {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--acento-bruma);
    font-size: .76rem;
    font-weight: 600;
    color: var(--acento-fuerte);
}

.ficha__acciones { display: grid; gap: 10px; margin: 18px 0 16px; }

/* ═══════════════════ 8. PERSONALIZADOR ═══════════════════ */
.pz { display: grid; gap: 20px; }

.pz__avance { margin-bottom: 18px; }
.pz__barra {
    height: 8px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--acento-luz);
}
.pz__barra span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--acento);
    transition: width .32s cubic-bezier(.22, 1, .36, 1);
}
.pz__paso-nombre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tinta-3);
}

.pz__titulo-pagina { font-family: var(--titulo); }
.pz__pregunta { margin-bottom: 6px; font-size: 1.3rem; font-weight: 800; color: var(--vino); }
.pz__ayuda { margin-bottom: 16px; font-size: .88rem; line-height: 1.5; color: var(--tinta-2); }

.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.opcion {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    text-align: left;
    color: var(--tinta);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease;
}
.opcion:active { transform: scale(.97); }
.opcion[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acento), var(--sombra); }
.opcion > img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--acento-bruma);
}
/* Opción sin foto: el dibujo de trazo hace de retrato, y el nombre y la
   nota se apilan a su derecha. En fila los tres seguidos, la nota se
   partía en cinco renglones y se salía de la tarjeta. */
.opcion--simple {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "dibujo nombre" "dibujo nota";
    align-items: center;
    align-content: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 12px;
}
.opcion__dibujo {
    grid-area: dibujo;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 9px;
    border-radius: 14px;
    background: var(--acento-bruma);
    color: var(--acento);
}
.opcion--simple .opcion__nombre { grid-area: nombre; }
.opcion--simple .opcion__nota { grid-area: nota; }
/* Hay opciones sin dibujo («Sí, con lazo»): sin esto quedaba el hueco de
   la columna del icono y el texto se leía descolgado. */
.opcion--simple:not(:has(.opcion__dibujo)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nombre" "nota";
    justify-items: center;
    text-align: center;
}
.opcion__nombre { font-family: var(--titulo); font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--vino); }

/* «No sé, asesórenme» y «Otra idea» no son una opción más de la reja: van
   a todo lo ancho, centradas, al final. */
.opcion[data-valor="no-se"],
.opcion[data-valor="otra"] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    text-align: center;
}
.opcion[data-valor="no-se"] > img,
.opcion[data-valor="otra"] > img { display: none; }
.opcion[data-valor="no-se"] .opcion__dibujo,
.opcion[data-valor="otra"] .opcion__dibujo { width: 36px; height: 36px; padding: 7px; border-radius: 12px; }
.opcion[data-valor="no-se"] .opcion__nota,
.opcion[data-valor="otra"] .opcion__nota { display: none; }

/* Subtítulos dentro de un paso: aire arriba para separar del bloque
   anterior y aire abajo para que los botones no se peguen al texto. */
.pz__subtitulo { margin: 26px 0 12px; font-size: 1.02rem; color: var(--vino); }
.pz__subtitulo--primero { margin-top: 4px; }
.pz .pista + .opciones { margin-top: 10px; }
.pz__resumen-final { margin-top: 28px; }

/* ── Calendario propio ── */
.campo--fecha { position: relative; }
.fecha__boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.fecha__boton svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--acento); }
.fecha__boton[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--acento); }
.calendario {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    max-width: 340px;
    padding: 14px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-alta), inset 0 0 0 1px var(--linea);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
}
.calendario.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.calendario__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario__cabeza strong { font-family: var(--titulo); font-size: 1rem; color: var(--vino); }
.calendario__mover {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--acento-bruma);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--acento);
}
.calendario__mover:disabled { opacity: .35; cursor: default; }
.calendario__semana,
.calendario__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.calendario__semana span { padding: 4px 0; font-size: .72rem; font-weight: 700; color: var(--tinta-3); }
.calendario__dia {
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: .88rem;
    font-weight: 600;
    color: var(--tinta);
    transition: background-color .15s ease, color .15s ease;
}
.calendario__dia:not(:disabled):hover { background: var(--acento-bruma); }
.calendario__dia:disabled { color: var(--linea); cursor: default; }
.calendario__dia.elegido { background: var(--acento); color: #fff; }
.calendario__pie { margin-top: 8px; text-align: center; }
.opcion__nota { font-size: .78rem; line-height: 1.35; color: var(--tinta-2); }

/* Colores: la muestra es un caramelo, con su brillo y su sombra dentro. */
.colores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.color {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    cursor: pointer;
    transition: box-shadow .2s ease, transform .15s ease;
}
.color:active { transform: scale(.96); }
.color i {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow:
        inset 0 -5px 9px rgba(0, 0, 0, .2),
        inset 0 3px 6px rgba(255, 255, 255, .4),
        inset 0 0 0 1px rgba(74, 23, 48, .12),
        0 4px 10px rgba(74, 23, 48, .16);
}
.color i::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 8px;
    width: 15px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
    transform: rotate(-25deg);
}
.color span { font-size: .74rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--tinta-2); }
.color[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acento), var(--sombra); }
.color[aria-pressed="true"] span { color: var(--acento); }

.resumen {
    padding: 18px;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.resumen h3 { margin-bottom: 12px; font-size: 1rem; color: var(--vino); }
.resumen__lista { display: grid; gap: 8px; list-style: none; }
.resumen__lista li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--linea);
    font-size: .86rem;
}
.resumen__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.resumen__lista .clave { flex-shrink: 0; color: var(--tinta-3); }
.resumen__lista .valor { font-weight: 700; text-align: right; color: var(--vino); }
.resumen__editar {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--acento);
    text-decoration: underline;
}

.resumen--lateral { display: none; }
.pz__acciones { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.pz__acciones .boton, .pz-modal__pie .boton { min-height: 52px; }
.pz__acciones .boton--claro, .pz-modal__pie .boton--claro { flex: 0 0 auto; padding: 0 22px; }
.pz__acciones .boton--principal { flex: 1; }
.boton--texto {
    border: 0;
    background: none;
    padding: 10px 4px;
    font-family: var(--titulo);
    font-size: .86rem;
    font-weight: 600;
    color: var(--acento);
    text-decoration: underline;
}

/* ── El recorrido como ventana que emerge ────────────────────── */
.pz-fondo {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(58, 34, 48, .5);
    animation: aparecer .24s ease both;
}

.pz-modal {
    position: fixed;
    inset: 0;
    z-index: 1310;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.pz-modal__caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 88vh;
    height: 94svh;
    overflow: hidden;
    border-radius: 28px 28px 0 0;
    background: var(--crema);
    box-shadow: 0 -18px 40px rgba(74, 23, 48, .24);
    animation: hoja-sube .44s cubic-bezier(.22, 1, .36, 1) both;
}
.pz-modal.cerrando .pz-modal__caja { animation: hoja-baja .26s cubic-bezier(.4, 0, 1, 1) both; }
.pz-fondo.cerrando { animation: desaparecer .26s ease both; }

.pz-modal__top {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 18px 14px 10px 20px;
    background: var(--papel);
}
.pz-modal__agarre {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: #DCC9D2;
    transform: translateX(-50%);
}
.pz-modal__titulo { font-size: 1.25rem; font-weight: 800; color: var(--vino); }
.pz-modal__paso { font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
.pz-modal__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--acento-bruma);
    font-size: 1.1rem;
    color: var(--acento);
}
.pz-modal__top .pz__barra { grid-column: 1 / -1; margin: 8px 0 0; }

.pz-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
}
.pz-modal__body .pz { gap: 0; }
.pz-modal__body .pz__acciones { display: none; }

.pz-modal__pie {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px calc(12px + var(--abajo));
    background: var(--papel);
    box-shadow: 0 -6px 18px rgba(74, 23, 48, .08);
}
.pz-modal__pie .boton--principal { flex: 1; }

@keyframes subir { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════ 9. HOJAS, VISOR, CARGADOR Y LLUVIA ═══════════ */
/* ── Hoja informativa (guías) ────────────────────────────────── */
.hoja-info {
    position: fixed;
    inset: 0;
    z-index: 1250;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .45s;
}
.hoja-info.abierta { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.hoja-info__fondo {
    position: absolute;
    inset: 0;
    background: rgba(58, 34, 48, .5);
    opacity: 0;
    transition: opacity .3s ease;
}
.hoja-info.abierta .hoja-info__fondo { opacity: 1; }

.hoja-info__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ver la nota de las hojas en .pieza-sheet: alto fijo y sólo el
       cuerpo se desplaza. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 84vh;
    height: 88svh;
    border-radius: 30px 30px 0 0;
    background: var(--crema);
    box-shadow: 0 -18px 40px rgba(74, 23, 48, .22);
    transform: translateY(104%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.hoja-info.abierta .hoja-info__panel { transform: none; }

.hoja-info__panel:focus { outline: none; }
.hoja-info__top {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 8px 20px;
}
.hoja-info__agarre {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 5px;
    border-radius: 3px;
    background: #DCC9D2;
    transform: translateX(-50%);
}
.hoja-info__titulo { font-size: 1.32rem; font-weight: 800; line-height: 1.2; color: var(--vino); }
.hoja-info__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--acento-bruma);
    color: var(--acento);
}
.hoja-info__cerrar svg { width: 20px; height: 20px; }
.hoja-info__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px calc(20px + var(--abajo));
}

/* Guía a pantalla completa (la de todas las familias). */
.hoja-info.completa .hoja-info__panel {
    top: 0;
    height: auto;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s ease;
}
.hoja-info.completa.abierta .hoja-info__panel { border-radius: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-radius .45s ease .2s; }
.hoja-info.completa .hoja-info__agarre { display: none; }
.hoja-info.completa .hoja-info__top { padding-top: calc(var(--arriba) + 16px); }

/* Fichas dentro de una guía. */
.guia { display: grid; gap: 12px; }
.guia__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.guia__figura {
    align-self: start;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--acento-bruma);
}
.guia__figura img { width: 100%; height: 100%; object-fit: cover; }
.guia__cuerpo { display: flex; flex-direction: column; align-items: flex-start; }
.guia__cuerpo h3 { font-size: 1rem; font-weight: 700; color: var(--vino); }
.guia__cuerpo p { margin: 4px 0 10px; font-size: .84rem; line-height: 1.5; color: var(--tinta-2); }
.guia__cuerpo .boton { margin-top: auto; }

.lista-check { display: grid; gap: 8px; margin: 0 0 12px; list-style: none; }
.lista-check li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--vino); }
.lista-check svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 4px;
    border-radius: 50%;
    background: var(--fam-lazo-luz);
    color: var(--fam-lazo);
}
.hoja-info__pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }

/* ── Ficha rápida de pieza (dialog) ──────────────────────────── */
/* Hojas en el teléfono (ficha rápida, guías, recorrido). Tres reglas que
   salen de probar en un iPhone real, no en el emulador:
   1. Alto FIJO en svh, no máximo: con sólo max-height Safari no le daba
      alto al centro y el contenido se cortaba; con alto fijo el centro
      flexible sí se encoge y se desplaza.
   2. Sólo el centro se desplaza. La barra de arriba y la de los botones
      quedan fuera del desplazamiento: si van dentro, el rebote elástico
      de iOS las arrastra y deja huecos al subir o bajar de más.
   3. svh y no vh: «vh» es la pantalla con la barra del navegador
      escondida; con la barra a la vista la hoja quedaba más alta que lo
      visible.                                                            */
.pieza-sheet {
    width: min(100%, 980px);
    max-width: 100%;
    height: 88vh;
    height: 94svh;
    max-height: none;
    margin: auto auto 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 28px 28px 0 0;
    background: var(--crema);
    color: var(--tinta);
}
.pieza-sheet::backdrop { background: rgba(58, 34, 48, .5); }
/* Sube desde abajo como las demás hojas y baja al cerrarse; el fondo se funde. */
.pieza-sheet[open] { display: flex; flex-direction: column; animation: hoja-sube .44s cubic-bezier(.22, 1, .36, 1) both; }
.pieza-sheet[open]::backdrop { animation: aparecer .3s ease both; }
.pieza-sheet.cerrando { animation: hoja-baja .26s cubic-bezier(.4, 0, 1, 1) both; }
.pieza-sheet.cerrando::backdrop { animation: desaparecer .26s ease both; }
@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hoja-baja { from { transform: none; } to { transform: translateY(100%); } }
@keyframes desaparecer { from { opacity: 1; } to { opacity: 0; } }

.pieza-sheet:focus { outline: none; }
.pieza-sheet__top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 14px 10px 20px;
    background: var(--papel);
    font-family: var(--titulo);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-3);
}
.pieza-sheet__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--acento-bruma);
    color: var(--acento);
}
.pieza-sheet__cerrar svg { width: 20px; height: 20px; }

.pieza-sheet__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.pieza-sheet__foto {
    width: 100%;
    /* Más baja que cuadrada: así al abrir ya se lee el nombre y el
       principio de la descripción, y se entiende que hay más abajo. */
    aspect-ratio: 5 / 4;
    max-height: 34svh;
    object-fit: cover;
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    cursor: zoom-in;
}
.pieza-sheet--zoom .pieza-sheet__foto { aspect-ratio: auto; max-height: 70svh; object-fit: contain; cursor: zoom-out; }
.pieza-sheet--zoom .pieza-sheet__info { display: none; }
.pieza-sheet__fotos { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pieza-sheet__fotos::-webkit-scrollbar { display: none; }
.pieza-sheet__fotos button {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--papel);
    box-shadow: var(--sombra-0);
}
.pieza-sheet__fotos img { width: 100%; height: 100%; object-fit: cover; }
.pieza-sheet__fotos button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acento); }
.pieza-sheet__origen { margin-top: 8px; font-size: .76rem; color: var(--tinta-3); }
.pieza-sheet__info h2 { font-size: 1.4rem; margin-top: 4px; color: var(--vino); }
.pieza-sheet__info .seccion__antetitulo { font-size: .72rem; }
.pieza-sheet__descripcion { margin-top: 10px; font-size: .92rem; line-height: 1.6; color: var(--tinta-2); }
.pieza-sheet__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pieza-sheet__cambios { margin-top: 14px; }
.pieza-sheet__cambios label { display: block; margin-bottom: 6px; font-family: var(--titulo); font-size: .86rem; font-weight: 600; color: var(--vino); }
.pieza-sheet__nota { margin-top: 14px; font-size: .82rem; line-height: 1.45; color: var(--tinta-3); }
.pieza-sheet__pie {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding: 0 0 calc(8px + var(--abajo));
}
.pieza-sheet__pie > p { font-size: .78rem; text-align: center; color: var(--tinta-3); }
.pieza-sheet__pie .boton { width: 100%; }

/* ── Visor de fotos ──────────────────────────────────────────── */
.visor {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    background: rgba(32, 14, 24, .96);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.visor.abierto { opacity: 1; visibility: visible; }
.visor .visor__foto { transform: scale(.94); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.visor.abierto .visor__foto { transform: none; }
.visor__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(var(--arriba) + 12px) 16px 10px;
    color: #fff;
}
.visor__cuenta { font-family: var(--titulo); font-size: .9rem; font-weight: 600; }
.visor__cerrar,
.visor__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.visor__cerrar svg,
.visor__nav svg { width: 22px; height: 22px; }
.visor__cuerpo {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.visor__foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-md); }
.visor__toque { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 1; border: 0; background: none; }
.visor__toque--izq { left: 0; }
.visor__toque--der { right: 0; }
.visor__nav { position: absolute; top: 50%; z-index: 2; display: none; transform: translateY(-50%); }
.visor__nav--izq { left: 20px; }
.visor__nav--der { right: 20px; }
.visor__pie {
    padding: 14px 20px calc(20px + var(--abajo));
    font-size: .85rem;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 236, 244, .8);
}

.foto-abrible { margin: 0; }
.foto-abrible__boton {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--r-md);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    cursor: zoom-in;
}
.foto-abrible__boton img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }

/* ── Cargador y transición entre páginas ─────────────────────── */
.cargador {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--crema);
    opacity: 1;
    visibility: visible;
    transition: opacity .26s ease, visibility 0s;
}
.cargador.oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease, visibility 0s linear .26s;
}
/* Dos caras: la flor que gira en lo de piñatas, y la dama que se llena de
   blanco de abajo hacia arriba, como una barra de carga, en todo lo demás. */
.cargador:not(.cargador--pinata) { background: var(--panel); }
.cargador:not(.cargador--pinata) .cargador__flor,
.cargador--pinata .cargador__dama { display: none; }
.cargador__dama { position: relative; width: 96px; height: 96px; }
.cargador__dama img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cargador__dama-base { filter: brightness(0); opacity: .55; }
.cargador__dama-lleno {
    filter: brightness(0) invert(1);
    clip-path: inset(100% 0 0 0);
    animation: llenar 1.3s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes llenar {
    0% { clip-path: inset(100% 0 0 0); }
    70%, 100% { clip-path: inset(0 0 0 0); }
}
.cargador--simple .cargador__dama { display: none; }
.cargador__flor {
    width: 76px;
    height: 76px;
    object-fit: contain;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 10px 20px rgba(74, 23, 48, .18));
    animation: girar 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Volver atrás: la página anterior suele estar lista, así que solo se funde. */
.cargador--simple { transition-duration: .15s; }
.cargador--simple.oculto { transition: opacity .15s ease, visibility 0s linear .15s; }
.cargador--simple .cargador__flor { display: none; }

/* ── Lluvia decorativa (solo escritorio) ─────────────────────── */
#lluvia { display: none; }
.lluvia-switch { display: none; }

/* ═══════════════════ 10. PIE ═══════════════════ */
.pie {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    padding: 34px 0 18px;
    border-radius: 30px 30px 0 0;
    background: var(--vino-hondo);
    color: rgba(255, 233, 242, .78);
}
.pie__reja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
.pie__marca-bloque { grid-column: 1 / -1; }
.pie__marca { display: flex; align-items: center; gap: 12px; }
.pie__marca img { width: 44px; height: 44px; border-radius: 14px; }
.pie__marca b { font-family: var(--titulo); font-size: 1.25rem; font-weight: 800; color: #fff; }
.pie__marca span { display: block; font-size: .76rem; color: rgba(255, 233, 242, .65); }
.pie__marca-bloque p { margin-top: 12px; max-width: 38ch; font-size: .88rem; line-height: 1.55; }
.pie__marca-bloque em { color: #FFD36B; font-style: normal; }

.pie__social { display: flex; gap: 8px; margin-top: 14px; }
.pie__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: background-color .2s ease;
}
.pie__social a:hover { background: var(--acento); }
.pie__social svg { width: 19px; height: 19px; }

.pie__col h2 { margin-bottom: 10px; font-size: .95rem; font-weight: 700; color: #fff; }
.pie__col ul { display: grid; list-style: none; }
.pie__col li a { display: block; padding: 6px 0; font-size: .86rem; color: rgba(255, 233, 242, .78); transition: color .2s ease; }
.pie__col li a:hover { color: #fff; }
.pie__col--ancha { grid-column: 1 / -1; }

.pie__datos { display: grid; gap: 10px; margin-bottom: 14px; list-style: none; }
.pie__datos li { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; line-height: 1.45; }
.pie__datos svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: #FFD36B; }
.pie__datos a { padding: 0; }

.pie__fin {
    display: grid;
    gap: 8px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .78rem;
    text-align: center;
}
.pie__fin a { color: #fff; font-weight: 600; }

/* Columnas de guías (las arma tools/sitio/seo.js) y enlaces legales. */
.pie__guias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.pie__legales { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.pie__legales a { color: rgba(255, 233, 242, .78); font-weight: 500; }
.pie__legales a:hover { color: #fff; }
.pie__preferencias { border:0; padding:0; background:none; color:rgba(255,233,242,.78); font:inherit; font-weight:500; text-decoration:underline; cursor:pointer; }
.pie__preferencias:hover { color:#fff; }

/* ── Páginas de texto largo: guías (Codex) y legales (Gemini) ── */
.pagina-texto { padding-top: calc(var(--arriba) + 22px); }
.contenedor--texto { max-width: 760px; }

/* .guia también es la rejilla de las guías del modal: aquí se anula para
   que el artículo largo no se reparta en columnas. */
.pagina-texto .guia { display: block; }
/* Índice de guías (/guias). */
.guia__lista { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.guia__lista li + li { margin-top: 0; }
.guia__lista a {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .2s ease;
}
.guia__lista a:active { transform: scale(.98); }
.guia__lista strong { font-family: var(--titulo); font-size: 1rem; color: var(--vino); }
.guia__lista span { font-size: .88rem; font-weight: 500; line-height: 1.5; color: var(--tinta-2); }

/* Texto de apoyo al pie de /pinatas, /tocados y /lazos. */
.categoria-seo .seccion__titulo { font-size: 1.35rem; color: var(--vino); }
.categoria-seo__texto { margin-top: 12px; font-size: .95rem; line-height: 1.7; color: var(--tinta-2); }
.categoria-seo__preguntas { margin-top: 18px; }
.categoria-seo__subtitulo { margin: 24px 0 10px; font-size: 1rem; color: var(--vino); }
.categoria-seo__guias { display: grid; gap: 8px; list-style: none; }
.categoria-seo__guias a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    background: var(--papel);
    box-shadow: var(--sombra-0);
    font-weight: 600;
    font-size: .92rem;
    color: var(--acento-fuerte);
}
.categoria-seo__guias a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--acento); }
.categoria-seo__cta { margin-top: 20px; text-align: center; }
.porcantidad__tarjeta--seccion { margin-top: 22px; }
/* En teléfono la columna lateral de los catálogos no existe: sus partes se
   reparten alrededor de la reja en el orden de siempre. */
.seccion--catalogo > .contenedor { display: flex; flex-direction: column; }
.seccion__lado { display: contents; }
.seccion__lado > .seccion__cabeza { order: -1; }
.seccion__lado > .ruta-crear,
.seccion__lado > .porcantidad__tarjeta { order: 1; }
/* Piezas que solo existen en escritorio (la escena del inicio, notas de
   los accesos): en teléfono ni se pintan ni bajan sus imágenes. */
@media (max-width: 999.98px) { .solo-escritorio { display: none !important; } }

/* Nota de SEO al pie de cada ficha (la arma seo.js). */
.ficha-extra .guia__nota { margin: 8px 0 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
.ficha-extra .guia__nota h2 { margin-bottom: 6px; font-size: 1.1rem; color: var(--vino); }
.ficha-extra .guia__nota p + p { margin-top: 10px; }
.ficha-extra .guia__nota a { display: inline-block; margin: 2px 0; color: var(--acento-fuerte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.guia, .legal { color: var(--tinta-2); font-size: 1rem; line-height: 1.7; }
.guia h1, .legal h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); color: var(--vino); }
.guia h2, .legal h2 { margin: 34px 0 10px; font-size: 1.35rem; color: var(--vino); }
.guia h3, .legal h3 { margin: 20px 0 6px; font-size: 1.08rem; color: var(--tinta); }
.guia p + p, .legal p + p { margin-top: 12px; }
.guia ul, .guia ol, .legal ul, .legal ol { margin: 12px 0; padding-left: 1.3em; }
.guia li + li, .legal li + li { margin-top: 6px; }
.guia a:not(.boton), .legal a { color: var(--acento-fuerte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.guia__cabeza, .legal__cabeza { padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.guia__antetitulo { margin-bottom: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.guia__bajada { margin-top: 12px; font-size: 1.08rem; color: var(--tinta-2); }
.legal__fecha { margin-top: 8px; font-size: .86rem; color: var(--tinta-3); }

.guia__indice, .legal__indice { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md); background: var(--papel); box-shadow: var(--sombra-0); }
.guia__indice ol, .legal__indice ol { margin: 0; }
.guia__indice a, .legal__indice a { text-decoration: none !important; }

.guia__foto { margin: 20px 0; }
.guia__foto img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--sombra-0); }
.guia__foto figcaption { margin-top: 8px; font-size: .84rem; color: var(--tinta-3); }

.guia__pasos { list-style: none; padding: 0 !important; counter-reset: paso; }
.guia__pasos > li { position: relative; padding-left: 44px; counter-increment: paso; }
.guia__pasos > li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acento-luz);
    color: var(--acento-fuerte);
    font-family: var(--titulo);
    font-weight: 800;
    font-size: .9rem;
}
.guia__pasos h3 { margin-top: 0; }

.guia__nota { margin: 22px 0; padding: 14px 18px; border-left: 4px solid var(--acento); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--acento-bruma); }

.guia__preguntas details { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--papel); box-shadow: var(--sombra-0); }
.guia__preguntas summary { font-family: var(--titulo); font-weight: 700; color: var(--tinta); cursor: pointer; }
.guia__preguntas details p { margin-top: 8px; }

.guia__cierre { margin-top: 36px; padding: 26px 22px; border-radius: var(--r-lg); background: var(--panel); color: rgba(255, 238, 245, .88); text-align: center; }
.guia__cierre h2 { margin-top: 0; color: #fff; }
.guia__cierre .boton { margin-top: 16px; }

.guia__relacionadas { margin-top: 28px; }
.guia__relacionadas ul { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.guia__relacionadas li + li { margin-top: 0; }
.guia__relacionadas a { display: block; padding: 12px 16px; border-radius: var(--r-sm); background: var(--papel); box-shadow: var(--sombra-0); text-decoration: none !important; }

/* ═══════════════ 11. MOVIMIENTO COMPARTIDO ═══════════════ */
/* Aparición al entrar en pantalla.
   El estado escondido va detrás de .con-js, que pone js/interfaz.js nada
   más arrancar. Si el script no llega —error, red caída, navegador viejo—
   las secciones quedan visibles en vez de desaparecer para siempre. */
.revelar { transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
html.con-js .revelar:not(.visible) { opacity: 0; transform: translateY(14px); }

/* Cascada breve al filtrar: las tarjetas entran, no aparecen de golpe. */
@keyframes entrar-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}
.entrando { animation: entrar-pop .34s cubic-bezier(.22, 1, .36, 1) both; }

/* Bloqueo de scroll con una hoja abierta: sólo se corta el desbordamiento.
   NO se fija el body: la página quedaría con alto cero y Safari de iOS 26
   deja de pintar lo fijo que baja de la pantalla (la hoja «atorada»). */
html.pagina-quieta,
html.pagina-quieta body {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .revelar { opacity: 1; transform: none; }
}

/* ═══════════════ 12. PANTALLAS MUY ANGOSTAS (≤360) ═══════════════ */
@media (max-width: 360px) {
    .accesos { gap: 8px; }
    .porcantidad__tarjeta,
    .guia__item { grid-template-columns: minmax(0, 1fr); }
    .porcantidad__lienzo { max-width: 150px; }
}

/* ═══════════════ 13. TABLETA (600–999) ═══════════════ */
/* Mismo lenguaje, más columnas. No se reescribe ningún componente. */
@media (min-width: 600px) {
    .contenedor { padding: 0 24px; }
    .portada__bandeja { padding: 20px 24px 4px; }
    .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reja-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .razones,
    .pagos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tira { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .texto-largo__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .lugar__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie__reja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pie__col--ancha { grid-column: auto; }
    .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .muestras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════ 14. ESCRITORIO (≥1000px) ═══════════════
   Rediseño para laptop. La esencia es la misma que en el teléfono —el
   vino, la crema, Outfit y Manrope, las fotos reales—, pero la
   composición deja de ser una columna estirada: cada sección se arma a lo
   ancho, con columnas que acompañan al scroll, mosaicos y la escena de la
   portada. El movimiento es corto y con propósito: entra lo que llega a
   la vista, responde lo que se toca y nada se mueve solo más de lo
   necesario. Todo se apaga con prefers-reduced-motion.

   Curvas (una sola familia en todo el sitio):
     --sale    cubic-bezier(.22, 1, .36, 1)    entradas y desplazamientos
     --rebote  cubic-bezier(.34, 1.56, .64, 1) lo que florece o salta
     --suave   cubic-bezier(.65, 0, .35, 1)    lo que cambia de estado     */
@media (min-width: 1000px) {
    :root {
        --ancho: 1280px;
        --sale: cubic-bezier(.22, 1, .36, 1);
        --rebote: cubic-bezier(.34, 1.56, .64, 1);
        --suave: cubic-bezier(.65, 0, .35, 1);
        --sombra-flota: 0 30px 60px -18px rgba(74, 23, 48, .30);
    }
    html { scroll-padding-top: 110px; }
    body { padding-bottom: 0; }

    .contenedor { padding: 0 40px; }
    .seccion { padding: 120px 0 0; }
    .seccion__cabeza { margin-bottom: 36px; }
    .seccion__antetitulo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: .8rem;
        letter-spacing: .14em;
    }
    .seccion__antetitulo::before,
    .seccion__cabeza--centro .seccion__antetitulo::after {
        content: '';
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: .6;
    }
    .seccion__titulo { font-size: clamp(2.6rem, 3.3vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; }
    .seccion__antetitulo + .seccion__titulo { margin-top: 12px; }
    .seccion__bajada { margin-top: 14px; font-size: 1.08rem; line-height: 1.6; max-width: 46ch; }
    .reja { gap: 24px; }

    /* Botones: un brillo recorre el principal al pasar el cursor. */
    .boton { min-height: 52px; padding: 0 26px; transition: transform .35s var(--sale), box-shadow .35s var(--sale), background-color .25s ease, color .25s ease; }
    .boton:hover { transform: translateY(-2px); }
    .boton:active { transform: translateY(0) scale(.98); }
    .boton--principal, .boton--wa { position: relative; overflow: hidden; isolation: isolate; }
    .boton--principal::after, .boton--wa::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
        transform: translateX(-110%);
        transition: transform .7s var(--sale);
    }
    .boton--principal:hover::after, .boton--wa:hover::after { transform: translateX(110%); }
    .boton--principal:hover { box-shadow: 0 16px 30px rgba(180, 67, 111, .36); }
    .boton--sm { min-height: 44px; padding: 0 18px; }
    .enlace { position: relative; font-size: .95rem; }
    .enlace:hover { text-decoration: none; }
    .enlace::after {
        content: '';
        position: absolute;
        left: 0;
        right: 22px;
        bottom: 4px;
        height: 1.5px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: 100% 50%;
        transition: transform .45s var(--sale);
    }
    .enlace:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

    /* ── Cabecera: píldora de vidrio que se condensa al bajar ── */
    .barra-inferior,
    .hoja { display: none !important; }

    .cabecera {
        position: fixed;
        top: 18px;
        left: 50%;
        z-index: 1200;
        display: block;
        width: calc(100% - 56px);
        max-width: 1320px;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, .8);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 34px rgba(74, 23, 48, .12);
        backdrop-filter: saturate(170%) blur(18px);
        -webkit-backdrop-filter: saturate(170%) blur(18px);
        transform: translateX(-50%);
        transition: max-width .6s var(--sale), top .6s var(--sale), box-shadow .4s ease, background-color .4s ease;
    }
    .cabecera.condensada { top: 12px; max-width: 1100px; background: rgba(255, 255, 255, .92); box-shadow: 0 16px 40px rgba(74, 23, 48, .18); }
    .cabecera__fila {
        display: flex;
        align-items: center;
        gap: 22px;
        height: 70px;
        max-width: none;
        padding: 0 10px 0 16px;
        transition: height .6s var(--sale);
    }
    .cabecera.condensada .cabecera__fila { height: 60px; }
    .cabecera .marca { display: flex; align-items: center; gap: 11px; }
    .cabecera .marca img {
        width: 42px;
        height: 42px;
        padding: 5px;
        border-radius: 14px;
        background: var(--panel);
        box-shadow: 0 6px 14px rgba(110, 36, 66, .3);
        transition: transform .6s var(--rebote);
    }
    .cabecera .marca:hover img { transform: rotate(-8deg) scale(1.06); }
    .marca__nombre { display: block; font-family: var(--titulo); font-size: 1.12rem; font-weight: 800; line-height: 1.1; color: var(--vino); }
    .marca__bajada { display: block; font-size: .72rem; color: var(--tinta-3); }

    /* El indicador: una pastilla que se desliza bajo el enlace que se
       señala y vuelve a la página actual al salir (js/interfaz.js). */
    .nav { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .nav__indicador {
        position: absolute;
        top: 50%;
        left: 0;
        width: var(--w, 0px);
        height: 40px;
        margin-top: -20px;
        border-radius: var(--r-pill);
        background: var(--acento-luz);
        opacity: var(--o, 0);
        transform: translateX(var(--x, 0px));
        transition: transform .5s var(--sale), width .5s var(--sale), opacity .3s ease;
        pointer-events: none;
    }
    .nav a {
        position: relative;
        z-index: 1;
        display: block;
        padding: 10px 15px;
        border-radius: var(--r-pill);
        font-family: var(--titulo);
        font-size: .93rem;
        font-weight: 500;
        color: var(--vino);
        transition: color .3s ease;
    }
    .nav a:hover { color: var(--acento-fuerte); }
    .nav a[aria-current="page"] { font-weight: 700; color: var(--acento-fuerte); }
    /* Sin JavaScript no hay indicador: la página actual lleva su fondo. */
    html:not(.con-js) .nav a[aria-current="page"] { background: var(--acento-luz); }
    .cabecera .boton { min-height: 48px; padding: 0 22px; }

    /* Guías y legales: una línea de lectura bajo la cabecera avanza con el
       scroll (solo en navegadores que lo saben hacer; en los demás no
       aparece y no pasa nada). */
    @supports (animation-timeline: scroll()) {
        body:has(.pagina-texto) .cabecera::after {
            content: '';
            position: absolute;
            left: 34px;
            right: 34px;
            bottom: 0;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--acento), #E8792B);
            transform-origin: 0 50%;
            animation: lectura linear both;
            animation-timeline: scroll(root);
        }
        @keyframes lectura { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    }

    /* ═══ Portada del inicio: texto a la izquierda, escena a la derecha ═══ */
    .portada { padding: 106px 28px 0; }
    .portada__panel {
        max-width: 1320px;
        margin: 0 auto;
        padding: 64px 72px 150px;
        border-radius: 44px;
        box-shadow: var(--sombra-flota);
    }
    /* Resplandor que sigue al cursor, muy tenue: le da fondo al vino. */
    .portada__panel::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(640px circle at calc(66% + var(--px, 0) * 10%) calc(42% + var(--py, 0) * 10%), rgba(255, 143, 186, .22), transparent 62%),
            radial-gradient(520px circle at 6% 100%, rgba(255, 211, 107, .12), transparent 60%);
        pointer-events: none;
    }
    .portada__fila { display: none; }
    .portada__centro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        grid-template-rows: auto auto auto 1fr;
        align-items: start;
        column-gap: 40px;
        min-height: min(560px, calc(100vh - 340px));
        margin: 0;
        text-align: left;
    }
    .portada__centro > * { grid-column: 1; }
    .portada__logo { grid-row: 1; width: 118px; max-width: none; margin-bottom: 20px; }
    .portada__nombre { grid-row: 2; font-size: clamp(4.4rem, 6.6vw, 6.8rem); line-height: .92; letter-spacing: -.045em; }
    .portada__nombre span { margin-top: 18px; font-family: var(--titulo); font-size: clamp(1.4rem, 1.9vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; color: rgba(255, 233, 242, .9); }
    .portada__lema { grid-row: 3; margin-top: 14px; font-size: 1.15rem; }
    .portada__acciones { grid-row: 4; align-self: start; justify-content: flex-start; gap: 12px; margin-top: 30px; }
    .portada__acciones .boton { min-width: 0; min-height: 58px; padding: 0 32px; font-size: 1.02rem; }
    .portada__patron { top: 48%; left: 76%; width: 58%; max-width: 700px; opacity: .06; }

    .portada__escena {
        position: relative;
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        min-height: 500px;
        margin: -20px -24px -100px 0;
    }
    /* Dos capas: la de fuera sigue al cursor (--px, --py, las escribe el
       script ya suavizadas) y se agranda cuando se resalta; la imagen de
       dentro flota por su cuenta. Así ninguna animación pisa a otra. */
    .escena__pieza {
        position: absolute;
        display: block;
        transform: translate3d(calc(var(--px, 0) * var(--prof) * 1px), calc(var(--py, 0) * var(--prof) * 1px), 0);
        transition: scale .9s var(--sale), opacity .5s ease, filter .5s ease;
        will-change: transform;
    }
    .escena__pieza img { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(20, 2, 12, .45)); animation: flotar 9s var(--suave) infinite alternate; }
    .escena__pieza--pinatas { left: 12%; top: 14%; width: 66%; z-index: 3; --prof: 16; }
    .escena__pieza--tocados { right: -2%; top: -6%; width: 40%; z-index: 2; --prof: 30; }
    .escena__pieza--lazos { left: -4%; bottom: 2%; width: 37%; z-index: 4; --prof: 42; }
    .escena__pieza--tocados img { animation-duration: 11s; animation-delay: -3s; }
    .escena__pieza--lazos img { animation-duration: 8s; animation-delay: -5s; }
    @keyframes flotar {
        from { transform: translateY(-9px) rotate(-1.2deg); }
        to { transform: translateY(9px) rotate(1.2deg); }
    }
    /* Al señalar un acceso de abajo, su familia pasa al frente. */
    .portada__escena[data-resalta] .escena__pieza { opacity: .35; filter: saturate(.6) blur(1.5px); scale: .94; }
    .portada__escena[data-resalta="pinatas"] .escena__pieza--pinatas,
    .portada__escena[data-resalta="tocados"] .escena__pieza--tocados,
    .portada__escena[data-resalta="lazos"] .escena__pieza--lazos { z-index: 6; opacity: 1; filter: none; scale: 1.1; }

    .escena__sello {
        position: absolute;
        right: 3%;
        bottom: 4%;
        z-index: 5;
        width: 128px;
        height: 128px;
        overflow: visible;
        fill: rgba(255, 233, 242, .85);
        font-family: var(--titulo);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        animation: girar 26s linear infinite;
    }
    .escena__flor {
        position: absolute;
        right: calc(3% + 34px);
        bottom: calc(4% + 34px);
        z-index: 5;
        width: 60px;
        height: 60px;
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
        animation: latir 3.6s var(--suave) infinite;
    }
    @keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(8deg); } }

    /* Entrada: el texto sube por renglones y la escena llega girando
       apenas, justo cuando se va la pantalla de carga. */
    html.con-js .portada__logo,
    html.con-js .portada__nombre,
    html.con-js .portada__lema,
    html.con-js .portada__acciones { animation: subir-entra .9s var(--sale) both; }
    html.con-js .portada__logo { animation-delay: .55s; }
    html.con-js .portada__nombre { animation-delay: .65s; }
    html.con-js .portada__lema { animation-delay: .78s; }
    html.con-js .portada__acciones { animation-delay: .86s; }
    html.con-js .escena__pieza { animation: escena-entra 1.2s var(--sale) both; }
    html.con-js .escena__pieza--pinatas { animation-delay: .6s; }
    html.con-js .escena__pieza--tocados { animation-delay: .76s; }
    html.con-js .escena__pieza--lazos { animation-delay: .9s; }
    html.con-js .escena__sello { animation: girar 26s linear infinite, aparecer .8s ease 1.1s both; }
    html.con-js .escena__flor { animation: latir 3.6s var(--suave) infinite, aparecer .8s ease 1.1s both; }
    @keyframes subir-entra { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
    @keyframes escena-entra { from { opacity: 0; translate: 0 60px; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

    /* Accesos: tres tarjetas horizontales que montan sobre el borde. */
    .portada__bandeja {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        max-width: 1120px;
        margin: -92px auto 0;
        padding: 14px;
        border-radius: 32px;
        background: rgba(255, 255, 255, .74);
        box-shadow: var(--sombra-alta);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
    .accesos { gap: 12px; }
    .acceso {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 16px;
        row-gap: 0;
        padding: 10px 18px 10px 10px;
        border-radius: 22px;
        text-align: left;
        transition: transform .5s var(--sale), box-shadow .5s var(--sale), background-color .3s ease;
    }
    .acceso__foto { grid-row: 1 / 3; border-radius: 16px; }
    .acceso__texto { align-self: end; justify-content: flex-start; font-size: 1.15rem; }
    .acceso__texto svg { transition: transform .45s var(--sale); }
    .acceso__nota { align-self: start; margin-top: 3px; font-size: .82rem; line-height: 1.35; color: var(--tinta-2); }
    .acceso:hover { transform: translateY(-5px); box-shadow: var(--sombra); background: #fff; }
    .acceso:hover .acceso__foto img { transform: scale(1.1) rotate(-3deg); }
    .acceso:hover .acceso__texto svg { transform: translateX(5px); }
    .resenas--bandeja { margin: 0 auto; }
    .resenas:hover { transform: translateY(-2px); box-shadow: var(--sombra); }

    /* ═══ Catálogos del inicio: columna fija + reja ═══
       La cabecera de la sección se queda quieta mientras pasan las
       piezas. Detrás, la palabra de la familia en contorno, enorme, se
       corre despacio con el scroll.                                     */
    .seccion--catalogo { position: relative; isolation: isolate; }
    .seccion--catalogo > .contenedor {
        display: grid;
        grid-template-columns: 330px minmax(0, 1fr);
        column-gap: 64px;
        align-items: start;
    }
    .seccion__lado { position: sticky; top: 118px; z-index: 2; display: block; grid-column: 1; grid-row: 1; }
    .seccion--catalogo .seccion__cabeza { flex-direction: column; align-items: flex-start; gap: 18px; margin: 0; }
    .seccion--catalogo .reja-piezas { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seccion--catalogo .ruta-crear,
    .seccion--catalogo .porcantidad__tarjeta--seccion { margin-top: 28px; }
    .seccion--catalogo#tocados > .contenedor { grid-template-columns: minmax(0, 1fr) 330px; }
    .seccion--catalogo#tocados .seccion__lado { grid-column: 2; }
    .seccion--catalogo#tocados .reja-piezas { grid-column: 1; }
    .seccion--catalogo::before {
        content: attr(data-palabra);
        position: absolute;
        top: 64px;
        left: 0;
        z-index: -1;
        font-family: var(--titulo);
        font-size: clamp(9rem, 17vw, 16rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
        white-space: nowrap;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(180, 67, 111, .09);
        pointer-events: none;
    }
    .seccion--catalogo#tocados::before { left: auto; right: 0; }
    @supports (animation-timeline: view()) {
        .seccion--catalogo::before { animation: palabra-corre linear both; animation-timeline: view(); }
        .seccion--catalogo#tocados::before { animation-name: palabra-corre-izq; }
        @keyframes palabra-corre { from { transform: translateX(-6%); } to { transform: translateX(10%); } }
        @keyframes palabra-corre-izq { from { transform: translateX(6%); } to { transform: translateX(-10%); } }
    }
    .seccion--catalogo .ruta-crear { padding: 22px; background: var(--papel); box-shadow: var(--sombra-0); }
    .seccion--catalogo .ruta-crear p { font-size: 1.05rem; }
    .seccion--catalogo .porcantidad__tarjeta--seccion { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .seccion--catalogo .porcantidad__lienzo { aspect-ratio: 16 / 10; }

    /* ── Tarjeta de pieza ── */
    .reja-piezas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
    .pieza {
        padding: 10px 10px 12px;
        border-radius: 26px;
        transition: transform .55s var(--sale), box-shadow .55s var(--sale);
    }
    .pieza__foto { border-radius: 19px; }
    .pieza__foto img { transition: transform 1.1s var(--sale); }
    .pieza:hover { transform: translateY(-8px); box-shadow: var(--sombra-flota); }
    .pieza:hover .pieza__foto img { transform: scale(1.07); }
    .pieza__cara:active { transform: none; }
    .pieza__nombre { font-size: 1.02rem; transition: color .3s ease; }
    .pieza:hover .pieza__nombre { color: var(--acento-fuerte); }
    .pieza__meta { font-size: .82rem; }
    .pieza__mas-fotos img { transition: transform .4s var(--rebote); }
    .pieza:hover .pieza__mas-fotos img { transform: translateY(-2px); }
    .pieza:hover .pieza__mas-fotos img:nth-child(2) { transition-delay: .04s; }
    .pieza:hover .pieza__mas-fotos img:nth-child(3) { transition-delay: .08s; }
    .pieza--todo { position: relative; overflow: hidden; isolation: isolate; }
    .pieza--todo::before {
        content: '';
        position: absolute;
        inset: -20% -30% auto auto;
        z-index: -1;
        width: 90%;
        aspect-ratio: 588 / 629;
        background: url(/assets/marca/candy-art-silueta.webp) center / contain no-repeat;
        opacity: .1;
        transition: transform 1s var(--sale);
    }
    .pieza--todo:hover { transform: translateY(-8px); }
    .pieza--todo:hover::before { transform: rotate(-8deg) scale(1.08); }
    .pieza__todo-icono { transition: transform .6s var(--rebote); }
    .pieza--todo:hover .pieza__todo-icono { transform: rotate(-10deg) scale(1.1); }

    /* ── Piñatas por montón: mosaico en rejilla de 12 ── */
    #temporada .seccion__cabeza { justify-content: center; text-align: center; }
    #temporada .seccion__titulo { font-size: clamp(3rem, 4.4vw, 4.4rem); }
    .mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 16px; }
    .mosaico > * { grid-column: span 3; }
    .mosaico__foto { position: relative; border-radius: 26px; }
    .mosaico__foto img { height: 100%; aspect-ratio: auto; transition: transform 1.2s var(--sale); }
    .mosaico__foto--grande { grid-column: 1 / span 6; grid-row: span 2; }
    .mosaico__foto--grande img { aspect-ratio: auto; }
    .mosaico__foto:hover img { transform: scale(1.06); }
    .mosaico__pedir { aspect-ratio: auto; border-radius: 26px; transition: transform .5s var(--sale), box-shadow .5s var(--sale); }
    .mosaico__pedir:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(110, 36, 66, .35); }
    .mosaico__pedir-icono { width: 64px; height: 64px; transition: transform .6s var(--rebote); }
    .mosaico__pedir:hover .mosaico__pedir-icono { transform: rotate(-12deg) scale(1.1); }
    .mosaico__pedir strong { font-size: 1.35rem; }
    .mosaico__acciones { margin-top: 28px; }
    .mosaico__acciones .boton { flex: 0 0 auto; }
    /* Las fotos se destapan al entrar, como una cortina. */
    html.con-js .revelar .mosaico__foto { clip-path: inset(14% 14% 14% 14% round 26px); transition: clip-path 1.1s var(--sale); transition-delay: calc(var(--i, 0) * 90ms); }
    html.con-js .revelar .mosaico__foto img { scale: 1.18; transition: scale 1.3s var(--sale), transform 1.2s var(--sale); transition-delay: calc(var(--i, 0) * 90ms); }
    html.con-js .revelar.visible .mosaico__foto { clip-path: inset(0 0 0 0 round 26px); }
    html.con-js .revelar.visible .mosaico__foto img { scale: 1; }

    /* ── Créala tú: banda vino a lo ancho ── */
    .seccion--banda {
        position: relative;
        max-width: 1320px;
        margin: 130px auto 0;
        padding: 96px 0 90px;
        overflow: hidden;
        isolation: isolate;
        border-radius: 44px;
        background: var(--panel);
        box-shadow: var(--sombra-flota);
    }
    .seccion--banda::before {
        content: '';
        position: absolute;
        right: -6%;
        top: -10%;
        z-index: -1;
        width: 46%;
        aspect-ratio: 588 / 629;
        background: url(/assets/marca/candy-art-silueta.webp) center / contain no-repeat;
        opacity: .07;
    }
    .seccion--banda .seccion__cabeza { margin-bottom: 48px; }
    .seccion--banda .seccion__antetitulo { color: #FFD36B; }
    .reja--crear { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1040px; margin: 0 auto 64px; }
    .crear-col { gap: 12px; }
    .crear {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 18px 16px;
        padding: 14px 14px 20px;
        border-radius: 30px;
        text-align: left;
        transition: transform .6s var(--sale), box-shadow .6s var(--sale);
    }
    .crear__lienzo { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; }
    .crear__lienzo img { transition: transform 1.2s var(--sale); }
    .crear__texto { padding-left: 8px; }
    .crear__texto strong { font-size: 1.45rem; }
    .crear__texto small { font-size: .9rem; }
    .crear .boton { width: auto; margin: 0 6px 0 0; }
    .crear:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .45); }
    .crear:hover .crear__lienzo img { transform: scale(1.06); }
    .crear:active { transform: translateY(-4px) scale(.99); }
    .crear-col__guia { align-self: center; width: auto; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
    .crear-col__guia:hover { background: rgba(255, 255, 255, .22); }

    /* Pasos: una línea que se dibuja de izquierda a derecha al llegar. */
    .pasos { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1040px; margin: 0 auto; }
    .pasos::before {
        content: '';
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255, 211, 107, .9), rgba(255, 255, 255, .3));
        transform-origin: 0 50%;
        transition: transform 1.4s var(--sale) .2s;
    }
    html.con-js .revelar:not(.visible) .pasos::before { transform: scaleX(0); }
    .pasos li { padding: 52px 0 0; border-radius: 0; background: none; box-shadow: none; }
    .pasos li::before { top: 0; left: 0; width: 32px; height: 32px; background: #FFD36B; color: var(--vino-hondo); box-shadow: 0 0 0 6px rgba(255, 211, 107, .18); }
    .pasos h3 { font-size: 1.2rem; color: #fff; }
    .pasos p { font-size: .95rem; color: rgba(255, 233, 242, .8); }

    /* ── Por qué nosotros: cabecera fija + rejilla editorial ── */
    #por-que-elegirnos > .contenedor,
    #pago > .contenedor { display: grid; grid-template-columns: 330px minmax(0, 1fr); column-gap: 64px; align-items: start; }
    #por-que-elegirnos .seccion__cabeza,
    #pago .seccion__cabeza { position: sticky; top: 124px; margin: 0; }
    .razones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .razon {
        gap: 16px;
        padding: 28px 26px 34px;
        border-radius: 0;
        background: none;
        box-shadow: none;
        border-top: 1px solid var(--linea);
        transition: background-color .4s ease;
    }
    .razon:nth-child(-n+3) { border-top-color: var(--vino); }
    .razon:hover { background: var(--papel); }
    .razon .tono { width: 52px; height: 52px; border-radius: 17px; transition: transform .6s var(--rebote); }
    .razon:hover .tono { transform: translateY(-4px) rotate(-8deg); }
    .razon h3 { font-size: 1.15rem; }
    .razon p { margin-top: 6px; font-size: .93rem; line-height: 1.55; }

    /* ── El taller: mosaico con una foto grande ── */
    #taller .seccion__cabeza { align-items: flex-end; }
    .tira { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; }
    .tira > .foto-abrible:first-child { grid-column: 1 / span 3; grid-row: span 2; }
    .tira__foto, .tira__todas, .foto-abrible__boton { border-radius: 24px; }
    .tira .foto-abrible, .tira .foto-abrible__boton { height: 100%; }
    .tira .foto-abrible__boton img { aspect-ratio: auto; transition: transform 1.2s var(--sale); }
    .tira .foto-abrible__boton:hover img { transform: scale(1.06); }
    .tira__todas {
        display: grid;
        grid-column: span 2;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 18px;
        row-gap: 2px;
        aspect-ratio: auto;
        padding: 24px 28px;
        text-align: left;
        border-radius: 24px;
        transition: transform .5s var(--sale);
    }
    .tira__todas-icono { grid-row: 1 / 3; margin: 0; width: 64px; height: 64px; transition: transform .6s var(--rebote); }
    .tira__todas strong { align-self: end; }
    .tira__todas small { align-self: start; }
    .tira__todas:hover .tira__todas-icono { transform: rotate(-12deg) scale(1.08); }
    .tira__todas strong { font-size: 1.3rem; }
    .tira__todas:hover { transform: translateY(-6px); }
    /* En /el-taller la tira es sólo de fotos: reja regular de cuatro. */
    .seccion:not(#taller) > .contenedor > .tira { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; }
    .seccion:not(#taller) > .contenedor > .tira > .foto-abrible:first-child { grid-column: span 2; }

    /* ── Cómo se paga: una sola pieza con divisiones ── */
    .pagos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px; border-radius: 32px; background: var(--papel); box-shadow: var(--sombra); }
    .pago { gap: 12px; padding: 30px 28px; border-radius: 0; background: none; box-shadow: none; }
    .pago + .pago { border-left: 1px solid var(--linea); }
    .pago h3 { font-size: 1.12rem; }
    .pago p { font-size: .93rem; line-height: 1.55; }

    /* ── Dónde estamos: la tarjeta, el mapa y la fachada como postal ── */
    .lugar {
        grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
        grid-template-areas: "tarjeta arte";
        gap: 48px;
        align-items: center;
        margin-bottom: 70px;
    }
    .lugar--sin-mapa { grid-template-areas: "tarjeta arte"; }
    .lugar__tarjeta { grid-area: tarjeta; padding: 34px; border-radius: 32px; }
    .lugar__mapa { grid-area: arte; aspect-ratio: 16 / 11; border-width: 8px; border-radius: 34px; box-shadow: var(--sombra-flota); }
    .lugar__fachada {
        grid-area: arte;
        z-index: 2;
        align-self: end;
        justify-self: start;
        width: 40%;
        border-width: 8px;
        border-radius: 26px;
        box-shadow: 0 30px 50px -14px rgba(74, 23, 48, .45);
        transform: translate(-16%, 22%) rotate(-5deg);
        transition: transform .8s var(--rebote), box-shadow .5s ease;
    }
    .lugar--sin-mapa .lugar__fachada { width: 100%; transform: none; }
    .lugar__fachada:hover { transform: translate(-16%, 18%) rotate(-1deg) scale(1.03); }
    .lugar__fachada:hover img { transform: scale(1.05); }
    .lugar__nombre { font-size: 1.3rem; }

    /* ── Texto de la casa: tres columnas numeradas ── */
    .texto-largo { padding: 60px 64px; border-radius: 36px; }
    .texto-largo h2 { max-width: 22ch; font-size: 2.3rem; letter-spacing: -.03em; }
    .texto-largo__cols { counter-reset: col; gap: 40px; margin-top: 34px; }
    .texto-largo__cols > div { position: relative; padding-top: 22px; border-top: 2px solid var(--acento-luz); counter-increment: col; }
    .texto-largo__cols > div::before {
        content: counter(col, decimal-leading-zero);
        display: block;
        margin-bottom: 10px;
        font-family: var(--titulo);
        font-size: .85rem;
        font-weight: 800;
        letter-spacing: .1em;
        color: var(--acento);
    }
    .texto-largo h3 { font-size: 1.12rem; }
    .texto-largo p { font-size: .95rem; line-height: 1.7; }

    /* ── Cuéntanos tu idea ── */
    .contacto {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        overflow: hidden;
        isolation: isolate;
        border-radius: 44px;
        background: var(--panel);
        box-shadow: var(--sombra-flota);
    }
    .contacto__panel {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        min-height: 560px;
        padding: 72px 64px;
        border-radius: 0;
        background: none;
    }
    .contacto__titulo { font-size: clamp(3rem, 4.2vw, 4.2rem); line-height: .98; letter-spacing: -.04em; }
    .contacto__bajada { max-width: 30ch; margin-top: 16px; font-size: 1.15rem; }
    .contacto__arte { position: absolute; inset: 0; }
    .contacto__arte img { top: auto; bottom: -30px; left: 58%; width: 320px; transform: translateX(-50%); transition: transform 1s var(--sale); }
    .contacto:hover .contacto__arte img { transform: translateX(-50%) translateY(-10px) rotate(-2deg); }
    .burbuja { position: absolute; display: block; border-radius: 50%; animation: flotar 7s var(--suave) infinite alternate; }
    .burbuja--lila { background: radial-gradient(circle at 30% 30%, rgba(196, 160, 232, .7), rgba(131, 85, 168, .35)); }
    .burbuja--oro { background: radial-gradient(circle at 30% 30%, rgba(255, 224, 140, .9), rgba(198, 160, 46, .45)); animation-duration: 5s; }
    .contacto__arte .burbuja--lila { width: 120px; height: 120px; top: auto; left: auto; right: 12%; bottom: 60px; }
    .contacto__arte .burbuja--oro { width: 64px; height: 64px; top: auto; right: auto; left: 18%; bottom: 150px; }
    .contacto__tarjetas { margin: 0; padding: 44px 44px 44px 0; align-content: center; gap: 16px; }
    .tarjeta { padding: 28px; border-radius: 28px; transition: transform .5s var(--sale); }
    .contacto__tarjetas .tarjeta:hover { transform: translateY(-4px); }
    .tarjeta__titulo { font-size: 1.35rem; }

    /* Preguntas: título fijo a la izquierda, respuestas a la derecha. */
    #preguntas { display: grid; grid-template-columns: 330px minmax(0, 1fr); column-gap: 64px; align-items: start; }
    #preguntas .seccion__cabeza { position: sticky; top: 124px; align-items: flex-start; text-align: left; margin: 0; }
    #preguntas .seccion__cabeza--centro .seccion__antetitulo::after { display: none; }
    .preguntas { gap: 12px; }
    .pregunta { border-radius: 24px; transition: box-shadow .4s ease, transform .4s var(--sale); }
    .pregunta:hover { box-shadow: var(--sombra); }
    .pregunta summary { padding: 22px 24px; font-size: 1.08rem; }
    .pregunta summary:hover .pregunta__signo { background: var(--acento-luz); }
    .pregunta__cuerpo { padding: 0 24px 22px; font-size: .98rem; }

    /* ═══ Portadas interiores ═══ */
    .portada-interior { position: relative; top: auto; z-index: auto; padding: 106px 28px 0; }
    .portada-interior__compacta,
    .portada-interior__panel::after { display: none; }
    html.con-js .portada-interior__fila > *,
    html.con-js .portada-interior__volver { visibility: visible; }
    .portada-interior__panel {
        max-width: 1320px;
        margin: 0 auto;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 48px;
        padding: 56px 72px;
        border-radius: 44px;
        box-shadow: var(--sombra-flota);
    }
    .portada-interior__panel--simple { grid-template-columns: minmax(0, 1fr); }
    .portada-interior__panel:has(.portada-interior__volver) { padding-top: 56px; }
    .portada-interior__volver { top: 26px; left: 26px; transition: transform .4s var(--sale), background-color .3s ease; }
    .portada-interior__volver:hover { transform: translateX(-3px); background: rgba(28, 6, 18, .75); }
    .portada-interior__arte { min-height: 230px; }
    .portada-interior__arte img { width: 240px; left: 0; animation: flotar 8s var(--suave) infinite alternate; }
    .portada-interior__titulo { font-size: clamp(2.8rem, 4vw, 4rem); line-height: 1; letter-spacing: -.04em; }
    .portada-interior__bajada { max-width: 56ch; margin-top: 14px; font-size: 1.1rem; }
    .portada-interior__acciones { margin-top: 26px; gap: 12px; }
    .portada-interior__texto > * { animation: subir-entra .9s var(--sale) both; }
    .portada-interior__texto > :nth-child(1) { animation-delay: .5s; }
    .portada-interior__texto > :nth-child(2) { animation-delay: .6s; }
    .portada-interior__texto > :nth-child(3) { animation-delay: .7s; }
    .portada-interior__texto > :nth-child(4) { animation-delay: .8s; }
    .portada-interior__texto > :nth-child(5) { animation-delay: .9s; }

    /* Categoría: el collage ya no es un fondo tapado por un velo; flota
       entero a la derecha, porque viene recortado sin fondo. */
    .portada-interior--fondo .portada-interior__panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        min-height: 540px;
        padding: 56px 64px 56px 80px;
        text-align: left;
    }
    .portada-interior--fondo .portada-interior__fondo {
        position: relative;
        inset: auto;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        width: 100%;
        max-width: 540px;
        height: auto;
        max-height: 480px;
        object-fit: contain;
        opacity: 1;
        filter: drop-shadow(0 30px 34px rgba(20, 2, 12, .45));
        animation: escena-entra 1.2s var(--sale) .6s both, flotar 9s var(--suave) 1.8s infinite alternate;
    }
    .portada-interior--fondo .portada-interior__texto { grid-column: 1; grid-row: 1; justify-self: start; max-width: 560px; padding: 0; }
    .portada-interior--fondo .portada-interior__texto::before { display: none; }
    .portada-interior--fondo .portada-interior__titulo { text-shadow: none; }
    .portada-interior--fondo .portada-interior__bajada { margin-inline: 0; }
    .portada-interior--fondo .portada-interior__acciones { justify-content: flex-start; }
    .portada-interior--fondo .resenas--portada { margin: 24px 0 0; }

    /* Guías y legales: franja con foto, más baja. */
    .portada-interior--compacta .portada-interior__panel { min-height: 240px; padding: 28px 32px 30px; }
    .portada-interior--compacta .portada-interior__fila { grid-template-columns: 48px 1fr 48px; }
    .portada-interior--compacta .portada-interior__antetitulo { font-size: .9rem; letter-spacing: .14em; }
    .portada-interior__wa { transition: transform .5s var(--rebote); }
    .portada-interior__wa:hover { transform: scale(1.08) rotate(-6deg); }

    /* ── Filtro: en escritorio las categorías se ven en fila y una
          pastilla se desliza hasta la elegida. ── */
    .filtros { padding: 34px 0 26px; }
    .filtros__barra { flex-wrap: nowrap; justify-content: space-between; gap: 20px; }
    .filtro { flex: 0 1 auto; }
    .filtro__boton { display: none; }
    .filtro__menu {
        position: relative;
        top: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        width: auto;
        max-height: none;
        padding: 5px;
        overflow: visible;
        border-radius: var(--r-pill);
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: var(--sombra-0), inset 0 0 0 1px var(--linea);
        transition: none;
    }
    .filtro__menu .chip {
        position: relative;
        z-index: 1;
        width: auto;
        min-height: 44px;
        padding: 0 18px;
        border-radius: var(--r-pill);
        font-size: .9rem;
        transition: color .35s ease;
    }
    .filtro__menu .chip:not(.activo):hover { color: var(--acento); }
    .filtro__menu .chip.activo { background: none; color: #fff; }
    .filtro__menu .chip.activo::after { display: none; }
    .filtro__indicador {
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 0;
        display: block;
        height: 44px;
        border-radius: var(--r-pill);
        background: var(--acento);
        box-shadow: 0 6px 16px rgba(180, 67, 111, .35);
        transition: transform .55s var(--sale), width .55s var(--sale);
    }
    /* Sin script el indicador no sabe dónde ir: la elegida lleva su fondo. */
    html:not(.con-js) .filtro__indicador { display: none; }
    .filtros__cuenta { font-size: .9rem; }

    /* Texto de categoría: texto a la izquierda, dudas y guías a la derecha. */
    .categoria-seo .contenedor--texto { max-width: var(--ancho); }
    .categoria-seo__reja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
    .categoria-seo__bloque { grid-column: 1; grid-row: 1; }
    .categoria-seo__lado { grid-column: 2; grid-row: 1 / span 2; }
    .categoria-seo__cta { grid-column: 1; grid-row: 2; align-self: start; text-align: left; margin-top: 28px; }
    .categoria-seo .seccion__titulo { font-size: 2.2rem; }
    .categoria-seo__texto { font-size: 1.02rem; }
    .categoria-seo__preguntas { margin-top: 0; }
    .categoria-seo__guias a { transition: transform .4s var(--sale), box-shadow .3s ease; }
    .categoria-seo__guias a:hover { transform: translateX(6px); box-shadow: var(--sombra); }

    /* Cierre de categoría: la pregunta y los dos caminos, en una tarjeta. */
    .ruta-crear { max-width: 760px; margin: 34px auto 0; padding: 30px 34px; gap: 12px 14px; border-radius: 30px; }
    .ruta-crear p { font-size: 1.3rem; font-weight: 700; }
    .ruta-crear .boton { min-height: 52px; }
    .seccion--catalogo .ruta-crear { max-width: none; margin: 28px 0 0; padding: 22px; gap: 10px; }
    .seccion--catalogo .ruta-crear p { font-size: 1.05rem; }

    /* Páginas que no abren con portada (ficha, creadores): el contenido
       empieza debajo de la cabecera flotante, no tapado por ella. */
    #principal > .seccion:first-child { padding-top: 112px !important; }

    /* ── Ficha de pieza ── */
    .ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
    .ficha > div:last-child { position: sticky; top: 124px; }
    .ficha__principal { border-radius: 32px; }
    .ficha__tira { width: 80px; height: 80px; transition: transform .4s var(--sale), box-shadow .2s ease; }
    .ficha__tira:hover { transform: translateY(-3px); }

    /* ── Personaliza y personalizador ── */
    .reja--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; gap: 24px; }
    .reja--tres > .crear-col:nth-child(3) { grid-column: auto; }
    .reja--tres .crear,
    .reja--tres > .crear-col:nth-child(3) .crear { display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; }
    .reja--tres .crear__lienzo { aspect-ratio: 1; }
    .reja--tres .crear .boton { justify-self: start; margin-left: 8px; }
    .reja--tres .crear-col__guia { background: var(--acento-luz); color: var(--acento-fuerte); box-shadow: none; }
    .pz { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 32px; }
    .opciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .opciones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .opcion { transition: transform .4s var(--sale), box-shadow .3s ease; }
    .opcion:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
    .muestras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .resumen--lateral { display: block; position: sticky; top: 110px; }
    .resumen--lateral[hidden] { display: none; }
    .porcantidad { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; }

    .pz-modal { align-items: center; padding: 24px; }
    .pz-modal__caja { max-width: 1040px; height: min(88vh, 860px); border-radius: 34px; animation-name: modal-entra; }
    .pz-modal.cerrando .pz-modal__caja { animation-name: modal-sale; }
    .pz-modal__agarre { display: none; }
    .pz-modal__top { padding: 22px 18px 14px 28px; }
    .pz-modal__body { padding: 24px 28px; }
    .pz-modal__pie { padding: 16px 28px; }

    /* ── Hojas y ficha rápida: al centro, no desde abajo ── */
    .hoja-info__panel {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(760px, calc(100% - 64px));
        height: min(84vh, 760px);
        border-radius: 32px;
        transform: translate(-50%, -46%) scale(.96);
        opacity: 0;
        transition: transform .5s var(--sale), opacity .3s ease;
    }
    .hoja-info.abierta .hoja-info__panel { transform: translate(-50%, -50%); opacity: 1; }
    .hoja-info.completa .hoja-info__panel { top: 50%; width: min(1000px, calc(100% - 64px)); height: min(88vh, 860px); border-radius: 32px; }
    .hoja-info.completa .hoja-info__top { padding-top: 24px; }
    .hoja-info__fondo { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .hoja-info__top { padding: 24px 20px 12px 28px; }
    .hoja-info__cuerpo { padding: 6px 28px 28px; }
    .guia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pieza-sheet[open] { animation-name: modal-entra; }
    .pieza-sheet.cerrando { animation-name: modal-sale; }
    .pieza-sheet::backdrop { backdrop-filter: blur(6px); }
    @keyframes modal-entra { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes modal-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px) scale(.98); } }
    .pieza-sheet { height: min(88vh, 820px); margin: auto; border-radius: 34px; }
    .pieza-sheet__foto { aspect-ratio: 1; max-height: none; }
    .pieza-sheet__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 24px 28px; }
    .pieza-sheet--zoom .pieza-sheet__cuerpo { grid-template-columns: minmax(0, 1fr); }
    .pieza-sheet__pie { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 16px 28px; }
    .pieza-sheet__pie > p { text-align: left; }
    .pieza-sheet__opciones { grid-column: 1 / -1; }

    .visor__nav { display: inline-flex; }
    .visor__toque { display: none; }

    /* ── Textos largos: guías y legales sobre una hoja de papel ── */
    .pagina-texto { padding-top: 34px; }
    .pagina-texto .contenedor--texto { max-width: 880px; padding: 56px 72px 64px; border-radius: 36px; background: var(--papel); box-shadow: var(--sombra); }

    /* ═══ Lluvia: flores y confeti, detrás del contenido ═══ */
    #lluvia {
        position: fixed;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .sitio-candy > main,
    .pie { position: relative; z-index: 2; }

    /* El interruptor: pista, perilla y un icono que cambia con el estado.
       Encendida: la flor abierta suelta su confeti. Apagada: los pétalos
       se cierran en botón, el confeti cae y una raya la tacha.          */
    .lluvia-switch {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 900;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 7px 18px 7px 7px;
        border: 0;
        border-radius: var(--r-pill);
        background: rgba(255, 255, 255, .9);
        box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: var(--vino);
        text-align: left;
        transition: opacity .4s ease, transform .5s var(--sale), box-shadow .3s ease;
    }
    .lluvia-switch:hover { box-shadow: var(--sombra-alta); }
    .lluvia-switch.escondido { opacity: 0; transform: translateY(16px); pointer-events: none; }
    .lluvia-switch__pista {
        position: relative;
        display: block;
        width: 62px;
        height: 34px;
        border-radius: var(--r-pill);
        background: var(--acento);
        box-shadow: inset 0 2px 5px rgba(74, 23, 48, .25);
        transition: background-color .5s var(--suave);
    }
    .lluvia-switch__perilla {
        position: absolute;
        top: 3px;
        left: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #fff;
        color: var(--acento);
        box-shadow: 0 3px 8px rgba(74, 23, 48, .3);
        transform: translateX(28px);
        transition: transform .55s var(--rebote), color .4s ease;
    }
    .lluvia-switch:active .lluvia-switch__perilla { width: 32px; }
    .lluvia-switch__icono { width: 20px; height: 20px; overflow: visible; }
    .ls-petalo, .ls-centro, .ls-confeti rect, .ls-tachado { transform-box: view-box; transform-origin: 12px 12px; }
    .ls-petalo { transform: rotate(var(--a)); transition: transform .6s var(--rebote), opacity .4s ease; }
    .ls-centro { transition: transform .5s var(--rebote); }
    .ls-confeti rect { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0); }
    .ls-tachado { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--suave); }

    /* Apagada */
    .lluvia-switch[aria-checked="false"] .lluvia-switch__pista { background: #D9C8D0; }
    .lluvia-switch[aria-checked="false"] .lluvia-switch__perilla { color: var(--tinta-3); transform: translateX(0); }
    .lluvia-switch[aria-checked="false"] .ls-petalo { transform: rotate(calc(var(--a) + 40deg)) scale(.45); opacity: .55; transition-duration: .45s; }
    .lluvia-switch[aria-checked="false"] .ls-centro { transform: scale(.8); }
    .lluvia-switch[aria-checked="false"] .ls-tachado { stroke-dashoffset: 0; transition-delay: .18s; }
    /* Al encender, el confeti estalla desde el centro (una vez). */
    .lluvia-switch.florece .ls-confeti rect { animation: confeti-sale .8s var(--sale) both; }
    .lluvia-switch.florece .ls-confeti rect:nth-child(2) { animation-delay: .04s; }
    .lluvia-switch.florece .ls-confeti rect:nth-child(3) { animation-delay: .08s; }
    .lluvia-switch.florece .ls-confeti rect:nth-child(4) { animation-delay: .12s; }
    .lluvia-switch.florece .ls-petalo { animation: petalo-abre .7s var(--rebote) both; }
    @keyframes confeti-sale {
        0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
        25% { opacity: 1; }
        100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
    }
    @keyframes petalo-abre {
        from { transform: rotate(calc(var(--a) - 60deg)) scale(.3); }
        to { transform: rotate(var(--a)) scale(1); }
    }
    /* Al apagar, el confeti cae. */
    .lluvia-switch.marchita .ls-confeti rect { animation: confeti-cae .6s var(--suave) both; }
    @keyframes confeti-cae {
        0% { opacity: 1; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)) scale(.8); }
        100% { opacity: 0; transform: translate(calc(var(--dx) * .5), 12px) rotate(var(--r)) scale(.6); }
    }

    .lluvia-switch__texto { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--titulo); }
    .lluvia-switch__texto > span:first-child { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
    .lluvia-switch__estado { position: relative; display: block; height: 1.15em; overflow: hidden; font-size: .9rem; }
    .lluvia-switch__estado b { display: block; font-weight: 700; transition: transform .5s var(--sale), opacity .3s ease; }
    .lluvia-switch__estado [data-no] { position: absolute; top: 0; left: 0; transform: translateY(100%); opacity: 0; }
    .lluvia-switch[aria-checked="false"] .lluvia-switch__estado [data-si] { transform: translateY(-100%); opacity: 0; }
    .lluvia-switch[aria-checked="false"] .lluvia-switch__estado [data-no] { transform: none; opacity: 1; }

    /* ── Pie ── */
    .pie { margin-top: 130px; padding: 72px 0 28px; overflow: hidden; border-radius: 48px 48px 0 0; }
    /* La firma: el nombre enorme, casi invisible, al fondo del pie. */
    .pie::after {
        content: 'Candy Art';
        position: absolute;
        left: 50%;
        bottom: -.2em;
        z-index: -1;
        font-family: var(--titulo);
        font-size: clamp(9rem, 19vw, 19rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.05em;
        white-space: nowrap;
        color: rgba(255, 255, 255, .035);
        transform: translateX(-50%);
        pointer-events: none;
    }
    .pie { isolation: isolate; }
    .pie__reja { grid-template-columns: 1.6fr 1fr 1fr 1.25fr; gap: 40px; }
    .pie__marca-bloque { grid-column: auto; }
    .pie__marca img { width: 58px; height: 58px; }
    .pie__marca b { font-size: 1.5rem; }
    .pie__col li a { position: relative; display: inline-block; transition: color .2s ease, transform .35s var(--sale); }
    .pie__col li a:hover { transform: translateX(4px); }
    .pie__social a { transition: background-color .25s ease, transform .45s var(--rebote); }
    .pie__social a:hover { transform: translateY(-3px) rotate(-6deg); }
    .pie__guias { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
    .pie__fin { display: flex; justify-content: space-between; align-items: center; text-align: left; }

    /* ═══ Aparición escalonada ═══
       Las piezas de cada reja entran una tras otra (--i lo pone el
       script). Sólo en escritorio: en el teléfono basta con la sección.  */
    html.con-js .revelar .reja-piezas > *,
    html.con-js .revelar .razones > *,
    html.con-js .revelar .pagos > *,
    html.con-js .revelar .tira > *,
    html.con-js .revelar .mosaico > .mosaico__pedir,
    html.con-js .revelar .pasos > li,
    html.con-js .revelar .preguntas > *,
    html.con-js .revelar .reja--crear > * {
        transition: opacity .7s var(--sale), transform .8s var(--sale), box-shadow .55s var(--sale);
        transition-delay: calc(var(--i, 0) * 70ms);
    }
    html.con-js .revelar:not(.visible) .reja-piezas > *,
    html.con-js .revelar:not(.visible) .razones > *,
    html.con-js .revelar:not(.visible) .pagos > *,
    html.con-js .revelar:not(.visible) .tira > *,
    html.con-js .revelar:not(.visible) .mosaico > .mosaico__pedir,
    html.con-js .revelar:not(.visible) .pasos > li,
    html.con-js .revelar:not(.visible) .preguntas > *,
    html.con-js .revelar:not(.visible) .reja--crear > * { opacity: 0; transform: translateY(36px); }
    /* La sección ya no se mueve entera: la llevan sus piezas. */
    html.con-js .revelar:not(.visible) { opacity: 1; transform: none; }
    html.con-js .revelar:not(.visible) > .contenedor > .seccion__cabeza,
    html.con-js .revelar:not(.visible) > .contenedor > .seccion__lado,
    html.con-js .revelar:not(.visible) > .contenedor > article,
    html.con-js .revelar:not(.visible) > .contenedor > .lugar,
    html.con-js .revelar:not(.visible) > .contenedor > .contacto,
    html.con-js .revelar:not(.visible) > .contenedor > .ruta-crear,
    html.con-js .revelar:not(.visible) > .contenedor > .categoria-seo__bloque { opacity: 0; transform: translateY(26px); }
    .revelar > .contenedor > * { transition: opacity .8s var(--sale), transform .9s var(--sale); }

    /* Terminada la entrada, el escalón se quita: si no, el retraso se
       quedaba también en el hover y las tarjetas respondían tarde. */
    html.con-js .revelar.asentada .reja-piezas > *,
    html.con-js .revelar.asentada .razones > *,
    html.con-js .revelar.asentada .pagos > *,
    html.con-js .revelar.asentada .tira > *,
    html.con-js .revelar.asentada .mosaico > *,
    html.con-js .revelar.asentada .mosaico__foto img,
    html.con-js .revelar.asentada .pasos > li,
    html.con-js .revelar.asentada .preguntas > *,
    html.con-js .revelar.asentada .reja--crear > * { transition-delay: 0s; }
}

@media (min-width: 1000px) and (max-width: 1180px) {
    .nav a { padding: 10px 10px; font-size: .88rem; }
    .contenedor { padding: 0 28px; }
    .portada__panel { padding: 56px 48px 140px; }
    .seccion--catalogo > .contenedor,
    #por-que-elegirnos > .contenedor,
    #pago > .contenedor,
    #preguntas { grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; }
    .seccion--catalogo#tocados > .contenedor { grid-template-columns: minmax(0, 1fr) 280px; }
    .reja-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .seccion--catalogo .reja-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .acceso { grid-template-columns: 64px minmax(0, 1fr); }
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
    .escena__pieza { transform: none !important; }
    html.con-js .revelar .mosaico__foto { clip-path: none; }
    html.con-js .revelar .mosaico__foto img { scale: 1; }
}
/* Aviso de cookies Candy Art: estilos propios para móvil y escritorio. */
.candy-analytics-notice[hidden] { display:none !important; }
.candy-analytics-notice:not([hidden]) {
 position:fixed; z-index:9999; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
 display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;
 width:auto; max-width:520px; margin:0 auto; padding:16px;
 border:1px solid rgba(110,36,66,.14); border-radius:20px;
 background:rgba(255,255,255,.98); box-shadow:0 18px 48px rgba(74,23,48,.2);
 color:var(--tinta); font-family:inherit; font-size:.9rem; font-weight:500; line-height:1.5;
}
.candy-analytics-notice p { grid-column:1/-1; margin:0; }
.candy-analytics-notice a { color:var(--vino-hondo); font-weight:700; text-underline-offset:3px; }
.candy-analytics-notice > button {
 min-height:44px; padding:0 16px; border:1px solid var(--acento); border-radius:999px;
 background:var(--acento); color:#fff; font-family:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
 transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.candy-analytics-notice > button[data-candy-analytics="reject"] { background:transparent; color:var(--vino-hondo); }
.candy-analytics-notice > button:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(110,36,66,.16); }
.candy-analytics-notice > button:focus-visible { outline:3px solid rgba(196,160,46,.65); outline-offset:3px; }
@media (max-width:380px) {
 .candy-analytics-notice:not([hidden]) { left:8px; right:8px; padding:13px; gap:8px; font-size:.84rem; }
 .candy-analytics-notice > button { padding:0 10px; font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce) { .candy-analytics-notice > button { transition:none; } }
/* Portada desktop de Candy: vitrinas simétricas siguiendo la referencia. */
.candy-analytics-notice__copy--desktop { display:none; }
@media (min-width:1000px) {
 .portada { padding:12px 24px 0; }
 .portada__panel { max-width:none; margin:0 auto; padding:0; border-radius:0; background:transparent; color:var(--tinta); box-shadow:none; }
 .portada__panel::before { content:none; }
 .portada__centro { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.88fr) minmax(0,1fr); grid-template-rows:auto auto auto auto; align-content:center; align-items:center; row-gap:5px; column-gap:0; min-height:clamp(700px,89.5vh,806px); margin:0; text-align:center; background-image:url("/assets/marca/candy-stage-desktop.webp?v=2"); background-repeat:no-repeat; background-size:103% 123%; background-position:center 9%; }
 .portada__centro > *:not(.portada__escena) { grid-column:2; z-index:5; position:relative; top:50px; }
 .portada__centro::after { content:none; }
 .portada__centro > .portada__patron { display:none; }
 .portada__logo { grid-row:1; width:70px; max-width:none; margin:0 auto 2px; filter:drop-shadow(0 5px 12px rgba(74,23,48,.12)); }
 .portada__nombre { grid-row:2; margin:0; font-size:clamp(3rem,4.2vw,4.2rem); line-height:.98; letter-spacing:-.045em; color:var(--vino-hondo); }
 .portada__nombre span { margin-top:10px; font-family:var(--titulo); font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.2; color:var(--tinta-2); }
 .portada__acciones { grid-row:3; justify-content:center; gap:12px; margin-top:14px; }
 .portada__acciones .boton { min-width:0; min-height:52px; padding:0 20px; }
 .portada__acciones .boton--claro { background:var(--acento); color:#fff; }
 .portada__acciones .boton--fantasma { border-color:var(--acento); background:#fff; color:var(--vino-hondo); }
 .portada__lema { grid-row:4; margin:12px 0 0; color:var(--acento-fuerte); font-size:.96rem; }
 .portada__escena { position:absolute; inset:0; grid-column:1/4; grid-row:1/5; align-self:stretch; min-height:0; margin:0; z-index:1; isolation:isolate; pointer-events:none; }
 .escena__panel { display:none; }
 .escena__etiqueta { position:absolute; z-index:5; top:10%; color:#fff; font-size:clamp(1.55rem,2.3vw,2.3rem); font-weight:800; letter-spacing:-.025em; text-shadow:0 3px 14px rgba(32,4,19,.28); }
 .escena__etiqueta--pinatas { left:5%; width:29%; text-align:center; }
 .escena__etiqueta--flores { right:4%; width:29%; text-align:center; }
 .escena__pieza { z-index:2; }
 .escena__pieza img { width:100%; height:auto; filter:drop-shadow(0 18px 18px rgba(20,2,12,.28)); }
 .escena__pieza--pinatas { left:1%; top:28%; width:34%; --prof:5; z-index:3; }
 .escena__pieza--tocados { right:1%; top:28%; width:32%; --prof:6; z-index:2; }
 .escena__pieza--lazos { left:auto!important; right:2%; top:122%!important; bottom:auto!important; display:flex; align-items:center; justify-content:space-between; gap:.15%; width:35%; --prof:8; z-index:4; }
 .escena__mono { display:block; flex:0 0 16%; aspect-ratio:300/381; background-image:url("/assets/marca/collage-lazos.webp"); background-repeat:no-repeat; background-size:300% 200%; filter:drop-shadow(0 8px 8px rgba(20,2,12,.2)); }
 .escena__mono--1,.escena__mono--4 { background-position:0% 0%; }
 .escena__mono--2,.escena__mono--5 { background-position:50% 0%; }
 .escena__mono--3,.escena__mono--6 { background-position:100% 0%; }
 .escena__mono--4,.escena__mono--5,.escena__mono--6 { background-position-y:100%; }
 .portada__escena[data-resalta] .escena__pieza { opacity:.94; filter:saturate(.96); scale:1; }
 .portada__escena[data-resalta="pinatas"] .escena__pieza--pinatas,.portada__escena[data-resalta="tocados"] .escena__pieza--tocados,.portada__escena[data-resalta="lazos"] .escena__pieza--lazos { opacity:1; filter:none; scale:1.025; }
 .escena__sello,.escena__flor { display:none; }
 .portada__bandeja { max-width:1420px; margin:12px auto 0; padding:14px; border:1px solid rgba(110,36,66,.08); border-radius:28px; box-shadow:0 18px 46px rgba(74,23,48,.11); }
 .accesos { gap:14px; }
 .acceso { min-height:108px; }
 .candy-analytics-notice:not([hidden]) { left:auto!important; right:30px!important; bottom:30px!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 10px; width:min(520px,calc(100vw - 60px))!important; padding:20px 22px!important; border-color:rgba(110,36,66,.14)!important; border-radius:22px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 24px 64px rgba(74,23,48,.2)!important; color:var(--tinta); }
 .candy-analytics-notice__copy--mobile { display:none; }
 .candy-analytics-notice__copy--desktop { display:block; grid-column:1/-1; font-size:.92rem; line-height:1.55; }
 .candy-analytics-notice > button { min-height:44px; border-radius:999px; }
}
@media (min-width:1000px) and (max-width:1200px) {
 .portada__centro { grid-template-columns:minmax(0,1fr) minmax(340px,.95fr) minmax(0,1fr); }
 .escena__pieza--pinatas { width:37%; }
 .escena__pieza--tocados { width:35%; }
 .escena__pieza--lazos { right:2%; top:122%!important; bottom:auto!important; width:35%; }
 .escena__etiqueta--pinatas { left:3%; }
 .escena__etiqueta--flores { right:2%; }
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce) {
 .portada__escena .escena__pieza,.escena__pieza img { animation:none!important; }
 .portada__escena[data-resalta] .escena__pieza { transition:none!important; }
}

/* ══════════════════════════════════════════
   SERVICIOS Y VOUCHER
   El voucher es un comprobante: se ve como la marca, con lo esencial,
   y se imprime limpio (Guardar PDF) sin cabecera ni menús.
   ══════════════════════════════════════════ */
.form-dos { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
select.entrada { appearance: auto; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.voucher { margin-top: 8px; padding: 22px 20px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-0); border-top: 6px solid var(--vino); color: var(--tinta); }
.voucher__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px dashed var(--acento-luz); }
.voucher__marca { display: flex; gap: 12px; align-items: center; }
.voucher__marca img { border-radius: 14px; }
.voucher__marca b { display: block; font: 800 1.25rem var(--titulo); color: var(--vino); }
.voucher__marca span, .voucher__folio span { display: block; font-size: .8rem; color: var(--tinta-2); }
.voucher__folio { text-align: right; }
.voucher__folio b { display: block; font: 800 1.15rem var(--titulo); letter-spacing: .04em; color: var(--acento-fuerte); }
.voucher__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 8px; }
.voucher__sello { padding: 5px 12px; border-radius: 999px; background: var(--acento-luz); color: var(--acento-fuerte); font: 700 .8rem var(--titulo); }
.voucher__sello[data-estado="apartado"], .voucher__sello[data-estado="realizado"], .voucher__sello[data-pago="anticipo"] { background: var(--fam-lazo-luz); color: var(--fam-lazo); }
.voucher__sello[data-estado="liquidado"], .voucher__sello[data-pago="liquidado"] { background: var(--verde); color: #fff; }
.voucher__sello[data-estado="cancelado"] { background: #EEE; color: #666; }
.voucher__sello[data-pago="pendiente"], .voucher__sello[data-pago="parcial"] { background: var(--fam-extra-luz); color: var(--fam-extra); }
.voucher__nota { font-size: .85rem; color: var(--tinta-2); }
.voucher__pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 6px; padding: 0; list-style: none; }
.voucher__pasos li { padding-top: 10px; border-top: 4px solid var(--acento-luz); font-size: .74rem; font-weight: 700; color: var(--tinta-3); }
.voucher__pasos li.hecho { border-color: var(--acento); color: var(--vino); }
.voucher__reja { display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }
.voucher h2 { margin: 12px 0 6px; font: 800 .78rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-fuerte); }
.voucher dl { margin: 0; }
.voucher__dato { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 5px 0; font-size: .9rem; }
.voucher__dato dt { color: var(--tinta-2); }
.voucher__dato dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.voucher__mapa { margin-left: 6px; color: var(--acento); font-weight: 700; text-decoration: underline; }
.voucher__desc { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--papel-tibio); font-size: .88rem; white-space: pre-line; }
.voucher__tabla { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .88rem; }
.voucher__tabla th { padding: 8px 6px; border-bottom: 2px solid var(--vino); text-align: left; font: 700 .75rem var(--titulo); text-transform: uppercase; color: var(--vino); }
.voucher__tabla td { padding: 8px 6px; border-bottom: 1px solid var(--acento-luz); }
.voucher__tabla th:not(:first-child), .voucher__tabla td:not(:first-child) { text-align: right; white-space: nowrap; }
.voucher__totales { margin: 10px 0 0 auto !important; max-width: 320px; }
.voucher__totales div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 6px; font-size: .9rem; }
.voucher__totales dd { margin: 0; font-weight: 700; }
.voucher__saldo { margin-top: 4px; border-radius: 10px; background: var(--acento-bruma); }
.voucher__saldo dt, .voucher__saldo dd { color: var(--acento-fuerte); font-weight: 800 !important; }
.voucher__pendiente { margin-top: 18px; padding: 12px 14px; border-radius: var(--r-md); background: var(--fam-extra-luz); color: var(--fam-extra); font-weight: 700; font-size: .9rem; }
.voucher__pagos ul { margin: 0; padding: 0; list-style: none; }
.voucher__pagos li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--acento-luz); font-size: .86rem; }
.voucher__aceptado { margin-top: 12px; font-size: .85rem; font-weight: 700; color: var(--fam-lazo); }
.voucher__pie { margin-top: 18px; padding-top: 12px; border-top: 1.5px dashed var(--acento-luz); font-size: .76rem; color: var(--tinta-3); }
.voucher__acciones { display: grid; gap: 10px; margin-top: 18px; }
.voucher__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) {
    .voucher { padding: 18px 14px; }
    .voucher__folio { text-align: left; }
    .voucher__dato { grid-template-columns: 1fr; gap: 0; }
    .voucher__tabla th:nth-child(3), .voucher__tabla td:nth-child(3) { display: none; }
}
@media print {
    body { background: #fff !important; }
    .cabecera, .pie, .barra-inferior, .hoja, .hoja-info, .voucher__no-imprimir, .voucher__acciones, [class*="candy-analytics"], [id*="candy-analytics"] { display: none !important; }
    .voucher-seccion { padding: 0 !important; }
    .voucher { box-shadow: none; border: 1px solid #ddd; border-top: 6px solid var(--vino); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Eventos y cursos: compacto y pensado para el pulgar ── */
.sv-seccion { padding-block: 18px; }
.sv-contenedor { max-width: 760px; }
.sv-menu { display: grid; gap: 10px; }
.sv-menu__botones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-menu__boton { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 84px; padding: 10px 4px; border: 0; border-radius: var(--r-md); background: var(--papel); box-shadow: var(--sombra-0); font: 700 .74rem/1.15 var(--titulo); color: var(--tinta-2); text-align: center; cursor: pointer; transition: box-shadow .2s ease, color .2s ease; }
.sv-menu__boton .tono { width: 38px; height: 38px; border-radius: 12px; }
.sv-menu__boton .tono svg { width: 20px; height: 20px; }
.sv-menu__boton { --sv: var(--vino); --sv-luz: #F0E1E7; transition: background-color .28s ease, box-shadow .28s ease, color .28s ease, transform .18s ease; }
.sv-menu__boton[data-sv="mayoreo"] { --sv: var(--fam-pinata); --sv-luz: var(--fam-pinata-luz); }
.sv-menu__boton[data-sv="taller"] { --sv: var(--fam-tocado); --sv-luz: var(--fam-tocado-luz); }
.sv-menu__boton[data-sv="evento"] { --sv: var(--fam-lazo); --sv-luz: var(--fam-lazo-luz); }
.sv-menu__boton .tono { transition: background-color .28s ease, color .28s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sv-menu__boton:active { transform: scale(.95); }
.sv-menu__boton[aria-selected="true"] { background: var(--sv-luz); color: var(--sv); box-shadow: inset 0 0 0 2px var(--sv); }
.sv-menu__boton[aria-selected="true"] .tono { background: var(--sv); color: #fff; transform: scale(1.08); }
.sv-menu__panel:not([hidden]) { animation: sv-entra .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes sv-entra { from { opacity: 0; transform: translateY(8px); } }
.sv-paso:not([hidden]) { animation: sv-entra .3s cubic-bezier(.22, 1, .36, 1); }
.sv-opcion { transition: background-color .25s ease, box-shadow .25s ease, transform .15s ease; }
.sv-opcion:active { transform: scale(.98); }
.sv-opcion__icono { transition: background-color .25s ease, color .25s ease; }
.sv-rapido { transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.sv-rapido:active { transform: scale(.94); }
.sv-maps { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 8px; font-size: .84rem; font-weight: 700; color: var(--acento-fuerte); text-decoration: underline; text-underline-offset: 3px; }
.sv-maps svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .sv-menu__panel, .sv-paso { animation: none !important; } }
.sv-menu__panel { padding: 16px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-0); }
.sv-menu__panel h3 { font: 800 1.05rem var(--titulo); color: var(--vino); }
.sv-menu__panel p { margin: 4px 0 10px; font-size: .88rem; color: var(--tinta-2); }
.sv-menu__panel ul { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .85rem; }
.sv-menu__panel li { display: flex; align-items: center; gap: 8px; }
.sv-menu__panel li svg { flex: none; width: 16px; height: 16px; color: var(--verde); }
.sv-menu__panel .boton svg { width: 16px; height: 16px; }

.sv-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sv-pasos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sv-pasos li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); border-top: 2px dashed var(--acento-luz); }
.sv-pasos__icono { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--papel); box-shadow: var(--sombra-0); color: var(--vino); }
.sv-pasos__icono svg { width: 20px; height: 20px; }
.sv-pasos b { font: 700 .8rem var(--titulo); color: var(--vino); }
.sv-pasos small { font-size: .7rem; line-height: 1.25; color: var(--tinta-3); }
.sv-nota { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--papel-tibio); font-size: .8rem; color: var(--tinta-2); }
.sv-nota svg { flex: none; width: 18px; height: 18px; color: var(--verde); }

.sv-asistente { padding: 18px 16px; }
.sv-asistente__titulo { font: 800 1.2rem var(--titulo); color: var(--vino); }
.sv-paso { margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-paso legend { padding: 0; margin-bottom: 12px; font-size: 1.1rem; }
.sv-opciones { display: grid; gap: 8px; }
.sv-opcion { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--papel-tibio); cursor: pointer; transition: box-shadow .2s ease; }
.sv-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.sv-opcion__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--papel); color: var(--vino); }
.sv-opcion__icono svg { width: 20px; height: 20px; }
.sv-opcion__texto b { display: block; font: 700 .92rem var(--titulo); color: var(--tinta); }
.sv-opcion__texto small { display: block; font-size: .78rem; line-height: 1.35; color: var(--tinta-2); }
.sv-opcion:has(input:checked) { background: var(--papel); box-shadow: inset 0 0 0 2px var(--vino); }
.sv-opcion:has(input:checked) .sv-opcion__icono { background: var(--vino); color: #fff; }
.sv-opcion:has(input:focus-visible) { outline: 3px solid var(--acento-luz); }
.sv-campo label, .sv-paso .campo > label { display: flex; align-items: center; gap: 6px; }
.sv-paso .campo > label svg { width: 16px; height: 16px; color: var(--tinta-3); }
.sv-rapidos { display: flex; gap: 6px; margin-bottom: 8px; }
.sv-rapido { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: var(--papel-tibio); font: 700 .88rem var(--titulo); color: var(--tinta-2); cursor: pointer; }
.sv-rapido[aria-pressed="true"] { background: var(--vino); color: #fff; }
.sv-mas { margin: 4px 0 12px; }
.sv-mas summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--acento-fuerte); padding: 6px 0; }
.sv-mas[open] summary { margin-bottom: 8px; }
.sv-resumen { margin-top: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--papel-tibio); }
.sv-asistente .pz__acciones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 16px; }
@media (min-width: 720px) {
    .sv-seccion { padding-block: 28px; }
    .sv-menu__boton { flex-direction: row; justify-content: center; min-height: 60px; font-size: .86rem; }
    .sv-opciones { grid-template-columns: 1fr 1fr; }
    .sv-asistente { padding: 26px 28px; }
    .sv-pasos small { font-size: .78rem; }
}

/* ── Inicio: acceso a eventos en la bandeja del hero ── */
.acceso-eventos { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-0); color: var(--tinta); transition: transform .15s ease, box-shadow .2s ease; }
.acceso-eventos:active { transform: scale(.98); }
.acceso-eventos .tono { flex: none; width: 44px; height: 44px; border-radius: 14px; }
.acceso-eventos .tono svg { width: 22px; height: 22px; }
.acceso-eventos__texto { flex: 1; min-width: 0; }
.acceso-eventos__texto b { display: block; font: 700 1rem var(--titulo); color: var(--vino); }
.acceso-eventos__texto small { display: block; font-size: .8rem; color: var(--tinta-2); }
.acceso-eventos > svg { width: 20px; height: 20px; color: var(--vino); flex: none; }
.portada .resenas--portada { margin-top: 16px; }
@media (min-width: 1000px) {
    .acceso-eventos { margin: 0; max-width: 520px; justify-self: center; width: 100%; }
    .acceso-eventos:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
}

/* ── «Créala tú» en teléfono: la guía queda DENTRO de la tarjeta ── */
@media (max-width: 999px) {
    .reja--crear .crear-col { gap: 0; padding-bottom: 10px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-0); }
    .reja--crear .crear { background: transparent; box-shadow: none; }
    .reja--crear .crear-col__guia { width: auto; margin: 0 10px; background: var(--acento-bruma); color: var(--acento-fuerte); box-shadow: none; border: 0; }
}