/* Portadas alternativas de la home (editorial, dividido, servicios, campaña). El tono (estación) cambia el velo, el acento y el color del panel. */
.hx { --velo: 18, 10, 6; --acc: #E9B9A1; --panel: #2B2A1F; position: relative; min-height: 100svh; display: grid; align-items: end; padding-block: 112px 56px; isolation: isolate; background: #1a100b; overflow: hidden; color: #fff; }
.hx[data-tono="primavera"] { --velo: 16, 34, 20; --acc: #CFE3B6; --panel: #1F3324; }
.hx[data-tono="verano"] { --velo: 56, 28, 8; --acc: #FFD59A; --panel: #4A2E17; }
.hx[data-tono="otono"] { --velo: 46, 22, 10; --acc: #E7A36B; --panel: #4A2415; }
.hx[data-tono="invierno"] { --velo: 12, 22, 34; --acc: #BFD4E6; --panel: #17283A; }
.hx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hx-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--velo), .66) 0%, rgba(var(--velo), .3) 26%, rgba(var(--velo), .42) 58%, rgba(var(--velo), .9) 100%); }
.hx-in { position: relative; display: grid; gap: clamp(24px, 4vw, 56px); }
.hx .eyebrow { color: var(--acc); margin: 0 0 clamp(14px, 2vw, 22px); }
.hx h1 { margin: 0; font: 300 clamp(2rem, 1.2rem + 2.6vw, 3.9rem)/1.08 var(--sans); letter-spacing: -.02em; max-width: 16em; text-wrap: balance; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .35); }
.hx h1 .hb { font-weight: 400; } .hx h1 .hy { font: italic 300 1em var(--serif); color: var(--acc); }
.hx .lead { margin: clamp(16px, 2vw, 26px) 0 0; max-width: 46ch; color: rgba(255, 255, 255, .88); font: 300 var(--t-body, 1.05rem)/1.55 var(--sans); }
.hx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(22px, 3vw, 38px); }
.hx-link { background: none; border: 0; padding: 0; color: #fff; font: 400 1rem var(--sans); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--acc); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.hx-link:hover { color: var(--acc); }

/* Editorial */
.hx-editorial .hx-copy { max-width: 62rem; padding-bottom: 8px; }
.hx-editorial h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 4.4rem); }

/* Dividido */
.hx-dividido { background: var(--panel); align-items: center; padding-block: 120px 60px; }
.hx-dividido .hx-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.hx-dividido h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.7rem); }
.hx-arco { margin: 0; justify-self: end; width: min(100%, 520px); aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); }
.hx-arco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-areas { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hx-areas a { display: inline-flex; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; text-decoration: none; font: 400 .9rem var(--sans); }
.hx-areas a:hover { border-color: var(--acc); color: var(--acc); }

/* Servicios */
.hx-servicios .hx-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.hx-servicios h1 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem); }
.hx-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-rejilla a { display: grid; gap: 2px; padding: 8px 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); color: #fff; text-decoration: none; transition: transform .25s ease, background .25s ease; }
.hx-rejilla a:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .18); }
.hx-rejilla img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 8px; }
.hx-rejilla b { font: 500 .92rem/1.25 var(--sans); padding: 0 4px; } .hx-rejilla small { font: 400 .74rem var(--sans); color: var(--acc); padding: 0 4px; }

/* Campaña */
.hx-campana .hx-copy { max-width: 60rem; }
.hx-valor { margin: 0; font: 300 clamp(3.4rem, 1.8rem + 7vw, 7.5rem)/.95 var(--serif); letter-spacing: -.035em; color: var(--acc); }
.hx-campana h1 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); margin-top: 8px; font-weight: 300; }
.hx-campana .lead b { font-weight: 400; color: #fff; }

@media (max-width: 899px) {
  /* Abajo se deja sitio al botón flotante de accesos rápidos (calendario, ofertas y búsqueda) para que no pise los botones de la portada */
  .hx, .hx-dividido { padding-block: 100px calc(128px + env(safe-area-inset-bottom, 0px)); }
  .hx-dividido .hx-in, .hx-servicios .hx-in { grid-template-columns: 1fr; }
  .hx-arco { justify-self: start; width: min(100%, 380px); order: -1; }
  .hx-dividido { align-items: start; }
  .hx-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hx-rejilla a { transition: none; } }
@media (min-width: 900px) { .hx-servicios { padding-bottom: 150px; } .hx-campana, .hx-editorial { padding-bottom: 64px; } }

/* Panorámica: foto a pantalla completa; titular y botón arriba a la izquierda; texto y áreas abajo a la derecha */
.hx-claro { align-items: stretch; padding-block: 156px 136px; }
.hx-claro .hx-velo { background: linear-gradient(180deg, rgba(var(--velo), .55) 0%, rgba(var(--velo), .34) 30%, rgba(var(--velo), .4) 58%, rgba(var(--velo), .82) 100%); }
.hx-claro .hx-bg { z-index: auto; }
.hx-claro .hx-in { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: calc(100svh - 292px); }
.hx-claro .eyebrow { margin-bottom: 14px; font-size: .8rem; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.hx-claro .hx-tit { margin: 0; font-family: var(--sans); color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .35); text-wrap: balance; font-weight: 300; font-size: clamp(calc(2.1rem + 5px), calc(1.1rem + 3vw + 5px), calc(3.9rem + 5px)); line-height: 1.06; max-width: 10.5em; }
.hx-claro .hx-btns { margin-top: clamp(18px, 2.4vw, 28px); }
.hx-apila { display: grid; } .hx-apila > .hx-sl { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; align-self: start; }
.hx-apila > .hx-sl.on { opacity: 1; visibility: visible; transition: opacity .45s ease .3s, visibility 0s linear .3s; }
.hx-claro .hx-tit .hb { font-weight: 400; } .hx-claro .hx-tit .hy { font-family: var(--sans); font-style: normal; font-weight: 400; color: var(--acc); }
.hx-claro .hx-pie .hx-apila > .hx-sl { align-self: end; }
.hx-tag { font: 400 .84rem var(--sans); color: #fff; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); cursor: pointer; transition: background .25s ease, color .25s ease; }
.hx-tag:hover { background: rgba(255, 255, 255, .26); } .hx-tag.on { background: #fff; color: #2B2A1F; border-color: #fff; }
.hx-claro .hero-notch { display: none !important; }
.hx-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hx-slides { position: absolute; inset: 0; z-index: -2; }
.hx-slides .hx-slide { opacity: 0; transition: opacity 1.1s ease; z-index: auto; }
.hx-slides .hx-slide.on, .hx-slides .hx-slide:only-child { opacity: 1; }
.hx-ctrl { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hx-fl { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); color: #fff; backdrop-filter: blur(8px); cursor: pointer; padding: 0; transition: background .25s ease; }
.hx-fl:hover { background: rgba(255, 255, 255, .32); }
.hx-fl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-pts { display: flex; gap: 6px; } .hx-pts i { width: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); transition: width .35s ease, background .35s ease; } .hx-pts i.on { width: 34px; background: #fff; }
.hx-pie { align-self: flex-end; width: min(100%, 480px); display: grid; gap: 18px; }
.hx-pie .lead { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.hx-pie .hx-areas { margin: 0; }
.hx-pie .hx-areas a { padding: 8px 16px; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); backdrop-filter: blur(8px); font-size: .84rem; }
@media (max-width: 899px) {
  .hx-claro { padding-block: 136px calc(124px + env(safe-area-inset-bottom, 0px)); }
  /* Titular y pie juntos y alineados abajo (hueco central de unos 60 px); arriba queda libre el espacio bajo el logo */
  .hx-claro .hx-in { min-height: calc(100svh - 266px); justify-content: flex-end; gap: 60px; }
  .hx-claro .eyebrow { font-size: .66rem; letter-spacing: .12em; margin-bottom: 10px; }
  .hx-fila { flex-direction: column-reverse; align-items: stretch; gap: 22px; }
  .hx-ctrl { justify-content: flex-start; }
  .hx-pie { align-self: stretch; width: 100%; }
}

/* Vídeo de fondo opcional (se coloca sobre la foto, que queda debajo mientras carga) */
.hx-vid { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.hx-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.hx-vid video.on { opacity: 1; }
.hx-arco { position: relative; } .hx-arco .hx-vid { z-index: 1; }

/* Joroba del logo en las portadas con imagen: se recorta en la propia imagen (sin escalón y con el mismo fondo vivo de la página) en vez de tapar con un color liso. */
@media (min-width: 900px) {
  .hx:not(.hx-dividido) { background: transparent; }
  .hx:not(.hx-dividido) .hx-bg, .hx:not(.hx-dividido) .hx-velo, .hx:not(.hx-dividido) .hx-vid {
    -webkit-mask: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124C44 124 62 108 88 78C110 52 128 22 160 22C192 22 210 52 232 78C258 108 276 124 320 124V124H0Z'/%3E%3C/svg%3E") no-repeat right 12px bottom 0 / 320px 124px;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124C44 124 62 108 88 78C110 52 128 22 160 22C192 22 210 52 232 78C258 108 276 124 320 124V124H0Z'/%3E%3C/svg%3E") no-repeat right 12px bottom 0 / 320px 124px;
    mask-composite: exclude;
  }
  .hx:not(.hx-dividido) .hero-notch > svg { display: none; }
}

/* Portada Black Friday (home): el desarrollo de idea de la campaña. Letras en diagonal con luz dorada (bf-letras.css) y tarjeta de anuncio fija. */
.hx-bf { background: transparent; color: #1d1c18; min-height: 100svh; display: grid; place-items: center; padding-block: 120px; }
.hx-bf .bfl-wrap { background: #E4E3DD; overflow: hidden; }
.hx-bf .hx-in { display: grid; place-items: center; width: 100%; }
.hx-bf .bf-tarjeta { width: min(520px, 100%); border-radius: 28px; background: #f4f4f2; color: #1d1c18; text-align: center; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); animation: hero-sube .7s ease-out .15s both; }
.hx-bf .bf-t { margin: 0; padding: 34px 24px 0; font: 700 .8rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #5a5953; }
.hx-bf h1 { margin: 14px 0 0; padding: 0 30px; max-width: none; color: #1d1c18; text-shadow: none; text-wrap: balance; }
.hx-bf h1 b { display: block; font: 700 clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem)/1.1 var(--sans); letter-spacing: -.02em; }
.hx-bf .bf-x { margin: 14px 0 0; padding: 0 32px 32px; font: 400 1.12rem/1.4 var(--sans); color: #3a3a34; text-wrap: balance; }
.hx-bf .bf-hoy { display: block; margin-top: 8px; font-weight: 700; color: #1d1c18; }
.hx-bf .bf-bt { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(29, 28, 24, .28); }
.hx-bf .bf-bt > * { display: grid; place-items: center; min-height: 64px; padding: 10px 12px; border: 0; background: transparent; color: #3a3935; font: 400 1.1rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s ease; }
.hx-bf .bf-bt > * + * { border-left: 1px solid rgba(29, 28, 24, .28); font-weight: 700; color: #1d1c18; }
.hx-bf .bf-bt > *:hover, .hx-bf .bf-bt > *:focus-visible { background: rgba(29, 28, 24, .07); }
.hx-bf .bf-bt > *:focus-visible { outline: 2px solid #1d1c18; outline-offset: -2px; }
@media (max-width: 899px) { .hx-bf { padding-block: 104px 120px; } .hx-bf .bf-tarjeta { width: min(440px, 100%); } .hx-bf .bf-x { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .hx-bf .bf-tarjeta { animation: none; } }

.hx-bf .hx-in { position: relative; z-index: 1; }

/* Cabecera de la portada Black Friday: una pastilla negra lisa (sin degradado) con el logo y el menú en blanco; las letras empiezan debajo. */
.hx-bf .bfl-wrap::after { content: ""; position: absolute; left: 12px; right: 12px; top: 3px; height: 92px; border-radius: 999px; background: #17110E; pointer-events: none; }   /* centro = 49 px, el del logo y el menú */
body.hx-bf-pg .hdr .wrap.in { padding-inline: clamp(48px, 4.4vw, 72px); }
@media (max-width: 899px) { .hx-bf .bfl-wrap::after { left: 8px; right: 8px; top: 8px; height: 76px; } body.hx-bf-pg .hdr .wrap.in { padding-inline: 34px; } }
@media (min-width: 900px) and (max-width: 1199px) { .hx-bf .bfl-wrap::after { top: 2px; height: 88px; } }   /* centro = 46 px (logo más pequeño en iPad) */