/*
Theme Name: Aviva Ministerio
Theme URI: https://avivaministerio.com
Description: Tema hijo de Astra para el sitio de Aviva Ministerio. Lleva el
diseño del prototipo aprobado (fondo oscuro, dorado, panel
central, tapas con vista previa y movimiento) sin cambiar como
funciona la tienda.
Author: Sven
Version: 2.0.0
Template: astra
Text Domain: braiw-child
*/
/*
* El diseño.
*
* Esta primera parte es la hoja del prototipo aprobado
* (aviva-prototipo/aviva.css), con las medidas tomadas de las maquetas sobre
* un lienzo de 1024 px. En pantallas mas anchas el aplica un zoom
* proporcional, hasta 1,35x (ver aviva_head() en functions.php). Por debajo de
* 1024 px manda el diseño responsive.
*
* La segunda parte, al final, adapta todo esto a WordPress, Astra y WooCommerce.
*/
:root {
--fondo-pagina: #080807;
--negro: #0E0F0F;
--superficie: #1A1917;
--oro: #D7AE4B;
--oro-alto: #E9CB78;
--oro-claro: #F3E3B5;
--oro-oscuro: #8A6A1F;
--marfil: #F3E8CF;
--tinta: #1C1C1C;
--tenue: #6F6A62;
--sobre-negro: #E9E3D6;
--tenue-negro: #A9A294;
--linea-oro: rgba(215, 174, 75, .45);
--linea-clara: #E4D9C3;
--exito: #2F6B3A;
--error: #A33A2B;
--serif: "EB Garamond", Georgia, "Times New Roman", serif;
--sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
--manual: "Allura", "Brush Script MT", cursive;
--sangria: 76px; /* borde del panel: la cabecera y el pie alinean su contenido con él */
--margen: 52px; /* aire interior del panel: es la banda donde viven las hojas, sin pisar el texto */
--sombra: 0 14px 34px rgba(0, 0, 0, .22);
--sombra-negra: 0 22px 50px rgba(0, 0, 0, .6);
--degradado-oro: linear-gradient(180deg, #F0D58A 0%, #D7AE4B 100%);
--degradado-titulo: linear-gradient(180deg, #F8EAC4 0%, #E3C06F 55%, #C99A3E 100%);
}
/*
* Las fuentes, servidas desde este mismo dominio.
*
* Antes venian de fonts.googleapis.com, y medido sobre el sitio publicado esa
* hoja tardaba 1218 ms, de los cuales 886 eran solo resolver el dominio y
* negociar el TLS. Como es una hoja de estilos, bloquea el pintado: el primer
* contenido no aparecia hasta que terminaba. Sirviendolas desde aca no hay
* dominio nuevo que resolver ni conexion nueva que abrir, y las reglas viajan
* dentro de esta misma hoja.
*
* Solo se guardan los subconjuntos latin y latin-ext, que es lo que necesita
* el castellano; el cirilico, el griego y el vietnamita no se descargan nunca.
* Cada archivo es una fuente variable, asi que un solo woff2 cubre todos los
* pesos de la familia y por eso el `font-weight` va como rango.
*
* Los archivos son los mismos que sirve Google Fonts, con licencia abierta
* (OFL para EB Garamond y Allura, Apache 2.0 para Inter).
*/
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(assets/fuentes/inter-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(assets/fuentes/inter-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(assets/fuentes/eb-garamond-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(assets/fuentes/eb-garamond-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 400 500;
font-display: swap;
src: url(assets/fuentes/eb-garamond-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 400 500;
font-display: swap;
src: url(assets/fuentes/eb-garamond-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fuentes/allura-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Allura';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(assets/fuentes/allura-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #050505; }
/*
* El lienzo crece con la pantalla hasta llenar 1900 px reales.
*
* El zoom se planta en 1,35x -mas que eso y el texto se lee agrandado-, asi que
* a partir de ahi la pagina se ensancha en vez de magnificarse: el viewport en
* px de CSS pasa a ser ancho/1,35, y el lienzo lo sigue hasta este tope. Los
* 1407 px son justo 1900 / 1,35, de modo que en una pantalla de 1900 la pagina
* llega de borde a borde; mas ancha que eso, queda centrada.
*/
body { max-width: 1407px; margin: 0 auto; box-shadow: 0 0 80px rgba(0, 0, 0, .6); font-family: var(--sans); font-size: 11.9px; line-height: 1.5; color: var(--sobre-negro); background: var(--fondo-pagina); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.bloqueado { overflow: hidden; }
/*
* Tres capas, para que la página no sea un solo bloque parejo:
* la cabecera y el pie van de lado a lado sobre el fondo de la página, y el
* contenido queda metido hacia adentro, en un panel redondeado que flota sobre
* ese fondo. Así se separan sin necesidad de líneas divisorias.
*/
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.04; font-variant-numeric: lining-nums; }
p { margin: 0; }
button, input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--oro-alto); outline-offset: 3px; }
.contenedor { position: relative; width: 100%; padding-left: var(--margen); padding-right: var(--margen); }
.cabecera > .contenedor, .pie > .contenedor { padding-left: var(--sangria); padding-right: var(--sangria); }
.oscuro { background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(215, 174, 75, .06), transparent 70%), var(--negro); color: #fff; }
/*
* Las secciones que en la maqueta eran crema pasan a carbon.
*
* Un negro apenas mas calido y claro que el de las secciones oscuras, con un
* resplandor dorado en una esquina: alcanza para que se lean como otra banda
* sin cortar la noche de la pagina con un bloque claro.
*/
.carbon { background: radial-gradient(ellipse 55% 70% at 8% 0%, rgba(215, 174, 75, .08), transparent 62%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(215, 174, 75, .05), transparent 60%), linear-gradient(180deg, #141311 0%, #0C0C0B 100%); color: var(--sobre-negro); }
.carbon h2 { color: var(--marfil); }
.relativo { position: relative; overflow: hidden; }
/* ----------------------------------------------------------- tipografía */
.titulo-oro { background: var(--degradado-titulo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marfil { color: var(--marfil); }
/*
* Tope de medida, no de columna.
*
* Con el lienzo ancho las columnas de texto pasan de 768 a 1151 px y los
* parrafos llegaban a unos 110 caracteres por renglon, que se lee mal. El tope
* solo entra en juego cuando hay ancho de sobra: en el lienzo angosto ninguna
* de estas columnas llega a tocarlo.
*/
.bajada { max-width: 640px; font-size: 13.6px; line-height: 1.38; }
.oscuro .bajada, .banda .bajada { color: var(--sobre-negro); }
.carbon .bajada { color: #CFC8BA; }
.regla { width: 76px; height: 3px; border: 0; margin: 0; background: linear-gradient(90deg, #C99A3E, #E9CB78); }
.precio { font-family: var(--serif); font-size: 23.8px; font-weight: 700; line-height: 1; color: var(--oro-alto); font-variant-numeric: lining-nums; white-space: nowrap; }
.lema { display: inline-flex; align-items: center; gap: 16px; font-size: 8.5px; font-weight: 600; letter-spacing: .44em; text-transform: uppercase; color: var(--oro); }
.lema::before { content: ""; width: 48px; height: 3px; background: var(--oro); border-radius: 2px; }
.lema--fino::before { height: 1px; opacity: .7; }
.lema--solo::before { display: none; }
.volanta { align-self: flex-start; font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: .16em; color: var(--oro); padding-bottom: 2px; border-bottom: 1px solid var(--linea-oro); }
.firma { position: absolute; z-index: 3; margin: 0; font-family: var(--manual); font-size: 22.9px; line-height: .98; color: var(--oro-alto); transform: rotate(-12deg); text-align: center; pointer-events: none; }
.firma::after { content: ""; display: block; width: 50px; height: 1.5px; margin: 8px auto 0; background: var(--oro); transform: rotate(-4deg); }
.hojas { position: absolute; z-index: 2; width: 92px; opacity: .9; pointer-events: none; }
.carbon .hojas { opacity: .5; }
.hojas--izq { left: -40px; }
.hojas--der { right: -40px; transform: scaleX(-1); }
/* -------------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 10px 26px; border-radius: 999px; border: 1.5px solid transparent; font-size: 11.9px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--oro { background: var(--degradado-oro); color: #16130D; box-shadow: 0 8px 22px rgba(215, 174, 75, .2), inset 0 1px 0 rgba(255, 255, 255, .45); }
.boton--oro:hover { filter: brightness(1.05); transform: translateY(-1px); }
.boton--linea { background-color: rgba(0, 0, 0, .25); background-image: var(--degradado-oro); background-repeat: no-repeat; background-size: 0% 100%; color: #fff; border-color: rgba(255, 255, 255, .85); transition: background-size .4s cubic-bezier(.22, .61, .36, 1), color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .3s ease; }
.boton--linea:hover { background-size: 100% 100%; border-color: var(--oro-alto); color: #16130D; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(215, 174, 75, .3); }
.boton--bloque { width: 100%; }
.boton.listo { background: var(--exito); color: #fff; box-shadow: none; }
.botones { display: flex; flex-wrap: wrap; gap: 16px; }
.icono-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; text-decoration: none; }
.icono-btn svg { width: 24px; height: 24px; }
.icono-btn:hover { color: var(--oro-alto); }
/* ------------------------------------------------------------- cabecera */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--fondo-pagina); }
.cabecera__fila { display: flex; align-items: center; min-height: 72px; }
.cabecera__logo { display: flex; flex: none; }
.cabecera__logo img { width: 62px; height: 62px; }
/* El menú va pegado a la derecha, cerca del buscador y el carrito, en vez de dejar un hueco largo después de Contacto. */
.menu { display: flex; align-items: center; justify-content: flex-end; gap: 36px; margin-left: 54px; margin-right: 44px; flex: 1; }
.menu__link { position: relative; padding: 8px 0; font-size: 12.3px; color: #F2EEE6; text-decoration: none; }
.menu__link:hover { color: var(--oro-alto); }
.menu__link.activo { color: var(--oro-alto); font-weight: 600; }
/*
* El subrayado vive en todos los enlaces, plegado.
*
* Antes solo lo tenia el activo, asi que al pasar por encima de los demas no
* pasaba nada. Dibujandolo siempre y escalandolo en X crece desde la izquierda
* al pasar el raton, y en el activo queda desplegado de entrada.
*/
.menu__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--oro); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.menu__link:hover::after, .menu__link.activo::after { transform: scaleX(1); }
.acciones { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.acciones__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .32); margin: 0 12px; }
.contador { position: absolute; top: -2px; right: -6px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--degradado-oro); color: #16130D; font-size: 10.2px; font-weight: 700; line-height: 1; transition: transform .2s ease; }
.contador.pulso { transform: scale(1.35); }
.contador.vacio { display: none; }
.boton-menu { display: none; }
.cajon { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, .6); }
.cajon__panel { width: min(360px, 88vw); height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; background: var(--negro); border-left: 1px solid var(--linea-oro); }
.cajon__cabeza { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cajon a { display: flex; align-items: center; min-height: 58px; font-family: var(--serif); font-size: 25.5px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cajon a.activo { color: var(--oro-alto); }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11.5px; color: #EDE7DA; }
.migas a { color: #EDE7DA; }
.migas a:hover { color: var(--oro-alto); }
.migas svg { width: 17px; height: 17px; }
.migas__sep { color: var(--oro); }
/* ------------------------------------------------------------- portadas */
.portada { position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--negro); }
.portada__foto { position: absolute; top: 0; right: 0; width: 76%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.portada::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0E0F0F 0%, rgba(14, 15, 15, .96) 18%, rgba(14, 15, 15, .7) 38%, rgba(14, 15, 15, .12) 64%, rgba(14, 15, 15, .2) 100%), linear-gradient(0deg, rgba(14, 15, 15, .7) 0%, rgba(14, 15, 15, 0) 28%); }
.portada > .contenedor { position: relative; z-index: 2; }
.portada__texto { display: flex; flex-direction: column; }
.portada h1 { font-weight: 500; }
/* Inicio: 339 px, título de dos líneas. */
.portada--inicio { height: 339px; }
.portada--inicio h1 { font-size: 45px; line-height: 1.0; max-width: 470px; }
.portada--inicio .bajada { margin-top: 12px; max-width: 390px; color: #F4EFE4; }
.portada--inicio .botones { margin-top: 20px; gap: 14px; }
.portada--inicio .lema { margin-top: 18px; }
/* Quiénes somos, Multitracks y Contacto. */
.portada--pagina { height: 330px; }
.portada--quienes h1 { font-size: 54.4px; }
.portada--quienes .bajada { margin-top: 12px; max-width: 400px; font-size: 16.1px; line-height: 1.35; color: #F4EFE4; }
.portada--quienes .lema { margin-top: 22px; }
.portada--multitracks { height: 348px; }
.portada--multitracks h1 { font-size: 85px; font-weight: 600; letter-spacing: -.01em; }
.portada--multitracks .regla { margin-top: 18px; width: 106px; }
.portada--contacto { height: 372px; }
.portada--contacto h1 { font-size: 74.8px; font-weight: 600; }
.portada--contacto .bajada { margin-top: 14px; max-width: 385px; font-size: 15.3px; line-height: 1.3; color: #F4EFE4; }
.portada--contacto .lema { margin-top: 26px; }
/* --------------------------------------------------------------- carátula */
/*
* El marco toma la forma del arte: 16:9, no cuadrado.
*
* Las maquetas dibujan la tapa cuadrada, pero las portadas reales que entrego
* el cliente son 16:9. Metidas en un cuadrado y centradas quedaban con una
* banda gris arriba y otra abajo -el fondo desenfocado-, que es lo que se veia
* como relleno sobrante. Con el marco en 16:9 la imagen lo llena entero.
*/
.caratula { position: relative; z-index: 1; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid var(--oro); background: #000; }
.caratula__fondo { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(22px) brightness(.62) saturate(1.1); }
.caratula__img { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.con-disco { position: relative; }
.con-disco::before { content: ""; position: absolute; z-index: 0; top: 7%; bottom: 7%; right: -17%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, #2A2A2A 0 7%, #0B0B0B 7.5% 9%, #161616 9.5% 30%, #0E0E0E 31% 49%, #1A1A1A 50% 50.6%, #0A0A0A 51% 100%); box-shadow: 0 20px 40px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.con-disco .caratula { box-shadow: var(--sombra-negra); }
/* --------------------------------------------------------- destacado */
/* Alto libre: la portada crecio y con 292 px clavados se recortaba contra el borde. */
.destacado-seccion { min-height: 292px; padding: 16px 0; }
.destacado { display: flex; align-items: center; gap: 44px; height: 100%; }
.destacado__texto { flex: 1 1 300px; min-width: 300px; display: flex; flex-direction: column; }
.destacado__texto h2 { margin-top: 14px; font-size: 39.1px; font-weight: 500; color: #fff; }
.destacado__texto .bajada { margin-top: 12px; max-width: 460px; font-size: 12.8px; line-height: 1.35; }
.destacado__texto .precio { margin-top: 12px; }
.destacado__texto .botones { margin-top: 14px; }
/* La portada de la publicacion destacada, en grande: 268 px se veian perdidos. */
.destacado__media { flex: 0 1 460px; min-width: 0; margin-right: 76px; margin-top: 8px; }
/* ------------------------------------------------------ tarjetas de pista */
/*
* Alto libre, no 293 px fijos.
*
* La maqueta mide 971 px de ancho y no tiene el panel redondeado: ahi la
* grilla dispone de 840 px. Aca el panel se mete 76 px por lado y el
* contenedor otros 52, asi que a las dos tarjetas les quedan 768 px. Con esa
* diferencia la linea de entrega ya no entra de un renglon, y con el alto
* clavado en 293 px lo que sobraba se cortaba contra el borde de la seccion.
*/
.pistas-seccion { padding: 22px 0 30px; }
.pistas-seccion h2 { font-size: 27.2px; font-weight: 600; }
.pistas-seccion .bajada { margin-top: 2px; font-size: 12.8px; }
.grilla { display: flex; gap: 20px; }
/*
* El hueco entre tapa y texto va en porcentaje del naipe.
*
* Con 20 px fijos el texto quedaba pegado a la tapa y todo el aire sobrante
* caia del otro lado. En porcentaje el hueco crece con el naipe -unos 24 px en
* el lienzo angosto y 38 en el ancho- y el bloque queda centrado en su mitad.
*/
.tarjeta-h { flex: 1 1 0; min-width: 0; display: flex; gap: 3.6%; align-items: center; min-height: 200px; margin-top: 18px; padding: 14px 12px; background: linear-gradient(180deg, #1B1A19, #111110); color: #fff; border: 1px solid rgba(215, 174, 75, .2); border-radius: 10px; box-shadow: var(--sombra); }
/*
* La tapa cede espacio antes que el texto.
*
* Con la base fija en 172 px la tarjeta no podia encogerse por debajo de su
* contenido y las dos juntas se pasaban de la columna: la segunda quedaba
* cortada contra el borde de la seccion, que recorta.
*/
/*
* La tapa ocupa la mitad del naipe, no una base fija.
*
* Con 172 px fijos quedaba chica, y mas todavia desde que el lienzo se ensancha
* hasta 1407 px: el naipe crecia y la tapa no. En porcentaje acompana al naipe
* en todo el recorrido.
*/
/* La tapa manda: ancho fijo en proporción al naipe, sin ceder ante el texto. */
.tarjeta-h .caratula { flex: 0 0 55%; min-width: 120px; }
/* Puede encogerse, pero no por debajo de lo que necesita el boton. */
.tarjeta-h__cuerpo { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.tarjeta-h .tarjeta__titulo { font-size: 18.7px; font-weight: 500; }
.tarjeta-h .tarjeta__titulo a { text-decoration: none; }
.tarjeta-h .meta { margin-top: 6px; font-size: 11.5px; }
.tarjeta-h .precio { margin-top: 10px; font-size: 19.6px; }
.tarjeta-h .boton { align-self: flex-start; margin-top: 12px; min-height: 38px; padding: 8px 16px; font-size: 11.5px; }
/* Sin nowrap: en esta columna la frase no entra de un renglon y se cortaba. */
.tarjeta-h .nota { margin-top: 10px; font-size: 8.9px; }
/*
* El enlace de escucha, bajo el boton de compra.
*
* Quien mira una pista quiere oirla antes de pagarla, y las pistas estan
* publicadas en el canal. Va como enlace y no como boton para que no compita
* con "Anadir al carrito", que es la accion principal del naipe.
*/
.escucha { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin-top: 10px; font-size: 11.9px; font-weight: 600; color: var(--oro-alto); text-decoration: none; }
.escucha:hover { color: var(--oro-claro); text-decoration: underline; }
.escucha svg { width: 17px; height: 17px; flex: none; }
.tarjeta-v .escucha { align-self: center; margin-top: 12px; font-size: 13px; }
.tarjeta-v .escucha svg { width: 19px; height: 19px; }
.meta { color: #BDB6A8; }
.nota { color: #CFC8BA; }
.tarjeta-h .tarjeta__titulo a:hover, .tarjeta-v .tarjeta__titulo a:hover { color: var(--oro-alto); }
/* ------------------------------------------------------------- bandas */
.banda { position: relative; overflow: hidden; color: #fff; background: var(--negro); }
.banda__foto { position: absolute; top: 0; right: 0; height: 100%; width: 66%; object-fit: cover; object-position: 60% 50%; }
.banda::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0E0F0F 0%, #0E0F0F 30%, rgba(14, 15, 15, .55) 52%, rgba(14, 15, 15, .15) 100%); }
.banda > .contenedor { position: relative; z-index: 2; height: 100%; }
.banda__fila { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.banda__texto { display: flex; flex-direction: column; }
.escuchanos { height: 174px; }
.escuchanos h2 { font-size: 35.7px; font-weight: 500; }
.escuchanos .bajada { margin-top: 4px; font-size: 13.2px; }
.escuchanos .boton { margin-top: 16px; min-height: 46px; padding: 10px 22px; font-size: 11.9px; }
.lema-vertical { display: flex; flex-direction: column; gap: 9px; margin: 0 -10px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .44em; text-transform: uppercase; color: #F0E6CF; }
.lema-vertical::after { content: ""; width: 38px; height: 1.5px; margin-top: 8px; background: var(--oro); }
.pedido { height: 111px; background: radial-gradient(ellipse 45% 150% at 82% 60%, rgba(215, 174, 75, .22), transparent 70%), linear-gradient(90deg, #0E0F0F, #16140F); }
.pedido::before { display: none; }
.pedido h2 { font-size: 27.2px; font-weight: 500; }
.pedido .bajada { margin-top: 6px; font-size: 11.9px; }
.pedido .boton { margin-right: 158px; min-height: 44px; padding: 10px 30px; }
/* ------------------------------------------------------------- pasos */
.como-seccion { height: 262px; padding-top: 14px; }
.como-seccion h2 { font-size: 25.5px; font-weight: 600; }
.como-seccion .bajada { margin-top: 2px; font-size: 11.9px; }
.pasos { display: flex; gap: 11px; margin-top: 12px; }
.paso { flex: 1; display: flex; flex-direction: column; align-items: center; height: 180px; padding: 16px 12px 10px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid rgba(215, 174, 75, .22); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.paso svg { flex: none; width: 34px; height: 34px; color: var(--oro-alto); }
.paso h3 { margin-top: 10px; font-family: var(--sans); font-size: 12.3px; font-weight: 600; color: #fff; }
.paso p { margin-top: 6px; font-size: 10.7px; line-height: 1.28; color: #CFC8BA; }
/* -------------------------------------------------------- quiénes somos */
/*
* Alto minimo, no alto clavado.
*
* Los altos salen de la maqueta, pero el texto que va adentro se compone con
* otra fuente y otro cuerpo, asi que ocupa un poco mas. Con `height` fijo la
* seccion no cedia y el bloque, centrado, se salia por arriba y por abajo: el
* titulo "Fundamento biblico" aparecia descabezado y el ultimo parrafo
* cortado. Con `min-height` la seccion conserva la medida de la maqueta
* cuando el texto entra, y crece lo justo cuando no.
*/
.editorial-seccion { min-height: 255px; }
.editorial-seccion--alta { min-height: 291px; }
/* Solo el aire vertical: en abreviado borraria el margen lateral de .contenedor. */
.editorial { display: flex; align-items: center; min-height: 100%; padding-top: 14px; padding-bottom: 14px; }
.editorial__texto { flex: 1; display: flex; flex-direction: column; padding-right: 36px; }
.editorial__texto h2 { font-size: 39.1px; font-weight: 700; }
.editorial__texto .regla { margin-top: 10px; }
.editorial__texto p { max-width: 660px; margin-top: 14px; font-size: 14px; line-height: 1.5; }
.editorial__foto { flex: 0 0 392px; margin-right: -6px; }
.editorial__foto img { width: 100%; height: 222px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(215, 174, 75, .25); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); }
.editorial-seccion .editorial__foto img { height: 210px; }
.editorial-seccion--alta .editorial__foto { flex-basis: 380px; }
.editorial-seccion--alta .editorial__foto img { height: 250px; }
.cita { max-width: 660px; margin: 14px 0 0; font-family: var(--serif); font-size: 21.2px; font-style: italic; font-weight: 500; line-height: 1.22; color: var(--marfil); }
.cita-fuente { margin-top: 6px; font-size: 15.3px; color: var(--oro); }
.editorial-seccion--alta .editorial__texto p:last-child { margin-top: 14px; font-size: 13.2px; }
/* La foto del equipo, bajo la portada de Quiénes somos. El recorte baja un poco para no cortar pies ni cabezas. */
.equipo { padding: 34px 0 30px; }
.equipo__foto { margin: 0; text-align: center; }
.equipo__foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; border-radius: 14px; border: 1px solid rgba(215, 174, 75, .35); box-shadow: 0 26px 60px rgba(0, 0, 0, .55); }
.equipo__foto figcaption { margin-top: 14px; font-family: var(--manual); font-size: 27px; color: var(--oro-alto); }
.vision { position: relative; display: flex; align-items: stretch; min-height: 337px; background: linear-gradient(90deg, #0E0F0F, #171614 60%, #1C1B19); color: #fff; overflow: hidden; }
.vision__foto { position: relative; flex: 0 0 470px; }
.vision__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vision__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 15, 15, 0) 55%, rgba(24, 23, 21, .7) 88%, #1A1917); }
/* El aire vertical va aca y no en la seccion, para que la foto siga llegando al borde. */
.vision__texto { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px var(--margen) 16px 6px; }
.vision__texto h2 { font-size: 39.1px; font-weight: 700; }
.vision__texto .regla { margin-top: 10px; }
.vision__texto p { max-width: 660px; margin-top: 14px; font-size: 13.4px; line-height: 1.5; color: #F2EEE6; }
.vision__texto p + p { margin-top: 12px; }
.identidad { position: relative; height: 258px; overflow: hidden; color: #fff; background: var(--negro); }
.identidad__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.identidad::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 15, 15, .8), rgba(14, 15, 15, .55) 50%, rgba(14, 15, 15, .85)); }
.identidad > .contenedor { position: relative; z-index: 2; padding-top: 18px; }
.identidad h2 { font-size: 39.1px; font-weight: 700; }
.identidad .regla { margin-top: 10px; }
.valores { display: flex; gap: 18px; margin-top: 30px; }
.valor { flex: 1; display: flex; flex-direction: column; align-items: center; height: 134px; padding: 12px 10px 0; text-align: center; border: 1px solid var(--linea-oro); border-radius: 12px; background: rgba(10, 10, 10, .35); }
.valor__icono { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--oro); color: var(--oro-alto); }
.valor__icono svg { width: 30px; height: 30px; }
.valor p { margin-top: 10px; font-size: 14px; line-height: 1.3; color: #F2EEE6; }
/* ------------------------------------------------------------- catálogo */
.catalogo { padding: 36px 0 52px; }
.catalogo > .contenedor { padding-left: 40px; padding-right: 40px; }
.barra { display: flex; align-items: center; justify-content: space-between; }
.barra p, .barra label { font-size: 17px; color: var(--sobre-negro); }
.orden { display: flex; align-items: center; gap: 16px; }
.selector { appearance: none; width: 232px; height: 60px; padding: 0 50px 0 22px; font-size: 15.7px; color: #F2EEE6; background: #151412 url("data:image/svg+xml;utf8,") no-repeat right 20px center / 18px; border: 1px solid rgba(215, 174, 75, .3); border-radius: 14px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.selector:hover, .selector:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(215, 174, 75, .14); outline: none; }
/*
* Naipes de ancho acotado, no estirados a la columna.
*
* Con `flex: 1` las dos fichas se repartian todo el ancho disponible, y al
* ensancharse el lienzo pasaban de 380 a mas de 550 px: enormes, y con una
* tipografia pensada para ese tamano que quedaba fuera de escala respecto del
* resto del sitio. Con base y tope fijos el naipe conserva su medida y la fila
* simplemente acomoda mas columnas cuando hay lugar.
*/
.grilla--catalogo { flex-wrap: wrap; gap: 28px; margin-top: 32px; }
.tarjeta-v { flex: 0 1 360px; max-width: 400px; display: flex; flex-direction: column; padding: 22px 20px 20px; background: linear-gradient(180deg, #1B1A19, #111110); color: #fff; border: 1px solid rgba(215, 174, 75, .18); border-radius: 16px; box-shadow: 0 20px 44px rgba(0, 0, 0, .45); }
.tarjeta-v .caratula { width: 100%; }
.tarjeta-v .tarjeta__titulo { margin-top: 20px; font-size: 25.5px; font-weight: 500; }
.tarjeta-v .tarjeta__titulo a { text-decoration: none; }
.tarjeta-v .meta { margin-top: 8px; font-size: 14.5px; }
.tarjeta-v .precio { margin-top: 12px; font-size: 25.5px; }
.tarjeta-v .boton { margin-top: 16px; min-height: 46px; font-size: 14.5px; }
.tarjeta-v .boton svg { width: 20px; height: 20px; }
.tarjeta-v .nota { margin-top: 10px; text-align: center; font-size: 11.9px; }
/* ---------------------------------------------------------------- ficha */
.ficha-pagina { position: relative; background: var(--negro); color: #fff; overflow: hidden; }
.ficha-pagina__foto { position: absolute; top: 0; right: 0; width: 70%; height: 470px; object-fit: cover; object-position: 60% 30%; opacity: .6; }
.ficha-pagina::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1300px; z-index: 1; background: linear-gradient(90deg, #0E0F0F 0%, #0E0F0F 34%, rgba(14, 15, 15, .55) 70%, rgba(14, 15, 15, .35)), linear-gradient(0deg, #0E0F0F 0%, #0E0F0F 62%, rgba(14, 15, 15, .2) 100%); }
.ficha-pagina > .contenedor { position: relative; z-index: 2; padding-top: 50px; padding-right: 4px; }
.ficha-pagina > .contenedor, .ficha-pagina .migas { padding-left: 14px; }
.ficha { display: flex; align-items: flex-start; margin-top: 40px; }
/*
* La tapa, en proporcion a la fila y no en pixeles fijos.
*
* Con 480 px clavados la tapa se veia bien en el lienzo ancho, pero en el
* angosto -donde la fila mide 712 px- dejaba a la columna de texto sin sitio y
* el titulo, el precio y los dos botones se salian de la seccion. El 44% da los
* mismos 480 px cuando el lienzo esta a tope y cede cuando no.
*/
.ficha__media { flex: 0 1 44%; min-width: 260px; display: flex; flex-direction: column; }
.ficha__media .con-disco { width: 100%; }
/*
* El texto, por encima del disco.
*
* El vinilo asoma un 17% por la derecha de la tapa; al agrandar la tapa a 480 px
* ese asomo llego hasta la columna de texto y, por ser un pseudoelemento
* posicionado, se pintaba sobre ella: se comia la primera letra del precio y del
* resumen. Apilar la columna lo devuelve al fondo.
*/
.ficha__info { position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 56px; padding-top: 30px; }
.ficha__info h1 { font-size: 42.5px; font-weight: 500; }
.ficha__info .precio { margin-top: 20px; font-size: 27.2px; }
.ficha__info .bajada { margin-top: 18px; font-family: var(--serif); font-size: 14px; line-height: 1.45; color: #EDE7DA; }
.datos { display: flex; gap: 20px; margin-top: 24px; margin-left: -2px; }
.dato { flex: 0 0 205px; display: flex; align-items: center; gap: 18px; height: 78px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(20, 20, 19, .8); }
.dato svg { width: 38px; height: 38px; color: var(--oro-alto); flex: none; }
.dato__etiqueta { display: block; font-size: 11.5px; color: #B9B2A5; }
.dato__valor { display: block; margin-top: 2px; font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.1; color: #fff; }
/*
* Los dos botones se acomodan en dos renglones si no entran en uno.
*
* Ninguno parte la frase, asi que juntos piden unos 500 px; en el lienzo
* angosto la columna no los tiene y se salian por la derecha.
*/
.compra { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.compra .boton { flex: 0 1 auto; min-height: 54px; padding-left: 34px; padding-right: 34px; font-size: 16.1px; }
.compra .boton svg { width: 26px; height: 26px; }
.descarga { display: flex; align-items: center; gap: 24px; margin-top: 22px; padding: 16px 20px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; font-family: var(--serif); font-size: 11.9px; line-height: 1.55; color: #EDE7DA; }
.descarga svg { width: 34px; height: 34px; color: var(--oro-alto); flex: none; }
.categoria { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 13.6px; color: #EDE7DA; }
.categoria a { color: var(--oro-alto); text-decoration: none; }
.panel { margin: 26px 0 0 -14px; display: flex; flex-direction: column; padding: 20px 36px 26px; background: rgba(22, 21, 20, .92); border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; color: #EDE7DA; }
.pestana { align-self: flex-start; display: inline-flex; align-items: center; gap: 18px; padding: 0 8px 14px; border-bottom: 2px solid var(--oro); font-family: var(--serif); font-size: 17.8px; color: #F2EEE6; }
.pestana svg { width: 26px; height: 26px; color: var(--oro-alto); }
.panel__linea { height: 1px; background: rgba(255, 255, 255, .16); margin: 20px 20px 0; }
.panel h3 { margin-top: 22px; padding: 0 20px; font-size: 22.1px; font-weight: 500; color: var(--oro-claro); }
.lista { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 0; padding: 0 20px; list-style: none; font-family: var(--serif); font-size: 14px; }
.panel h3 + .lista { margin-top: 14px; }
.lista li { display: flex; gap: 18px; }
.lista li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .64em; border-radius: 50%; background: #fff; }
.creditos { margin-top: 18px; padding: 0 20px; font-family: var(--serif); font-size: 13.2px; line-height: 1.5; }
.cierre-publico { position: relative; z-index: 2; height: 250px; margin-top: 4px; overflow: hidden; }
.cierre-publico img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cierre-publico::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0E0F0F, rgba(14, 15, 15, .05) 38%, rgba(14, 15, 15, .25)); }
/* ------------------------------------------------------------- contacto */
.contacto-seccion { padding: 30px 0 32px; }
.contacto { display: flex; align-items: stretch; gap: 22px; }
.formulario { flex: 1 1 550px; min-width: 0; display: flex; flex-direction: column; padding: 30px 30px 32px 36px; background: linear-gradient(180deg, #181715, #0F0F0E); border: 1px solid rgba(215, 174, 75, .25); border-radius: 12px; box-shadow: var(--sombra-negra); }
.formulario h2 { font-size: 39.1px; font-weight: 700; color: var(--marfil); }
.formulario .regla { margin-top: 20px; width: 78px; }
.campo { display: flex; flex-direction: column; margin-top: 30px; }
.campo + .campo { margin-top: 24px; }
.campo label { font-family: var(--serif); font-size: 14.4px; font-weight: 500; color: #EDE7DA; }
/* Ancho fluido: los 482 px de la maqueta no entran en la columna del panel. */
.control { position: relative; margin-top: 10px; width: 100%; max-width: 482px; }
.control svg { position: absolute; left: 20px; top: 14px; width: 22px; height: 22px; color: #8C857A; pointer-events: none; }
.entrada { width: 100%; height: 52px; padding: 0 18px 0 62px; font-size: 13.6px; color: #F2EEE6; background: #0B0B0A; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.entrada { height: 162px; padding-top: 14px; resize: vertical; }
.entrada::placeholder { color: #8C857A; }
.entrada:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(215, 174, 75, .2); }
.campo.error .entrada { border-color: #D9705C; box-shadow: 0 0 0 4px rgba(217, 112, 92, .16); }
.campo__error { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: #F0A493; }
.campo.error .campo__error { display: flex; }
.campo__error svg { width: 15px; height: 15px; flex: none; }
/* En la maqueta el boton queda centrado en el panel; centrarlo lo hace fluido. */
.formulario .boton { align-self: center; margin: 36px 0 0; width: min(352px, 100%); min-height: 72px; font-size: 16.1px; }
.formulario .boton svg { width: 30px; height: 30px; }
.formulario .boton svg:last-child { width: 22px; height: 22px; }
.aviso { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 10px; font-size: 11.9px; border: 1px solid; }
.aviso svg { width: 20px; height: 20px; flex: none; }
.aviso--exito { background: rgba(47, 107, 58, .2); border-color: rgba(110, 180, 120, .45); color: #A6D9AE; }
.aviso--error { background: rgba(163, 58, 43, .2); border-color: rgba(220, 110, 90, .45); color: #F0A493; }
.aviso--info { background: rgba(215, 174, 75, .1); border-color: rgba(215, 174, 75, .4); color: var(--oro-claro); }
/*
* El panel de WhatsApp se encoge con la columna.
*
* Con la base rigida en 384 px, mas los 550 px que pedia el formulario, la
* fila sumaba 956 px dentro de una columna de 768: el panel se salia por la
* derecha y la seccion, que recorta, lo cortaba por la mitad. Dejando que los
* dos se encojan, el reparto mantiene la proporcion de la maqueta (59/41).
*/
.whatsapp { flex: 0 1 384px; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background: #0F0F0E; color: #fff; border: 1px solid rgba(215, 174, 75, .4); border-radius: 12px; box-shadow: var(--sombra); }
.whatsapp__foto { position: absolute; left: 0; right: 0; top: 0; height: 330px; }
.whatsapp__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.whatsapp__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0F0F0E 0%, rgba(15, 15, 14, .25) 45%, rgba(15, 15, 14, 0) 70%); }
.whatsapp__cuerpo { position: relative; display: flex; flex-direction: column; padding: 305px 26px 26px 36px; }
.whatsapp h2 { font-size: 39.9px; font-weight: 500; line-height: 1.0; }
.whatsapp .regla { margin-top: 22px; }
.whatsapp p { margin-top: 26px; font-size: 15.3px; line-height: 1.35; color: #F2EEE6; }
/*
* Costados mas angostos que los 26 px del boton comun.
*
* El boton se estira al ancho del panel, y el panel ahora se encoge con la
* columna. Con el relleno y el cuerpo de la maqueta, "Escribinos por WhatsApp"
* -que no parte renglon- se salia de la pastilla dorada por los dos lados.
* Bajar el relleno, el hueco entre iconos y dos puntos de cuerpo lo devuelve
* adentro sin partir la frase.
*/
.whatsapp .boton { margin: 28px 0 0 -12px; min-height: 60px; padding-left: 16px; padding-right: 16px; gap: 8px; font-size: 12.8px; }
.whatsapp .boton svg:first-child { width: 28px; height: 28px; }
.whatsapp__nota { display: flex; gap: 26px; margin-top: 26px; padding: 26px 0 0 10px; border-top: 1px solid rgba(215, 174, 75, .35); font-size: 12.8px; line-height: 1.45; color: #E4DED2; }
.whatsapp__nota svg { width: 30px; height: 30px; color: var(--oro-alto); flex: none; }
.teclado-banda { height: 160px; }
.teclado-banda .banda__foto { width: 70%; }
/* -------------------------------------------------- carrito y finalizar */
.escena { position: relative; overflow: hidden; background: var(--negro); color: #fff; }
.escena__foto { position: absolute; top: 0; right: 0; width: 70%; height: 520px; object-fit: cover; object-position: 60% 40%; }
.escena__publico { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 470px; object-fit: cover; object-position: 50% 55%; }
.escena::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0E0F0F 0%, rgba(14, 15, 15, .82) 26%, rgba(14, 15, 15, .15) 62%, rgba(14, 15, 15, .3)), linear-gradient(180deg, rgba(14, 15, 15, 0) 0%, rgba(14, 15, 15, .1) 30%, rgba(14, 15, 15, .75) 48%, rgba(14, 15, 15, .55) 68%, rgba(14, 15, 15, .2) 88%, rgba(14, 15, 15, .4) 100%); }
.escena > .contenedor { position: relative; z-index: 2; }
.escena__cabeza { display: flex; flex-direction: column; }
.escena__cuerpo { display: flex; justify-content: center; }
.escena--carrito { height: 1392px; }
.escena--carrito .escena__cabeza { padding-top: 90px; }
.escena--carrito h1 { font-size: 90.1px; font-weight: 500; }
.escena--carrito .regla { margin-top: 24px; width: 90px; height: 2.5px; }
.escena--carrito .lema { margin-top: 36px; font-size: 11px; letter-spacing: .6em; }
.escena--carrito .escena__cuerpo { padding-top: 172px; }
.escena--finalizar { height: 1391px; }
.escena--finalizar .escena__cabeza { padding-top: 64px; }
.escena--finalizar h1 { margin-top: 36px; font-size: 81.6px; font-weight: 500; line-height: .95; }
.escena--finalizar .lema { margin-top: 34px; font-size: 10.2px; letter-spacing: .5em; line-height: 1.9; }
.escena--finalizar .regla { margin-top: 18px; width: 80px; height: 2px; }
.escena--finalizar .escena__cuerpo { padding-top: 84px; }
.tarjeta-vacia { display: flex; flex-direction: column; align-items: center; border-radius: 16px; text-align: center; }
.tarjeta-vacia--clara { width: 834px; height: 594px; padding-top: 76px; background: linear-gradient(180deg, rgba(34, 33, 30, .95), rgba(14, 14, 13, .96)); color: #fff; border: 1.5px solid #C9A04A; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.tarjeta-vacia--clara .circulo-carrito { width: 264px; height: 264px; background: radial-gradient(circle, rgba(215, 174, 75, .16), rgba(215, 174, 75, .03) 70%); border: 1.5px solid rgba(215, 174, 75, .6); color: var(--oro-alto); }
.tarjeta-vacia--clara h2 { color: #F4EEE2; }
.tarjeta-vacia--clara h2 { margin-top: 18px; font-size: 48.4px; font-weight: 500; }
.tarjeta-vacia--clara .boton { margin-top: 30px; width: 376px; min-height: 72px; font-size: 19.6px; }
.tarjeta-vacia--oscura { width: 760px; height: 555px; padding-top: 68px; background: linear-gradient(180deg, rgba(38, 37, 34, .95), rgba(18, 18, 17, .95)); color: #fff; border: 1.5px solid #C9A04A; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.tarjeta-vacia--oscura .circulo-carrito { width: 190px; height: 190px; border: 1.5px solid rgba(215, 174, 75, .7); color: var(--oro-alto); }
.tarjeta-vacia--oscura h2 { margin-top: 46px; font-size: 49.3px; font-weight: 500; color: #F4EEE2; }
.tarjeta-vacia--oscura .boton { margin-top: 30px; width: 396px; min-height: 80px; font-size: 19.6px; }
.tarjeta-vacia .boton svg { width: 30px; height: 30px; }
.circulo-carrito { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.circulo-carrito svg { width: 56%; height: 56%; }
/*
* La tabla arriba, los totales abajo.
*
* Las maquetas solo dibujan el carrito vacio, asi que la tabla de items se
* invento aca y nunca se contrasto contra el ancho real de su columna. Puesta
* al lado del panel de totales le quedaban 444 px, y una fila necesita unos
* 700: miniatura, titulo, precio, cantidad, subtotal y el boton de quitar. No
* hay ajuste de cuerpo ni de relleno que cierre esa diferencia, asi que la
* tabla pasa a usar los 768 px completos y los totales bajan, alineados a la
* derecha. Con eso la fila entra con margen de sobra.
*/
.carrito { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; width: 100%; }
.carrito__items { width: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(34, 33, 30, .95), rgba(14, 14, 13, .96)); color: #fff; border: 1.5px solid #C9A04A; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; }
.carrito__cabeza, .item { display: flex; align-items: center; gap: 16px; padding: 14px 22px; }
.carrito__cabeza { font-size: 9.3px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue-negro); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.item + .item { border-top: 1px solid rgba(255, 255, 255, .1); }
.item { transition: background-color .2s ease; }
.item:hover { background: rgba(215, 174, 75, .05); }
/*
* Un piso para la columna de producto.
*
* Con `min-width: 0` era la unica que podia encogerse, asi que absorbia todo
* lo que faltaba y se aplastaba a cero: la tapa y el titulo quedaban por
* encima de la columna de precio, y en la cabecera "PRODUCTO" se montaba sobre
* "PRECIO". El piso de 200 px la deja ceder, pero no desaparecer.
*/
.col-producto { flex: 1 1 auto; display: flex; align-items: center; gap: 16px; min-width: 200px; }
/* La base decia 110 px, pero "COP $150.000" mide 124 y sin `min-width` no cedia. */
.col-precio { flex: 0 0 124px; min-width: 0; text-align: right; }
.col-quitar { flex: 0 0 34px; display: flex; justify-content: flex-end; }
.item .caratula { flex: 0 0 70px; width: 70px; }
.item__titulo { font-family: var(--serif); font-size: 18.7px; font-weight: 600; line-height: 1.15; color: #F2EEE6; text-decoration: none; }
.item__titulo:hover { color: var(--oro-alto); }
.item .precio { font-size: 17px; color: var(--oro-alto); }
.quitar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #CFC8BA; cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .25s ease; }
.quitar:hover { color: #F0A493; border-color: #F0A493; transform: rotate(90deg); }
.quitar svg { width: 15px; height: 15px; }
.etiqueta-movil { display: none; font-size: 11px; color: var(--tenue-negro); }
.totales { flex: 0 0 auto; width: 300px; display: flex; flex-direction: column; gap: 12px; padding: 26px; background: linear-gradient(180deg, rgba(38, 37, 34, .95), rgba(18, 18, 17, .95)); color: #fff; border: 1.5px solid #C9A04A; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.totales h2 { font-size: 25.5px; font-weight: 500; }
.totales__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #E4DED2; }
.totales__fila--total { border-bottom: 0; color: #fff; font-weight: 600; }
.pedido-resumen { width: 640px; display: flex; flex-direction: column; gap: 16px; padding: 40px 44px; }
.pedido-resumen h2 { font-size: 39.1px; font-weight: 500; }
.resumen { display: flex; flex-direction: column; text-align: left; }
.resumen__item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 14.4px; }
.resumen__item .precio { font-size: 18.7px; }
/* ------------------------------------------------------------ buscador */
.busqueda { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding: 110px 20px 24px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.buscador { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 100%; background: var(--superficie); border: 1px solid var(--linea-oro); border-radius: 16px; box-shadow: var(--sombra-negra); overflow: hidden; color: #fff; }
.buscador__campo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.buscador__campo > svg { width: 22px; height: 22px; color: var(--oro); flex: none; }
.buscador__campo input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font-size: 14.4px; }
.buscador__campo input:focus { outline: none; }
.buscador__campo input::placeholder { color: var(--tenue-negro); }
.buscador__cerrar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #EDE7DA; cursor: pointer; flex: none; }
.buscador__cerrar svg { width: 16px; height: 16px; }
.buscador__resultados { display: flex; flex-direction: column; padding: 8px; overflow-y: auto; }
.buscador__etiqueta { padding: 10px 12px 6px; font-size: 9.3px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue-negro); }
.resultado { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.resultado:hover, .resultado:focus-visible { background: rgba(215, 174, 75, .1); }
.resultado .caratula { flex: 0 0 58px; width: 58px; }
.resultado__texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.resultado__titulo { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.15; }
.resultado__meta { font-size: 11px; color: var(--tenue-negro); }
.resultado mark { background: rgba(215, 174, 75, .28); color: var(--oro-alto); border-radius: 3px; padding: 0 2px; }
.resultado .precio { font-size: 16.1px; }
.buscador__vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 22px; text-align: center; color: #EDE7DA; font-size: 12.8px; }
.buscador__vacio svg { width: 32px; height: 32px; color: var(--oro); }
.buscador__ayuda { padding: 14px 18px; font-size: 11px; color: var(--tenue-negro); }
/* ------------------------------------------------------------ aviso */
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 80; display: flex; align-items: center; gap: 12px; width: min(540px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--negro); color: #fff; border: 1px solid var(--oro); box-shadow: var(--sombra-negra); transform: translate(-50%, 160%); transition: transform .3s ease; }
.toast.visible { transform: translate(-50%, 0); }
.toast svg { width: 22px; height: 22px; color: var(--oro-alto); flex: none; }
.toast span { flex: 1; font-size: 11.9px; }
.toast .boton { min-height: 38px; padding: 8px 18px; font-size: 11px; }
/* ------------------------------------------------------------------ pie */
.pie { position: relative; height: 104px; background: var(--fondo-pagina); color: #EDE7DA; overflow: hidden; }
.pie > .contenedor { height: 100%; }
.pie__fila { display: flex; align-items: center; height: 100%; }
.pie__logo { flex: none; }
.pie__logo img { width: 72px; height: 72px; }
.pie__centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; height: 52px; margin-left: 18px; padding-left: 22px; border-left: 1.5px solid rgba(215, 174, 75, .6); }
.redes { display: flex; gap: 24px; }
.redes a { display: inline-flex; align-items: center; gap: 10px; font-size: 10.2px; color: #F2EEE6; text-decoration: none; }
.redes a:hover { color: var(--oro-alto); }
.redes svg { width: 19px; height: 19px; flex: none; }
.pie__legal { font-size: 9.8px; color: #D5CEC0; }
.pie__lema { display: flex; flex-direction: column; gap: 5px; margin: 0; height: 60px; justify-content: center; padding-left: 26px; border-left: 1.5px solid rgba(215, 174, 75, .6); font-size: 8.1px; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; color: var(--oro); }
.pie__lema::after { content: ""; width: 34px; height: 2px; margin-top: 8px; background: var(--oro); }
/* --------------------------------------------------------- responsive */
/* Por debajo del lienzo de 1024 px se vuelve fluido: alturas automáticas y
columnas que se apilan. */
@media (max-width: 1023px) {
:root { --margen: 22px; --sangria: 24px; }
.portada--inicio, .portada--pagina, .portada--multitracks, .portada--contacto, .destacado-seccion, .pistas-seccion, .como-seccion, .escuchanos, .pedido, .editorial-seccion, .editorial-seccion--alta, .vision, .identidad, .teclado-banda, .pie { height: auto; min-height: 0; }
.portada__texto { padding: 56px 0; }
.destacado-seccion, .pistas-seccion, .como-seccion, .editorial-seccion, .editorial-seccion--alta { padding: 44px 0; }
.escuchanos .banda__fila, .pedido .banda__fila { padding-top: 36px; padding-bottom: 36px; flex-direction: column; align-items: flex-start; gap: 20px; }
.teclado-banda .banda__fila { min-height: 130px; }
.pedido .boton { margin-right: 0; }
.menu, .acciones__sep { display: none; }
.boton-menu { display: inline-flex; }
.cabecera__fila { min-height: 76px; }
.cabecera__logo img { width: 64px; height: 64px; }
.firma, .hojas, .lema-vertical, .pie__lema { display: none; }
.destacado, .editorial, .ficha, .contacto, .carrito { flex-direction: column; align-items: stretch; height: auto; gap: 28px; }
.destacado__media { order: -1; flex-basis: auto; width: min(360px, 80%); margin: 0; }
.editorial__texto { padding-right: 0; }
.editorial__foto, .editorial-seccion--alta .editorial__foto { flex-basis: auto; margin: 0; }
.editorial__foto img, .editorial-seccion .editorial__foto img, .editorial-seccion--alta .editorial__foto img { height: auto; aspect-ratio: 16 / 9; }
.grilla { flex-wrap: wrap; }
.tarjeta-h { flex: 1 1 100%; height: auto; }
.pasos { flex-wrap: wrap; }
.paso { flex: 1 1 42%; height: auto; padding-bottom: 20px; }
.vision { flex-direction: column; }
.vision__foto { flex-basis: 300px; }
.vision__texto { padding: 36px var(--margen); }
.identidad > .contenedor { padding-top: 40px; padding-bottom: 44px; }
.valores { flex-wrap: wrap; }
.valor { flex: 1 1 100%; height: auto; padding: 18px; }
.catalogo { padding: 32px 0 44px; }
.barra { flex-wrap: wrap; gap: 14px; }
.grilla--catalogo .tarjeta-v { flex: 1 1 100%; }
.tarjeta-v .tarjeta__titulo { font-size: 27.2px; }
.ficha-pagina > .contenedor, .ficha-pagina .migas { padding-left: var(--margen); }
.ficha__media, .ficha__media .con-disco { flex-basis: auto; width: min(480px, 86%); }
.ficha__info { margin-left: 0; padding-top: 0; }
.panel { margin: 30px 0 0; }
.contacto { margin: 0; }
.control { width: 100%; }
.formulario .boton { margin-left: 0; width: 100%; }
.whatsapp { flex-basis: auto; }
.escena--carrito, .escena--finalizar { height: auto; }
.escena__cuerpo, .escena--carrito .escena__cuerpo, .escena--finalizar .escena__cuerpo { padding: 56px 0 120px; }
.escena--carrito h1, .escena--finalizar h1 { font-size: 61.2px; }
.tarjeta-vacia--clara, .tarjeta-vacia--oscura { width: 100%; height: auto; padding: 44px 22px; }
.tarjeta-vacia--clara .circulo-carrito, .tarjeta-vacia--oscura .circulo-carrito { width: 180px; height: 180px; }
.tarjeta-vacia h2, .tarjeta-vacia--clara h2, .tarjeta-vacia--oscura h2 { font-size: 35.7px; }
/* `width` explicito arriba: sin esto el panel quedaria clavado en 300 px. */
.totales { flex-basis: auto; width: auto; }
.pedido-resumen { width: 100%; }
/*
* La fila del carrito pasa a ficha apilada antes de los 1024 px.
*
* En una sola linea la fila necesita unos 700 px, y por debajo del lienzo
* de escritorio la columna ya no los tiene: el boton de quitar se salia de
* la caja. Apilada -producto arriba, y debajo precio, cantidad y subtotal
* con su etiqueta- entra en cualquier ancho.
*/
.carrito__cabeza { display: none; }
.item { flex-wrap: wrap; gap: 12px; padding: 18px; position: relative; }
.col-producto { flex: 1 1 100%; min-width: 0; padding-right: 44px; }
.col-precio { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.col-quitar { position: absolute; top: 18px; right: 18px; }
.etiqueta-movil { display: inline; }
.pie__fila { flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; gap: 18px; }
.pie__centro { height: auto; margin-left: 0; }
.redes { flex-wrap: wrap; gap: 12px 22px; }
}
@media (max-width: 767px) {
:root { --margen: 14px; --sangria: 8px; }
.portada__foto, .escena__foto { width: 100%; opacity: .7; }
.portada::before { background: linear-gradient(0deg, #0E0F0F 0%, rgba(14, 15, 15, .82) 50%, rgba(14, 15, 15, .45) 100%); }
.portada--inicio h1 { font-size: 37.4px; }
.portada--multitracks h1, .portada--contacto h1 { font-size: 54.4px; }
.banda__foto { width: 100%; opacity: .45; }
.tarjeta-h { flex-direction: column; align-items: stretch; }
.tarjeta-h .caratula { flex-basis: auto; width: 100%; }
.tarjeta-h .boton { align-self: stretch; }
.paso { flex-basis: 100%; }
.tarjeta-v { padding: 20px; }
.tarjeta-v .tarjeta__titulo { margin-top: 20px; }
.orden { width: 100%; }
.selector { flex: 1; width: auto; min-width: 0; }
.datos { flex-wrap: wrap; }
.dato { flex: 1 1 100%; }
.lista, .creditos, .panel h3 { padding: 0; }
.panel__linea { margin: 20px 0 0; }
.pie__fila { flex-direction: column; align-items: flex-start; }
.pie__centro { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1.5px solid rgba(215, 174, 75, .6); }
}
@media (max-width: 479px) {
.botones .boton, .tarjeta-vacia .boton { width: 100%; }
.compra { flex-direction: column; }
.compra .boton { flex: none; width: 100%; }
.ficha__media, .ficha__media .con-disco { width: 100%; }
.con-disco::before { display: none; }
.resultado .precio { display: none; }
}
/* ------------------------------------------------------------- animacion */
/*
* Las brasas del encabezado.
*
* El lienzo lo inserta el JS dentro de cada portada. Va en z-index 1, el mismo
* que el degradado ::before de la seccion: como los pseudoelementos pintan
* antes que los hijos, las brasas quedan por encima de la foto y del velo
* oscuro, y por debajo del texto, que vive en z-index 2.
*
* `pointer-events: none` es imprescindible: el lienzo cubre toda la portada y
* sin eso se comeria los clics de los botones que tiene debajo.
*/
.latido { position: absolute; left: 0; right: 0; top: 0; height: 100%; max-height: 720px; z-index: 1; pointer-events: none; }
/*
* El metronomo late al tempo de la pista.
*
* La duracion sale de --pulso, que el JS calcula como 60000/BPM a partir del
* tempo que ya trae la ficha. Es el mismo reloj que marca las brasas, asi que
* lo que se ve en el encabezado y lo que dice "148 BPM" van al mismo compas.
*/
@keyframes braiw-pulso {
0% { transform: scale(1); opacity: .85; }
12% { transform: scale(1.14); opacity: 1; }
60% { transform: scale(1); opacity: .85; }
100% { transform: scale(1); opacity: .85; }
}
.dato--tempo svg { animation: braiw-pulso var(--pulso, 420ms) ease-out infinite; transform-origin: center; }
/*
* Aparicion al entrar en pantalla.
*
* La clase `revelar` la pone el JS, no la plantilla: asi, si el script no
* carga o el navegador no trae IntersectionObserver, la pagina se ve entera y
* quieta en vez de quedarse en blanco. La transicion vive en `.visible` y no
* en `.revelar` para que el elemento no intente animarse en el primer pintado.
*
* El desplazamiento es corto -14 px- y va hacia arriba: lo justo para que el
* ojo registre que el bloque llego, sin que la pagina parezca moverse sola.
*/
.revelar { opacity: 0; transform: translateY(30px); }
.revelar--zoom { transform: scale(.9) translateY(20px); }
.revelar.visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
.revelar .regla { transform: scaleX(0); transform-origin: left; }
.revelar.visible .regla { transform: scaleX(1); transition: transform .9s cubic-bezier(.22, .61, .36, 1) .35s; }
/*
* El naipe se levanta al pasarle por encima.
*
* Solo en lo que es clicable de punta a punta -las fichas de pista, los pasos
* y los valores-, nunca en las filas del carrito, donde lo unico que se pulsa
* son los botones y un naipe que se mueve confunde.
*/
.tarjeta-h:hover, .tarjeta-v:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(0, 0, 0, .42); }
.paso:hover, .valor:hover { transform: translateY(-3px); }
/* La tapa se acerca un poco. El translateY va repetido porque es el que la centra. */
.caratula__img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.caratula:hover .caratula__img { transform: translateY(-50%) scale(1.05); }
/* ------------------------------------------------------ vista previa */
/*
* El reproductor de la ficha.
*
* No carga YouTube hasta que alguien pulsa: mientras tanto es una imagen y un
* boton. Un iframe de YouTube son unos 800 KB de script, y la mayoria de las
* visitas a una ficha no llegan a darle a reproducir.
*/
.vista-previa { position: relative; z-index: 2; margin: 48px 0 0 -14px; }
.vista-previa__cabeza { display: flex; flex-direction: column; gap: 12px; }
.vista-previa h2 { font-size: 30.6px; font-weight: 500; color: var(--marfil); }
.reproductor { position: relative; margin-top: 20px; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid rgba(215, 174, 75, .45); border-radius: 18px; background: #000; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.reproductor__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.05); transition: transform 1.2s cubic-bezier(.22, .61, .36, 1), filter .5s ease; }
.reproductor:hover .reproductor__poster { transform: scale(1.04); filter: brightness(.8); }
.reproductor__boton { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 0; border-radius: 50%; background: var(--degradado-oro); color: #16130D; cursor: pointer; box-shadow: 0 0 0 12px rgba(215, 174, 75, .16), 0 24px 50px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.reproductor__boton svg { position: relative; width: 42px; height: 42px; margin-left: 6px; }
.reproductor__boton:hover { transform: scale(1.1); box-shadow: 0 0 0 18px rgba(215, 174, 75, .2), 0 24px 60px rgba(215, 174, 75, .3); }
.reproductor__externo { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #F2EEE6; font-size: 11px; text-decoration: none; backdrop-filter: blur(6px); transition: background-color .2s ease, color .2s ease; }
.reproductor__externo:hover { background: rgba(0, 0, 0, .85); color: var(--oro-alto); }
.reproductor__externo svg { width: 16px; height: 16px; }
.reproductor iframe, .modal-video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reproductor.activo > :not(iframe) { display: none; }
/* El reproductor flotante, para la vista previa desde las tapas. */
.modal-video { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px); animation: aviva-aparece .25s ease; }
.modal-video__caja { width: min(900px, 100%); overflow: hidden; background: var(--superficie); border: 1px solid var(--linea-oro); border-radius: 18px; box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 60px rgba(215, 174, 75, .12); animation: aviva-sube .4s cubic-bezier(.22, .61, .36, 1); }
.modal-video__cabeza { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; }
.modal-video__titulo { flex: 1; min-width: 0; font-family: var(--serif); font-size: 20.4px; font-weight: 500; color: var(--marfil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-video__externo { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #EDE7DA; text-decoration: none; }
.modal-video__externo:hover { color: var(--oro-alto); }
.modal-video__externo svg { width: 17px; height: 17px; }
.modal-video__marco { position: relative; aspect-ratio: 16 / 9; background: #000; }
@keyframes aviva-aparece { from { opacity: 0; } }
@keyframes aviva-sube { from { opacity: 0; transform: translateY(26px) scale(.96); } }
/* ---------------------------------------------------------- dinamica */
/*
* La tapa, viva.
*
* Tres capas encima del arte: un brillo que sigue al puntero (el JS mueve
* --gx/--gy), el enlace a la ficha estirado de borde a borde y el boton de
* reproducir, que es lo unico que no lleva a la ficha. El JS ademas inclina
* la tapa hacia el puntero; aca solo queda la transicion de vuelta.
*/
.caratula--viva { transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease; }
.caratula--viva:hover { border-color: var(--oro-alto); box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 0 34px rgba(215, 174, 75, .3); }
.caratula--viva::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 240, 205, .32), rgba(255, 240, 205, 0) 55%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.caratula--viva:hover::after { opacity: 1; }
.caratula__enlace { position: absolute; inset: 0; z-index: 3; }
.caratula__play { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 1.5px solid rgba(233, 203, 120, .95); background: rgba(14, 15, 15, .5); color: var(--oro-alto); backdrop-filter: blur(4px); transform: scale(.88); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, color .25s ease; }
.caratula__play svg { position: relative; width: 44%; height: 44%; margin-left: 8%; }
.caratula--viva:hover .caratula__play { transform: scale(1); background-color: rgba(14, 15, 15, .7); }
.caratula__play:hover, .caratula__play:focus-visible { background: var(--degradado-oro); color: #16130D; }
.caratula--viva .caratula__play:hover { transform: scale(1.14); }
.destacado__media .caratula__play, .ficha__media .caratula__play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
/* La onda que sale del boton de reproducir, como un parlante. */
.onda { position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--oro-alto); pointer-events: none; animation: aviva-onda 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }
@keyframes aviva-onda { from { transform: scale(1); opacity: .85; } to { transform: scale(1.75); opacity: 0; } }
/*
* El vinilo gira y, al pasar por encima, asoma mas.
*
* Un disco liso girando no se ve girar, asi que lleva dos reflejos conicos y
* la etiqueta dorada. Giro y desplazamiento van en las propiedades `rotate` y
* `translate`, separadas de `transform`, para que no se pisen.
*/
.con-disco::before { background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 16%, rgba(255, 255, 255, .09) 23%, rgba(255, 255, 255, 0) 30% 66%, rgba(255, 255, 255, .09) 73%, rgba(255, 255, 255, 0) 80%), radial-gradient(circle, #1A1509 0 2.5%, #C99A3E 3% 12%, #8A6A1F 12.5% 13%, #0B0B0B 13.5% 15%, #161616 15.5% 30%, #0E0E0E 31% 49%, #1A1A1A 50% 50.6%, #0A0A0A 51% 100%); animation: aviva-gira 6s linear infinite; transition: translate .7s cubic-bezier(.22, .61, .36, 1); }
.con-disco:hover::before { translate: 16% 0; animation-duration: 2.2s; }
@keyframes aviva-gira { to { rotate: 360deg; } }
/* Los naipes: un foco dorado sigue al puntero (--mx/--my, del JS) y el borde se enciende. */
.tarjeta-h, .tarjeta-v, .paso, .valor { position: relative; }
.tarjeta-h::before, .tarjeta-v::before, .paso::before, .valor::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(215, 174, 75, .15), rgba(215, 174, 75, 0) 70%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.tarjeta-h:hover::before, .tarjeta-v:hover::before, .paso:hover::before, .valor:hover::before { opacity: 1; }
.tarjeta-h__cuerpo, .tarjeta-v > *, .paso > *, .valor > * { position: relative; z-index: 1; }
.tarjeta-h, .tarjeta-v { transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease; }
.tarjeta-h:hover, .tarjeta-v:hover { border-color: rgba(215, 174, 75, .55); }
.paso, .valor { transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, box-shadow .35s ease; }
.paso:hover, .valor:hover { border-color: rgba(215, 174, 75, .6); box-shadow: 0 18px 36px rgba(0, 0, 0, .45); }
.paso::after { content: attr(data-n); position: absolute; top: 8px; right: 14px; font-family: var(--serif); font-size: 30.6px; font-weight: 600; line-height: 1; color: rgba(215, 174, 75, .14); transition: color .35s ease, transform .35s ease; }
.paso:hover::after { color: rgba(215, 174, 75, .55); transform: translateY(-2px); }
.paso svg, .valor__icono { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, background-color .35s ease; }
.paso:hover svg { transform: translateY(-3px) scale(1.14); }
.valor:hover .valor__icono { transform: scale(1.1) rotate(-6deg); background-color: rgba(215, 174, 75, .14); box-shadow: 0 0 26px rgba(215, 174, 75, .38); }
/* Botones: el dorado lleva un destello que lo cruza, y la flecha empuja. */
.boton { position: relative; overflow: hidden; isolation: isolate; }
.boton--oro::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 42%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.boton--oro:hover::after { animation: aviva-destello .75s ease; }
/* Los llamados principales destellan solos cada tanto, sin esperar al puntero. */
.portada .boton--oro::after, .compra .boton--oro::after, .pedido .boton--oro::after, .whatsapp .boton--oro::after { animation: aviva-destello-lento 5s ease-in-out 1.2s infinite; }
@keyframes aviva-destello { to { transform: translateX(290%) skewX(-20deg); } }
@keyframes aviva-destello-lento { 0% { transform: translateX(-130%) skewX(-20deg); } 22%, 100% { transform: translateX(290%) skewX(-20deg); } }
.boton--oro:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(215, 174, 75, .42), 0 0 0 4px rgba(215, 174, 75, .12), inset 0 1px 0 rgba(255, 255, 255, .45); }
.boton:active { transform: translateY(0) scale(.97); }
.boton svg:last-child:not(:first-child) { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.boton:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.escucha svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.escucha:hover svg { transform: scale(1.25); }
/* Los titulos dorados llevan un reflejo que corre despacio. */
.titulo-oro { background-image: linear-gradient(100deg, #C99A3E 0%, #E3C06F 18%, #F8EAC4 30%, #E3C06F 42%, #C99A3E 60%, #E3C06F 80%, #C99A3E 100%); background-size: 200% 100%; animation: aviva-reflejo 8s linear infinite; }
@keyframes aviva-reflejo { to { background-position: -200% 0; } }
/* La foto de cada portada respira: se acerca y se aleja muy despacio. */
.portada__foto, .escena__foto, .ficha-pagina__foto { animation: aviva-respira 24s ease-in-out infinite alternate; transform-origin: 70% 40%; }
@keyframes aviva-respira { to { transform: scale(1.09) translateX(-1.5%); } }
/* Cinta dorada que corre bajo la portada del inicio. */
.cinta { overflow: hidden; background: #0A0A09; border-top: 1px solid rgba(215, 174, 75, .35); border-bottom: 1px solid rgba(215, 174, 75, .35); }
.cinta__pista { display: flex; align-items: center; width: max-content; animation: aviva-cinta 40s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta span { padding: 11px 0; font-size: 10.2px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; color: var(--oro-claro); }
.cinta i { padding: 0 26px; font-style: normal; font-size: 10.2px; color: var(--oro); }
@keyframes aviva-cinta { to { transform: translateX(-50%); } }
/* La cabecera se compacta al bajar, deja ver lo que pasa detras y mide el avance. */
.cabecera { transition: background-color .35s ease, box-shadow .35s ease; }
.cabecera__fila { transition: min-height .35s ease; }
.cabecera__logo img { transition: width .35s ease, height .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.cabecera__logo:hover img { transform: rotate(-8deg) scale(1.06); }
.cabecera--baja { background: rgba(8, 8, 7, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.cabecera--baja .cabecera__fila { min-height: 58px; }
.cabecera--baja .cabecera__logo img { width: 48px; height: 48px; }
.progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #8A6A1F, #E9CB78 70%, #F8EAC4); transform: scaleX(var(--avance, 0)); transform-origin: left; pointer-events: none; }
.icono-btn svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.icono-btn:hover svg { transform: scale(1.15); }
/* La portada que vuela al carrito al agregarla. */
.vuelo { position: fixed; z-index: 95; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--oro-alto); object-fit: cover; box-shadow: 0 0 30px rgba(215, 174, 75, .6); pointer-events: none; }
.contador.pulso { transform: scale(1.5); box-shadow: 0 0 18px rgba(233, 203, 120, .9); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
/* Aunque el JS no llegue a correr, nada puede quedarse invisible. */
.revelar { opacity: 1 !important; transform: none !important; }
/* Las brasas ni se montan con menos movimiento; esto cubre el metronomo. */
.dato--tempo svg { animation: none !important; }
}
/* La vista previa y la cinta, en pantallas angostas. Va al final para ganarle a las reglas de arriba. */
@media (max-width: 1023px) {
.vista-previa { margin: 36px 0 0; }
.vista-previa h2 { font-size: 25.5px; }
.reproductor__boton { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.reproductor__boton svg { width: 32px; height: 32px; }
.destacado__texto { flex-basis: auto; min-width: 0; }
.cabecera--baja .cabecera__fila { min-height: 62px; }
.cabecera--baja .cabecera__logo img { width: 52px; height: 52px; }
}
@media (max-width: 767px) {
.modal-video { padding: 12px; }
.modal-video__externo span { display: none; }
.cinta span { font-size: 9.4px; letter-spacing: .26em; }
.cinta i { padding: 0 16px; }
}
/* ==========================================================================
WordPress, Astra y WooCommerce
==========================================================================
Lo de arriba es el prototipo aprobado. Lo de aca lo lleva al sitio real:
neutraliza el esqueleto de Astra para que mande el diseño, y viste con la
misma paleta las piezas que dibuja WooCommerce -avisos, carrito, pago,
pedido- sin cambiarles el marcado. Las reglas llevan .aviva (la clase del
body) para ganarle a las de Astra y WooCommerce por especificidad, no con
!important.
========================================================================== */
/* -------------------------------------------------------------- esqueleto */
.aviva, .aviva #page { background: var(--fondo-pagina); color: var(--sobre-negro); }
/*
* Astra estira #page a la altura de la ventana para empujar el pie abajo. Con
* el zoom del lienzo esa altura tambien se multiplica y las paginas cortas
* quedaban con desplazamiento de mas: el panel ya tiene su propio alto minimo.
*/
.aviva #page { min-height: 0; }
.aviva .site-content { display: block; width: calc(100% - var(--sangria) * 2); margin: 14px auto 18px; border-radius: 22px; overflow: hidden; background: var(--negro); color: var(--sobre-negro); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(215, 174, 75, .14); }
.aviva .site-content > .ast-container { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.aviva #primary, .aviva .site-main, .aviva .aviva-main { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: none; }
/* Astra le da 60 px arriba y abajo a #primary con un selector de id y dos clases. */
.aviva .site-content .ast-container #primary { margin: 0; padding: 0; }
.aviva .ast-woocommerce-container { width: 100%; max-width: none; margin: 0; padding: 0; }
/*
* Titulos: se anula el color y el margen que les pone Astra. Va con :where
* para no sumar especificidad: asi cualquier regla del diseño con clase
* (.carbon h2, .paso h3) sigue mandando.
*/
:where(.aviva) h1, :where(.aviva) h2, :where(.aviva) h3, :where(.aviva) h4 { margin: 0; color: inherit; }
/* Astra les agrega un margen inferior con un selector mas fuerte; en la maqueta los titulos no tienen ninguno. */
.aviva h1, .aviva h2, .aviva h3, .aviva h4 { margin-bottom: 0; }
.aviva a:focus { color: inherit; }
.aviva .screen-reader-text:focus { background: var(--oro); color: #16130D; clip: auto; }
.aviva #ast-scroll-top { display: none !important; }
/*
* Los botones con icono del diseño. Astra le da a todo