/* assets/css/colecciones.css — las colecciones de temporada.
 *
 * Los dos paneles del diseño aprobado: foto a sangre con velo, rótulo y
 * temporada arriba, titular en dos líneas con la segunda en el acento de la
 * colección, subtítulo, los destinos como fichas, la llamada, y al pie un
 * filete con la frase de cierre.
 *
 * Se usa en DOS sitios —el módulo de la portada y la cabecera de cada página
 * de colección— desde una sola fuente (assets/js/colecciones.js).
 *
 * Autocontenida: bebe de marca.css, no de los tokens locales de index.css,
 * porque la cargan páginas que no traen esa hoja.
 *
 * EL ACENTO ÁMBAR
 *
 * El coral es de la marca. El ámbar NO: la paleta no tiene ningún dorado y el
 * diseño de «Mercados Navideños» lo pide. Se define aquí, acotado a las
 * colecciones, y no se añade a marca.css: es un acento de TEMPORADA, no un
 * color corporativo nuevo. Si un día la marca adopta un dorado, este valor se
 * sustituye por el token y esta hoja no cambia en nada más.
 */

/* ══════════ Los nombres antiguos, atados a la marca ══════════
   Las reglas de los paneles vienen de index.css y consumen SUS nombres
   (`--serif`, `--mono`, `--white`, `--coral`, `--lime`…), que solo existen en
   esa hoja. Traerlas sin más dejaba las páginas de colección en serif del
   navegador y con los enlaces azules subrayados: los tokens no resolvían.
   Aquí se atan a los de marca.css con EXACTAMENTE el mismo valor que les da
   index.css, y acotados a estas clases — en la portada, donde index.css los
   define igual en `:root`, no cambia nada. */
.seasonal-inline,
.seasonal-feature,
.col-pagina {
  --serif: var(--font-brand);
  --mono: var(--font-brand);
  --white: var(--color-white);
  --ink: var(--color-brand-ink);
  --muted: var(--color-mudo);
  --line: var(--color-linea);
  --coral: var(--color-brand-coral);
  --lime: var(--color-brand-coral);
}

/* Y el mínimo que index.css da por hecho en la portada. Va atado a la clase
   del `body` de las páginas de colección para no tocar a nadie más: esta
   hoja también la carga la portada, que ya tiene el suyo. */
body.pagina-coleccion {
  margin: 0;
  background: var(--color-brand-cream);
  color: var(--color-brand-ink);
  font-family: var(--font-brand);
  -webkit-font-smoothing: antialiased;
}
body.pagina-coleccion a { color: inherit; text-decoration: none; }
.seasonal-feature a,
.seasonal-feature__copy a { text-decoration: none; }

/* ══════════ Los paneles ══════════
   Vienen TAL CUAL de assets/css/pages/index.css, donde eran de la portada y
   de nadie más. No se ha retocado ni un valor al traerlos: la portada tiene
   que seguir viéndose igual, y lo comprueban las capturas. */
.seasonal-inline{margin-top:90px;padding-top:72px;border-top:1px solid var(--line)}.seasonal-inline__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:32px}.seasonal-inline__heading h3{max-width:700px;margin:15px 0 0;font-family:var(--serif);font-size:clamp(38px,4.6vw,62px);font-weight:500;line-height:.98}.seasonal-inline__heading h3 em{color:var(--coral);font-style:normal}.seasonal-inline__heading p{max-width:365px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}.seasonal-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.seasonal-feature{position:relative;min-height:540px;overflow:hidden;color:var(--white)}.seasonal-feature>img,.seasonal-feature__veil{position:absolute;inset:0;width:100%;height:100%}.seasonal-feature>img{object-fit:cover}.seasonal-feature__veil{background:linear-gradient(90deg,rgba(0,27,53,.96),rgba(0,27,53,.58) 62%,rgba(0,27,53,.12)),linear-gradient(0deg,rgba(0,27,53,.85),transparent 60%)}.seasonal-feature--christmas .seasonal-feature__veil{background:linear-gradient(90deg,rgba(30,12,15,.96),rgba(45,18,22,.58) 62%,rgba(20,10,12,.12)),linear-gradient(0deg,rgba(28,10,13,.88),transparent 60%)}.seasonal-feature__index{position:absolute;z-index:2;top:24px;right:24px;color:rgba(255,255,255,.65);font-family:var(--mono);font-size:8px;text-transform:uppercase}.seasonal-feature__copy{position:relative;z-index:2;width:90%;padding:62px 35px 105px}.seasonal-feature__kicker{color:var(--lime);font-family:var(--mono);font-size:8px;text-transform:uppercase}.seasonal-feature--christmas .seasonal-feature__kicker{color:#efb36a}.seasonal-feature h3{margin:22px 0;font-family:var(--serif);font-size:clamp(48px,5vw,70px);font-weight:500;line-height:.88}.seasonal-feature h3 em{color:var(--lime);font-style:normal}.seasonal-feature--christmas h3 em{color:#efb36a}.seasonal-feature__copy p{max-width:390px;color:rgba(255,255,255,.68);font-size:12px;line-height:1.6}.seasonal-tags{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 24px}.seasonal-tags span,.seasonal-tags a{display:inline-flex;align-items:center;padding:7px 9px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-family:var(--mono);font-size:7px;text-transform:uppercase;color:inherit;text-decoration:none}.seasonal-tags a:hover{border-color:currentcolor;background:rgba(255,255,255,.12)}.seasonal-button{display:inline-flex;align-items:center;gap:16px;min-height:45px;padding:0 17px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:8px;text-transform:uppercase}.seasonal-feature--christmas .seasonal-button{background:#efb36a}.seasonal-feature__details{position:absolute;z-index:2;left:35px;right:25px;bottom:24px;padding-top:17px;border-top:1px solid rgba(255,255,255,.28)}.seasonal-feature__details strong{font-family:var(--serif);font-size:18px;font-weight:500}

@media (max-width: 760px) {
  .seasonal-inline{margin-top:64px;padding-top:54px}.seasonal-inline__heading{display:block}.seasonal-inline__heading p{margin-top:20px}.seasonal-stack{grid-template-columns:1fr}.seasonal-feature{min-height:570px}
}

/* ═══════════ La página de una colección ═══════════ */

.col-pagina { width: min(var(--content-width), calc(100% - 80px)); margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); }

.col-lista__cab { margin: clamp(38px, 5vw, 64px) 0 clamp(20px, 2.6vw, 32px); }
.col-lista__cab h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-brand-ink); }
.col-lista__nota { max-width: 62ch; margin: 10px 0 0; color: var(--color-mudo); font-size: 0.95rem; line-height: 1.55; }

.col-rejilla-guias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.col-guia { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-linea); overflow: hidden; }

.col-guia__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-brand-mist); }
.col-guia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-media); }
.col-guia__foto:hover img { transform: scale(1.03); }

/* El sello dice el estado ANTES de entrar. Va sobre la foto, no debajo del
   título, porque es lo primero que hay que saber de estas guías. */
.col-guia__sello {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 11px;
  border-radius: var(--radius-small);
  background: var(--color-brand-night);
  color: var(--color-white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.col-guia__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(14px, 1.6vw, 20px); }
.col-guia__lugar { margin: 0; color: var(--color-brand-coral); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.col-guia h3 { margin: 8px 0 0; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.col-guia h3 a { color: var(--color-brand-ink); text-decoration: none; }
.col-guia h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.col-guia__texto { margin: 10px 0 0; color: var(--color-mudo); font-size: 0.9rem; line-height: 1.5; }

.col-guia__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: auto 0 0; padding-top: 16px; }
.col-guia__precio { color: var(--color-brand-ink); font-size: 0.8rem; font-weight: 600; }
.col-guia__enlace { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--color-brand-coral); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.col-guia__enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .col-pagina { width: calc(100% - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .col-guia__foto img { transition: none; }
  .col-guia__foto:hover img { transform: none; }
}