/* ══════════════════════════════════════════════════════════════════════════════
 * CASA RURAL EL ÁLAMO — includes/web/css/bloques.css
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Estilos específicos de cada bloque de contenido de la home pública.
 * Estructura por bloques para mantenimiento fácil.
 *
 * Requiere: base.css y layout.css cargados antes.
 * ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * BLOQUE-CABECERA (reutilizable — intro de cada sección)
 * ══════════════════════════════════════════════════════════════════════════ */

.bloque-cabecera__intro {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--sp-4);
    color: var(--color-texto-suave);
    font-size: var(--fs-body-lg);
    text-align: center;
}

.bloque-cabecera__intro p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
 * HERO
 * ══════════════════════════════════════════════════════════════════════════ */

.bloque--hero {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--color-crema) 88%, var(--color-verde-oliva)) 0%,
            var(--color-crema) 60%,
            color-mix(in srgb, var(--color-crema) 88%, var(--color-dorado)) 100%
        );
    overflow: hidden;
}

/* Si el tema define imagen de hero, la añadimos como capa */
.bloque--hero[style*="--hero-bg-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
}

.hero-content__pretitulo {
    color: var(--color-texto-suave);
}

.hero-content__titulo {
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    margin-bottom: var(--sp-5);
    color: var(--color-verde-oliva);
}

.hero-content__titulo em {
    display: block;
    font-style: italic;
    color: var(--color-accent);
    font-weight: var(--fw-normal);
}

.hero-content__subtitulo {
    font-size: var(--fs-body-lg);
    color: var(--color-texto-suave);
    margin: var(--sp-4) auto var(--sp-6);
    max-width: 600px;
    font-style: italic;
}

.hero-content__ctas {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
    flex-wrap: wrap;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    animation: scrollBounce 2s ease-in-out infinite;
    z-index: 1;
}

.hero-scroll-indicator span {
    display: block;
    width: 18px;
    height: 18px;
    border-right: 2px solid var(--color-verde-oliva);
    border-bottom: 2px solid var(--color-verde-oliva);
    transform: rotate(45deg);
}

@keyframes scrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}


/* ══════════════════════════════════════════════════════════════════════════
 * PREHEADER (barra info)
 * ══════════════════════════════════════════════════════════════════════════ */

.bloque--preheader {
    background: var(--color-marron-choc);
    color: var(--color-crema);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
}

.preheader__lista {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
}

.preheader__item {
    padding: var(--sp-1) var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-dorado-claro);
    position: relative;
}

.preheader__item + .preheader__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: rgba(250, 248, 243, 0.2);
}


/* ══════════════════════════════════════════════════════════════════════════
 * LA CASA
 * ══════════════════════════════════════════════════════════════════════════ */

.lacasa__intro {
    max-width: 70ch;
    margin: 0 auto var(--sp-7);
    text-align: center;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
}

.lacasa__intro p {
    max-width: none;
    text-align: center;
}

.lacasa__modalidades {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 768px) {
    .lacasa__modalidades {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
}

.modalidad {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--br-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    transition: all var(--t-normal);
    position: relative;  /* hd: necesario para .modalidad__badge en ambas modalidades */
}

.modalidad:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.modalidad--completa {
    border-color: var(--color-accent);
    position: relative;
}

.modalidad--completa::before {
    /* gt: el badge "Recomendada" se ha movido a un <span> HTML real
       editable (.modalidad__badge). Este pseudo-elemento se deja
       vacío para que no salga el texto duplicado. */
    content: none;
}

.modalidad__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-marron-choc);
    padding: 4px 16px;
    border-radius: var(--br-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

/* hd: el badge de la planta baja usa color neutro para diferenciarlo
   visualmente del "Recomendada" dorado. Reservamos el dorado para
   marcar la opción destacada. */
.modalidad--base .modalidad__badge {
    background: var(--color-border, #d8d4cc);
    color: var(--color-texto-suave, #5d442b);
}

.modalidad__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.modalidad__titulo {
    color: var(--color-primary);
    font-size: var(--fs-h3);
}

.modalidad__personas {
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    color: var(--color-texto-suave);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.modalidad__descripcion {
    color: var(--color-texto-suave);
    flex: 1;
}

.modalidad__descripcion p {
    margin: 0;
}

.modalidad__precio {
    font-size: var(--fs-subtitulo);
    color: var(--color-accent);
    font-style: italic;
    font-weight: var(--fw-medium);
}


/* ══════════════════════════════════════════════════════════════════════════
 * TABS (estancias)
 * ══════════════════════════════════════════════════════════════════════════ */

.tabs {
    position: relative;
}

.tabs__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tabs__barra {
    display: flex;
    gap: var(--sp-1);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.tabs__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-sans);
    font-size: var(--fs-pretitulo);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    color: var(--color-texto-suave);
    cursor: pointer;
    border-radius: var(--br-sm);
    transition: all var(--t-fast);
    border: 1px solid transparent;
}

.tabs__label:hover {
    color: var(--color-primary);
    background: var(--color-crema-oscuro);
}

/* hw 06/05/2026: contenedor del icono de cada pestaña.
   Soporta dos modos según ajuste web.estancias_iconos_modo:
   · lucide (default) → SVG inline que hereda color del texto.
   · emoji            → emoji unicode al tamaño del texto.
   El SVG se escala con el font-size del label (1.4em) y usa
   currentColor para fill/stroke, así cambia automáticamente
   en hover y en pestaña activa. */
.tabs__icono {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.4em;   /* tamaño base del icono en pestañas Estancias */
}
/* id 06/05/2026: con el sistema centralizado, el SVG va dentro de
 * .cra-icono--lucide. Forzamos 1em para que herede el font-size de
 * .tabs__icono (1.4em) y mantenga el tamaño que tenía antes. */
.tabs__icono.cra-icono--lucide svg,
.tabs__icono--lucide svg {
    width: 1em;
    height: 1em;
}

.tabs__panel {
    display: none;
}

/* Activación por radios (CSS-only tabs) */
.tabs__radio:nth-of-type(1):checked ~ .tabs__barra label:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .tabs__barra label:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .tabs__barra label:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked ~ .tabs__barra label:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked ~ .tabs__barra label:nth-of-type(5) {
    color: var(--color-marron-choc);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.tabs__radio:nth-of-type(1):checked ~ .tabs__paneles .tabs__panel:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked ~ .tabs__paneles .tabs__panel:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked ~ .tabs__paneles .tabs__panel:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked ~ .tabs__paneles .tabs__panel:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked ~ .tabs__paneles .tabs__panel:nth-of-type(5) {
    display: block;
}


/* ── Habitaciones grid (dentro de la tab) ──────────────────────────────── */

.habitaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-5);
}

.habitacion {
    background: var(--color-surface);
    border-radius: var(--br-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.habitacion:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.habitacion__imagen {
    aspect-ratio: 4 / 3;
    background: var(--color-crema-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-claro);
    font-family: var(--font-serif);
    font-size: var(--fs-h3);
    overflow: hidden;     /* dj 29/04/2026: por consistencia, asegura recorte */
}

.habitacion__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.habitacion__info {
    padding: var(--sp-4);
}

.habitacion__nombre {
    color: var(--color-primary);
    font-size: var(--fs-h3);
    margin-bottom: var(--sp-1);
}

.habitacion__subtitulo {
    color: var(--color-texto-suave);
    font-style: italic;
    margin-bottom: var(--sp-3);
}

.habitacion__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
}


/* ── Detalle de estancia (piscina, cocina) ─────────────────────────────── */

.estancia-detalle {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 768px) {
    .estancia-detalle {
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
    }
}

.estancia-detalle__imagen {
    aspect-ratio: 3 / 2;
    background: var(--color-crema-oscuro);
    border-radius: var(--br-md);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-4);
    position: relative;
    overflow: hidden;
}

.estancia-detalle__etiqueta {
    background: var(--color-marron-choc);
    color: var(--color-crema);
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
}

.estancia-detalle__descripcion {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-texto);
}


/* ── Galería de salones ────────────────────────────────────────────────── */

.salones-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.salon-item {
    aspect-ratio: 1;
    background: var(--color-crema-oscuro);
    border-radius: var(--br-sm);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-2);
    position: relative;
    overflow: hidden;     /* dj 29/04/2026: recortar imagen al rectángulo del item */
}

/* dj 29/04/2026: imágenes dentro de los contenedores de Estancias —
   se recortan en lugar de deformarse. Aplica a Piscina, Cocina,
   Salones (las 5 sub-cajas) y Otras estancias (las 3 sub-cajas). */
.salon-item > img,
.salon-item > picture,
.estancia-detalle__imagen > img,
.estancia-detalle__imagen > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.salon-item > picture > img,
.estancia-detalle__imagen > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Las etiquetas quedan por encima de la imagen */
.salon-item__etiqueta,
.estancia-detalle__etiqueta {
    z-index: 1;
    position: relative;
}

.salon-item__etiqueta {
    background: rgba(74, 52, 37, 0.9);
    color: var(--color-crema);
    padding: var(--sp-1) var(--sp-3);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    border-radius: var(--br-sm);
}


/* ══════════════════════════════════════════════════════════════════════════
 * PAISAJE ESTACIONAL
 * ══════════════════════════════════════════════════════════════════════════ */

.paisaje-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 640px) {
    .paisaje-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.paisaje-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--sp-4);
    background: var(--color-surface);
    border-radius: var(--br-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-normal);
    position: relative;
}

.paisaje-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.paisaje-item--actual {
    border: 2px solid var(--color-accent);
}

.paisaje-item__imagen {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.paisaje-item--primavera .paisaje-item__imagen { background: linear-gradient(135deg, #e8c5d8, #f4e5d0); }
.paisaje-item--verano    .paisaje-item__imagen { background: linear-gradient(135deg, #c5dfe8, #f4d5b0); }
.paisaje-item--otono     .paisaje-item__imagen { background: linear-gradient(135deg, #e8c5a0, #c59a6b); }
.paisaje-item--invierno  .paisaje-item__imagen { background: linear-gradient(135deg, #b5c5d0, #e0dedc); }

/* hj 06/05/2026: cuando hay foto asignada al slot 'paisaje_<estacion>',
   se aplica como capa encima del gradiente con la opacidad y posición foco
   configuradas en Encuadres. Si la foto falla al cargar, se sigue viendo
   el gradiente bonito de fondo. El emoji se oculta para que la foto sea
   la protagonista. */
.paisaje-item__imagen.tiene-foto {
    position: relative;
    overflow: hidden;
}
.paisaje-item__imagen.tiene-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--paisaje-foto);
    background-size: cover;
    background-position: var(--paisaje-foto-pos-x, 50%) var(--paisaje-foto-pos-y, 50%);
    background-repeat: no-repeat;
    opacity: var(--paisaje-foto-opacidad, 1);
    pointer-events: none;
}

.paisaje-item__info {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
}

.paisaje-item__titulo {
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    margin-bottom: var(--sp-1);
}

.paisaje-item__texto {
    font-size: var(--fs-body);
    color: var(--color-texto-suave);
    font-style: italic;
}

.paisaje-item__badge {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-marron-choc);
    padding: 3px 10px;
    border-radius: var(--br-pill);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════════════════════════════════════
 * COMODIDADES
 * ══════════════════════════════════════════════════════════════════════════ */

.comodidades__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-5);
    text-align: center;
}

.comodidad {
    padding: var(--sp-5) var(--sp-3);
}

.comodidad__icono {
    /* id2 07/05/2026: quitados fondo, borde y border-radius del círculo
     * decorativo. El icono queda suelto sobre el fondo del bloque. La
     * caja sigue midiendo 72x72 para preservar el espaciado vertical y
     * el centrado horizontal de la cuadrícula. */
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto var(--sp-3);
    transition: all var(--t-normal);
}

/* id2 07/05/2026: la regla `.comodidad--destacada .comodidad__icono` que
 * pintaba el círculo dorado se ha eliminado intencionadamente. Si más
 * adelante se quiere recuperar alguna diferenciación visual para los
 * destacados, hacerlo aquí. */

.comodidad:hover .comodidad__icono {
    transform: scale(1.08);
}

.comodidad__nombre {
    font-size: var(--fs-body);
    color: var(--color-texto);
    margin-bottom: var(--sp-1);
}

.comodidad__descripcion {
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════════
 * SERVICIOS
 * ══════════════════════════════════════════════════════════════════════════ */

.bloque--servicios {
    background: var(--color-bg-alt);
}

.servicios__columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 900px) {
    .servicios__columnas {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-7);
    }
}

.servicios-columna__titulo {
    font-size: var(--fs-h3);
    color: var(--color-primary);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--color-accent);
}

.servicios-columna--extras .servicios-columna__titulo {
    border-bottom-color: var(--color-dorado);
}

.servicios-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.servicio {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-3);
    align-items: start;
}

.servicio__icono {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: 50%;
    flex-shrink: 0;
}

.servicio__nombre {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-texto);
    margin-bottom: 2px;
}

.servicio__descripcion {
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    margin-bottom: var(--sp-2);
}

.servicio__precio {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-accent);
    font-weight: var(--fw-medium);
}

.servicio__consultar,
.servicio__gratis {
    font-style: italic;
    color: var(--color-texto-suave);
}


/* ══════════════════════════════════════════════════════════════════════════
 * OPINIONES
 * ══════════════════════════════════════════════════════════════════════════ */

.opiniones-media {
    margin-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}

.opiniones-media__estrellas {
    font-size: var(--fs-h3);
    color: var(--color-accent);
    letter-spacing: 4px;
}

.opiniones-media__texto {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--color-texto-suave);
    font-style: italic;
}

.resenas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-6);
    /* fv-fix3 03/05/2026: align-items:start para que cada tarjeta
       de la rejilla tome su altura natural y no se estire para
       igualarse a la más alta de la fila. */
    align-items: start;
}

.resena {
    background: var(--color-surface);
    padding: var(--sp-5);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.resena__estrellas {
    color: var(--color-accent);
    letter-spacing: 2px;
}

.resena__texto {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-texto);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    flex: 1;
    position: relative;
    padding-left: var(--sp-4);
}

.resena__texto::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -0.3em;
    font-family: Georgia, serif;
    font-size: 2rem;
    color: var(--color-accent);
    line-height: 1;
}

.resena__footer {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
}

.resena__autor {
    color: var(--color-texto);
    font-weight: var(--fw-medium);
}

.resena__plataforma {
    color: var(--color-texto-suave);
    font-style: italic;
}

.opiniones-placeholder {
    text-align: center;
    color: var(--color-texto-suave);
    font-style: italic;
    padding: var(--sp-6);
}

.opiniones-cta {
    text-align: center;
    margin-top: var(--sp-6);
}


/* ──────────────────────────────────────────────────────────────────────
 * fv 03/05/2026 — Reseñas: colapso "Seguir leyendo…"
 *
 *  Las reseñas largas (>350 caracteres) y las respuestas largas se
 *  colapsan visualmente para evitar paredes de texto. Si el JS está
 *  desactivado, el botón no funciona pero el texto SÍ es accesible
 *  (max-height del max-content garantiza que se vea entero como
 *  fallback). En navegadores modernos, el colapso es por
 *  -webkit-line-clamp.
 * ────────────────────────────────────────────────────────────────────── */

.resena__cuerpo {
    position: relative;
    flex: 1;          /* hereda el flex de .resena__texto que existía */
    display: flex;
    flex-direction: column;
}

/* fv-fix2 03/05/2026: cuando el cuerpo está colapsado, NO debe
   estirarse para llenar la altura de la tarjeta (que viene marcada
   por la tarjeta más alta de la fila). Solo debe ocupar lo justo:
   las 5 líneas del clamp + el botón. Así el "Seguir leyendo…"
   queda pegado debajo del texto cortado y no separado por un
   hueco vacío. */
.resena__cuerpo--largo:not(.resena__cuerpo--expandido) {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* Estado colapsado del cuerpo: limitar el texto a 5 líneas con clamp
   (fv-fix1 03/05/2026: bajado de 7 a 5 — con tarjetas estrechas
   en 3 columnas, 7 líneas ya era casi todo el texto y se notaba poco
   el colapso.) */
.resena__cuerpo--largo .resena__texto {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* fv-fix2: además del line-clamp, fijamos un max-height en em
       basado en la altura de línea, para garantizar el corte
       incluso si algún navegador interpreta mal -webkit-box. */
    max-height: calc(var(--lh-relaxed, 1.6) * 1em * 5);
    /* sombra inferior sutil para indicar que hay más texto */
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    transition: max-height 250ms ease;
    /* Quita el flex:1 heredado del .resena__texto base, para que no
       se estire pasada las 5 líneas. */
    flex: 0 0 auto;
}

/* Expandido: mostrar todo el texto sin clamp ni máscara */
.resena__cuerpo--largo.resena__cuerpo--expandido .resena__texto {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-mask-image: none;
    mask-image: none;
    /* fv-fix2: quitar el max-height para que se vea entero */
    max-height: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * fw 03/05/2026 — Respuesta del propietario: bloque desplegable.
 *
 *  Antes (fv): la respuesta se mostraba siempre, con su propio clamp.
 *  Ahora (fw): la respuesta se oculta por defecto y se muestra un
 *  enlace pequeño "Ver respuesta del propietario". Click → se
 *  despliega entera. Esto da simetría visual entre tarjetas con y
 *  sin respuesta — todas tienen la misma estructura por defecto.
 * ────────────────────────────────────────────────────────────────────── */

.resena__respuesta-wrap {
    margin-top: var(--sp-2);
    flex: 0 0 auto;     /* no estirarse en el flex de la tarjeta */
}

/* Enlace "Ver respuesta del propietario" — discreto, alineado a la izquierda */
.resena__ver-respuesta {
    background: none;
    border: none;
    color: var(--color-accent, #b89968);
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 150ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.resena__ver-respuesta:hover {
    color: var(--color-primary, #2a4a1e);
}
.resena__ver-respuesta:focus-visible {
    outline: 2px solid var(--color-accent, #b89968);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Toggle del texto del botón */
.resena__ver-respuesta-ocultar { display: none; }
.resena__ver-respuesta-mostrar { display: inline; }
.resena__respuesta-wrap--visible .resena__ver-respuesta-mostrar { display: none; }
.resena__respuesta-wrap--visible .resena__ver-respuesta-ocultar { display: inline; }

/* Bloque de la respuesta — oculto por defecto, visible cuando wrap tiene
   .resena__respuesta-wrap--visible */
.resena__respuesta {
    display: none;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--color-borde-suave, #d4cdb8);
    animation: craFadeInRespuesta 250ms ease-out;
}
.resena__respuesta-wrap--visible .resena__respuesta {
    display: block;
}

@keyframes craFadeInRespuesta {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.resena__respuesta-label {
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-1);
}

.resena__respuesta-texto {
    font-size: var(--fs-body);
    color: var(--color-texto);
    line-height: var(--lh-relaxed);
}

/* Botón "Seguir leyendo…" / "Mostrar menos" del cuerpo de la reseña */
.resena__seguir-leyendo {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-accent, #b89968);
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    cursor: pointer;
    padding: 4px 0;
    margin-top: var(--sp-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 150ms ease;
}
.resena__seguir-leyendo:hover {
    color: var(--color-primary, #2a4a1e);
}
.resena__seguir-leyendo:focus-visible {
    outline: 2px solid var(--color-accent, #b89968);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mostrar el texto correcto del botón según el estado del cuerpo */
.resena__seguir-leyendo-menos { display: none; }
.resena__seguir-leyendo-mas   { display: inline; }

.resena__cuerpo--expandido .resena__seguir-leyendo-mas    { display: none; }
.resena__cuerpo--expandido .resena__seguir-leyendo-menos  { display: inline; }


/* ══════════════════════════════════════════════════════════════════════════
 * NORMAS
 * ══════════════════════════════════════════════════════════════════════════ */

.normas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.norma {
    padding: var(--sp-5);
    background: var(--color-surface);
    border-radius: var(--br-md);
    border-top: 3px solid var(--color-accent);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.norma:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.norma__icono {
    font-size: 2rem;
    margin-bottom: var(--sp-3);
    /* 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;
}

.norma__titulo {
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    margin-bottom: var(--sp-2);
}

.norma__descripcion {
    color: var(--color-texto-suave);
    font-size: var(--fs-body);
}

.norma__descripcion p {
    max-width: none;
}


/* ──────────────────────────────────────────────────────────────────────
 * fp 03/05/2026 — Normas: estado activo/inactivo + mini-toggle admin
 *
 *  Comportamiento:
 *  - Modo público (sin .cra-admin-mode en body):
 *      · Normas inactivas → ocultas (display:none).
 *      · Mini-toggle      → oculto.
 *  - Modo admin (con .cra-admin-mode en body):
 *      · Normas inactivas → visibles pero atenuadas (opacity).
 *      · Mini-toggle      → visible.
 * ────────────────────────────────────────────────────────────────────── */

/* Modo público: normas inactivas no se renderizan visualmente */
body:not(.cra-admin-mode) .norma--inactivo { display: none !important; }

/* Modo admin: las inactivas se ven pero atenuadas */
body.cra-admin-mode .norma--inactivo {
    opacity: 0.5;
    border-top-color: #b0a89a;
    background: #fbfaf6;
}
body.cra-admin-mode .norma--inactivo:hover {
    opacity: 0.85;
}

/* Mini-toggle de cada norma: oculto por defecto, solo se muestra en admin */
.cra-toggle-norma { display: none; }
body.cra-admin-mode .cra-toggle-norma {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed #d4cdb8;
}
/* Reutilizamos los estilos de .cra-toggle-mini ya definidos en
   ba_correcciones.css (paquete ba). No hace falta duplicarlos. */


/* ══════════════════════════════════════════════════════════════════════════
 * DISPONIBILIDAD
 * ══════════════════════════════════════════════════════════════════════════ */

.disponibilidad-leyenda {
    display: flex;
    justify-content: center;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto);
}

.leyenda-item__muestra {
    width: 20px;
    height: 20px;
    border-radius: var(--br-sm);
    display: inline-block;
}

.leyenda-item--libre .leyenda-item__muestra   { background: #d5e8d5; border: 1px solid #a0c0a0; }
.leyenda-item--ocupado .leyenda-item__muestra { background: #f5c5c5; border: 1px solid #c08080; }

.disponibilidad-calendarios {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

@media (min-width: 700px) {
    .disponibilidad-calendarios {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mini-cal {
    background: var(--color-surface);
    padding: var(--sp-4);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
}

.mini-cal__titulo {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    margin-bottom: var(--sp-3);
}

.mini-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-cal__dia-nombre {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--color-texto-suave);
    letter-spacing: var(--ls-wide);
    padding: 4px 0;
}

.mini-cal__celda {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    border-radius: var(--br-sm);
}

.mini-cal__celda--libre   { background: #e8f5e8; color: #3d6b3d; }
.mini-cal__celda--ocupado { background: #fde5e5; color: #923; text-decoration: line-through; }
.mini-cal__celda--pasado  { color: var(--color-texto-claro); opacity: 0.5; }
.mini-cal__celda--vacia   { background: transparent; }

.disponibilidad-cta-final {
    text-align: center;
    margin-top: var(--sp-6);
}


/* ══════════════════════════════════════════════════════════════════════════
 * FAQ
 * ══════════════════════════════════════════════════════════════════════════ */

.faq-lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-6);
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--br-md);
    overflow: hidden;
    transition: border-color var(--t-fast);
}

.faq-item[open] {
    border-color: var(--color-accent);
}

.faq-item__pregunta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: var(--fs-body-lg);
    color: var(--color-texto);
    font-weight: var(--fw-normal);
    list-style: none;
    transition: background var(--t-fast);
}

.faq-item__pregunta::-webkit-details-marker {
    display: none;
}

.faq-item__pregunta:hover {
    background: var(--color-crema-oscuro);
}

.faq-item__icono {
    color: var(--color-accent);
    font-size: 1.5rem;
    font-weight: var(--fw-light);
    transition: transform var(--t-fast);
    flex-shrink: 0;
    margin-left: var(--sp-3);
}

.faq-item[open] .faq-item__icono {
    transform: rotate(45deg);
}

.faq-item__respuesta {
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--color-texto-suave);
    line-height: var(--lh-relaxed);
    border-top: 1px solid var(--color-border);
    padding-top: var(--sp-4);
    animation: faqExpand var(--t-normal) ease-out;
}

@keyframes faqExpand {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.faq-item__placeholder {
    color: var(--color-texto-claro);
    font-style: italic;
}

.faq-contacto {
    text-align: center;
    padding: var(--sp-6);
    background: var(--color-bg-alt);
    border-radius: var(--br-md);
}

.faq-contacto__texto {
    font-size: var(--fs-body-lg);
    color: var(--color-texto);
    margin-bottom: var(--sp-4);
    font-style: italic;
}

.faq-contacto__botones {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════════════
 * UBICACIÓN
 * ══════════════════════════════════════════════════════════════════════════ */

.ubicacion__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 900px) {
    .ubicacion__grid {
        grid-template-columns: 1fr 1.2fr;
        align-items: start;
    }
}

.ubicacion__datos {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.ubicacion__item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.ubicacion__item:last-of-type {
    border-bottom: none;
}

.ubicacion__label {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ubicacion__valor {
    font-size: var(--fs-body);
    color: var(--color-texto);
}

.ubicacion__cta {
    align-self: flex-start;
    margin-top: var(--sp-3);
}

.ubicacion__mapa {
    border-radius: var(--br-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}


/* ══════════════════════════════════════════════════════════════════════════
 * ALREDEDORES
 * ══════════════════════════════════════════════════════════════════════════ */

.alrededores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
}

.destino {
    background: var(--color-surface);
    padding: var(--sp-5);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
    transition: all var(--t-normal);
}

.destino:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.destino__icono {
    font-size: 1.75rem;
    margin-bottom: var(--sp-2);
    /* id 06/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;
}

.destino__nombre {
    font-size: var(--fs-subtitulo);
    color: var(--color-primary);
    margin-bottom: var(--sp-1);
}

.destino__distancia {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-accent);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-2);
    letter-spacing: var(--ls-wide);
}

.destino__descripcion {
    font-size: var(--fs-body);
    color: var(--color-texto-suave);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-3);
    max-width: none;
}

.destino__cta {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.alrededores-cta-final {
    text-align: center;
    margin-top: var(--sp-7);
}

/* gq/gq2: chip "🔗 Editar URL" — solo visible en modo administrador.
   Permite editar la URL de un destino aunque no tenga URL aún.
   .destino__url-control = contenedor visual.
   .destino__url-trigger = botón visible con el texto fijo.
   .destino__url-value   = span oculto con la URL real (lo lee el editor). */
.destino__url-control {
    display: none;
}
.destino__url-value {
    display: none !important;
}
.cra-admin-mode .destino__url-control {
    display: inline-block;
    margin-top: var(--sp-2);
}
.cra-admin-mode .destino__url-trigger {
    font-family: var(--font-sans);
    font-size: 11px;
    color: #666;
    background: #fffbe6;
    border: 1px dashed #c9a227;
    border-radius: 3px;
    padding: 2px 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cra-admin-mode .destino__url-trigger:hover {
    background: #fff5b3;
    color: #333;
    border-color: #a37a0d;
}


/* ══════════════════════════════════════════════════════════════════════════
 * GALERIA
 * ══════════════════════════════════════════════════════════════════════════ */

.galeria-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}

@media (min-width: 700px) {
    .galeria-masonry {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .galeria-masonry {
        grid-template-columns: repeat(4, 1fr);
    }
}

.galeria-item {
    aspect-ratio: 1;
    background: var(--color-crema-oscuro);
    border-radius: var(--br-sm);
    overflow: hidden;
    position: relative;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}

.galeria-item:hover img {
    transform: scale(1.05);
}

.galeria-item--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-texto-claro);
}

.galeria-nota {
    text-align: center;
    margin-top: var(--sp-5);
    color: var(--color-texto-suave);
    font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════════════
 * VIDEO
 * ══════════════════════════════════════════════════════════════════════════ */

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-marron-choc);
    border-radius: var(--br-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-embed iframe,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * OFERTAS
 * ══════════════════════════════════════════════════════════════════════════ */

.ofertas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-5);
}

.oferta {
    background: var(--color-surface);
    padding: var(--sp-5);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.oferta--destacada {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.oferta__badge {
    position: absolute;
    top: -12px;
    right: var(--sp-5);
    background: var(--color-accent);
    color: var(--color-marron-choc);
    padding: 6px 16px;
    border-radius: var(--br-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
}

.oferta__titulo {
    font-size: var(--fs-h3);
    color: var(--color-primary);
}

.oferta__descripcion {
    color: var(--color-texto-suave);
    flex: 1;
}

.oferta__vigencia {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    color: var(--color-texto-suave);
    font-style: italic;
}

.ofertas-cta-final {
    text-align: center;
    margin-top: var(--sp-6);
}


/* ══════════════════════════════════════════════════════════════════════════
 * COOKIES BANNER
 * ══════════════════════════════════════════════════════════════════════════ */

.cookies-banner {
    position: fixed;
    bottom: var(--sp-4);
    left: var(--sp-4);
    right: var(--sp-4);
    z-index: var(--z-modal);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    border-radius: var(--br-md);
    border: 1px solid var(--color-border);
    max-width: 640px;
    margin: 0 auto;
    animation: cookiesSlideUp var(--t-normal) ease-out;
}

@keyframes cookiesSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cookies-banner__contenido {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cookies-banner__mensaje {
    font-size: var(--fs-body);
    color: var(--color-texto);
    line-height: var(--lh-normal);
}

.cookies-banner__mensaje p {
    max-width: none;
    margin: 0;
}

.cookies-banner__acciones {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cookies-banner__acciones {
        flex-direction: column-reverse;
    }
    .cookies-banner__acciones .btn {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGIBILIDAD SOBRE FOTO HERO — sombra negra suave
   ═══════════════════════════════════════════════════════════════════════════
   El hero permite color libre desde el editor (Quill). Al pintar texto sobre
   una foto sin overlay, los colores claros pueden quedar ilegibles según la
   zona del cielo/nube. La sombra suave detrás garantiza legibilidad sea cual
   sea el color elegido por el admin.
   La sombra es discreta, no se nota cuando hay overlay oscuro, pero salva la
   legibilidad cuando el admin baja la opacidad de la foto.
*/
.hero-content__pretitulo,
.hero-content__titulo,
.hero-content__titulo em,
.hero-content__subtitulo {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Cuando el admin aplica color con Quill, el contenido se envuelve en <p> y
   <span style="color:..."> automáticamente. Forzamos que esos <p> internos no
   añadan margen ni cambien la tipografía esperada del subtítulo. */
.hero-content__subtitulo > p,
.hero-content__pretitulo > p {
    margin: 0;
    display: inline;
}
.hero-content__titulo > p,
.hero-content__titulo span > p,
.hero-content__titulo em > p {
    margin: 0;
    display: inline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUENTES SELECCIONADAS DESDE EL EDITOR INLINE (Quill)
   ═══════════════════════════════════════════════════════════════════════════
   Cuando el admin elige una fuente en el dropdown de Quill, se guarda como
   <span class="ql-font-X">texto</span>. Estas reglas hacen que la fuente
   se aplique también en el render público (no solo en el editor).

   Las @font-face / @import de Google Fonts deben cargarse en el <head>
   de la web pública para que los visitantes externos vean la fuente
   correcta. El @import se añade en includes/web/head.php (o donde toque).
*/
.ql-font-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
.ql-font-playfair  { font-family: 'Playfair Display', Georgia, serif; }
.ql-font-lora      { font-family: 'Lora', Georgia, serif; }
.ql-font-italiana  { font-family: 'Italiana', Georgia, serif; }
.ql-font-inter     { font-family: 'Inter', system-ui, sans-serif; }
.ql-font-system    { font-family: system-ui, -apple-system, sans-serif; }

/* Tamaños de Quill — render público.
   Quill aplica estas clases cuando el admin elige "Small", "Large" o "Huge"
   en el dropdown Size del toolbar. Sin estas reglas el tamaño se pierde
   en la web pública (solo se aplica dentro del editor). */
.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em;  line-height: 1.1; }

/* ══════════════════════════════════════════════════════════════════════════
   ia 06/05/2026 — CARRUSEL DE GALERÍA (.cra-galeria-carrusel)
   El bloque galeria.php pinta este HTML cuando una sección tiene
   presentacion='carrusel'. El JS (cra-galeria-carrusel.js) rellena los
   huecos en la pista. Hay 2 disposiciones (una/multi) y 3 modos de
   rotación (a_la_vez / escalonado / cinta).
   ══════════════════════════════════════════════════════════════════════════ */

.cra-galeria-carrusel {
    position: relative;
    width: 100%;
}

/* Layout "una": un solo hueco grande. */
.cra-galeria-carrusel--una .cra-galeria-carrusel__pista {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}
.cra-galeria-carrusel--una .cra-galeria-carrusel__hueco {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* Layout "multi": grid responsive (4/3/1 columnas según breakpoint). */
.cra-galeria-carrusel--multi .cra-galeria-carrusel__pista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3, 1rem);
}
@media (max-width: 900px) {
    .cra-galeria-carrusel--multi .cra-galeria-carrusel__pista {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .cra-galeria-carrusel--multi .cra-galeria-carrusel__pista {
        grid-template-columns: repeat(1, 1fr);
    }
}

.cra-galeria-carrusel--multi .cra-galeria-carrusel__hueco {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-crema-oscuro, #efe9d9);
}

/* Capas A/B absolutas para hacer cross-fade dentro de cada hueco */
.cra-galeria-carrusel__capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--cra-galc-duracion, 600ms) ease;
    will-change: opacity;
    cursor: zoom-in;
}
.cra-galeria-carrusel__capa.is-activa {
    opacity: 1;
}

/* ───── Modo "cinta": pista horizontal animada en bucle ─────
   Anula la disposición en N columnas y deja una sola fila lateral. */
.cra-galeria-carrusel--modo-cinta .cra-galeria-carrusel__pista {
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden;
    width: 100%;
    border-radius: 6px;
}
.cra-galeria-carrusel__tira {
    display: flex;
    gap: var(--sp-3, 1rem);
    width: max-content;
    animation-name: cra-galc-cinta-mov;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.cra-galeria-carrusel__tira-img {
    height: 240px;
    width: auto;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: zoom-in;
}
@media (max-width: 600px) {
    .cra-galeria-carrusel__tira-img {
        height: 180px;
    }
}
@keyframes cra-galc-cinta-mov {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Reducir movimiento del sistema operativo: nada de animaciones */
@media (prefers-reduced-motion: reduce) {
    .cra-galeria-carrusel__capa,
    .cra-galeria-carrusel__tira {
        animation: none !important;
        transition: none !important;
    }
    .cra-galeria-carrusel__tira {
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ja 09/05/2026 — TRANSICIONES NUEVAS PARA EL CARRUSEL DE GALERÍA
   ----------------------------------------------------------------
   Soporte CSS para las transiciones que el JS (cra-galeria-carrusel.js v2)
   monta dinámicamente en cada hueco:
     · ninguna   — cambio instantáneo, sin animación
     · persiana  — 5 franjas horizontales que se voltean
     · cubo      — rotación 3D sobre el eje vertical (solo layout=una)
   El cross-fade ("fade") sigue usando las reglas base de .cra-galeria-carrusel__capa.
   ══════════════════════════════════════════════════════════════════════════ */

/* Estructura 3D para los huecos cuando la transición es cubo o
   aleatoria-en-layout-una. El JS añade la clase --3d. */
.cra-galeria-carrusel__hueco--3d {
    perspective: 1200px;
}
.cra-galeria-carrusel__stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform var(--cra-galc-duracion, 600ms) cubic-bezier(0.6, 0, 0.4, 1);
}

/* ── NINGUNA (cambio instantáneo) ─────────────────────────────────── */
.cra-galeria-carrusel[data-tr-actual="ninguna"] .cra-galeria-carrusel__capa {
    transition: none !important;
}

/* ── PERSIANA (5 franjas horizontales que se voltean) ────────────── */
/* Capa de persiana inyectada por el JS dentro del hueco (o del stage
   si el hueco usa estructura 3D) durante la transición. */
.cra-galc-persiana {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    pointer-events: none;
    z-index: 5;
}
.cra-galc-persiana__franja {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.cra-galc-persiana__franja-inner {
    position: absolute;
    left: 0;
    right: 0;
    height: 500%;
    background-size: 100% 100%;
    transform: rotateX(-90deg);
    transform-origin: center top;
    transition: transform var(--cra-galc-duracion, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}
.cra-galc-persiana__franja:nth-child(1) .cra-galc-persiana__franja-inner { top: 0; }
.cra-galc-persiana__franja:nth-child(2) .cra-galc-persiana__franja-inner { top: -100%; }
.cra-galc-persiana__franja:nth-child(3) .cra-galc-persiana__franja-inner { top: -200%; }
.cra-galc-persiana__franja:nth-child(4) .cra-galc-persiana__franja-inner { top: -300%; }
.cra-galc-persiana__franja:nth-child(5) .cra-galc-persiana__franja-inner { top: -400%; }
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja-inner {
    transform: rotateX(0deg);
}
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja:nth-child(1) .cra-galc-persiana__franja-inner { transition-delay: 0ms; }
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja:nth-child(2) .cra-galc-persiana__franja-inner { transition-delay: 60ms; }
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja:nth-child(3) .cra-galc-persiana__franja-inner { transition-delay: 120ms; }
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja:nth-child(4) .cra-galc-persiana__franja-inner { transition-delay: 180ms; }
.cra-galc-persiana.is-abriendo .cra-galc-persiana__franja:nth-child(5) .cra-galc-persiana__franja-inner { transition-delay: 240ms; }

/* ── CUBO 3D (gira sobre el eje vertical) ─────────────────────────
   Se aplica solo en huecos con clase --3d. La distancia del cubo
   (--cra-galc-cubo-z) la fija el JS midiendo el ancho real del hueco.
   Las dos capas A/B son las dos caras del cubo. */
.cra-galeria-carrusel__hueco--3d .cra-galeria-carrusel__capa {
    backface-visibility: hidden;
    transition: opacity 0ms;
    opacity: 1; /* en cubo ambas caras deben ser visibles durante el giro */
}
.cra-galeria-carrusel__hueco--3d .cra-galeria-carrusel__capa--a {
    transform: translateZ(var(--cra-galc-cubo-z, 400px));
}
.cra-galeria-carrusel__hueco--3d .cra-galeria-carrusel__capa--b {
    transform: rotateY(90deg) translateZ(var(--cra-galc-cubo-z, 400px));
}
.cra-galeria-carrusel__hueco--3d[data-cara="a"] .cra-galeria-carrusel__stage {
    transform: translateZ(calc(var(--cra-galc-cubo-z, 400px) * -1)) rotateY(0deg);
}
.cra-galeria-carrusel__hueco--3d[data-cara="b"] .cra-galeria-carrusel__stage {
    transform: translateZ(calc(var(--cra-galc-cubo-z, 400px) * -1)) rotateY(-90deg);
}

/* En modo cubo (sin importar la capa), las imágenes deben estar siempre
   visibles para que el efecto se perciba durante el giro del stage. */
.cra-galeria-carrusel[data-tr-actual="cubo"] .cra-galeria-carrusel__hueco--3d .cra-galeria-carrusel__capa {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   jb 09/05/2026 — KEN BURNS PARA EL CARRUSEL DE GALERÍA
   Capa de movimiento sutil sobre la foto que está visible (zoom y
   desplazamiento lento). Solo se aplica cuando el root tiene la clase
   .is-kenburns. La animación dura todo el intervalo del carrusel para
   que termine cuando entra la siguiente foto.
   No se aplica en estructura 3D (cubo o aleatoria-en-una) por
   incompatibilidad con los transforms del cubo.
   ══════════════════════════════════════════════════════════════════════════ */
.cra-galeria-carrusel.is-kenburns:not([data-tr-actual="cubo"]) .cra-galeria-carrusel__capa.is-activa {
    animation: cra-galc-kenburns var(--cra-galc-intervalo, 5000ms) ease-out both;
}
@keyframes cra-galc-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(var(--cra-galc-kb-zoom, 1.06)) translate(-2%, -1.5%); }
}
/* Nota: la animación usa transform; al rotar de capa A a B (cross-fade),
   la capa que entra recibe is-activa "limpia" y la animación arranca
   desde cero. La capa que sale pierde is-activa y deja de animarse. */

/* ══════════════════════════════════════════════════════════════════════════
   jd 09/05/2026 — TRANSICIONES VISTOSAS PARA EL CARRUSEL DE GALERÍA
   ──────────────────────────────────────────────────────────────────
   Mosaico ondulado, Iris circular y Cortina desde el centro. El JS
   monta una capa overlay temporal sobre el hueco con la nueva foto,
   anima, y al terminar las capas A/B se intercambian normalmente.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── MOSAICO ONDULADO ──────────────────────────────────────────
   Grid de 8x5 celdas con porciones de la foto. Cada celda hace
   scale-in + fade-in; el JS asigna delay/duración inline para
   formar la onda diagonal. */
.cra-galc-mosaico__celda {
    background-repeat: no-repeat;
    transform: scale(0.3);
    opacity: 0;
    transition-property: transform, opacity;
    transition-timing-function: ease-out;
}
.cra-galc-mosaico.is-animando .cra-galc-mosaico__celda {
    transform: scale(1);
    opacity: 1;
}

/* ── IRIS CIRCULAR ─────────────────────────────────────────────
   La nueva imagen aparece dentro de un círculo que crece desde
   el centro. clip-path:circle(). */
.cra-galc-iris__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path var(--cra-galc-duracion, 600ms) ease-out;
}
.cra-galc-iris.is-animando .cra-galc-iris__img {
    /* 75% para sobrecubrir un rectángulo (la diagonal mide ~71% del lado) */
    clip-path: circle(75% at 50% 50%);
}

/* ── CORTINA DESDE EL CENTRO ───────────────────────────────────
   Franja vertical que se ensancha desde el centro. clip-path:inset(). */
.cra-galc-cortina__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 50% 0 50%);
    transition: clip-path var(--cra-galc-duracion, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.cra-galc-cortina.is-animando .cra-galc-cortina__img {
    clip-path: inset(0 0 0 0);
}

/* ── DESLIZAR (jj 09/05/2026) ──────────────────────────────────
   Overlay con dos imgs: la vieja sale por la izquierda (translateX
   0 → -100%), la nueva entra por la derecha (translateX 100% → 0). */
.cra-galc-slide__sale,
.cra-galc-slide__entra {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cra-galc-duracion, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.cra-galc-slide__sale  { transform: translateX(0); }
.cra-galc-slide__entra { transform: translateX(100%); }
.cra-galc-slide.is-animando .cra-galc-slide__sale  { transform: translateX(-100%); }
.cra-galc-slide.is-animando .cra-galc-slide__entra { transform: translateX(0); }

/* ── ZOOM (jj 09/05/2026) ──────────────────────────────────────
   La vieja se aleja (scale 1 → 0.7) con fade-out, la nueva se
   acerca (scale 1.3 → 1) con fade-in. Cross-zoom. */
.cra-galc-zoom__sale,
.cra-galc-zoom__entra {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cra-galc-duracion, 600ms) ease-in-out,
                opacity   var(--cra-galc-duracion, 600ms) ease-in-out;
}
.cra-galc-zoom__sale  { transform: scale(1);   opacity: 1; }
.cra-galc-zoom__entra { transform: scale(1.3); opacity: 0; }
.cra-galc-zoom.is-animando .cra-galc-zoom__sale  { transform: scale(0.7); opacity: 0; }
.cra-galc-zoom.is-animando .cra-galc-zoom__entra { transform: scale(1);   opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
 * id 06/05/2026 — Sistema centralizado de iconografía decorativa.
 *
 * Helper PHP: includes/web/Iconos.php (Iconos::render).
 * Ajuste:     `iconos.modo` (ámbito 'web') con valores
 *             'actuales' | 'lucide_bn' | 'sin_iconos'.
 *
 * El helper genera <span class="cra-icono cra-icono--MODO claseExtra">.
 * La claseExtra (tabs__icono, comodidad__icono, destino__icono,
 * servicio__icono…) sigue dictando layout/tamaño/color del bloque.
 * Estas reglas globales sólo aportan defaults sensatos para que el
 * SVG herede color y tamaño del contenedor, y para que los emojis
 * mantengan su color nativo aunque el bloque tinte el contenedor.
 * ────────────────────────────────────────────────────────────────────────── */

.cra-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Modo Lucide B/N: el SVG hereda font-size del contenedor (1em) y
 * adopta currentColor para fill/stroke. Cualquier bloque que ya
 * defina un font-size en su contenedor (.tabs__label, .comodidad__icono,
 * .servicio__icono, .destino__icono…) verá el SVG escalar con él. */
.cra-icono--lucide svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: none;
    stroke: currentColor;
}

/* Modo emoji: deshacemos cualquier color heredado por si el bloque
 * pinta el contenedor de un color sólido (los emojis tienen color
 * propio y no deben recolorearse). */
.cra-icono--emoji {
    color: initial;
}