@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * css/web/aw_web_publica.css  —  v1.0  25/04/2026
 * ----------------------------------------------------------------------------
 * Estilos añadidos en el update aw:
 *   · Layout 2 columnas del bloque Normas (grid + caja Llegada/Salida)
 *   · Tarjeta "Llegada y salida" oscura con dorado
 *   · Tarjetas de oferta nuevas (oferta-card) leyendo de descuentos_*
 * ════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
 * NORMAS — layout 2 columnas (items a la izquierda, caja Llegada/Salida)
 * ────────────────────────────────────────────────────────────────────────── */

.normas-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: var(--sp-6);
    align-items: start;
}

@media (max-width: 900px) {
    .normas-layout {
        grid-template-columns: 1fr;
    }
}

/* En layout 2 columnas las normas se apilan en una sola columna */
.normas-layout .normas-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .normas-layout .normas-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}


/* ──────────────────────────────────────────────────────────────────────────
 * CHECKIN-CARD — caja oscura "Llegada y salida"
 *
 * Inspirada en el estilo de dev (fondo marrón oscuro, dorado de acento).
 * Adaptada al sistema de tokens de pru, no es una réplica visual exacta.
 * ────────────────────────────────────────────────────────────────────────── */

.checkin-card {
    background: var(--color-marron-choc);
    color: #f0ede5;
    border-radius: var(--br-md);
    padding: var(--sp-6) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    /* az (25/04/2026): el header del menú es sticky con altura --header-height
       (72px sin scroll, 56px al scrollear). La caja debe anclar POR DEBAJO de
       él para que su título no quede tapado al hacer scroll. Sumamos un poco
       de aire respecto al header. */
    position: sticky;
    top: calc(var(--header-height-scroll, 56px) + var(--sp-3));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.15));
}

@media (max-width: 900px) {
    .checkin-card { position: static; }
}

.checkin-card__titulo {
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    font-weight: var(--fw-normal);
    color: #f0ede5;
    margin: 0;
    line-height: var(--lh-snug);
}

.checkin-card__horarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-top: 1px solid rgba(232, 213, 160, .25);
    border-bottom: 1px solid rgba(232, 213, 160, .25);
}

.checkin-card__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkin-card__label {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-dorado-claro);
    text-transform: uppercase;
}

.checkin-card__hora {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    color: var(--color-dorado);
    font-style: italic;
    line-height: 1;
}

.checkin-card__subtexto {
    font-size: var(--fs-caption);
    color: rgba(240, 237, 229, .7);
    font-family: var(--font-sans);
}

.checkin-card__coordinacion {
    font-size: var(--fs-body);
    color: rgba(240, 237, 229, .85);
    line-height: var(--lh-normal);
    margin: 0;
    font-style: italic;
}

.checkin-card__botones {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.checkin-card__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--br-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide, .04em);
    text-decoration: none;
    text-align: center;
    transition: background var(--t-fast, .15s), transform var(--t-fast, .15s);
    white-space: nowrap;
}

.checkin-card__btn--ghost {
    background: rgba(255, 255, 255, .06);
    color: #f0ede5;
    border: 1px solid rgba(240, 237, 229, .2);
}

.checkin-card__btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

.checkin-card__btn--solid {
    background: rgba(232, 213, 160, .15);
    color: var(--color-dorado-claro);
    border: 1px solid rgba(232, 213, 160, .35);
}

.checkin-card__btn--solid:hover {
    background: rgba(232, 213, 160, .25);
    transform: translateY(-1px);
}


/* ──────────────────────────────────────────────────────────────────────────
 * OFERTA-CARD — Tarjetas nuevas de descuentos
 *
 * Reemplazan el estilo .oferta del CSS anterior. Diseño consistente con el
 * resto de bloques de pru (fondo crema + acento dorado), no réplica de dev.
 * ────────────────────────────────────────────────────────────────────────── */

.oferta-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--br-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: relative;
    transition: transform var(--t-normal, .25s), box-shadow var(--t-normal, .25s), border-color var(--t-normal, .25s);
}

.oferta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(74, 52, 37, .08);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.oferta-card__icono {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: var(--sp-1);
    /* ie 07/05/2026: tras la migración a Iconos::render el wrapper es un
     * <span> en lugar de <div>; forzamos display: flex para mantener el
     * comportamiento de bloque y respetar el margin-bottom. */
    display: flex;
    justify-content: flex-start;
}

.oferta-card__valor {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    color: var(--color-dorado-oscuro);
    line-height: 1;
    margin-bottom: var(--sp-1);
}

.oferta-card__titulo {
    font-family: var(--font-serif);
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    margin: 0;
}

.oferta-card__subtitulo {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin: 0;
}

.oferta-card__chip {
    align-self: flex-start;
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-bg-alt);
    color: var(--color-texto);
    border-radius: var(--br-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    margin-top: var(--sp-1);
}

.oferta-card__notas {
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    margin: 0;
    font-style: italic;
}

/* Variantes por tipo: leve diferenciación cromática del icono */
.oferta-card--ultimahora .oferta-card__icono { color: var(--color-aviso); }
.oferta-card--duracion   .oferta-card__icono { color: var(--color-primary); }
.oferta-card--personas   .oferta-card__icono { color: var(--color-secondary); }


/* ──────────────────────────────────────────────────────────────────────────
 * Pequeños retoques de coherencia con el editor in-place
 * ────────────────────────────────────────────────────────────────────────── */

/* Cuando se está editando in-place, el outline del editor debe verse
 * también sobre fondo oscuro de la checkin-card. */
.cra-admin-mode .checkin-card [data-cra-texto] {
    transition: outline var(--t-fast, .15s);
}
.cra-admin-mode .checkin-card [data-cra-texto]:hover {
    outline: 2px dashed var(--color-dorado-claro);
    outline-offset: 3px;
    cursor: pointer;
}


/* ──────────────────────────────────────────────────────────────────────────
 * ay (25/04/2026) — Reset del <p> interior que Quill envuelve siempre
 *
 * Cuando se guarda una descripción tipo texto_largo desde el editor in-place,
 * Quill envuelve el contenido en <p>...</p>. Para que no añada margen vertical
 * extra dentro de la tarjeta de comodidad, normalizamos.
 * ────────────────────────────────────────────────────────────────────────── */

.comodidad__descripcion p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-style: inherit;
}

/* Si por accidente queda alguna clase ql-* en el HTML guardado, neutralizamos
 * los tamaños/fuentes de Quill para que se vean como el resto del bloque. */
.comodidad__descripcion .ql-size-small,
.comodidad__descripcion .ql-size-large,
.comodidad__descripcion .ql-size-huge {
    font-size: inherit !important;
}
.comodidad__descripcion [class*="ql-font-"] {
    font-family: inherit !important;
}