/* ============================================================
   Sitioideal — Diseño «Hospedaje» (hoteles, moteles, cabañas, rentas vacacionales, tours y
   agencias de viajes) · paso 7.z.23
   Va encima de sitio.css. Como una postal de viaje: fondo de arena, un sol de atardecer a rayas,
   la foto de portada como postal con «Saludos desde» la ciudad, la estampilla con el logo y el
   matasellos, el nombre en letras de cartel de viaje (Josefin Sans en mayúsculas), los textos en
   Lora y los toques a mano en Sacramento. Las habitaciones llevan el precio en una etiqueta de
   llave de hotel, las fotos son estampillas con el borde dentado, los títulos llevan un sol en el
   horizonte y los testimonios son el reverso de una postal con su franja de correo aéreo.
   Los textos usan un tono tinta (el color principal oscurecido) para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/hospedaje/
   ============================================================ */

.diseno-hospedaje {
    --hs-titulo: "Josefin Sans", "Archivo", system-ui, sans-serif;
    --hs-letra: "Lora", Georgia, "Times New Roman", serif;
    --hs-mano: "Sacramento", "Lora", cursive;
    --hs-arena: color-mix(in srgb, var(--c-fondo) 45%, #F4EBDA);
    --hs-papel: color-mix(in srgb, var(--c-fondo) 40%, #FFFDF8);
    --hs-alterna: color-mix(in srgb, var(--c-acento) 9%, #FAF4E8);
    --hs-tinta: color-mix(in srgb, var(--c-primario) 24%, #1B2A2F);
    --hs-principal: var(--c-primario);
    --hs-sombra: 0 22px 40px -26px rgba(45, 35, 20, .5), 0 1px 3px rgba(45, 35, 20, .08);
    --hs-borde: color-mix(in srgb, var(--hs-tinta) 10%, transparent);
    /* Franja de correo aéreo (sobres y postales) */
    --hs-correo: repeating-linear-gradient(-45deg, var(--c-primario) 0 14px, #fff 14px 21px, var(--c-acento) 21px 35px, #fff 35px 42px);

    /* Superficies (sitio.css) */
    --s-fondo: var(--hs-papel);
    --s-alterna: var(--hs-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-encabezado: #fff;
    --s-texto: var(--hs-tinta);
    --s-titulo: var(--hs-principal);
    --s-linea: var(--hs-borde);
    --s-linea-fuerte: color-mix(in srgb, var(--hs-tinta) 20%, transparent);

    background: var(--hs-papel);
    font-family: var(--hs-letra);
    font-size: 1.05rem;
}

/* El color principal para textos: nunca tan claro que no se lea sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-hospedaje {
        --hs-principal: oklch(from var(--c-primario) min(l, .5) c h);
        --hs-tinta: oklch(from color-mix(in srgb, var(--c-primario) 24%, #1B2A2F) min(l, .3) c h);
    }
}

/* Letras de cartel de viaje: Josefin Sans en mayúsculas y separadas */
.diseno-hospedaje h1,
.diseno-hospedaje h2,
.diseno-hospedaje h3,
.diseno-hospedaje h4,
.diseno-hospedaje .logo__nombre,
.diseno-hospedaje .especial__titulo,
.diseno-hospedaje .equipo__titulo,
.diseno-hospedaje .persona__nombre,
.diseno-hospedaje .promocion__titulo,
.diseno-hospedaje .servicio__nombre,
.diseno-hospedaje .sucursal__nombre,
.diseno-hospedaje .redes__titulo,
.diseno-hospedaje .menu a {
    font-family: var(--hs-titulo);
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .04em;
}
.diseno-hospedaje h1,
.diseno-hospedaje h2,
.diseno-hospedaje .logo__nombre { text-transform: uppercase; }

/* ---------- Encabezado ---------- */
.diseno-hospedaje .encabezado {
    border-bottom: 1px solid var(--s-linea);
    background: color-mix(in srgb, var(--hs-papel) 92%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
}
.diseno-hospedaje .logo__nombre { color: var(--hs-tinta); letter-spacing: .06em; }
.diseno-hospedaje .menu { column-gap: 22px; }
.diseno-hospedaje .menu a { color: var(--hs-tinta); font-size: .94rem; font-weight: 600; letter-spacing: .01em; }
.diseno-hospedaje .menu a:hover { color: var(--hs-principal); }

/* ---------- Botones ---------- */
.diseno-hospedaje .boton {
    border-radius: 6px;
    font-family: var(--hs-titulo);
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease;
}
.diseno-hospedaje .boton--principal {
    border: 2px solid transparent;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 14px 24px -14px color-mix(in srgb, var(--c-primario) 80%, #000);
}
.diseno-hospedaje .boton--secundario {
    border: 2px solid color-mix(in srgb, var(--hs-tinta) 70%, transparent);
    background: transparent;
    color: var(--hs-tinta);
}
.diseno-hospedaje .boton:hover { transform: translateY(-2px); }
.diseno-hospedaje .boton-chico { border-radius: 6px; font-family: var(--hs-titulo); font-weight: 700; letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) {
    .diseno-hospedaje .boton { transition: none; }
    .diseno-hospedaje .boton:hover { transform: none; }
}

/* ---------- Portada: la postal ---------- */
.hs-portada {
    position: relative;
    padding-block: clamp(46px, 7vw, 96px) clamp(64px, 8vw, 108px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--hs-arena), var(--hs-papel) 92%);
    color: var(--hs-tinta);
}

/* La franja de correo aéreo, abajo a lo ancho */
.hs-correo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
    background: var(--hs-correo);
    pointer-events: none;
}

.hs-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 46px;
    align-items: center;
}

@media (min-width: 900px) {
    .hs-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
}

/* El giro en una etiqueta de maleta (con su agujero) */
.hs-etiqueta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 0 0 22px;
    padding: 9px 18px 7px 34px;
    border-radius: 0 6px 6px 0;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-family: var(--hs-titulo);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}
.hs-etiqueta::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--hs-arena);
}
.hs-etiqueta .icono { flex: none; width: 18px; height: 18px; margin-top: -2px; }
.hs-etiqueta > span { overflow-wrap: anywhere; }

.hs-portada__nombre {
    margin: 0 0 16px;
    color: var(--hs-tinta);
    font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: .02em !important;
    overflow-wrap: anywhere;
}
.hs-portada__nombre--medio { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
.hs-portada__nombre--largo { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.3rem); }

.hs-portada__eslogan {
    max-width: 34ch;
    margin: 0 0 30px;
    font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem);
    font-style: italic;
    line-height: 1.5;
}

.hs-portada__botones { gap: 14px; }
.hs-portada__estado { margin-top: 26px; }
.diseno-hospedaje .estado-ahora--claro { border: 0; background: #fff; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5); }

.hs-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 520px);
    padding: 30px 26px 22px 8px;
}

/* El sol del atardecer, a rayas, detrás de la postal (solo adorno: pseudo-elemento) */
.hs-portada__visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-acento) 50%, transparent), color-mix(in srgb, var(--c-acento) 22%, transparent));
    translate: -46% -50%;
    -webkit-mask: linear-gradient(#000 50%, #0000 0 54%, #000 0 61%, #0000 0 65%, #000 0 71%, #0000 0 75%, #000 0 80%, #0000 0 84%, #000 0 88%, #0000 0);
    mask: linear-gradient(#000 50%, #0000 0 54%, #000 0 61%, #0000 0 65%, #000 0 71%, #0000 0 75%, #000 0 80%, #0000 0 84%, #000 0 88%, #0000 0);
    pointer-events: none;
}

.hs-postal {
    position: relative;
    z-index: 1;
    padding: 12px;
    background: #fff;
    rotate: -2.5deg;
    box-shadow: 0 34px 50px -30px rgba(45, 35, 20, .6), 0 2px 6px rgba(45, 35, 20, .12);
}

.hs-postal__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hs-arena);
}
.hs-postal__foto picture,
.hs-postal__foto picture img { width: 100%; height: 100%; }
.hs-postal__foto picture img { object-fit: cover; }
/* Sin foto: un paisaje de sol y mar con los colores del negocio */
.hs-paisaje {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-acento) 26%, #fff), color-mix(in srgb, var(--c-acento) 8%, #fff) 70%);
}
.hs-paisaje__sol {
    position: absolute;
    left: 58%;
    bottom: 30%;
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-acento);
    translate: -50% 50%;
}
.hs-paisaje__mar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    background: var(--c-primario);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V40H0Z'/%3E%3C/svg%3E") 0 0 / 120px 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 6Q15 0 30 6T60 6T90 6T120 6V40H0Z'/%3E%3C/svg%3E") 0 0 / 120px 100% repeat-x;
}

/* «Saludos desde Bahía de Kino» en una etiqueta de papel arriba a la izquierda (lejos de la
   estampilla): se lee igual sobre una foto clara que sobre una oscura */
.hs-saludos {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 170px);
    margin: 0;
    padding: 6px 14px 9px;
    border-radius: 3px;
    background: var(--hs-papel);
    color: var(--hs-tinta);
    line-height: 1;
    rotate: -2deg;
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .55);
}
.hs-saludos small {
    display: block;
    color: var(--hs-principal);
    font-family: var(--hs-mano);
    font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem);
    line-height: 1.05;
}
.hs-saludos strong {
    display: block;
    font-family: var(--hs-titulo);
    font-size: clamp(1.2rem, .95rem + .95vw, 1.6rem);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.08;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.hs-saludos--largo strong { font-size: clamp(1rem, .85rem + .7vw, 1.3rem); }

/* La estampilla con el logo (o la inicial): borde dentado con un fondo de círculos (round) */
.hs-estampilla {
    --r: 4px;
    position: absolute;
    z-index: 3;
    top: -22px;
    right: -18px;
    display: block;
    width: 100px;
    height: 120px;
    padding: 9px;
    background:
        radial-gradient(var(--r), #0000 97%, #fff) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
        linear-gradient(#fff 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
    rotate: 6deg;
    filter: drop-shadow(0 8px 9px rgba(45, 35, 20, .3));
}
.hs-estampilla__papel,
.hs-estampilla__dibujo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.hs-estampilla__dibujo {
    gap: 4px;
    padding: 6px 5px 5px;
    border: 1px solid color-mix(in srgb, var(--c-primario) 30%, transparent);
    background: color-mix(in srgb, var(--c-primario) 10%, #fff);
}
.hs-estampilla__icono { width: 62px; height: 62px; border-radius: 4px; object-fit: contain; }
.hs-estampilla small {
    color: var(--hs-tinta);
    font-family: var(--hs-titulo);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* El matasellos sobre la estampilla, con sus ondas hacia la foto */
.hs-matasellos {
    position: absolute;
    z-index: 4;
    top: 80px;
    right: 30px;
    width: 150px;
    height: 70px;
    overflow: visible;
    fill: none;
    stroke: var(--hs-tinta);
    stroke-width: 2;
    opacity: .55;
    rotate: -14deg;
    pointer-events: none;
}
.hs-matasellos text {
    fill: var(--hs-tinta);
    stroke: none;
    font-family: var(--hs-titulo);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.hs-matasellos__estrella { fill: var(--hs-tinta); stroke: none; }

@media (max-width: 599.98px) {
    .hs-portada__visual { width: min(100%, 380px); padding: 24px 16px 16px 4px; }
    .hs-postal { padding: 9px; }
    .hs-estampilla { --r: 3.5px; top: -18px; right: -12px; width: 76px; height: 92px; padding: 7px; }
    .hs-estampilla__icono { width: 46px; height: 46px; }
    .hs-estampilla small { font-size: .5rem; letter-spacing: .16em; }
    .hs-matasellos { top: 46px; right: 22px; width: 116px; height: 54px; }
    .hs-saludos { top: 9px; left: 9px; max-width: calc(100% - 118px); padding: 4px 11px 7px; }
    .hs-saludos small { font-size: 1.55rem; }
    .hs-saludos strong { font-size: 1.12rem; }
    .hs-saludos--largo strong { font-size: 1rem; }
}

/* ---------- Secciones ---------- */
.diseno-hospedaje .seccion { padding-block: clamp(58px, 7vw, 92px); }

.diseno-hospedaje .seccion h2 {
    color: var(--hs-tinta);
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    line-height: 1.1;
}
/* Un sol en el horizonte sobre cada título */
.diseno-hospedaje .seccion h2::before,
.hs-cabeza::before {
    content: "";
    display: block;
    width: 64px;
    height: 22px;
    margin-bottom: 12px;
    background: var(--c-acento);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 20h60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M23 20a9 9 0 0 1 18 0z'/%3E%3Cpath d='M32 8V4M40.5 11.5l2.8-2.8M23.5 11.5l-2.8-2.8M43.6 16.9l3.9-1M20.4 16.9l-3.9-1' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 22'%3E%3Cpath d='M2 20h60' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M23 20a9 9 0 0 1 18 0z'/%3E%3Cpath d='M32 8V4M40.5 11.5l2.8-2.8M23.5 11.5l-2.8-2.8M43.6 16.9l3.9-1M20.4 16.9l-3.9-1' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}

.hs-cabeza { margin-bottom: 26px; }
.hs-cabeza h2 { margin: 0 !important; }
/* En las secciones propias el sol va arriba de todo (sobre el antetítulo a mano) */
.diseno-hospedaje .hs-cabeza h2::before { content: none; }

.hs-antetitulo {
    margin: 0 0 10px;
    color: var(--hs-principal);
    font-family: var(--hs-mano);
    font-size: clamp(1.9rem, 1.6rem + .8vw, 2.4rem);
    line-height: 1.15;   /* Sacramento tiene colas largas: que no toquen el título */
}

/* ---------- Habitaciones, paquetes y tours ---------- */
.diseno-hospedaje .catalogo__indice a {
    border: 1.5px solid color-mix(in srgb, var(--hs-tinta) 30%, transparent);
    border-radius: 6px;
    background: #fff;
    color: var(--hs-tinta);
    font-family: var(--hs-titulo);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.diseno-hospedaje .catalogo__indice a:hover { background: var(--hs-arena); }

.hs-grupo + .hs-grupo { margin-top: 48px; }

.hs-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--hs-tinta);
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    letter-spacing: .08em !important;
    text-transform: uppercase;
}
.hs-grupo__nombre .icono { flex: none; width: 24px; height: 24px; color: var(--hs-principal); }
.hs-grupo__descripcion { max-width: 64ch; margin: 0 0 16px; font-style: italic; opacity: .85; }

.hs-cuartos {
    display: grid;
    gap: 24px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .hs-cuartos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .hs-cuartos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; }
}

.hs-cuarto {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hs-borde);
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--hs-sombra);
}
/* Recomendado: con la franja de correo aéreo arriba */
.hs-cuarto--destacado { border-color: color-mix(in srgb, var(--c-primario) 40%, transparent); }
.hs-cuarto--destacado::before {
    content: "";
    flex: none;
    height: 8px;
    background: var(--hs-correo);
}

.hs-cuarto__foto {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--hs-arena);
}
.hs-cuarto__foto img { width: 100%; height: 100%; object-fit: cover; }

.hs-cuarto__cuerpo { flex: 1; padding: 20px 22px 4px; }

.hs-cuarto__sello {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 12px 3px;
    border-radius: 4px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--hs-titulo);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hs-cuarto__sello .icono { width: 14px; height: 14px; margin-top: -2px; fill: currentColor; }

.hs-cuarto__nombre {
    margin: 0;
    color: var(--hs-tinta);
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: .06em !important;
    text-transform: uppercase;
}
.hs-cuarto__descripcion { margin: 8px 0 0; font-size: .98rem; line-height: 1.55; opacity: .86; }
.hs-cuarto__nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 3px 12px 3px 9px;
    border-radius: 999px;
    background: var(--hs-arena);
    color: var(--hs-tinta);
    font-size: .9rem;
    font-weight: 600;
}
.hs-cuarto__nota .icono { flex: none; width: 17px; height: 17px; color: var(--hs-principal); }
.hs-cuarto .ficha-ver { margin-top: 12px; }

.hs-cuarto__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 22px 0;
    padding: 14px 0 20px;
    border-top: 1px dashed var(--s-linea-fuerte);
}

/* El precio en una etiqueta de llave de hotel (con su agujero) */
.hs-llavero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 54px;
    margin: 0;
    padding: 7px 16px 6px 32px;
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--c-primario) 11%, #fff);
    color: var(--hs-tinta);
    line-height: 1.1;
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%);
}
.hs-llavero::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: #fff;
}
.hs-llavero small {
    font-family: var(--hs-titulo);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
}
.hs-llavero strong {
    color: var(--hs-principal);
    font-family: var(--hs-titulo);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.hs-llavero .hs-llavero__unidad {
    margin-top: 1px;
    font-family: var(--hs-letra);
    font-size: .84rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.hs-llavero .hs-llavero__sin { font-size: 1rem; white-space: normal; }

.hs-reservar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px 9px;
    border-radius: 6px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-family: var(--hs-titulo);
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--c-primario) 80%, #000);
}
.hs-reservar .icono { width: 17px; height: 17px; margin-top: -2px; }
.hs-reservar:hover { filter: brightness(1.08); }

/* ---------- Postales: las fotos como estampillas ---------- */
.hs-postales__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
    align-items: start;
    margin: 0;
    padding: 6px 4px;
    list-style: none;
}
@media (min-width: 700px) {
    .hs-postales__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
}
@media (min-width: 960px) {
    .hs-postales__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .hs-postales__lista { margin-top: 22px; }

.hs-estampa { rotate: -1.6deg; }
.hs-estampa:nth-child(2n) { rotate: 1.4deg; }
.hs-estampa:nth-child(3n) { rotate: -.6deg; }
.hs-estampa:nth-child(5n) { rotate: 2deg; }

.diseno-hospedaje .hs-estampa__enlace {
    --r: 4px;
    position: relative;
    display: block;
    padding: 11px;
    overflow: visible;
    border-radius: 0;
    background:
        radial-gradient(var(--r), #0000 97%, #fff) calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
        linear-gradient(#fff 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
    color: var(--hs-tinta);
    text-decoration: none;
    filter: drop-shadow(0 9px 10px rgba(45, 35, 20, .22));
}
.diseno-hospedaje .hs-estampa__enlace:focus-visible { outline: 3px solid var(--hs-principal); outline-offset: 3px; }
.hs-estampa__foto { position: relative; display: block; overflow: hidden; background: var(--hs-arena); }
.hs-estampa__pie {
    display: block;
    padding: 9px 2px 0;
    overflow: hidden;
    font-family: var(--hs-titulo);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Una de cada tres, con matasellos arriba a la derecha (abajo queda libre para la nota de IA) */
.hs-estampa--sellada .hs-estampa__enlace::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -8px;
    right: -14px;
    width: 92px;
    height: 46px;
    background: var(--hs-tinta);
    opacity: .5;
    rotate: -12deg;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 46' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='68' cy='23' r='20'/%3E%3Ccircle cx='68' cy='23' r='14.5'/%3E%3Cpath d='M2 13c5-4 10-4 15 0s10 4 15 0 10-4 15 0M2 23c5-4 10-4 15 0s10 4 15 0 10-4 15 0M2 33c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath d='m68 16 2 4.3 4.6.5-3.4 3.2 1 4.6-4.2-2.4-4.2 2.4 1-4.6-3.4-3.2 4.6-.5z' fill='black' stroke='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 46' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='68' cy='23' r='20'/%3E%3Ccircle cx='68' cy='23' r='14.5'/%3E%3Cpath d='M2 13c5-4 10-4 15 0s10 4 15 0 10-4 15 0M2 23c5-4 10-4 15 0s10 4 15 0 10-4 15 0M2 33c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath d='m68 16 2 4.3 4.6.5-3.4 3.2 1 4.6-4.2-2.4-4.2 2.4 1-4.6-3.4-3.2 4.6-.5z' fill='black' stroke='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}

@media (max-width: 599.98px) {
    .diseno-hospedaje .hs-estampa__enlace { --r: 3px; padding: 8px; }
    .hs-estampa__pie { padding-top: 7px; font-size: .68rem; letter-spacing: .06em; }
    .hs-estampa--sellada .hs-estampa__enlace::after { top: -6px; right: -10px; width: 70px; height: 35px; }
}

/* ---------- Testimonios: el reverso de una postal ---------- */
.diseno-hospedaje .testimonio {
    padding-top: 36px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    box-shadow: var(--hs-sombra);
}
.diseno-hospedaje .testimonio::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--hs-correo);
}
/* Las comillas en el cuadro de la estampilla (el texto le da la vuelta) */
.diseno-hospedaje .testimonio > .icono {
    top: 24px;
    right: 18px;
    width: 42px;
    height: 50px;
    padding: 10px 7px;
    border: 1.5px dashed currentColor;
    border-radius: 2px;
    color: var(--hs-tinta);
    opacity: .3;
}
.diseno-hospedaje .testimonio__texto { font-style: italic; }
.diseno-hospedaje .testimonio__texto::before { content: ""; float: right; width: 50px; height: 42px; }
.diseno-hospedaje .testimonio__autor strong { font-family: var(--hs-titulo); letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Lo demás: tarjetas blancas de esquinas poco redondas ---------- */
.diseno-hospedaje .promocion,
.diseno-hospedaje .pregunta,
.diseno-hospedaje .contacto__item,
.diseno-hospedaje .sucursal,
.diseno-hospedaje .especial__punto,
.diseno-hospedaje .persona,
.diseno-hospedaje .servicio { border-color: var(--hs-borde); border-radius: 6px; box-shadow: var(--hs-sombra); }
.diseno-hospedaje .promocion__foto { border-radius: 6px 6px 0 0; }
.diseno-hospedaje .testimonio__iniciales,
.diseno-hospedaje .contacto__icono,
.diseno-hospedaje .especial__marca,
.diseno-hospedaje .persona__foto--iniciales,
.diseno-hospedaje .pregunta__signo { background: var(--hs-arena); color: var(--hs-principal); }
.diseno-hospedaje .contacto__icono { border-radius: 6px; }
/* La foto de «Nosotros» como foto impresa, con su borde blanco */
.diseno-hospedaje .nosotros__foto img { border: 10px solid #fff; border-radius: 2px; box-shadow: var(--hs-sombra); rotate: 1.2deg; }
.diseno-hospedaje .nosotros__desde { border-radius: 6px; background: var(--hs-arena); color: var(--hs-tinta); }
.diseno-hospedaje .nosotros__desde strong,
.diseno-hospedaje .nosotros__desde .icono { color: var(--hs-principal); }
.diseno-hospedaje .galeria__ver-mas { border-radius: 6px; font-family: var(--hs-titulo); letter-spacing: .05em; }
.diseno-hospedaje .mapa { border: 8px solid #fff; border-radius: 4px; box-shadow: var(--hs-sombra); }
.diseno-hospedaje .horario__tabla { overflow: hidden; border-radius: 6px; background: #fff; box-shadow: var(--hs-sombra); }
.diseno-hospedaje .horario__tabla th,
.diseno-hospedaje .horario__tabla td { padding-inline: 20px; }
.diseno-hospedaje .horario__tabla tr:last-child th,
.diseno-hospedaje .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-hospedaje .horario__hoy th,
.diseno-hospedaje .horario__hoy td { background: var(--hs-arena); }
.diseno-hospedaje .horario__etiqueta { background: var(--c-primario); color: var(--c-sobre-primario); }

.diseno-hospedaje .pie { background: var(--hs-tinta); color: color-mix(in srgb, #fff 86%, transparent); }
.diseno-hospedaje .barra-acciones { background: color-mix(in srgb, var(--hs-papel) 95%, transparent); backdrop-filter: blur(10px); }
.diseno-hospedaje .barra-acciones__boton { font-family: var(--hs-titulo); letter-spacing: .03em; }
.diseno-hospedaje .barra-acciones__boton--principal { border-radius: 6px; font-weight: 700; }

/* ---------- Imagen generada con IA (7.j) ---------- */
.hs-postal__foto > .marca-ia--foto { bottom: 10px; }