/* Portada (29-oct-2026, pedido de Julian; título nuevo el 30-oct-2026)
   - Título grande con «al mejor precio» resaltado y subrayado a mano; debajo, el buscador, que baja
     (--baja-barra) sin cambiar de lado. Sin imagen, oscuro sobre blanco; con imagen, blanco sobre la foto, que se
     desvanece donde queda el buscador. Al desplazar, el encabezado se compacta igual que antes.
   - Fila «Descubre todas las opciones»: una tarjeta por empresa con las medidas de las filas de airbnb.mx
     (medidas el 29-oct-2026 a 1440 px: tarjeta de 182 px, foto 182 × 173 con radio de 20 px, etiqueta blanca
     a 12 px de la esquina, nombre 13 px/500, datos 12 px en gris, flechas de 28 px en #F2F2F2). */

/* La barra baja hasta 200 px (de 96 a 296 desde arriba) para dejar lugar al título. En ventanas bajas baja menos,
   para que el calendario (426 px) y la lista de lugares quepan debajo: los paneles viven en el encabezado fijo y
   no se alcanzan con scroll. A 820 px de alto o más baja todo; a 720, 100 px (el mínimo). El título y el banner se
   ajustan con ella. */
body[data-pagina="inicio"] {
  --baja-barra: clamp(100px, calc(100vh - 620px), 200px);
  --alto-portada: calc(96px + var(--baja-barra) + 66px + 34px); /* hasta 34 px abajo de la barra */
}

/* ---------- Portada ---------- */

.portada { position: relative; height: var(--alto-portada); }

/* Título: centrado entre la fila del encabezado y la barra (que queda 28 px abajo). Como drivana.mx (30-oct-2026,
   medido a 1440: 88 px, peso 900, -0.035 em, interlínea 0.95, una frase en color con subrayado a mano); aquí
   hasta 58 px para que quepa sobre el buscador con aire arriba. */
.portada__texto {
  position: absolute; left: 0; right: 0; top: var(--alto-fila);
  height: calc(96px + var(--baja-barra) - 28px - var(--alto-fila));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 0 var(--margen); text-align: center;
}
.portada__titulo {
  max-width: 1100px; color: var(--tinta); text-wrap: balance;
  font-size: clamp(30px, calc((var(--baja-barra) - 84px) / 2), 58px); line-height: .98; font-weight: 900; letter-spacing: -.035em;
}
.portada__resalte { position: relative; display: inline-block; isolation: isolate; }
.portada__resalte-texto {
  display: inline-block; padding: 0 .04em .06em;
  background: linear-gradient(90deg, var(--tema-a), var(--tema-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Subrayado a mano debajo de la frase; el trazo no se deforma al estirarse. */
.portada__garabato {
  position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; overflow: visible;
}
.portada__garabato path { fill: none; stroke: url(#garabato-degradado); stroke-width: 6px; stroke-linecap: round; }
.portada__sub { margin: 0; max-width: 620px; font-size: 18px; line-height: 26px; color: var(--texto-2); text-wrap: balance; }

/* Sin imagen: fondo blanco con un tinte suave del tema arriba. */
.portada--clara { background: radial-gradient(70% 90% at 50% 0%, var(--tema-fondo) 0%, rgb(255 255 255 / 0) 70%); }

/* Con imagen (o ?portada=banner): título blanco sobre la foto, que se desvanece en blanco donde queda el buscador. */
.portada__banner {
  position: absolute; inset: var(--alto-fila) 0 0;
  overflow: hidden;
  /* Sin imagen: el degradado del tema (añil-grana). */
  background: linear-gradient(115deg, var(--tema-a) 0%, var(--tema-b) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
}
.portada__imagen { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Con foto: velo oscuro arriba para que el título blanco se lea sobre cualquier imagen. */
.portada__banner--foto { background: var(--gris-2); }
.portada__banner--foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .18) 50%, rgb(0 0 0 / 0) 80%);
}
.portada:not(.portada--clara) .portada__titulo { color: var(--blanco); text-shadow: 0 2px 18px rgb(0 0 0 / .22); }
/* Sobre la foto, la frase va en una etiqueta blanca un poco inclinada, con el texto en el degradado del tema: se lee
   sobre cualquier imagen. El subrayado a mano es solo del modo claro. */
.portada:not(.portada--clara) .portada__resalte { margin-top: .1em; text-shadow: none; }
.portada:not(.portada--clara) .portada__resalte::before {
  content: ''; position: absolute; inset: .02em -.2em -.04em; z-index: -1;
  border-radius: .16em; background: var(--blanco); transform: rotate(-1.6deg);
  box-shadow: 0 10px 30px rgb(0 0 0 / .28);
}
.portada:not(.portada--clara) .portada__garabato { display: none; }
.portada:not(.portada--clara) .portada__sub { color: rgb(255 255 255 / .9); }

/* Solo en desarrollo, mientras no haya imagen: dónde va y de qué tamaño. */
.portada__hueco {
  position: absolute; right: var(--margen); top: calc(var(--alto-fila) + 10px); margin: 0;
  padding: 4px 10px; border: 1px dashed rgb(255 255 255 / .7); border-radius: 8px;
  color: rgb(255 255 255 / .92); font-size: 12px; line-height: 16px;
}

/* El encabezado de la portada: en modo grande solo la fila blanca y la barra más abajo. En flotante (se abre la
   búsqueda ya desplazado) y en mini se ve como en las demás páginas. */
@media (min-width: 744px) {
  body[data-pagina="inicio"] main { padding-top: 0; }
  body[data-pagina="inicio"] .enc[data-modo="grande"] .enc__fondo {
    transform: translateY(calc(var(--alto-fila) - var(--alto-enc)));
    background: var(--blanco); border-bottom-color: transparent;
  }
  body[data-pagina="inicio"] .enc[data-modo="grande"] .enc__busqueda {
    transform: translateX(-50%) translateY(var(--baja-barra));
  }
  /* La lista de lugares se acorta para no salirse de la ventana (80 px del panel sin la lista + 16 de aire). */
  body[data-pagina="inicio"] .enc[data-modo="grande"] .lista {
    max-height: min(56vh, 470px, calc(100vh - var(--baja-barra) - 290px));
  }
}
/* Ventana baja: sin subtítulo, para que el título quepa sobre la barra. */
@media (min-width: 744px) and (max-height: 760px) { .portada__sub { display: none; } }

@media (max-width: 1127px) {
  .portada__titulo { max-width: 760px; font-size: clamp(30px, calc((var(--baja-barra) - 72px) / 2.2), 52px); }
  .portada__sub { font-size: 16px; line-height: 23px; }
}

/* Teléfono: no hay encabezado fijo; la portada va arriba y la píldora de búsqueda sale debajo. */
@media (max-width: 743px) {
  .portada { height: auto; padding: calc(env(safe-area-inset-top) + 36px) 0 28px; }
  .portada__texto { position: relative; top: 0; height: auto; gap: 12px; }
  .portada__titulo { font-size: 38px; }
  .portada__garabato path { stroke-width: 4px; }
  .portada__sub { font-size: 15px; line-height: 21px; }
  .portada:not(.portada--clara) { padding-bottom: 64px; }
  /* El desvanecido empieza abajo del subtítulo: blanco sobre blanco no se lee. */
  .portada__banner { inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
  .portada__hueco { top: calc(env(safe-area-inset-top) + 10px); right: 12px; left: 12px; text-align: center; font-size: 11px; }
  body[data-pagina="inicio"] .portada:not(.portada--clara) + .movil-tope { margin-top: -12px; }
}

/* ---------- Fila de empresas ---------- */

.vitrina {
  --cols: 7;
  --hueco: 12px;
  max-width: 1440px; margin: 0 auto; padding: 16px var(--margen) 8px;
}
@media (max-width: 1439px) { .vitrina { --cols: 6; } }
@media (max-width: 1127px) { .vitrina { --cols: 5; } }
@media (max-width: 949px) { .vitrina { --cols: 4; } }

.vitrina__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.vitrina__titulo { font-size: 20px; line-height: 24px; font-weight: 600; }
.vitrina__titulo a { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; }
.vitrina__ir { width: 12px; height: 12px; flex: none; }
@media (hover: hover) and (pointer: fine) { .vitrina__titulo a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.vitrina__flechas { display: flex; gap: 4px; }
.vitrina__flechas[hidden] { display: none; }
.vitrina__flecha {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--circulo); color: var(--texto);
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.vitrina__flecha span { width: 10px; height: 10px; }
.vitrina__flecha:disabled { color: var(--apagado); cursor: default; }
.vitrina__flecha:not(:disabled):active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .vitrina__flecha:not(:disabled):hover { background: var(--gris-2); } }

.vitrina__pista {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--hueco)) / var(--cols));
  gap: var(--hueco);
  margin: -4px; padding: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  scrollbar-width: none;
}
.vitrina__pista::-webkit-scrollbar { display: none; }

.tarjeta-empresa { scroll-snap-align: start; min-width: 0; }
.tarjeta-empresa a { display: flex; flex-direction: column; border-radius: 20px; }
.tarjeta-empresa a:focus-visible { outline-offset: 4px; }

.tarjeta-empresa__logo {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 182 / 173; border-radius: 20px; overflow: hidden;
  background: var(--gris-1);
}
/* multiply: el blanco de un logo en JPG o PNG se funde con el gris del recuadro. */
.tarjeta-empresa__logo img { max-width: 66%; max-height: 46%; object-fit: contain; mix-blend-mode: multiply; }
.tarjeta-empresa__iniciales {
  font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--apagado);
}
/* Arriba a la izquierda: cuántos autos tiene (o, en una oferta, si es cupón o descuento). Etiqueta del catálogo. */
.tarjeta-empresa__cuenta { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; }

.tarjeta-empresa__nombre,
.tarjeta-empresa__dato { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-empresa__nombre { margin-top: 8px; font-size: 13px; line-height: 16px; font-weight: 500; }
.tarjeta-empresa__dato { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--texto-2); }
/* El lugar o el detalle de una oferta pueden ser largos: hasta dos renglones. */
.tarjeta-empresa__dato--lugar {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

@media (hover: none) { .vitrina__flechas { display: none; } }

@media (max-width: 743px) {
  .vitrina { padding-top: 24px; }
  /* Tarjetas angostas: etiquetas un poco más compactas para que «Recomendado» o «Verificada» quepan. */
  .tarjeta-empresa__cuenta { top: 8px; left: 8px; right: 8px; }
  .tarjeta-empresa__etiquetas { left: 2px; right: 2px; padding: 4px 6px 8px; }
  .tarjeta-empresa .etiqueta--foto { gap: 4px; padding: 4px 8px 4px 6px; font-size: 11px; letter-spacing: 0; }
  .tarjeta-empresa .etiqueta--foto .etiqueta__icono { height: 12px; }
  .vitrina__titulo { font-size: 18px; line-height: 22px; }
  /* Las tarjetas salen hasta la orilla de la pantalla y se ven dos y un poco de la tercera. */
  .vitrina__pista {
    grid-auto-columns: calc((100% - 2 * var(--hueco)) / 2.3);
    margin: -4px calc(-1 * var(--margen)); padding: 4px var(--margen);
    scroll-padding-inline: var(--margen);
  }
}

/* Etiquetas que pone Oaxaca Renta o que salen solas («Recomendado», «Verificada», «Bajó 8 %»), del
   catálogo único: abajo a la izquierda del recuadro, dos a lo más. */
/* Un solo renglón: si la segunda no cabe (tarjetas angostas del teléfono) se queda fuera, para no tapar el logo.
   El relleno deja ver la sombra; el renglón de más empieza abajo del alto visible y se recorta. */
.tarjeta-empresa__etiquetas {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 12px;
  height: 38px; padding: 4px 6px 8px; overflow: hidden;
}

/* ---------- Avisos de precio (antes de las empresas) ---------- */

.avisos-precio { max-width: 1440px; margin: 0 auto; padding: 16px var(--margen) 0; }
.avisos-precio__lista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--borde-2); border-radius: var(--r-16); background: var(--blanco);
}
.avisos-precio__aviso { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; }
.avisos-precio__aviso + .avisos-precio__aviso { border-left: 1px solid var(--borde-2); }
.avisos-precio__icono { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--acento); }
.avisos-precio__aviso p { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-2); text-wrap: pretty; }
.avisos-precio__aviso strong { color: var(--texto); font-weight: 600; }
.avisos-precio__fuente { margin: 8px 4px 0; font-size: 12px; line-height: 16px; color: var(--texto-3); }

.avisos-precio + .vitrina, .vitrina + .vitrina { padding-top: 32px; }

/* ---------- Ofertas de temporada ---------- */

.tarjeta-oferta__recuadro { background: var(--tema-fondo); }
.tarjeta-oferta__grande {
  padding: 0 14px; text-align: center; overflow-wrap: anywhere;
  font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--tema-b);
}
.tarjeta-oferta__grande--texto { font-size: 20px; line-height: 24px; letter-spacing: 0; }

@media (max-width: 743px) {
  .avisos-precio { padding-top: 20px; }
  .avisos-precio__lista { grid-auto-flow: row; }
  .avisos-precio__aviso { padding: 14px 16px; }
  .avisos-precio__aviso + .avisos-precio__aviso { border-left: 0; border-top: 1px solid var(--borde-2); }
  .avisos-precio + .vitrina, .vitrina + .vitrina { padding-top: 28px; }
  .tarjeta-oferta__grande { font-size: 32px; }
}