/* ============================================================
   HERO — Portada con fondo rotativo
   Depende de tokens.css
   ============================================================ */

.ta-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    /* Fondo de respaldo: si no carga ninguna foto, sigue viéndose
       como marca y no como un hueco negro. */
    background:
        radial-gradient(circle at 25% 15%, rgba(255, 193, 21, 0.30), transparent 55%),
        linear-gradient(150deg, var(--ta-naranja-honda) 0%, var(--ta-carbon) 72%);
}

/* ---- Capas de fondo ---- */

.ta-hero__fondos {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ta-hero__fondo {
    position: absolute;
    inset: 0;
    /* Por defecto la versión chica: la mayoría entra desde el celular. */
    background-image: var(--foto-chica);
    /* Las fotos de estudio sobre fondo liso llegan con ajuste "contain" y su
       color: se enseñan enteras y los lados se rellenan con el mismo amarillo,
       así que no se nota el corte. Recortarlas dejaba un primer plano donde no
       se reconocía el producto. Las fotos reales de comida siguen con "cover". */
    background-size: var(--foto-ajuste, cover);
    background-color: var(--foto-fondo, transparent);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    /* Zoom lento constante: da vida sin distraer de la lectura. */
    animation: ta-hero-zoom 18s ease-out infinite alternate;
    /* El cruce va atado al ritmo del carrusel (2 s, ver hero.html). Con los
       0.7 s de antes —pensados para pasar cada 6 s— la portada se quedaba casi
       la mitad del ciclo en transición y ninguna foto llegaba a verse quieta. */
    transition: opacity 0.35s ease-in-out;
    will-change: opacity, transform;
}

.ta-hero__fondo--activo {
    opacity: 1;
}

/* Las fotos de producto se enseñan completas, así que el zoom no va: acabaría
   comiéndose justo lo que se quiere enseñar. En las fotos reales sí se queda,
   ahí da vida sin quitar nada. */
.ta-hero__fondo[data-ajuste="contain"] {
    animation: none;
    /* En celular el producto se sube y se achica: a "contain" a secas ocupaba
       el ancho completo y quedaba justo detrás del titular. Arriba respira y
       deja el degradado limpio para el texto. */
    background-size: auto 46%;
    background-position: center top 9%;
}

/* De tablet para arriba, el producto se recorre a la derecha para dejarle el
   lado izquierdo libre al título. Centrado, la comida quedaba justo detrás de
   "TACOS ARAGÓN" y competía con la lectura. */
@media (min-width: 800px) {
    .ta-hero__fondo[data-ajuste="contain"] {
        /* A "contain" a secas el producto ocupa todo el alto y su etiqueta
           choca con la barra de dirección. Al 80% y un poco arriba, respira. */
        background-size: auto 80%;
        background-position: right 2% top 42%;
    }
}

/* De tablet para arriba sí vale la pena la foto grande. */
@media (min-width: 800px) {
    .ta-hero__fondo {
        background-image: var(--foto-grande);
    }
}

@keyframes ta-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.10); }
}

/* Velo cálido: sube el contraste del texto sin apagar la comida.
   Más denso abajo, donde vive el contenido. */
.ta-hero__velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(34, 25, 15, 0.62) 0%,
            rgba(34, 25, 15, 0.30) 35%,
            rgba(34, 25, 15, 0.72) 78%,
            rgba(34, 25, 15, 0.92) 100%
        );
}

/* Textura sutil de brasa en la esquina, para que el velo no sea plano. */
.ta-hero__velo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 78% 12%,
        rgba(242, 109, 29, 0.28),
        transparent 60%
    );
}

/* ---- Contenido ---- */

.ta-hero__contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--esp-4);
    padding-block: var(--esp-8) var(--esp-9);
    color: var(--ta-blanco);
}

@media (min-width: 768px) {
    .ta-hero__contenido {
        padding-inline: var(--esp-6);
    }
}

.ta-hero__estado {
    margin-bottom: var(--esp-4);
    /* Fondo propio: el badge debe leerse sobre cualquier foto. */
    background: rgba(255, 251, 245, 0.94);
    backdrop-filter: blur(8px);
    box-shadow: var(--sombra);
    padding: var(--esp-2) var(--esp-4);
}

.ta-hero__estado-detalle {
    color: var(--ta-texto-medio);
    font-weight: var(--peso-medio);
}

/* Separador entre etiqueta y detalle del horario. */
.ta-hero__estado-sep {
    color: var(--ta-borde);
}

.ta-hero__titulo {
    text-transform: uppercase;
    color: var(--ta-blanco);
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
    max-width: 16ch;
}

/* Segunda línea del titular, en amarillo de marca. */
.ta-hero__titulo em {
    display: block;
    font-style: normal;
    color: var(--ta-amarillo);
}

.ta-hero__bajada {
    margin-top: var(--esp-4);
    font-size: var(--txt-lg);
    font-weight: var(--peso-medio);
    color: rgba(255, 251, 245, 0.92);
    max-width: 44ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .ta-hero__bajada {
        font-size: var(--txt-xl);
    }
}

.ta-hero__acciones {
    margin-top: var(--esp-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}

/* En celular los botones ocupan el ancho: más fáciles de tocar. */
@media (max-width: 479px) {
    .ta-hero__acciones .ta-boton {
        width: 100%;
    }
}

/* ---- Datos rápidos bajo los botones ---- */

.ta-hero__datos {
    margin-top: var(--esp-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3) var(--esp-6);
    list-style: none;
    font-size: var(--txt-sm);
    color: rgba(255, 251, 245, 0.86);
}

.ta-hero__dato {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
}

.ta-hero__dato svg {
    color: var(--ta-amarillo);
    flex-shrink: 0;
}

/* ---- Indicadores del carrusel ---- */

/* Puntitos del carrusel: centrados abajo, por encima de la curva.
   Eran barras de 34 px pegadas a la derecha y ocultas en celular; con 11
   diapositivas ocupaban media pantalla y no se veían donde más se navega. */
.ta-hero__puntos {
    position: absolute;
    z-index: 3;
    inset-block-end: calc(var(--esp-5) + clamp(32px, 5vw, 64px));
    inset-inline: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--esp-2);
}

.ta-hero__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: var(--radio-full);
    background: rgba(255, 255, 255, 0.45);
    /* Sombra tenue: sobre una foto clara, un punto blanco al 45% desaparece. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background-color var(--trans), transform var(--trans);
}

.ta-hero__punto:hover {
    background: rgba(255, 255, 255, 0.75);
}

.ta-hero__punto[aria-current="true"] {
    background: var(--ta-blanco);
    transform: scale(1.35);
}

/* ---- Borde inferior curvo ----
   Empalma el hero con la sección siguiente sin un corte recto. */
.ta-hero__curva {
    position: absolute;
    z-index: 2;
    inset-block-end: -1px;
    inset-inline: 0;
    width: 100%;
    height: clamp(32px, 5vw, 64px);
    display: block;
    fill: var(--ta-crema);
    pointer-events: none;
}