/* assets/css/mega-hero.css — el mega hero (parts/mega-hero.php, ORDEN-MEGA-HERO-1). Pilares y fichas.
   La foto empieza en el pixel 0, detras del header: el hero sube lo mismo que el sitio le reserva al header
   (telefono: el padding-top de #c100-main, 64 px + zona segura; escritorio: el header sticky de 67 px) y el contenido
   se separa con ese mismo alto. Valores fijos y no --c100-header-h: esa variable cambia al desplazarse y moveria el
   hero (CLS). El panel siempre es oscuro (H1 blanco, noche y dia): sus colores no siguen el tema. */

.mhero {
  --mh-ac: var(--d1, #FFD400); --mh-on: #05070C;
  --mh-top: calc(64px + env(safe-area-inset-top));
  --mh-tx: #F2F5F7; --mh-mu: #C9D1DA; --mh-panel: #070A10;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  margin-top: calc(-1 * var(--mh-top));
  min-height: min(94svh, 760px);
  color: var(--mh-tx); background: var(--mh-panel);
}
.mhero[data-tipo="pilar"] { --mh-ac: var(--dest, var(--d1, #FFD400)); }
.mhero[data-tipo="combo"] { --mh-ac: var(--d2, #FF1B7F); --mh-on: #FFFFFF; }
.mhero[data-tipo="paquete"] { --mh-ac: var(--paq-ac, var(--d3, #38A0FF)); --mh-on: #05070C; }

/* la foto: a todo lo ancho, detras de todo; un velo arriba para que las migas se lean de dia y de noche */
.mhero__fondo { position: absolute; inset: 0 0 22% 0; z-index: -1; }
.mhero__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 7 12 / .66) 0, rgb(5 7 12 / .28) calc(var(--mh-top) + 120px), rgb(5 7 12 / 0) 60%); }
.mhero__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* arriba: migas y chips, separados del header */
.mhero__arriba { padding: calc(var(--mh-top) + 14px) var(--gut) 0; }
.mhero .mhero__migas { margin: 0; }
.mhero .mhero__migas, .mhero .mhero__migas a, .mhero .mhero__migas span { color: var(--mh-tx); text-shadow: 0 1px 2px rgb(0 0 0 / .65); }
.mhero .mhero__migas a { text-decoration-color: rgb(242 245 247 / .5); }
/* B-MOV1: las migas en un renglon; si no caben, se cortan con puntos suspensivos (el ultimo tramo ya es el titulo corto) */
.mhero .mhero__migas p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.mhero__chip {
  max-width: 100%; line-height: 1.35;   /* se parte en renglones: el sello completo, nunca «…» */
  padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mh-tx); background: rgb(5 7 12 / .74); border: 1px solid color-mix(in oklab, var(--mh-ac) 70%, transparent);
}
.mhero__chip.is-primero { color: var(--mh-on); background: var(--mh-ac); border-color: transparent; }

/* el panel oscuro en diagonal, que sube desde abajo */
.mhero__panel {
  position: relative; margin-top: auto;
  padding: calc(var(--sp6) + 10vw) var(--gut) var(--sp6);
  background: linear-gradient(180deg, rgb(7 10 16 / .9) 0, var(--mh-panel) 38%);
  clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0 100%);
}
.mhero__foto2 { position: absolute; inset: 0; z-index: -1; opacity: .3; }
.mhero__foto2 img { width: 100%; height: 100%; object-fit: cover; }
.mhero__texto { position: relative; container-type: inline-size; }
.mhero__rotulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mh-ac); }
.mhero[data-tipo="combo"] .mhero__rotulo { color: color-mix(in oklab, var(--mh-ac) 82%, #fff); }
.mhero__raya { flex: 0 0 40px; height: 1px; background: currentColor; opacity: .55; }
.mhero__rotulo2 { color: var(--mh-mu); }
.mhero .mhero__h1 { margin: 10px 0 0; color: var(--mh-tx); font-size: clamp(30px, 9.4cqi, 44px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; overflow-wrap: break-word; text-wrap: balance; }
/* Valoracion arriba y verificacion debajo, siempre (B-PU2): con flex-wrap, a 768 la linea cabia en uno o dos renglones
   segun llegara la fuente (respaldo o Manrope) y el panel crecia 22 px despues de pintado (CLS 0.12). En columna el
   alto es el mismo con cualquier fuente. */
.mhero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--mh-mu); }
.mhero__meta .rating { color: var(--mh-tx); font-weight: 600; text-decoration: none; }
.mhero__meta .rating:hover { text-decoration: underline; text-underline-offset: 3px; }
.mhero__meta .rating__star { color: var(--d1, #FFD400); }
.mhero__verif { display: inline-flex; align-items: center; gap: 10px; }
.mhero__punto { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }

/* B-MOV1 (ORDEN-MOVIL-HERO-1): en telefono y tableta (por debajo de 1000 px, la misma columna) UNA sola regla de alto
   para toda familia: la foto mide 56 % del alto de la pantalla, entre 260 y 420 px, desde el pixel 0; la franja de
   arriba (migas y chips) ocupa ese alto y el panel oscuro con rotulo y H1 va justo debajo, montado solo por su diagonal.
   Asi el H1 se ve entero en la primera pantalla y la barra de abajo no lo tapa. Antes: min(94svh, 760px) y la foto
   llenaba la pantalla. */
@media (max-width: 999px) {
  .mhero { --mh-foto: clamp(260px, 56vh, 420px); --mh-foto: clamp(260px, 56svh, 420px); min-height: 0; }
  .mhero__fondo { inset: 0 0 auto 0; height: var(--mh-foto); }
  .mhero__arriba { box-sizing: border-box; min-height: calc(var(--mh-foto) - 10vw); padding-bottom: var(--sp4); }
  .mhero__panel { margin-top: 0; }
}

/* el vidrio del header deja ver la foto que pasa por detras (de 88 % a 60 % del fondo; el desenfoque se queda: el menu
   se sigue leyendo). Solo en reposo: flotante, el header ya es la pildora de siempre. */
@media (min-width: 1000px) {
  body:has(.mhero) .hdr:not(.is-flotante)::before { background: color-mix(in oklab, var(--g) 60%, transparent); }
}

/* escritorio: foto a la izquierda, panel en diagonal a la derecha; el H1 vive entero dentro del panel */
@media (min-width: 1000px) {
  .mhero {
    --mh-top: 67px;
    --mh-lado: max(var(--gut), calc((100vw - var(--wide, 1200px)) / 2 + var(--gut)));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, 52%);
    min-height: clamp(560px, 68vh, 720px);
  }
  .mhero__fondo { inset: 0 30% 0 0; }
  .mhero__arriba { grid-column: 1; grid-row: 1; align-self: start; padding: calc(var(--mh-top) + 18px) var(--sp5) 0 var(--mh-lado); }
  .mhero__panel {
    grid-column: 2; grid-row: 1; margin-top: 0;
    display: flex; align-items: center;
    padding: calc(var(--mh-top) + 32px) var(--mh-lado) 56px 17%;
    background: linear-gradient(100deg, rgb(7 10 16 / .82) 0, var(--mh-panel) 26%);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }
  .mhero__texto { width: 100%; }
  .mhero .mhero__h1 { font-size: clamp(34px, 9cqi, 56px); }
}

/* en la ficha el hero sale del .wrap centrado y va a todo lo ancho (body ya recorta el desborde de 100vw) */
/* las skins marco y nueva hacen de .ficha una rejilla y adelantan la ficha tecnica, los destacados y el panel con order
   -1, -2 y -3: el hero va antes que todos, en la primera fila y de lado a lado. */
.ficha > .mhero { order: -10; grid-row: 1; grid-column: 1 / -1; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.ficha > .mhero + .ficha__grid { margin-top: var(--sp5); }
/* en la pilar, la franja de datos queda debajo del hero, sobre el fondo de la pagina */
.pheroe--mega .mhero-franja { margin-top: var(--sp5); }