/* Tickets Costa del Sol · 24.9.0 · Rejilla de fichas que aprovecha el espacio disponible
   Se configura en Apariencia › Plantillas de página (por tipo de página y por tamaño de pantalla).
   - Columnas por pantalla: móvil (<600 px), tableta (600–1023), portátil (1024–1439) y escritorio (≥1440).
   - Si hay pocas fichas, se reparten el ancho (por defecto), se centran o quedan a la izquierda (como antes).
   - «auto-fit» elimina las columnas vacías: las fichas ya no se quedan en un lado con huecos a la derecha. */
body.tpl{--g-min:240px;--g-gap:20px;--g-max:420px}
body.tpl.g-size-small{--g-min:200px;--g-max:360px}
body.tpl.g-size-large{--g-min:300px;--g-max:520px}
body.tpl.g-gap-tight{--g-gap:12px}
body.tpl.g-gap-wide{--g-gap:30px}
body.tpl :is(.content-grid,.rel-product-grid,.cards){--g-tmin:min(100%,var(--g-min));display:grid!important;gap:var(--g-gap)!important;grid-template-columns:repeat(auto-fit,minmax(var(--g-tmin),1fr))!important;justify-content:stretch;align-items:stretch;width:100%;max-width:none}
body.tpl :is(.content-grid,.rel-product-grid,.cards)>*{min-width:0;width:auto;max-width:none}
/* Una sola ficha: ocupa el espacio pero sin estirarse a lo ancho de toda la página */
body.tpl :is(.content-grid,.rel-product-grid,.cards)>:only-child{justify-self:center;width:100%;max-width:min(100%,calc(var(--g-max) * 1.6))}
/* Centrar con ancho máximo */
body.tpl.g-fill-center :is(.content-grid,.rel-product-grid,.cards){grid-template-columns:repeat(auto-fit,minmax(var(--g-tmin),var(--g-tmax,var(--g-max))))!important;justify-content:center}
body.tpl.g-fill-center :is(.content-grid,.rel-product-grid,.cards)>:only-child{max-width:var(--g-max)}
/* Como antes: columnas fijas aunque queden vacías */
body.tpl.g-fill-left :is(.content-grid,.rel-product-grid,.cards){grid-template-columns:repeat(auto-fill,minmax(var(--g-tmin),1fr))!important}
body.tpl.g-fill-left :is(.content-grid,.rel-product-grid,.cards)>:only-child{justify-self:stretch;max-width:none}
/* Las tarjetas estiran su contenido para que todas las de una fila midan lo mismo */
body.tpl .content-grid>:is(.content-card,.plans-card,article){height:100%;box-sizing:border-box}
body.tpl .content-grid>.content-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
@media (max-width:599.98px){
body.tpl.g-m1 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 0 * var(--g-gap)) / 1 - .5px);--g-tmax:calc((100% - 0 * var(--g-gap)) / 1 - .5px)}
body.tpl.g-m2 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 1 * var(--g-gap)) / 2 - .5px);--g-tmax:calc((100% - 1 * var(--g-gap)) / 2 - .5px)}
}
@media (min-width:600px) and (max-width:1023.98px){
body.tpl.g-t1 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 0 * var(--g-gap)) / 1 - .5px);--g-tmax:calc((100% - 0 * var(--g-gap)) / 1 - .5px)}
body.tpl.g-t2 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 1 * var(--g-gap)) / 2 - .5px);--g-tmax:calc((100% - 1 * var(--g-gap)) / 2 - .5px)}
body.tpl.g-t3 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 2 * var(--g-gap)) / 3 - .5px);--g-tmax:calc((100% - 2 * var(--g-gap)) / 3 - .5px)}
}
@media (min-width:1024px) and (max-width:1439.98px){
body.tpl.g-l2 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 1 * var(--g-gap)) / 2 - .5px);--g-tmax:calc((100% - 1 * var(--g-gap)) / 2 - .5px)}
body.tpl.g-l3 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 2 * var(--g-gap)) / 3 - .5px);--g-tmax:calc((100% - 2 * var(--g-gap)) / 3 - .5px)}
body.tpl.g-l4 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 3 * var(--g-gap)) / 4 - .5px);--g-tmax:calc((100% - 3 * var(--g-gap)) / 4 - .5px)}
body.tpl.g-l5 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 4 * var(--g-gap)) / 5 - .5px);--g-tmax:calc((100% - 4 * var(--g-gap)) / 5 - .5px)}
}
@media (min-width:1440px){
body.tpl.g-d2 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 1 * var(--g-gap)) / 2 - .5px);--g-tmax:calc((100% - 1 * var(--g-gap)) / 2 - .5px)}
body.tpl.g-d3 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 2 * var(--g-gap)) / 3 - .5px);--g-tmax:calc((100% - 2 * var(--g-gap)) / 3 - .5px)}
body.tpl.g-d4 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 3 * var(--g-gap)) / 4 - .5px);--g-tmax:calc((100% - 3 * var(--g-gap)) / 4 - .5px)}
body.tpl.g-d5 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 4 * var(--g-gap)) / 5 - .5px);--g-tmax:calc((100% - 4 * var(--g-gap)) / 5 - .5px)}
body.tpl.g-d6 :is(.content-grid,.rel-product-grid,.cards){--g-tmin:calc((100% - 5 * var(--g-gap)) / 6 - .5px);--g-tmax:calc((100% - 5 * var(--g-gap)) / 6 - .5px)}
}
@media (max-width:599.98px){body.tpl:not(.g-m2) :is(.content-grid,.rel-product-grid,.cards){grid-template-columns:minmax(0,1fr)!important}body.tpl.g-m2{--g-gap:12px}body.tpl.g-m2 :is(.content-grid,.rel-product-grid,.cards)>*{padding:12px!important}body.tpl.g-m2 :is(.content-grid,.rel-product-grid,.cards) :is(h2,h3){font-size:1.02rem!important;line-height:1.25!important;overflow-wrap:anywhere;hyphens:auto}body.tpl.g-m2 :is(.content-grid,.rel-product-grid,.cards) p{font-size:.86rem}}
/* Localidades: mismas reglas de reparto */
body.tpl .locality-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important}
/* 24.10.0: crédito de imagen dentro de tarjetas enlazadas */
.media-credit.is-overlay{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;margin:0;padding:3px 7px;border-radius:6px;background:rgba(8,24,38,.62);color:#fff!important;font-size:.66rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* Datos propios «Más información» */
.cix-public{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin:0}
.cix-public>div{padding:12px 14px;border-radius:12px;background:#f3f7fb;border:1px solid #e3ebf3}
.cix-public dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#3b4f66;margin:0 0 3px}
.cix-public dd{margin:0;font-weight:600;color:#12324a;line-height:1.4}

/* ── 24.10.1 · Móvil ── */
/* Portada de la Home centrada (quedaba más estrecha por la derecha) */
html body .hero-wrap24>section.hero{width:100%!important;max-width:100%!important}
/* Huéspedes: la foto y su sombra se quedan en la cabecera; el resto de la página va sobre fondo liso legible */
.ph24.has-bg.guest-page>.ph24-bg{bottom:auto;height:min(100%,640px)}
.ph24.has-bg.guest-page>.ph24-bg .ph24-shade{background:linear-gradient(180deg,rgba(8,24,38,.62) 0%,rgba(8,24,38,.82) 45%,rgba(18,50,74,.96) 80%,#12324a 100%)}
.ph24.has-bg.guest-page .g16-hero .lead,.ph24.has-bg.guest-page .g16-hero p{color:#fff!important;opacity:1!important}
.ph24.has-bg.guest-page>.ph24-bg>.ph24-img{height:100%!important;max-height:none!important}
/* Localidades (móvil): la cabecera quedaba desplazada 16 px a la izquierda y con una franja blanca a la derecha */
@media (max-width:640px){main>.ph24.has-bg.locality-hero{margin-inline:0!important;width:100%!important;padding-inline:16px!important}}
/* ── 24.10.3 · Foto principal en todas las tarjetas pequeñas ── */
.content-card.has-media{display:flex;flex-direction:column;gap:6px}
.content-card>.card-media{order:-1;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--site-radius,16px) - 6px);margin:0 0 8px;background:#e8eef4}
.content-card>.card-media.is-empty{background:linear-gradient(135deg,#dfeaf3,#eef4f9)}
.compact-grid .content-card>.card-media{aspect-ratio:16/9}
.cards-compact .content-card>.card-media{aspect-ratio:16/9}