/* Página de una categoría de experiencias.
   --cat lo define cada página con el color de su categoría.

   Criterio: esto es un catálogo, no una landing. El trabajo del diseño es que
   se escanee rápido y se distinga qué vale la pena, no impresionar. Por eso:
   jerarquía (el primer producto de cada categoría es el que recomendamos y se
   ve como tal), densidad (tres columnas donde caben) y cero animación en la
   lista — si el JS falla, un .reveal dejaría el catálogo invisible. */
:root{
  --xc-bg:#F4F1EC; --xc-bg2:#EDE9E2; --xc-ink:#1A1E2C; --xc-ink3:#363B4C;
  --xc-muted:#63697D; --xc-line:#DAD5CC; --xc-pad:clamp(20px,4vw,52px);
  --cat:#2F6D96;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Raleway',sans-serif;background:var(--xc-bg);color:var(--xc-ink);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

.xc-hero{background:var(--xc-ink);color:#fff;padding:clamp(22px,2.6vw,34px) var(--xc-pad) clamp(26px,3.2vw,40px)}
.xc-hero-in{max-width:1180px;margin:0 auto}
.xc-back{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:16px;transition:color .2s}
.xc-back:hover{color:#fff}
.xc-titulo{display:flex;align-items:center;gap:16px}
.xc-ico{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:color-mix(in srgb, var(--cat) 26%, transparent)}
.xc-ico svg{width:24px;height:24px;stroke:var(--cat);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xc-hero h1{font-family:'Raleway Display','Raleway',sans-serif;font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.xc-hero h1 em{font-style:normal;color:var(--cat)}
.xc-par{font-size:clamp(.98rem,1.2vw,1.12rem);color:rgba(255,255,255,.9);line-height:1.55;max-width:60ch;margin-top:10px}
/* Sube de .5 a .68 de opacidad: de 5,07:1 a 8,28:1 sobre el fondo oscuro.
   Ya pasaba AA; a este tamaño (.85rem) se leía justo. */
.xc-sub{font-size:.85rem;color:rgba(255,255,255,.68);line-height:1.6;max-width:66ch;margin-top:10px}

.xc-main{max-width:1180px;margin:0 auto;padding:clamp(26px,2.8vw,38px) var(--xc-pad) clamp(18px,2vw,28px)}

/* Tres columnas donde caben. Con doce productos, dos columnas eran seis filas
   y 3.600 px de scroll. */
.xc-list{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.xc-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.xc-list{grid-template-columns:repeat(3,1fr)}}

.xc-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--xc-line);border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.xc-item:hover,.xc-item:focus-visible{border-color:var(--cat);transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,30,44,.09)}
.xc-img{display:block;aspect-ratio:16/9;background:var(--xc-bg2);overflow:hidden}
.xc-img img{width:100%;height:100%;object-fit:cover;display:block}
.xc-img-vacia{display:grid;place-items:center;background:color-mix(in srgb, var(--cat) 12%, var(--xc-bg2))}
.xc-img-vacia svg{width:40px;height:40px;stroke:var(--cat);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.xc-txt{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.xc-txt b{font-size:1.02rem;font-weight:600;line-height:1.25;letter-spacing:-.008em}
.xc-d{font-size:.86rem;line-height:1.55;color:var(--xc-ink3)}

/* La llamada a la acción iba repetida en las doce tarjetas: doce veces la
   misma etiqueta en versalitas no informa de nada, y la tarjeta entera ya es
   un enlace. Se queda para lectores de pantalla y aparece al apuntar. */
.xc-cta{margin-top:auto;padding-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#245A80;opacity:0;transform:translateY(2px);transition:opacity .2s,transform .2s}
.xc-item:hover .xc-cta,.xc-item:focus-visible .xc-cta{opacity:1;transform:none}
@media(hover:none){.xc-cta{opacity:1;transform:none}}

/* En móvil, doce fotos a todo el ancho eran 5.600 px de scroll. El huésped
   que mira esto está de pie con el teléfono: lo que le sirve para elegir es
   la ficha, no una foto de catálogo. Miniatura al lado y texto al centro.
   El destacado conserva la foto grande: es el que recomendamos. */
@media(max-width:679px){
  .xc-item:not(.xc-item--destacado){flex-direction:row;align-items:stretch;min-height:106px}
  .xc-item:not(.xc-item--destacado) .xc-img{flex:0 0 108px;aspect-ratio:auto;position:relative}
  .xc-item:not(.xc-item--destacado) .xc-img img{position:absolute;inset:0}
  .xc-item:not(.xc-item--destacado) .xc-img-vacia svg{width:30px;height:30px}
  .xc-item:not(.xc-item--destacado) .xc-txt{flex:1 1 auto;justify-content:center;gap:4px;padding:12px 14px}
  .xc-item:not(.xc-item--destacado) .xc-txt b{font-size:.95rem}
  .xc-item:not(.xc-item--destacado) .xc-d{font-size:.81rem;line-height:1.45}
  .xc-item:not(.xc-item--destacado) .xc-cta{display:none}
  .xc-item--destacado .xc-img{aspect-ratio:16/9}
  .xc-list{gap:12px}
}

/* El primero de cada categoría es el que recomendamos: va a lo ancho, con la
   foto al lado del texto. El orden de MRH_CIV_ENTRADAS ya está elegido así. */
@media(min-width:680px){
  .xc-item--destacado{grid-column:1/-1;flex-direction:row;align-items:stretch;min-height:clamp(215px,19vw,280px)}
  .xc-item--destacado .xc-img{flex:0 0 46%;aspect-ratio:auto;position:relative}
  /* Fuera del flujo: si no, el alto propio de la foto de Civitatis (que viene
     en cualquier proporción) estira la tarjeta. Así el alto lo manda la
     tarjeta y object-fit recorta. */
  .xc-item--destacado .xc-img img{position:absolute;inset:0;width:100%;height:100%}
  .xc-item--destacado .xc-txt{flex:1 1 auto;justify-content:center;gap:9px;padding:clamp(20px,2.4vw,34px)}
  .xc-item--destacado .xc-txt b{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.2}
  .xc-item--destacado .xc-d{font-size:.98rem;line-height:1.6;max-width:52ch}
  .xc-item--destacado .xc-cta{margin-top:2px;opacity:1;transform:none}
}
@media(min-width:1040px){.xc-item--destacado .xc-img{flex-basis:40%}}

.xc-otras{margin-top:clamp(28px,3vw,42px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--xc-line)}
.xc-otras-t{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--xc-muted);margin-bottom:14px}
.xc-otras-g{display:flex;flex-wrap:wrap;gap:8px}
.xc-otras-g a{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--xc-line);border-radius:999px;padding:9px 17px 9px 12px;font-size:.87rem;font-weight:500;transition:border-color .2s,color .2s,transform .2s}
.xc-otras-g a:hover{border-color:var(--cat);color:var(--cat);transform:translateY(-1px)}
.xc-otras-g svg{width:17px;height:17px;stroke:var(--cat);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.xc-disc{margin-top:22px;font-size:.76rem;line-height:1.6;color:var(--xc-muted);max-width:70ch}
.xc-todas{margin-top:24px;text-align:center}
.xc-todas a{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--cat);border-bottom:1.5px solid color-mix(in srgb, var(--cat) 45%, transparent);padding-bottom:3px;transition:border-color .2s,color .2s}
.xc-todas a:hover{color:var(--xc-ink);border-bottom-color:var(--xc-ink)}