/* ============================================================================
   blocks.css — constructor de la home (v3.26)
   Secciones a ancho completo con contenido centrado, hero slider, selectores
   (raíles) de músicos / grupos / empresas / eventos, barra de anuncio, banda
   final y los componentes heredados (banners, slider clásico).
   Todo usa las variables de marca de brand.css (temas claro / oscuro / clásico).
   ========================================================================== */

/* ------------------------------------------------------------ Accesibilidad */
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink-soft); color:var(--ivory); padding:10px 16px; border-radius:var(--radius); border:2px solid var(--accent-text); font-weight:600; transition:top .15s ease;}
.skip-link:focus{top:12px;}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.logo-img{height:34px; width:auto; display:block;}

/* ----------------------------------------------------------------- Secciones */
.hb-section{position:relative; background:transparent; color:var(--ivory);}
.hb-pad-none{padding-block:0;}
.hb-pad-s{padding-block:clamp(20px, 3vw, 36px);}
.hb-pad-m{padding-block:clamp(36px, 5vw, 64px);}
.hb-pad-l{padding-block:clamp(52px, 8vw, 104px);}

/* Tono forzado de una sección: redefine los colores localmente (banda clara u oscura
   dentro de cualquier tema). */
.hb-tone-dark{
  --ink:#121217; --ink-soft:#1C1C23; --ivory:#F4F2EE; --ivory-dim:#B8B3AA; --wood-line:rgba(244,242,238,0.13);
  --field-line:#76736B; --tint:rgba(244,242,238,0.06); --tint-2:rgba(244,242,238,0.11); --accent-text:#F29AAA;
  --gold:#E6B94A; --gold-fill:#E6B94A; --garnet:#C23A52; --garnet-bright:#A82F45; --on-garnet:#FFFFFF;
  --accent-soft:rgba(194,58,82,0.16); --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 10px 28px -10px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.35);
  background:var(--ink); color:var(--ivory); color-scheme:dark;
}
.hb-tone-light{
  --ink:#FAF7F2; --ink-soft:#FFFFFF; --ivory:#1A1612; --ivory-dim:#5E554C; --wood-line:rgba(26,22,18,0.11);
  --field-line:#9C9285; --tint:rgba(26,22,18,0.05); --tint-2:rgba(26,22,18,0.09); --accent-text:#A4243B;
  --gold:#8A5E00; --gold-fill:#D9A21B; --garnet:#A4243B; --garnet-bright:#861B2F; --on-garnet:#FFFFFF;
  --accent-soft:rgba(164,36,59,0.08); --shadow-sm:0 1px 2px rgba(26,22,18,0.06), 0 1px 3px rgba(26,22,18,0.05);
  --shadow-md:0 8px 24px -8px rgba(26,22,18,0.16), 0 2px 6px rgba(26,22,18,0.05);
  background:var(--ink); color:var(--ivory); color-scheme:light;
}

/* Rejilla de 12 columnas (col-md-N) */
.hb-row{display:flex; flex-wrap:wrap; margin:0 -14px;}
.hb-col{padding:0 14px; box-sizing:border-box; width:100%; margin-bottom:24px; min-width:0;}
.hb-col:last-child{margin-bottom:0;}
@media (min-width:768px){
  .hb-col{margin-bottom:0;}
  .col-md-1{width:8.3333%}  .col-md-2{width:16.6666%} .col-md-3{width:25%}
  .col-md-4{width:33.3333%} .col-md-5{width:41.6666%} .col-md-6{width:50%}
  .col-md-7{width:58.3333%} .col-md-8{width:66.6666%} .col-md-9{width:75%}
  .col-md-10{width:83.3333%} .col-md-11{width:91.6666%} .col-md-12{width:100%}
}
@media (min-width:768px) and (max-width:1000px){
  /* Filas de 3-4 tarjetas pequeñas: dos por línea en tablet */
  .col-md-3, .col-md-4{width:50%; margin-bottom:24px;}
}

/* ------------------------------------------------------ Bloques de contenido */
.hb-heading{font-family:var(--serif); font-size:clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight:var(--heading-weight); margin-bottom:8px;}
.hb-text{background:var(--ink-soft); border:1px solid var(--wood-line); border-radius:var(--radius-lg); padding:clamp(20px, 3vw, 30px); height:100%; box-shadow:var(--shadow-sm);}
.hb-text h3{font-family:var(--serif); font-size:1.15rem; font-weight:var(--heading-weight); letter-spacing:-.01em; margin-bottom:8px;}
.hb-text p{color:var(--ivory-dim); font-size:15px; line-height:1.65;}
.hb-image img{width:100%; border-radius:var(--radius-lg); display:block;}
.hb-lang-selector{font-size:14px; color:var(--ivory-dim);}
.hb-lang-selector a{color:inherit;}

/* Llamada a la acción / banda final */
.hb-cta{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px 40px; background:var(--band-bg); color:var(--on-garnet); border-radius:var(--radius-lg); padding:clamp(28px, 5vw, 56px); position:relative; overflow:hidden;}
.hb-cta::before{content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 200deg at 92% 120%, rgba(255,255,255,0.07) 0 6deg, transparent 6deg 12deg); pointer-events:none;}
.hb-cta > *{position:relative;}
.hb-cta h3{font-family:var(--serif); font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight:var(--heading-weight); letter-spacing:var(--heading-track); line-height:1.12; max-width:20ch; text-wrap:balance;}
.hb-cta p{margin-top:10px; opacity:.92; max-width:52ch;}
.hb-cta-btn{background:#FFFFFF; color:#1A1612; border-color:transparent; padding:14px 28px; font-size:15px; font-weight:700; box-shadow:var(--shadow-md);}
.hb-cta-btn:hover{background:#F6EFE3; transform:translateY(-2px);}
.hb-section--band{background:var(--band-bg); color:var(--on-garnet);}
.hb-section--band .hb-cta{background:transparent; border-radius:0; padding:0;}
.hb-section--band .hb-cta::before{display:none;}
.hb-section--band::before{content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 200deg at 92% 130%, rgba(255,255,255,0.07) 0 6deg, transparent 6deg 12deg); pointer-events:none;}
.hb-section--band > .wrap{position:relative;}

/* Barra de anuncio (zona "top" o cualquier zona con ancho completo) */
.hb-announce{background:var(--garnet); color:var(--on-garnet); font-size:14px;}
.hb-announce-inner{display:flex; justify-content:center; align-items:center; gap:6px 18px; flex-wrap:wrap; padding-block:10px; text-align:center;}
.hb-announce p{margin:0; font-weight:500;}
.hb-announce-more{opacity:.9;}
.hb-announce-link{font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
.hb-announce-link:hover{text-decoration-thickness:2px;}

/* ----------------------------------------------- Selectores (raíles) de tarjetas */
.rail-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px 24px; margin-bottom:26px; flex-wrap:wrap;}
.rail-title{font-family:var(--serif); font-size:clamp(1.55rem, 1.1rem + 1.6vw, 2.25rem); font-weight:var(--heading-weight); letter-spacing:var(--heading-track); line-height:1.15;}
.rail-sub{color:var(--ivory-dim); margin-top:8px; max-width:62ch; font-size:1.02rem;}
.rail-head-actions{display:flex; align-items:center; gap:18px; margin-left:auto;}
.rail-all{font-weight:600; font-size:14.5px; color:var(--accent-text); white-space:nowrap;}
.rail-all:hover{text-decoration:underline; text-underline-offset:3px;}
.rail-ctrl{display:flex; gap:8px;}
.rail-ctrl[hidden]{display:none;}
.rail-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--field-line); background:var(--ink-soft); color:var(--ivory); font-size:22px; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; padding:0 0 3px; transition:background-color .15s ease, border-color .15s ease, opacity .15s ease;}
.rail-btn:hover:not(:disabled){background:var(--tint-2); border-color:var(--accent-text);}
.rail-btn:disabled{opacity:.35; cursor:default;}
@media (hover:none){ .rail-ctrl{display:none !important;} }

.rail-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--gutter)); padding:6px var(--gutter) 24px; scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.rail-track::-webkit-scrollbar{display:none;}
.rail-track:focus-visible{outline-offset:-2px; border-radius:var(--radius);}
.rail-item{flex:0 0 clamp(210px, 20vw, 268px); scroll-snap-align:start; min-width:0; display:flex;}
.rail-item .artist-card{width:100%;}
.rail-empty{color:var(--ivory-dim); padding:28px; text-align:center; border:1px dashed var(--field-line); border-radius:var(--radius-lg);}
.rail--grid .rail-track{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); overflow:visible; margin:0; padding:6px 0 0; gap:22px;}
.rail--grid .rail-item{flex:none;}
@media (max-width:640px){
  .rail-item{flex-basis:min(62vw, 256px);}
  .rail-track{gap:14px;}
  .rail--grid .rail-track{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
  .rail-head{margin-bottom:18px;}
}

/* Tarjetas: variantes */
.artist-photo.ph-g1{background:var(--hero-grad-1);}
.artist-photo.ph-g2{background:var(--hero-grad-2);}
.artist-photo.ph-g3{background:var(--hero-grad-3);}
.artist-photo--logo img{object-fit:contain; padding:14%; background:#FFFFFF;}
.artist-photo--event{aspect-ratio:16/10;}
.artist-photo--event::before{content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 200deg at 88% 130%, rgba(255,255,255,0.1) 0 6deg, transparent 6deg 12deg);}

/* ------------------------------------------------------------------ Hero slider */
.hs{
  --hs-h:520px; --hs-overlay:0.45;
  position:relative; z-index:3; color:#FFFFFF; background:var(--hero-grad-2);
}
.hs--h-compact{--hs-h:360px;}
.hs--h-normal{--hs-h:520px;}
.hs--h-tall{--hs-h:660px;}
.hs--h-full{--hs-h:calc(100vh - 68px); --hs-h:calc(100svh - 68px);}
@media (max-width:640px){
  .hs--h-compact{--hs-h:300px;}
  .hs--h-normal{--hs-h:440px;}
  .hs--h-tall{--hs-h:540px;}
  .hs--h-full{--hs-h:calc(100vh - 60px); --hs-h:calc(100svh - 60px);}
}
.hs--contained{border-radius:var(--radius-lg);}
.hb-section .hs--contained{margin-inline:0;}

/* Capa de fondos (recortada; el desplegable de lugares del buscador puede salir del hero) */
.hs-bgs{position:absolute; inset:0; overflow:hidden; border-radius:inherit;}
.hs-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease;}
.hs-bg.is-active{opacity:1;}
.hs-bg--g1{background-color:#5b1422; background-image:var(--hero-grad-1);}
.hs-bg--g2{background-color:#23201c; background-image:var(--hero-grad-2);}
.hs-bg--g3{background-color:#5c3f00; background-image:var(--hero-grad-3);}
/* Las diapositivas con imagen inline pisan el degradado: se conserva como respaldo de carga */
.hs-bg[style*="background-image"]{background-size:cover; background-position:center;}
/* Motivo de abanico + brillos (solo se ven sobre los degradados) */
.hs-bg--g1::before, .hs-bg--g2::before, .hs-bg--g3::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.20), transparent 38%),
    repeating-conic-gradient(from 195deg at 86% 118%, rgba(255,255,255,0.075) 0 5deg, transparent 5deg 10deg);
}
.hs-bg[style*="background-image"]::before{display:none;}
.hs-scrim{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,8,8,calc(var(--hs-overlay) * 0.9)) 0%, rgba(10,8,8,calc(var(--hs-overlay) * 0.45)) 55%, rgba(10,8,8,calc(var(--hs-overlay) * 0.15)) 100%),
    linear-gradient(0deg, rgba(10,8,8,calc(var(--hs-overlay) * 0.55)) 0%, transparent 38%);
}
.hs--align-center .hs-scrim{background:linear-gradient(0deg, rgba(10,8,8,calc(var(--hs-overlay) * 0.8)) 0%, rgba(10,8,8,calc(var(--hs-overlay) * 0.55)) 100%);}

.hs-body{position:relative; z-index:2; display:flex; flex-direction:column; min-height:var(--hs-h); padding-block:clamp(36px, 6vw, 80px) clamp(28px, 4vw, 48px);}
.hs--controls .hs-body{padding-bottom:clamp(56px, 6vw, 72px);}
.hs--search .hs-body{padding-bottom:clamp(64px, 7vw, 84px);}
.hs-copies{flex:1; display:grid; align-items:center;}
.hs-copy{
  grid-area:1 / 1; max-width:680px; opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}
.hs-copy.is-active{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
.hs--align-center .hs-copy{justify-self:center; text-align:center;}
.hs-title{font-family:var(--serif); font-size:clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem); font-weight:var(--heading-weight); line-height:1.04; letter-spacing:var(--heading-track); text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,0.18);}
.hs-text{margin-top:18px; font-size:clamp(1rem, .92rem + .45vw, 1.2rem); line-height:1.55; max-width:54ch; color:rgba(255,255,255,0.92);}
.hs--align-center .hs-text{margin-inline:auto;}
.hs-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding:14px 28px; border-radius:var(--radius-btn);
  background:#FFFFFF; color:#1A1612; font-weight:700; font-size:15px; box-shadow:0 10px 30px -10px rgba(0,0,0,0.45);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hs-btn:hover{transform:translateY(-2px); background:#F6EFE3; box-shadow:0 16px 34px -12px rgba(0,0,0,0.5);}
.hs-btn:focus-visible, .hs-arrow:focus-visible, .hs-dot:focus-visible, .hs-pause:focus-visible{outline:2px solid #fff; outline-offset:3px;}

/* Controles */
.hs-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.45); background:rgba(10,8,8,0.28); color:#fff; font-size:28px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 4px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .15s ease, transform .15s ease;
}
.hs-arrow:hover{background:rgba(10,8,8,0.5);}
.hs-prev{left:clamp(8px, 2vw, 28px);}
.hs-next{right:clamp(8px, 2vw, 28px);}
.hs-controls{position:absolute; left:0; right:0; bottom:18px; z-index:4; display:flex; justify-content:center; align-items:center; gap:14px; pointer-events:none;}
.hs-controls > *{pointer-events:auto;}
.hs-dots{display:flex; gap:8px; align-items:center;}
.hs-dot{position:relative; width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,0.5); border:0; padding:0; cursor:pointer; transition:width .25s ease, background-color .25s ease;}
.hs-dot::before{content:""; position:absolute; inset:-10px -4px;}
.hs-dot.is-active{width:30px; background:#fff;}
.hs-pause{width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:rgba(10,8,8,0.28); color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; letter-spacing:-1px;}
.hs-pause[hidden]{display:none;}
@media (max-width:640px){ .hs-arrow{display:none;} .hs-controls{bottom:12px;} }

/* Buscador sobre el hero */
.hs-search{
  display:grid; grid-template-columns:1fr 1.5fr 1fr auto; align-items:stretch;
  margin-top:clamp(22px, 3vw, 38px); padding:8px; background:var(--ink-soft); color:var(--ivory);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.hs-field{display:flex; flex-direction:column; justify-content:center; gap:2px; padding:10px 20px; border-right:1px solid var(--wood-line); min-width:0; position:relative;}
.hs-field:nth-last-child(2){border-right:0;}
.hs-field label{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ivory-dim);}
.hs-field select, .hs-field input[type="date"]{
  width:100%; border:0; background:transparent; color:var(--ivory); font-family:var(--sans); font-size:15.5px; font-weight:500;
  padding:3px 0; outline:none; min-width:0; color-scheme:inherit; appearance:auto;
}
.hs-field select option{background:var(--ink-soft); color:var(--ivory);}
.hs-field:focus-within{background:var(--tint); border-radius:calc(var(--radius-lg) - 6px);}
.hs-search .place-picker__control{background:transparent; border:0; padding:0; min-height:0; box-shadow:none; border-radius:0;}
.hs-search .place-picker .place-picker__input{width:100%; border:0; background:transparent; outline:none; font-family:inherit; font-size:15.5px; font-weight:500; padding:3px 0; color:var(--ivory);}
.hs-search .place-picker__control:focus-within{box-shadow:none;}
.hs-search .place-picker__panel{top:auto; bottom:calc(100% + 14px); left:-12px; right:-12px; text-align:left;}
.hs-search-btn{
  border:0; background:var(--garnet); color:var(--on-garnet); border-radius:calc(var(--radius-lg) - 6px);
  padding:0 34px; font-family:inherit; font-weight:700; font-size:15.5px; cursor:pointer; min-height:56px;
  transition:background-color .18s ease, transform .18s ease;
}
.hs-search-btn:hover{background:var(--garnet-bright);}
.hs-search-btn:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px;}
@media (max-width:960px){
  .hs-search{grid-template-columns:1fr 1fr; gap:4px;}
  .hs-field{border-right:0; border-bottom:1px solid var(--wood-line);}
  .hs-field:nth-last-child(2){border-bottom:1px solid var(--wood-line);}
  .hs-search-btn{grid-column:1 / -1; min-height:52px; margin-top:4px;}
}
@media (max-width:560px){
  .hs-search{grid-template-columns:1fr; padding:6px;}
  .hs-field{padding:9px 14px;}
  .hs-search .place-picker__panel{position:fixed; left:12px; right:12px; bottom:12px; top:auto;}
}
/* Sin movimiento: sin transiciones ni autoplay (hero-slider.js lo desactiva) */
.hs-reduced .hs-copy, .hs-reduced .hs-bg{transition:none;}
@media (prefers-reduced-motion:reduce){ .hs-copy, .hs-bg, .hs-btn, .hs-dot{transition:none;} }

/* En el tema clásico el hero conserva el aspecto sobrio original */
html[data-theme="clasico"] .hs--contained{border:1px solid var(--wood-line);}

/* ---------------------------------------- Componentes heredados (banners, slider) */
.hb-carousel{display:flex; gap:20px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory;}
.hb-carousel-item{flex:0 0 260px; scroll-snap-align:start;}
.hb-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px;}
.hb-grid .hb-carousel-item{flex:none;}
/* Banners: siempre a ancho completo de su columna, con su proporción real
   (nunca recortados) y deslizables de uno en uno (swipe/scroll-snap). */
.hb-banner-slot{position:relative;}
.hb-banner-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;}
.hb-banner-track{scrollbar-width:none; -ms-overflow-style:none;}
.hb-banner-track::-webkit-scrollbar{display:none; width:0; height:0;}
.hb-banner-slot{overflow:hidden;}
.hb-banner-slide{flex:0 0 100%; width:100%; scroll-snap-align:start; display:block;}
.hb-banner-slide img{width:100%; height:auto; display:block; border-radius:var(--radius-lg);}
.hb-banner-nav{position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:none; background:rgba(20,16,13,0.6); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.hb-banner-prev{left:10px;}
.hb-banner-next{right:10px;}
.hb-banner-multi .hb-banner-slide{scroll-snap-align:start;}
/* Slider clásico (foto + título + texto + botón), mismo patrón deslizable. */
.hb-slider-slide{position:relative;}
.hb-slider-slide img{width:100%; height:auto; display:block; border-radius:var(--radius-lg);}
.hb-slider-caption{position:absolute; left:0; right:0; bottom:0; padding:28px 32px; background:linear-gradient(0deg, rgba(20,16,13,0.85) 0%, rgba(20,16,13,0.35) 60%, transparent 100%); border-radius:0 0 var(--radius-lg) var(--radius-lg); color:#fff;}
.hb-slider-caption h3{margin:0 0 8px; font-size:1.5rem; color:#fff;}
.hb-slider-caption p{margin:0 0 14px; color:rgba(255,255,255,0.9); max-width:560px;}
.hb-slider-btn{display:inline-block; padding:10px 22px; border-radius:var(--radius-btn); background:#fff; color:#1A1612; font-weight:600; text-decoration:none;}
@media (max-width: 640px){
  .hb-slider-caption{padding:16px 18px;}
  .hb-slider-caption h3{font-size:1.15rem;}
}

/* ============================================================================
   v3.29 — Imagen o vídeo MP4 en bucle en los bloques (BlockMedia / block-media.js)
   Disposiciones: background (detrás del contenido, con velo) · side-left / side-right
   (junto al texto; en móvil se apila con el medio arriba) · top (banda sobre el contenido).
   Sin saltos de diseño: cada medio vive en una caja con aspect-ratio o min-height fijos.
   ========================================================================== */
.bm{position:relative; isolation:isolate; min-width:0; height:100%;}
.bm-media{position:relative; overflow:hidden; background:var(--hero-grad-2); border-radius:var(--radius-lg);}
.bm-media img, .bm-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; max-width:none;}
.bm-poster{z-index:0;}
.bm-video{z-index:1; background:transparent;}
/* Punto focal */
.bm--f-top .bm-media img, .bm--f-top .bm-media video{object-position:50% 0%;}
.bm--f-bottom .bm-media img, .bm--f-bottom .bm-media video{object-position:50% 100%;}
.bm--f-left .bm-media img, .bm--f-left .bm-media video{object-position:0% 50%;}
.bm--f-right .bm-media img, .bm--f-right .bm-media video{object-position:100% 50%;}
.hs-bg.bm--f-top{background-position:50% 0%;}
.hs-bg.bm--f-bottom{background-position:50% 100%;}
.hs-bg.bm--f-left{background-position:0% 50%;}
.hs-bg.bm--f-right{background-position:100% 50%;}
/* Velo: un 12 % fijo + el que elige el administrador (--bm-overlay, 0-0,8) */
.bm-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:linear-gradient(rgba(10,8,8,0.12), rgba(10,8,8,0.12)); background-color:rgba(10,8,8,var(--bm-overlay, 0.4));}
/* Alturas */
.bm--h-auto{--bm-min:260px;}
.bm--h-compact{--bm-min:180px;}
.bm--h-tall{--bm-min:480px;}
@media (max-width:640px){ .bm--h-tall{--bm-min:380px;} .bm--h-auto{--bm-min:220px;} .bm--h-compact{--bm-min:160px;} }

/* --- Fondo (dentro del bloque) --- */
.bm--bg{display:flex; flex-direction:column; justify-content:center; min-height:var(--bm-min); padding:clamp(24px, 4vw, 56px); border-radius:var(--radius-lg); overflow:hidden; color:#fff;}
.bm--bg > .bm-media{position:absolute; inset:0; border-radius:0; z-index:0;}
.bm--bg > .bm-content{position:relative; z-index:3; width:100%; min-width:0;}
/* --- Fondo a ancho completo (detrás de toda la sección) --- */
.hb-section--media{overflow:hidden; isolation:isolate; color:#fff; min-height:var(--bm-min); display:flex; flex-direction:column; justify-content:center;}
.hb-section--media > .bm-media{position:absolute; inset:0; border-radius:0; z-index:0;}
.hb-section--media > .wrap{position:relative; z-index:3; width:100%;}
.hb-section--band.hb-section--media{background:transparent;}
.hb-section--band.hb-section--media::before{display:none;}
/* Texto claro sobre el medio (solo el rótulo del bloque; las tarjetas conservan sus colores) */
:is(.bm--bg, .hb-section--media) .rail-head{--ivory:#fff; --ivory-dim:rgba(255,255,255,0.94); --accent-text:#fff; --ink-soft:rgba(10,8,8,0.55); --field-line:rgba(255,255,255,0.65); --tint-2:rgba(255,255,255,0.2);}
:is(.bm--bg, .hb-section--media) :is(.section-title, .eyebrow, .rail-title, .rail-sub, .rail-all, .rail-empty, .hb-text h3, .hb-text p, .hb-cta h3, .hb-cta p){color:#fff; text-shadow:0 1px 14px rgba(0,0,0,0.45);}
:is(.bm--bg, .hb-section--media) .rail-all{text-decoration:underline; text-underline-offset:3px;}
:is(.bm--bg, .hb-section--media) .hb-text{background:transparent; border-color:transparent; box-shadow:none; padding:0; height:auto;}
:is(.bm--bg, .hb-section--media) .hb-cta{background:transparent; padding:0; border-radius:0;}
:is(.bm--bg, .hb-section--media) .hb-cta::before{display:none;}

/* --- Lateral y banda superior --- */
.bm--side-left, .bm--side-right{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:clamp(16px, 3vw, 40px); align-items:center; height:auto;}
.bm--top{display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(16px, 2.4vw, 28px); height:auto;}
.bm--side-left .bm-media, .bm--side-right .bm-media{aspect-ratio:4 / 3;}
.bm--side-left.bm--h-compact .bm-media, .bm--side-right.bm--h-compact .bm-media{aspect-ratio:16 / 9;}
.bm--side-left.bm--h-tall .bm-media, .bm--side-right.bm--h-tall .bm-media{aspect-ratio:4 / 5;}
.bm--top .bm-media{aspect-ratio:21 / 9;}
.bm--top.bm--h-compact .bm-media{aspect-ratio:3 / 1;}
.bm--top.bm--h-tall .bm-media{aspect-ratio:16 / 9;}
@media (max-width:640px){
  .bm--top .bm-media{aspect-ratio:16 / 9;}
  .bm--top.bm--h-compact .bm-media{aspect-ratio:21 / 9;}
  .bm--top.bm--h-tall .bm-media{aspect-ratio:4 / 3;}
}
@media (min-width:768px){ .bm--side-right > .bm-media{order:2;} }
.bm--side-left > .bm-content, .bm--side-right > .bm-content, .bm--top > .bm-content{min-width:0;}
.rail > .bm{margin-bottom:22px;}
.rail > .bm .rail-head{margin-bottom:0;}

/* --- Bloque «Imagen» con medio en línea --- */
.hb-image--media{height:auto;}
.hb-image--media .bm-media{aspect-ratio:16 / 9;}
.hb-image--media.bm--h-compact .bm-media{aspect-ratio:21 / 9;}
.hb-image--media.bm--h-tall .bm-media{aspect-ratio:4 / 5;}
.hb-image--media .bm-link{display:block;}

/* --- Hero y slider clásico --- */
.hs-bg .bm-media{position:absolute; inset:0; border-radius:0; background:transparent;}
.hs-bg--video::before{display:none;}
.hb-slider-slide .bm-media--slide{aspect-ratio:16 / 7; border-radius:var(--radius-lg);}

/* --- Botón de pausa (WCAG 2.2.2) --- */
.bm-toggle{position:absolute; right:12px; bottom:12px; z-index:6; width:38px; height:38px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,0.7); background:rgba(10,8,8,0.6); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;}
.bm-toggle:hover{background:rgba(10,8,8,0.78);}
.bm-toggle:focus-visible{outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(10,8,8,0.6);}
.bm-toggle-ico::before{content:"\275A\275A"; font-size:11px; letter-spacing:-1px;}
.bm-toggle[aria-pressed="true"] .bm-toggle-ico::before{content:"\25B6"; font-size:13px; letter-spacing:0; padding-left:2px;}
.hs > .bm-toggle{right:clamp(12px, 2vw, 28px); bottom:14px;}
.bm-toggle[hidden]{display:none;}
@media (pointer:coarse){ .bm-toggle{width:44px; height:44px;} }

/* --- Estado estático: movimiento reducido, ahorro de datos o fallo de carga --- */
.bm-media.is-static .bm-video, .bm-media.is-failed .bm-video{display:none;}
@media (prefers-reduced-motion:reduce){
  .bm-video{display:none;}
  .bm-toggle{display:none;}
}