/* Estilos solo de la pagina de inicio: portada con video y header transparente encima */

/* Header transparente sobre el video; al bajar se vuelve blanco (clase header--solido en index.php) */
body:has(.portada) .header { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; transition: background .3s, box-shadow .3s; }
body:has(.portada) .header.header--solido { background: var(--blanco); box-shadow: 0 1px 8px rgba(0,0,0,.08); }
body:has(.portada) .header:not(.header--solido) .header__logo img { filter: brightness(0) invert(1); }
body:has(.portada) .header:not(.header--solido) .header__toggle span { background: var(--blanco); }
/* Un solo logo a la vez: el chico aparece al bajar, cuando el grande ya no se ve */
body:has(.portada) .header:not(.header--solido):not(:has(.menu.abierto)) .header__logo { opacity: 0; pointer-events: none; }
@media (min-width: 922px) {
    body:has(.portada) .header:not(.header--solido) .menu a:not(.menu__carrito) { color: rgba(255,255,255,.75); }
    body:has(.portada) .header:not(.header--solido) .menu a:hover,
    body:has(.portada) .header:not(.header--solido) .menu a.activo { color: var(--blanco); }
    body:has(.portada) .header:not(.header--solido) .menu a.menu__carrito { color: var(--blanco); }
    body:has(.portada) .header:not(.header--solido) .menu a.menu__carrito:hover { background: var(--blanco); color: var(--rojo); border-color: var(--blanco); }
}
@media (max-width: 921px) {
    body:has(.portada) .header .header__logo { transition: opacity .35s; }
    body:has(.portada) .header:has(.menu.abierto) { background: var(--blanco); }
    body:has(.portada) .header:has(.menu.abierto) .header__logo img { filter: none; }
    body:has(.portada) .header:has(.menu.abierto) .header__toggle span { background: var(--oscuro); }
}

/* Hero: ocupa exactamente la pantalla visible (svh descuenta la barra del navegador en celular) */
.portada { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #000; color: var(--blanco); }
.portada video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__capa { position: absolute; inset: 0; background:
    radial-gradient(ellipse at center, rgba(20,8,10,.55) 0%, rgba(20,8,10,.8) 70%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 25%); }
/* padding-bottom reserva el espacio del indicador "Desliza" para que nunca se encime */
.portada__contenido { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 84px; padding-bottom: 130px; }
.portada__eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--titulos); font-size: 1rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 18px; animation: aparecer .8s .7s both; }
.portada__eyebrow::before, .portada__eyebrow::after { content: ''; width: 48px; height: 1px; background: var(--rojo-claro); }
.portada__logo { margin: 0 0 26px; animation: logo-entra 1.2s .2s cubic-bezier(.2,.7,.2,1) both; }
.portada__logo img { width: min(640px, 82vw, 48vh * 2.35); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.5)); }
.portada__texto { color: rgba(255,255,255,.85); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 620px; margin: 0 auto 34px; animation: aparecer .8s .9s both; }
.portada__botones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; animation: aparecer .8s 1.1s both; }
.portada__btn { padding: 15px 32px; font-size: 1.1rem; letter-spacing: .12em; }
.portada__btn:hover { background: var(--rojo-claro); }
.portada__btn--borde { background: transparent; border: 1px solid rgba(255,255,255,.8); }
.portada__btn--borde:hover { background: var(--blanco); color: var(--rojo); }

/* Indicador "Desliza": riel tenue con un destello que baja una y otra vez */
.portada__desliza { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--titulos); font-size: .85rem; font-weight: 600; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; color: rgba(255,255,255,.75); text-decoration: none; transition: color .3s; }
.portada__desliza:hover { color: var(--blanco); }
.portada__desliza span { position: relative; width: 1px; height: 56px; background: rgba(255,255,255,.18); overflow: hidden; }
.portada__desliza span::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0), var(--blanco) 60%, var(--rojo-claro)); animation: desliza 2s cubic-bezier(.65,0,.35,1) infinite; }

/* Entrada de la portada: el video aclara desde negro, el logo se enfoca y crece un poco,
   las lineas del encabezado se abren y el resto aparece en secuencia */
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes logo-entra { from { opacity: 0; transform: scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes linea-abre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes desde-negro { from { opacity: 1; } to { opacity: 0; } }
.portada::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; animation: desde-negro 1s ease-out both; }
.portada__eyebrow::before { transform-origin: right; animation: linea-abre .7s 1s cubic-bezier(.65,0,.35,1) both; }
.portada__eyebrow::after { transform-origin: left; animation: linea-abre .7s 1s cubic-bezier(.65,0,.35,1) both; }
.portada__desliza { animation: aparecer-centro .8s 1.5s both; }
@keyframes aparecer-centro { from { opacity: 0; } to { opacity: 1; } }
@keyframes desliza { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .portada *, .portada::after { animation: none !important; } .portada::after { display: none; } }

@media (max-width: 921px) {
    .portada__contenido { padding-bottom: 80px; }
    .portada__eyebrow { font-size: .8rem; gap: 10px; }
    .portada__eyebrow::before, .portada__eyebrow::after { width: 20px; }
    .portada__botones { width: 100%; flex-direction: column; align-items: stretch; }
    .portada__btn { text-align: center; }
    .portada__desliza { bottom: 18px; font-size: .7rem; gap: 10px; }
    .portada__desliza span { height: 36px; }
    .solo-escritorio { display: none; }
}

/* Pantallas bajas: se oculta el indicador y se compacta el contenido para que todo quepa */
@media (max-height: 700px) {
    .portada__desliza { display: none; }
    .portada__contenido { padding-bottom: 20px; }
    .portada__logo { margin-bottom: 16px; }
    .portada__logo img { width: min(640px, 82vw, 40vh * 2.35); }
    .portada__eyebrow { margin-bottom: 12px; }
    .portada__texto { margin-bottom: 22px; }
}

/* Seccion "Aqui nace Cuero Viejo": texto centrado con frase destacada y fila de cifras */
.nace__contenido { max-width: 960px; text-align: center; }
.nace__contenido p { margin-left: auto; margin-right: auto; }
.nace__destacado { font-family: var(--titulos); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.3; color: var(--oscuro); max-width: 820px; margin-bottom: 1.2em; }
.cifras { list-style: none; padding: 40px 0 0; margin: 50px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; border-top: 1px solid #e3dcdf; }
.cifras li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cifras strong { font-family: var(--titulos); font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--rojo); }
.cifras span { font-size: .9rem; line-height: 1.5; max-width: 190px; color: var(--texto-suave); }
@media (max-width: 700px) {
    .cifras { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
}

/* Seccion "Origen Mezcalero": frase destacada, cualidades como sellos y foto con marco desplazado */
.origen__destacado { font-family: var(--titulos); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.3; color: var(--oscuro); }
.origen__cualidades { list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-wrap: wrap; gap: 10px; }
.origen__cualidades li { font-family: var(--titulos); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--rojo); border: 1px solid var(--rojo); padding: 7px 16px; }
.origen .dos-col, .vinata .dos-col { isolation: isolate; }

/* Seccion "Nuestra Vinata": la ilustracion del paraje como fondo difuminado */
.vinata { position: relative; overflow: hidden; background: var(--crema); padding: 120px 0; }
.vinata::before { content: ''; position: absolute; inset: 0; background: url('../img/ilustracion-vinata.webp') center / cover no-repeat; opacity: .3; mix-blend-mode: multiply; }
.vinata.js-fondo-diferido:not(.fondo-listo)::before { background-image: none; }
.vinata::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,243,245,.2) 0%, rgba(247,243,245,.85) 55%, rgba(247,243,245,.95) 100%); }
.vinata .contenedor { position: relative; z-index: 1; }
.vinata__destacado { font-family: var(--titulos); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.3; color: var(--oscuro); }
.vinata p { color: var(--texto); }
@media (max-width: 921px) {
    .vinata { padding: 70px 0; }
    .vinata::after { background: rgba(247,243,245,.8); }
}

/* Seccion de tienda en inicio: encabezado con enlace a la tienda completa */
.tienda-inicio__encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.tienda-inicio__encabezado h2 { margin-bottom: .3em; }
.tienda-inicio__encabezado p { margin: 0; }
.tienda-inicio__todo { font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--rojo); border-bottom: 2px solid var(--rojo-claro); padding-bottom: 4px; white-space: nowrap; }
.tienda-inicio__todo span { display: inline-block; transition: transform .25s; }
.tienda-inicio__todo:hover span { transform: translateX(6px); }

/* Franja con la etiqueta de la botella: fondo fijo, la pagina se desliza encima (como en WordPress) */
.etiqueta { height: 70vh; min-height: 420px; background-color: var(--oscuro); background-size: cover; background-position: center; background-attachment: fixed; }
/* En celulares y tablets el fondo fijo no funciona bien; ahi se muestra normal */
@media (hover: none), (max-width: 921px) { .etiqueta { background-attachment: scroll; } }
@media (max-width: 921px) {
    .etiqueta { height: 60vh; min-height: 360px; }
    /* Video de la botella: mas bajo en celular */
    .hero--corto { height: 45vh; min-height: 280px; }
}

/* Entrada del header en la portada: baja desde arriba y los enlaces del menu aparecen uno tras otro */
@keyframes header-baja { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes enlace-aparece { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body:has(.portada) .header { animation: header-baja .7s .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes carrito-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 922px) {
    body:has(.portada) .menu > a:not(.menu__carrito) { animation: enlace-aparece .5s both; }
    body:has(.portada) .menu > a:nth-child(1) { animation-delay: .8s; }
    body:has(.portada) .menu > a:nth-child(2) { animation-delay: .87s; }
    body:has(.portada) .menu > a:nth-child(3) { animation-delay: .94s; }
    body:has(.portada) .menu > a:nth-child(4) { animation-delay: 1.01s; }
    body:has(.portada) .menu > a:nth-child(5) { animation-delay: 1.08s; }
    body:has(.portada) .menu > a:nth-child(6) { animation-delay: 1.15s; }
    /* El carrito ya usa transform para centrarse: solo se desvanece */
    body:has(.portada) .menu > a.menu__carrito { animation: carrito-aparece .6s 1.25s both; }
}
@media (prefers-reduced-motion: reduce) { body:has(.portada) .header, body:has(.portada) .menu > a { animation: none !important; } }

/* Al volver a inicio navegando dentro del sitio la intro no se repite (clase puesta por main.js) */
.sin-intro .portada *, .sin-intro .portada::after, .sin-intro .portada__eyebrow::before, .sin-intro .portada__eyebrow::after,
.sin-intro body:has(.portada) .header, .sin-intro body:has(.portada) .menu > a { animation: none !important; }
.sin-intro .portada::after { display: none; }