/* ------------------------------------------------------------------
   Tema floral: flores bordadas y encaje.

   Aquí vive todo el diseño. Los colores son variables: cada evento puede
   cambiarlos desde su archivo de datos ('colores'), sin tocar este archivo.
   Cada color tiene dos formas: --nombre (#d81b60) y --nombre-rgb
   (216,27,96), que se usa en sombras y transparencias.
   ------------------------------------------------------------------ */

/* --- Tipografías, alojadas en el propio sitio ---------------------- */
@font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(fonts/great-vibes-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(fonts/playfair-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
    src: url(fonts/playfair-display-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(fonts/playfair-display-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
    src: url(fonts/lato-latin-700-normal.woff2) format('woff2'); }

/* --- Colores por omisión ------------------------------------------- */
:root {
    --principal: #d81b60;      --principal-rgb: 216,27,96;
    --flor-1: #e91e8c;         --flor-1-claro: #f48fb1;
    --flor-2: #1565c0;         --flor-2-claro: #90caf9;
    --flor-3: #c62828;
    --flor-4: #7b1fa2;         --flor-4-claro: #ce93d8;
    --flor-5: #2e7d32;
    --texto: #3a2a2a;
    --texto-medio: #5a4a4a;
    --texto-suave: #7a6a6a;
    --texto-tenue: #bbb;
    --papel: #fdf6ee;
    --fondo-suave: #fff8f9;
    --borde-suave: #fce4ec;
    --borde-campo: #e0c8d0;
    --exito: #2e7d32;
    --error: #c62828;
    --whatsapp: #25d366;       --whatsapp-rgb: 37,211,102;
    /* Velo oscuro sobre la foto de portada, de arriba hacia abajo. */
    --velo-1-rgb: 90,0,35;
    --velo-2-rgb: 70,0,28;
    --velo-3-rgb: 10,0,5;

    --caligrafica: 'Great Vibes', cursive;
    --serif: 'Playfair Display', serif;
    --sans: 'Lato', sans-serif;
}

/* --- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }

html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: #fff;
    color: var(--texto);
    font-family: var(--sans);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
svg, img { display: block; }
table { border-collapse: collapse; }
button, input, textarea {
    font: inherit; letter-spacing: inherit; color: inherit;
    border-radius: 0; background-color: transparent;
}
button { -webkit-appearance: button; appearance: button; }
::placeholder { opacity: 1; color: rgba(58,42,42,.5); }
@supports (color: color-mix(in lab, red, red)) {
    ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }
}
[hidden] { display: none !important; }

/* --- Adornos ------------------------------------------------------- */
.flores { display: flex; justify-content: center; gap: 8px; }

.encaje { width: 100%; overflow: hidden; line-height: 1; }
.encaje svg { width: 100%; height: 48px; }
.encaje--invertido { transform: scaleY(-1); }

/* --- Qué se ve en cada momento -------------------------------------
   Sin JavaScript no hay sobre: la invitación se muestra directamente.
   Con JavaScript (clase con-js) primero el sobre; al abrirlo (clase
   abierta), la invitación. */
.sobre, .musica { display: none; }
.con-js .sobre { display: flex; }
.con-js .invitacion { display: none; }
.abierta .sobre { display: none; }
.abierta .invitacion { display: block; }
.con-js.abierta .musica { display: flex; }

/* Aparición de cada sección al llegar a ella. */
.con-js .revelar { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s ease; }
.con-js .revelar.visible { opacity: 1; transform: translateY(0); }

/* --- Sobre --------------------------------------------------------- */
.sobre {
    min-height: 100vh;
    flex-direction: column; align-items: center; justify-content: center;
    background: #fff; padding: 20px;
}
.sobre__marco { width: min(340px, 90vw); position: relative; perspective: 1200px; }
.sobre__papel {
    position: relative;
    background-color: var(--papel);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(160,110,60,.04) 2px, rgba(160,110,60,.04) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(160,110,60,.025) 6px, rgba(160,110,60,.025) 7px),
        repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(200,160,100,.03) 10px, rgba(200,160,100,.03) 11px);
    border: 2px solid var(--principal);
    border-radius: 12px;
    box-shadow: 0 16px 56px rgba(var(--principal-rgb),.28), 0 4px 16px rgba(0,0,0,.08);
}
.sobre__esquina { position: absolute; z-index: 2; }
.sobre__esquina--1 { top: -4px; left: -4px; }
.sobre__esquina--2 { top: -4px; right: -4px; }
.sobre__esquina--3 { bottom: -4px; left: -4px; }
.sobre__esquina--4 { bottom: -4px; right: -4px; }

.sobre__solapa {
    height: 100px; position: relative; z-index: 3; overflow: hidden;
    transform-origin: top center; transform: rotateX(0deg);
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
    transform-style: preserve-3d;
}
.sobre__solapa.abierta { transform: rotateX(-160deg); }
.sobre__solapa > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sobre__puntos {
    position: absolute; bottom: 4px; left: 0; right: 0; z-index: 1;
    display: flex; justify-content: center; gap: 6px;
}

.sobre__interior { padding: 28px 24px 20px; text-align: center; background: var(--papel); position: relative; }
.sobre__doblez { position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; width: 100%; height: 44px; }
.sobre__texto { position: relative; z-index: 1; }
.sobre__nombres { margin: 16px 0 8px; }
.sobre__invita {
    font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--texto-suave);
    text-transform: uppercase; margin-bottom: 6px;
}
.sobre__nombre { font-family: var(--caligrafica); font-weight: 400; font-size: 33px; color: var(--principal); line-height: 1.1; margin-bottom: 4px; }
.sobre__nombre:last-child { margin-bottom: 0; }
.sobre__y { font-family: var(--serif); font-weight: 400; font-size: 13px; color: var(--texto-suave); letter-spacing: 4px; margin: 4px 0; }
.sobre__fecha { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 13px; color: var(--texto-suave); margin: 12px 0 52px; }

.sobre__boton {
    margin-top: 36px; padding: 14px 48px;
    background: linear-gradient(135deg, var(--principal), var(--flor-1));
    color: #fff; border-radius: 32px;
    font-family: var(--serif); font-size: 16px; letter-spacing: 3px; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(var(--principal-rgb),.3);
    transition: all .2s;
}
.sobre__boton:disabled { background: #bbb; cursor: default; }

/* --- Portada ------------------------------------------------------- */
.portada {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    text-align: center; overflow: hidden;
}
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portada__velo {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(var(--velo-1-rgb),.72) 0%, rgba(var(--velo-2-rgb),.87) 50%, rgba(var(--velo-3-rgb),.96) 100%);
}
.portada__esquina { position: absolute; top: 0; z-index: 2; }
.portada__esquina--1 { left: 0; }
.portada__esquina--2 { right: 0; }
.portada__texto { position: relative; z-index: 3; padding: 0 20px 52px; width: 100%; }
.portada__ante {
    font-weight: 700; font-size: 12px; letter-spacing: 4px; color: rgba(255,255,255,.75);
    text-transform: uppercase; margin-bottom: 12px;
}
.portada__nombres { margin-bottom: 20px; }
.portada__nombre {
    display: block; font-family: var(--caligrafica); font-weight: 400;
    font-size: clamp(48px, 12vw, 72px); color: #fff; line-height: 1.05;
    text-shadow: 0 2px 16px rgba(var(--principal-rgb),.6);
}
.portada__nombre:first-child { margin-bottom: 2px; }
.portada__y {
    display: block; font-family: var(--serif); font-weight: 400; font-size: 20px;
    color: rgba(255,255,255,.7); margin: 4px 0; letter-spacing: 5px;
}
.portada__fecha {
    font-family: var(--serif); font-weight: 600; font-size: 15px; color: rgba(255,255,255,.85);
    margin-top: 16px; letter-spacing: 2px; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.portada__cita {
    max-width: 420px; margin: 22px auto 0; padding: 0 16px;
    font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.7;
    color: rgba(255,255,255,.72);
    border-left: 2px solid rgba(var(--principal-rgb),.7);
    text-align: left;
}
.portada__cita footer { margin-top: 6px; font-size: 11px; font-style: normal; letter-spacing: 1px; color: rgba(255,255,255,.5); }

/* --- Secciones ----------------------------------------------------- */
.seccion { padding: 56px 20px; max-width: 560px; margin: 0 auto; text-align: center; }
.seccion--cuenta { background: linear-gradient(180deg, #fff 0%, var(--fondo-suave) 100%); }

.titulo { font-family: var(--caligrafica); font-weight: 400; font-size: 38px; color: var(--principal); margin-bottom: 12px; }
.titulo--grande { font-size: 40px; margin-bottom: 16px; }

.saludo__texto { font-weight: 700; font-size: 15px; color: var(--texto-medio); line-height: 1.8; max-width: 420px; margin: 16px auto 0; }

/* Cuenta regresiva */
.cuenta__ante { font-weight: 700; font-size: 12px; letter-spacing: 3px; color: var(--texto-suave); text-transform: uppercase; margin-bottom: 20px; }
.cuenta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cuenta__caja {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 80px; padding: 14px 18px;
    background: #fff; border: 2px solid var(--principal); border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--principal-rgb),.12);
}
.cuenta__numero { font-family: var(--serif); font-weight: 400; color: var(--principal); line-height: 1; font-size: clamp(22px, 5vw, 30px); white-space: nowrap; }
.cuenta__unidad { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); font-size: 10px; margin-top: 8px; white-space: nowrap; }
.cuenta__despues { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 16px; color: var(--principal); margin-top: 20px; }

/* Mensaje que cubre el contador cuando la fecha ya pasó. Deja ver el
   contador detrás, atenuado. */
.cuenta-zona { position: relative; }
.cuenta__al-pasar {
    position: absolute; inset: -16px -6px; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 16px;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
    border: 1.5px solid rgba(var(--principal-rgb),.45); border-radius: 16px;
    box-shadow: 0 4px 16px rgba(var(--principal-rgb),.1);
}
.cuenta__al-pasar-titulo { font-family: var(--caligrafica); font-weight: 400; font-size: clamp(32px, 9vw, 42px); line-height: 1.15; color: var(--principal); }
.cuenta__al-pasar-texto { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 16px; color: var(--texto-medio); margin-top: 8px; }

/* Padres y padrinos */
.personas { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.personas__etiqueta { font-weight: 700; font-size: 11px; letter-spacing: 2px; color: var(--texto-suave); text-transform: uppercase; margin-bottom: 6px; }
.personas__nombres { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 16px; color: var(--texto); line-height: 1.6; }
.personas__separador { width: 48px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--principal), transparent); }

/* Itinerario */
.itinerario { max-width: 400px; margin: 28px auto 0; text-align: left; position: relative; }
.itinerario::before {
    content: ""; position: absolute; left: 56px; top: 0; bottom: 0; width: 1px; opacity: .3;
    background: linear-gradient(180deg, transparent, var(--principal) 10%, var(--principal) 90%, transparent);
}
.itinerario__momento { display: flex; gap: 16px; margin-bottom: 16px; align-items: flex-start; }
.itinerario__hora { min-width: 56px; font-size: 10px; color: var(--texto-suave); padding-top: 3px; line-height: 1.3; text-align: right; }
.itinerario__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--principal); margin-top: 4px; flex-shrink: 0; }
.itinerario__titulo { font-family: var(--serif); font-size: 14px; color: var(--texto); font-weight: 600; margin-bottom: 2px; }
.itinerario__detalle { font-size: 12px; color: var(--texto-suave); }
.itinerario__nota { font-weight: 700; font-style: italic; font-size: 14px; color: var(--texto-medio); line-height: 1.8; max-width: 400px; margin: 28px auto 0; text-align: center; }

/* Vestimenta */
.vestimenta { display: flex; flex-direction: column; gap: 14px; max-width: 340px; margin: 20px auto 0; }
.vestimenta__regla {
    display: flex; align-items: center; gap: 14px;
    background: var(--fondo-suave); border-radius: 12px; padding: 12px 16px; border: 1px solid var(--borde-suave);
}
.vestimenta__icono { font-size: 22px; }
.vestimenta__texto { font-size: 14px; color: var(--texto); }

/* Lugares */
.lugares { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.lugar {
    background: #fff; border: 1.5px solid var(--principal); border-radius: 16px; padding: 24px 20px;
    position: relative; box-shadow: 0 4px 16px rgba(var(--principal-rgb),.08); text-align: center;
}
.lugar__esquina { position: absolute; top: -1px; }
.lugar__esquina--1 { left: -1px; }
.lugar__esquina--2 { right: -1px; }
.lugar__icono { font-size: 28px; margin-bottom: 8px; }
.lugar__tipo { font-size: 11px; letter-spacing: 2px; color: var(--texto-suave); text-transform: uppercase; margin-bottom: 4px; }
.lugar__nombre { font-family: var(--serif); font-size: 17px; color: var(--texto); font-weight: 600; margin-bottom: 6px; }
.lugar__direccion { font-size: 13px; color: var(--texto-suave); margin-bottom: 4px; line-height: 1.5; }
.lugar__horario { font-size: 13px; color: var(--principal); font-weight: 700; margin-bottom: 16px; }

.boton-mapa {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--principal); color: #fff; border-radius: 24px; padding: 10px 22px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity .2s, transform .2s;
}
.boton-mapa:hover { opacity: .88; transform: translateY(-1px); }

/* Formulario de confirmación */
.confirmar { max-width: 400px; margin: 28px auto 0; }
.campo { margin-bottom: 20px; }
.campo label { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; text-align: left; }
.campo input, .campo textarea, .entrada__formulario input {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--borde-campo); border-radius: 10px;
    font-size: 15px; color: var(--texto); background: #fff; outline: none;
}
.campo textarea { display: block; resize: vertical; }
.campo__error { color: var(--error); font-size: 13px; margin-top: 6px; text-align: left; }
.campos-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.confirmar__aviso { color: var(--error); font-size: 13px; margin-bottom: 16px; text-align: center; }
.boton-principal {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, var(--principal), var(--flor-1));
    color: #fff; border-radius: 28px;
    font-family: var(--serif); font-size: 16px; letter-spacing: 2px; cursor: pointer;
    box-shadow: 0 6px 20px rgba(var(--principal-rgb),.25);
}
.boton-principal:disabled { background: #bbb; box-shadow: none; cursor: default; }

/* Confirmaciones cerradas: el formulario se ve, pero apagado. */
.confirmar__cerrada { font-weight: 700; font-size: 14px; color: var(--texto-medio); line-height: 1.6; margin-bottom: 20px; text-align: center; }
.confirmar--cerrada .campo label { opacity: .6; }
.campo input:disabled, .campo textarea:disabled { background: #f7f3f4; color: var(--texto-suave); cursor: not-allowed; }

/* Pie de la invitación */
.pie { text-align: center; padding: 40px 20px 60px; background: #fff; }
.pie__nombres { font-family: var(--caligrafica); font-weight: 400; font-size: 44px; color: var(--principal); margin-bottom: 8px; }
.pie__fecha { font-weight: 700; font-size: 12px; color: var(--texto-tenue); margin-top: 16px; letter-spacing: 2px; }

/* Botón flotante de música */
.musica {
    position: fixed; bottom: 24px; right: 20px; z-index: 9999;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--principal); color: #fff; cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(var(--principal-rgb),.35);
    transition: transform .2s, box-shadow .2s;
}
.musica:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(var(--principal-rgb),.45); }
.musica--callada { background: #999; }
.musica__callada, .musica--callada .musica__sonando { display: none; }
.musica--callada .musica__callada { display: block; }

/* --- Encabezado del boleto y de la administración ------------------ */
.encabezado {
    text-align: center; padding: 48px 20px 32px; position: relative;
    background: linear-gradient(180deg, var(--fondo-suave) 0%, #fff 100%);
}
.encabezado__esquina { position: absolute; top: 0; }
.encabezado__esquina--1 { left: 0; }
.encabezado__esquina--2 { right: 0; }
.encabezado__ante { font-size: 11px; letter-spacing: 3px; color: var(--texto-suave); text-transform: uppercase; margin-bottom: 8px; }
.encabezado__titulo { font-family: var(--caligrafica); font-size: clamp(40px, 10vw, 56px); color: var(--principal); line-height: 1.1; }
.encabezado__titulo--boleto { font-size: clamp(44px, 12vw, 64px); }
.encabezado__detalle { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--texto-suave); margin-top: 8px; }

/* --- Boleto -------------------------------------------------------- */
.boleto-contenido { padding: 32px 20px 64px; max-width: 480px; margin: 0 auto; }

.boleto {
    background: #fff; border: 2px solid var(--principal); border-radius: 16px;
    max-width: 380px; margin: 0 auto; padding: 28px 24px 24px;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 32px rgba(var(--principal-rgb),.13);
}
.boleto__esquina { position: absolute; }
.boleto__esquina--1 { top: 0; left: 0; }
.boleto__esquina--2 { top: 0; right: 0; }
.boleto__esquina--3 { bottom: 0; left: 0; }
.boleto__esquina--4 { bottom: 0; right: 0; }
.boleto__cabeza { text-align: center; margin-bottom: 16px; padding-top: 8px; }
.boleto__registrada { font-size: 13px; color: var(--exito); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.boleto__pareja { font-family: var(--caligrafica); font-size: 28px; color: var(--principal); line-height: 1.1; }
.boleto__linea {
    height: 1px; margin: 12px 16px; opacity: .5;
    background: linear-gradient(90deg, transparent, var(--principal) 30%, var(--flor-1) 50%, var(--principal) 70%, transparent);
}
.boleto__linea--tenue { margin: 0 16px 12px; opacity: .3; }
.boleto__invitado { text-align: center; padding: 8px 0; }
.boleto__nombre { font-family: var(--serif); font-size: 20px; color: var(--texto); font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.boleto__personas { font-size: 14px; color: var(--texto-suave); margin-bottom: 12px; }
.boleto__evento { text-align: center; }
.boleto__evento-nombre { font-family: var(--serif); font-size: 13px; color: var(--texto); margin-bottom: 4px; font-style: italic; }
.boleto__evento-fecha { font-size: 13px; color: var(--texto-suave); margin-bottom: 2px; }
.boleto__evento-lugar { font-size: 12px; color: var(--texto-suave); }
.boleto__confirmado { text-align: center; margin-top: 12px; font-size: 11px; color: var(--texto-tenue); }

.boleto__acciones { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 20px auto 0; }
.boleto__botones { display: flex; gap: 10px; justify-content: center; }
.boleto__accion {
    flex: 1; padding: 10px 0; background: #fff; border: 1.5px solid var(--principal); border-radius: 24px;
    color: var(--principal); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s;
}
.boleto__accion--hecho { background: var(--exito); border-color: var(--exito); color: #fff; }
.boton-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; background: var(--whatsapp); border-radius: 28px;
    color: #fff; font-weight: 700; font-size: 14px;
    box-shadow: 0 4px 16px rgba(var(--whatsapp-rgb),.3);
}

.sin-boleto { text-align: center; padding: 60px 20px; }
.sin-boleto__icono { font-size: 48px; margin-bottom: 16px; }
.sin-boleto__titulo { font-family: var(--serif); font-size: 18px; color: var(--principal); margin-bottom: 8px; }
.sin-boleto__texto { font-size: 14px; color: var(--texto-suave); line-height: 1.6; }
.sin-boleto__boton {
    display: inline-block; margin-top: 24px; padding: 12px 32px;
    background: var(--principal); color: #fff; border-radius: 28px; font-weight: 700; font-size: 14px;
}

.despedida { text-align: center; padding: 32px 20px 48px; background: #fff; }
.despedida__texto { font-family: var(--caligrafica); font-size: 36px; color: var(--principal); }
.despedida__fecha { font-size: 11px; color: var(--texto-tenue); letter-spacing: 2px; margin-top: 8px; }

/* --- Administración ------------------------------------------------ */
.lista { max-width: 700px; margin: 0 auto; padding: 32px 20px 64px; }

.entrada { max-width: 320px; margin: 0 auto; text-align: center; }
.entrada__candado { margin-bottom: 24px; }
.entrada__candado svg { opacity: .7; }
.entrada__titulo { font-family: var(--serif); font-size: 18px; color: var(--texto); margin-bottom: 24px; }
.entrada__aviso { color: var(--error); font-size: 13px; margin-bottom: 16px; }
.entrada__formulario { display: flex; flex-direction: column; gap: 14px; }
.entrada__formulario input { width: auto; }
.entrada__boton {
    padding: 13px; background: linear-gradient(135deg, var(--principal), var(--flor-1));
    color: #fff; border-radius: 28px; font-family: var(--serif); font-size: 15px; cursor: pointer; letter-spacing: 1px;
}

.totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 32px; }
.totales__caja { background: var(--fondo-suave); border: 1.5px solid var(--borde-suave); border-radius: 14px; padding: 18px 12px; text-align: center; }
.totales__numero { font-family: var(--serif); font-size: 32px; color: var(--principal); font-weight: 600; }
.totales__etiqueta { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }

.lista__barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.lista__titulo { font-family: var(--serif); font-size: 18px; color: var(--texto); }
.lista__acciones { display: flex; gap: 10px; }
.lista__exportar { display: flex; align-items: center; padding: 9px 18px; background: var(--principal); color: #fff; border-radius: 20px; font-weight: 700; font-size: 13px; cursor: pointer; }
.lista__salir { padding: 9px 18px; background: transparent; color: var(--texto-suave); border: 1px solid var(--borde-campo); border-radius: 20px; font-size: 13px; cursor: pointer; }

.lista__tabla { overflow-x: auto; }
.lista__tabla table { width: 100%; font-size: 13px; }
.lista__tabla thead tr { border-bottom: 2px solid var(--borde-suave); }
.lista__tabla th {
    padding: 10px 12px; text-align: left; color: var(--texto-suave); font-weight: 700;
    text-transform: uppercase; font-size: 11px; letter-spacing: 1px; white-space: nowrap;
}
.lista__tabla tbody tr { border-bottom: 1px solid var(--borde-suave); background: #fff; }
.lista__tabla tbody tr:nth-child(even) { background: var(--fondo-suave); }
.lista__tabla td { padding: 10px 12px; }
.lista__nombre { color: var(--texto); font-weight: 600; }
.lista__adultos { color: var(--principal); font-weight: 700; text-align: center; }
.lista__ninos { color: var(--flor-2); font-weight: 700; text-align: center; }
.lista__mensaje { color: var(--texto-suave); max-width: 200px; }
.lista__mensaje span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lista__fecha { color: var(--texto-suave); white-space: nowrap; }
.lista__ver { color: var(--principal); font-weight: 700; }
.lista__vacia { text-align: center; padding: 40px 0; color: var(--texto-suave); font-family: var(--serif); font-style: italic; }

.lista-pie { text-align: center; padding: 24px 20px 40px; }
.lista-pie p { font-family: var(--caligrafica); font-size: 32px; color: var(--principal); }

/* --- Menos movimiento, para quien lo pide en su teléfono ----------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .con-js .revelar { opacity: 1; transform: none; transition: none; }
    .sobre__solapa, .sobre__boton, .boton-mapa, .musica, .boleto__accion { transition: none; }
}

/* --- Impresión del boleto: solo la tarjeta ------------------------- */
@media print {
    .pagina-boleto .encabezado, .pagina-boleto .encaje, .pagina-boleto .despedida, .boleto__acciones { display: none !important; }
    .boleto-contenido { padding: 0; }
    .boleto { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { margin: 0.5cm; }
}