/* =====================================================================
LVE FILMS · hoja de estilo principal — limpia, al estilo de apple.com
Mucho negro, fotos grandes, titulares cortos y centrados, todo
redondeado (12 / 18 / 28 px y pildoras), un solo azul de marca para
los botones (#0058E6) y un brillo azul suave solo en la portada y en la
llamada final. Montserrat local. Sin librerias.
===================================================================== */
/* ---------- Tipografia de marca: Montserrat (SIL OFL 1.1, ver
assets/fonts/LICENSE-Montserrat.txt). Las URL .woff2 son identicas a las
del de head.php (400, 500, 600 y 700), sin ?v=. ---------- */
/* Montserrat en WOFF2 con solo latin + latin-ext A (~46 KB por peso en vez de
los ~193 KB del TTF entero: eran el 39 % de la primera visita). Mismos
glifos, metricas y kerning. Cualquier otro caracter (cirilico, vietnamita…)
lo sirve el TTF completo, que solo se baja si una pagina lo usa. */
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-300.woff2') format('woff2'), url('../fonts/Montserrat-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6-02C7, U+02D8-02DD, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-400.woff2') format('woff2'), url('../fonts/Montserrat-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6-02C7, U+02D8-02DD, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-500.woff2') format('woff2'), url('../fonts/Montserrat-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6-02C7, U+02D8-02DD, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-600.woff2') format('woff2'), url('../fonts/Montserrat-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6-02C7, U+02D8-02DD, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-700.woff2') format('woff2'), url('../fonts/Montserrat-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+0218-021B, U+02BB-02BC, U+02C6-02C7, U+02D8-02DD, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0180-0217, U+021C-02BA, U+02BD-02C5, U+02C8-02D7, U+02DE-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2112, U+2114-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0180-0217, U+021C-02BA, U+02BD-02C5, U+02C8-02D7, U+02DE-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2112, U+2114-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0180-0217, U+021C-02BA, U+02BD-02C5, U+02C8-02D7, U+02DE-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2112, U+2114-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0180-0217, U+021C-02BA, U+02BD-02C5, U+02C8-02D7, U+02DE-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2112, U+2114-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0180-0217, U+021C-02BA, U+02BD-02C5, U+02C8-02D7, U+02DE-0303, U+0305-0307, U+0309-0328, U+032A-1FFF, U+2070-20AB, U+20AD-2112, U+2114-2121, U+2123-218F, U+2194-2211, U+2213-2214, U+2216-FEFE, U+FF00-FFFC; }
/* =====================================================================
TOKENS
===================================================================== */
:root {
/* superficies (negro de apple.com y tres alturas) */
--lve-bg: #000;
--lve-bg-1: #0d0d0f;
--lve-bg-2: #161618;
--lve-bg-3: #1d1d1f;
--lve-hair: rgba(255,255,255,.08);
--lve-hair-2: rgba(255,255,255,.14);
/* texto */
--lve-text: #f5f5f7;
--lve-text-2: #a1a1a6;
--lve-text-3: #86868b; /* solo para textos grandes o de interfaz */
/* marca: el azul de LVE para los botones, un azul claro para enlaces */
--lve-blue: #0058E6;
--lve-blue-rgb: 0,88,230; /* head.php los recalcula si el panel cambia el acento */
--lve-blue-hover: #1a6dff;
--lve-blue-text: #4d9bff;
--lve-blue-deep: #0234B8;
--lve-blue-end: #0A6CF0;
--lve-glow: #1E8BFF;
--lve-glow-rgb: 30,139,255;
--lve-wa: #25D366; /* solo el glifo de WhatsApp */
--lve-ok: #30d158;
--lve-err: #ff6961;
/* formas */
--lve-r-sm: 12px;
--lve-r-md: 18px;
--lve-r-lg: 28px;
--lve-r-pill: 980px;
/* tipo */
--lve-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--lve-display: var(--lve-sans);
/* medidas */
--lve-top-h: 52px;
--lve-max: 1240px;
--lve-gutter: clamp(20px, 4vw, 44px);
/* Aire entre secciones: sobre negro puro, 120 + 120 px dejaban una banda
vacia de ~265 px entre un enlace y el titular siguiente. Ahora ~170 px
en escritorio y ~110 en el telefono, del final de una al titular de la
siguiente. */
--lve-sec-y: clamp(48px, 6vw, 80px);
--lve-gap: 20px;
--lve-safe-b: env(safe-area-inset-bottom, 0px);
/* movimiento */
--lve-ease: cubic-bezier(.25,.1,.25,1);
--lve-ease-out: cubic-bezier(.16,1,.3,1);
--lve-ease-sheet: cubic-bezier(.32,.72,0,1);
--lve-ease-film: var(--lve-ease-sheet);
--lve-spring: cubic-bezier(.34,1.56,.64,1);
--lve-shadow: 0 24px 70px rgba(0,0,0,.55);
/* Foco del teclado: un solo anillo de alto contraste para todo el tema
oscuro (#4d9bff sobre negro ~7,4:1; el azul de los botones al 50 % se
quedaba en ~1,6:1, por debajo del 3:1 de WCAG 1.4.11). El anillo lleva
un filo negro por dentro para separarse tambien del boton azul.
head.php recalcula --lve-blue-text si el panel cambia el acento. */
--lve-focus: var(--lve-blue-text);
--lve-ring: 0 0 0 2px #000, 0 0 0 4px var(--lve-focus);
/* alias que usan calendario, paquetes, campana, documentos, cotizacion y factura */
--lve-void: #000;
--lve-black: #000;
--lve-ink: var(--lve-bg-1);
--lve-ink-2: var(--lve-bg-2);
--lve-ink-3: var(--lve-bg-3);
--lve-white: var(--lve-text);
--lve-silver: var(--lve-text-2);
--lve-silver-2: #c7c7cc;
--lve-graphite: #48484a;
--lve-graphite-2:#2c2c2e;
--lve-dim: var(--lve-text-3);
--lve-muted: var(--lve-text-2);
--lve-line: var(--lve-hair);
--lve-line-2: var(--lve-hair-2);
--lve-line-3: rgba(255,255,255,.24);
--lve-surface: var(--lve-bg-1);
--lve-surface-2: var(--lve-bg-2);
--lve-radius: 12px;
--lve-radius-lg: 28px;
--lve-blue-grad: linear-gradient(var(--lve-blue), var(--lve-blue));
color-scheme: dark;
}
/* =====================================================================
BASE (lo esencial de un "reboot": el sitio ya no carga Bootstrap)
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #000; }
/* El foco del teclado nunca queda debajo de la barra fija (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--lve-top-h) + 16px); }
body {
margin: 0; min-height: 100vh;
font-family: var(--lve-sans); font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: -.005em;
color: var(--lve-text); background: #000;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.lve-locked, html.lve-menu-open body { overflow: hidden; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-family: var(--lve-display); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 2rem; }
dl { margin: 0 0 1rem; }
dd { margin: 0 0 .5rem; }
figure { margin: 0 0 1rem; }
b, strong { font-weight: 600; }
small { font-size: .875em; }
img, svg, video { vertical-align: middle; }
img, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input, select, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
button { border-radius: 0; }
button:not(:disabled) { cursor: pointer; }
label { display: inline-block; }
table { border-collapse: collapse; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--lve-hair-2); }
[hidden] { display: none !important; }
::selection { background: var(--lve-blue); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lve-focus); outline-offset: 3px; }
/* Los enlaces de texto (secciones, logo, «Ver trabajos», artistas, pie)
llevan el anillo redondeado como los botones, no un rectangulo. Va aqui,
arriba del todo y con el peso de una clase: cualquier componente que ya
tenga su propia forma (pildoras, tarjetas) la conserva. */
:where(a, summary):focus-visible { border-radius: 10px; }
/* La portada y las pantallas parten de cero: cada componente pone sus
margenes. :where() no pesa nada, asi cualquier clase lo gana. */
:where(.lve-home main, .lve-home .lve-footer) :where(p, h1, h2, h3, h4, ul, ol, dl, dd, figure),
:where(.lve-screen) :where(.lve-acards, .lve-album, .lve-stiles, .lve-studio, .lve-contact) :where(p, h2, h3, h4, ul, ol, dl, dd, figure) { margin: 0; }
:where(.lve-home main, .lve-home .lve-footer) :where(ul, ol),
:where(.lve-screen) :where(.lve-stiles, .lve-checks) { padding: 0; list-style: none; }
/* Utilidades (las que antes daba Bootstrap) */
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; }
.ms-2 { margin-left: .5rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.text-center { text-align: center !important; }
.d-none { display: none !important; } .d-flex { display: flex !important; }
.gap-2 { gap: .5rem !important; } .flex-wrap { flex-wrap: wrap !important; } .justify-content-center { justify-content: center !important; }
@media (min-width: 576px) { .d-sm-inline { display: inline !important; } }
@media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-inline-flex { display: inline-flex !important; } }
.visually-hidden, .lve-sr {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
.lve-i { flex: none; }
.lve-nw { white-space: nowrap; }
.lve-skip {
position: fixed; z-index: 4000; top: 10px; left: 10px; padding: 12px 18px; border-radius: var(--lve-r-pill);
background: var(--lve-blue); color: #fff; font-size: 14px; font-weight: 600;
transform: translateY(-180%); transition: transform .3s var(--lve-ease-out);
}
.lve-skip:focus, .lve-skip:focus-visible { transform: none; color: #fff; }
/* Barras de desplazamiento discretas */
.lve-scroll { scrollbar-width: thin; scrollbar-color: #3a3a3c transparent; }
.lve-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.lve-scroll::-webkit-scrollbar-track { background: transparent; }
.lve-scroll::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 8px; }
@keyframes lveFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lveFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes lveRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lveSpin { to { transform: rotate(360deg); } }
/* =====================================================================
TIPOGRAFIA Y PIEZAS COMUNES
===================================================================== */
.lve-wrap { width: 100%; max-width: calc(var(--lve-max) + var(--lve-gutter) * 2); margin: 0 auto; padding-inline: var(--lve-gutter); }
.lve-wrap--narrow { max-width: 760px; }
.lve-sec { position: relative; padding-block: var(--lve-sec-y); }
.lve-sec__head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.lve-sec__more { margin: clamp(28px, 3vw, 40px) 0 0 !important; text-align: center; }
.lve-h2 { margin: 0; font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.lve-lead { margin: 14px auto 0; max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--lve-text-2); text-wrap: pretty; }
.lve-sec__head .lve-lead { margin-top: 14px !important; }
.lve-eyebrow {
display: block; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
color: var(--lve-blue-text);
}
.lve-muted { color: var(--lve-text-2); }
.lve-dim { color: var(--lve-text-3); }
/* Paginas interiores (cuenta, mis cursos, baja) */
.lve-section { padding: clamp(70px, 10vw, 120px) clamp(20px, 5vw, 60px); }
.lve-section__head { max-width: 780px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.lve-section__title { margin: 10px 0 12px; font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.lve-section__lead { margin: 0; color: var(--lve-text-2); font-size: clamp(17px, 1.4vw, 19px); }
.lve-subhead { margin: 32px 0 14px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--lve-text); }
/* Enlaces de texto: azul claro con el chevron de Apple */
.lve-more, .lve-link {
display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--lve-blue-text);
}
.lve-more .lve-i, .lve-link .lve-i { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .25s var(--lve-ease); }
.lve-more:hover, .lve-link:hover { color: var(--lve-blue-text); text-decoration: underline; text-underline-offset: 4px; }
.lve-more:hover .lve-i, .lve-link:hover .lve-i { transform: translateX(3px); }
.lve-link--quiet { color: var(--lve-text-2); font-size: 15px; }
/* Flecha "→" dibujada entre dos palabras (cifras del estudio) */
.lve-to { display: inline-block; width: 1.9em !important; height: 1em !important; vertical-align: -.14em; margin: 0 .3em; color: var(--lve-blue-text); }
/* =====================================================================
BOTONES: pildoras
===================================================================== */
.lve-btn {
--h: 50px;
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--h); padding: 0 26px; border: 0; border-radius: var(--lve-r-pill); cursor: pointer;
font: 600 16px/1.2 var(--lve-sans); letter-spacing: -.01em; white-space: nowrap; text-align: center;
transition: background-color .2s var(--lve-ease), color .2s var(--lve-ease), box-shadow .2s var(--lve-ease), transform .15s var(--lve-ease);
-webkit-user-select: none; user-select: none;
}
.lve-btn .lve-i { width: 18px; height: 18px; }
.lve-btn:active:not(:disabled) { transform: scale(.98); }
.lve-btn:disabled { opacity: .45; cursor: not-allowed; }
.lve-btn:focus-visible { outline: none; box-shadow: var(--lve-ring); }
.lve-btn--primary { background: var(--lve-blue); color: #fff; }
.lve-btn--primary:hover:not(:disabled) { background: var(--lve-blue-hover); color: #fff; }
.lve-btn--ghost { background: rgba(255,255,255,.1); color: var(--lve-text); }
.lve-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.16); color: #fff; }
/* WhatsApp: pildora oscura con el glifo en verde */
.lve-btn--wa { background: var(--lve-bg-3); color: var(--lve-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lve-btn--wa .lve-i { color: var(--lve-wa); width: 19px; height: 19px; }
.lve-btn--wa:hover { background: #2c2c2e; color: #fff; }
/* Pildora clara (WhatsApp en Contacto): el mismo peso que el boton azul de
la otra tarjeta. El verde solo en el glifo. */
.lve-btn--light { background: #f5f5f7; color: #000; }
.lve-btn--light .lve-i { color: var(--lve-wa); width: 19px; height: 19px; }
.lve-btn--light:hover:not(:disabled) { background: #fff; color: #000; }
.lve-btn--sm { --h: 40px; padding: 0 18px; font-size: 15px; }
.lve-btn--xs { --h: 30px; padding: 0 14px; font-size: 13px; }
.lve-btn--block { display: flex; width: 100%; }
/* Boton redondo solo con icono (WhatsApp en las tarjetas) */
.lve-iconbtn {
display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%;
background: var(--lve-bg-3); color: var(--lve-text); transition: background-color .2s var(--lve-ease);
}
.lve-iconbtn .lve-i { width: 20px; height: 20px; }
.lve-iconbtn--wa .lve-i { color: var(--lve-wa); }
.lve-iconbtn:hover { background: #2c2c2e; }
.lve-iconbtn:focus-visible { outline: none; box-shadow: var(--lve-ring); }
/* Las dos acciones de venta, juntas */
.lve-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lve-actions--center { justify-content: center; }
/* =====================================================================
BARRA GLOBAL (apple.com): 52 px, negro translucido y desenfoque
Contrato: #lve-topbar (.is-stuck), #lve-nav .lve-nav__link[data-lve-open]
(.is-active + aria-current), [data-lve-menu] (aria-expanded)
===================================================================== */
.lve-topbar {
position: fixed; z-index: 1600; top: 0; left: 0; right: 0; height: var(--lve-top-h);
display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--lve-gutter);
background: rgba(0,0,0,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--lve-hair);
transition: background-color .3s var(--lve-ease);
}
/* Sobre la foto de la portada la barra es mas ligera; al bajar, la de siempre. */
.lve-home .lve-topbar:not(.is-stuck) { background: rgba(0,0,0,.34); border-bottom-color: rgba(255,255,255,.06); }
html[data-screen]:not([data-screen=""]) .lve-topbar,
html.lve-menu-open .lve-topbar { background: rgba(0,0,0,.86); }
.lve-topbar__in {
/* El mismo ancho que el contenido (.lve-wrap): a 1440 px el logo y
«Cotizar» quedaban 20 px por fuera de las tarjetas de abajo. */
flex: 1; height: 100%; width: 100%; max-width: var(--lve-max); margin: 0 auto;
/* Las secciones van centradas en la pagina; si el grupo de la derecha es
mas ancho que su mitad (ingles, con sesion: campana y avatar), el centro
cede un poco en vez de montarse encima (minimo: lo que ocupa cada lado). */
display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 16px;
/* Entre las secciones y ES/EN siempre mas aire que entre dos secciones
(a 1024 px en ingles «Contact ES EN» se leia como una sola fila). */
column-gap: 32px;
}
/* Paginas de documento y de cuenta (cotizacion, factura, cuenta, mis
cursos): solo logo y el grupo de la derecha, en el mismo ancho que la
portada. Sin esto el logo iba pegado al borde de la ventana (44 px) y el
contenido y el pie a 100 px o mas. */
.lve-topbar__in--doc { display: flex; justify-content: space-between; }
.lve-topbar__logo { display: flex; align-items: center; justify-self: start; min-height: 44px; min-width: 44px; flex: 0 0 auto; }
.lve-topbar__logo img { display: block; width: auto; height: 17px; }
.lve-topbar__right { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 6px; min-width: 0; }
.lve-topbar__in--doc { gap: 12px; }
/* «Inicio» / «Mis cursos» de la barra de las paginas de cuenta: con texto
en pantalla ancha y solo el icono en el telefono estrecho (el nombre lo
sigue diciendo aria-label). */
.lve-topbar__txtbtn .lve-i { display: none; }
@media (max-width: 420px) {
.lve-topbar .lve-topbar__txtbtn { --h: 36px; width: 36px; padding: 0; justify-content: center; }
.lve-topbar__txtbtn .lve-i { display: block; }
.lve-topbar__txtbtn span { display: none; }
}
.lve-nav__list { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.lve-nav__link {
position: relative; display: inline-flex; align-items: center; height: var(--lve-top-h);
font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(245,245,247,.8); white-space: nowrap;
transition: color .2s var(--lve-ease);
}
.lve-nav__link:hover { color: #fff; }
.lve-nav__link:focus-visible { outline: none; }
.lve-nav__link:focus-visible::before {
content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 30px; margin-top: -15px;
border-radius: var(--lve-r-pill); box-shadow: 0 0 0 2px var(--lve-focus); pointer-events: none;
}
.lve-nav__link.is-active { color: #fff; }
.lve-nav__link.is-active::after {
content: ""; position: absolute; left: 50%; bottom: 9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
background: var(--lve-blue-text);
}
.lve-lang { display: flex; align-items: center; gap: 2px; }
.lve-lang__opt {
display: grid; place-items: center; min-width: 30px; height: 32px; padding: 0 4px; border-radius: 8px;
font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--lve-text-3); transition: color .2s, background-color .2s;
}
.lve-lang__opt:hover { color: var(--lve-text); }
.lve-lang__opt.is-on { color: var(--lve-text); }
/* Paginas interiores (cuenta, mis cursos, cotizacion): el enlace de idioma */
a.lve-lang {
gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--lve-r-pill); background: rgba(255,255,255,.1);
font-size: 12px; font-weight: 600; color: var(--lve-text);
}
a.lve-lang .lve-i { width: 15px; height: 15px; }
a.lve-lang:hover { background: rgba(255,255,255,.16); color: #fff; }
.lve-account {
display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: rgba(245,245,247,.85); cursor: pointer; transition: background-color .2s, color .2s;
}
.lve-account:hover { background: rgba(255,255,255,.1); color: #fff; }
.lve-account .lve-i { width: 19px; height: 19px; }
.lve-account__dot {
width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
background: var(--lve-blue); color: #fff; font-size: 13px; font-weight: 600;
}
.lve-account__txt { display: none; }
.lve-topbar__quote { margin-left: 6px; }
/* WhatsApp a un clic en escritorio: circulo oscuro de 36 px con el glifo verde */
.lve-topbar .lve-topbar__wa { width: 36px; height: 36px; margin-left: 4px; background: rgba(255,255,255,.1); }
.lve-topbar .lve-topbar__wa:hover { background: rgba(255,255,255,.18); }
.lve-topbar .lve-topbar__wa .lve-i { width: 18px; height: 18px; }
.lve-topbar .lve-btn--sm { --h: 32px; padding: 0 14px; font-size: 13px; }
/* Boton de menu (telefono): dos lineas que se cruzan en una X */
.lve-menubtn { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--lve-text); place-items: center; }
.lve-menubtn__bars { position: relative; display: block; width: 18px; height: 10px; }
.lve-menubtn__bars i { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s var(--lve-ease-out), top .3s var(--lve-ease-out); }
.lve-menubtn__bars i:first-child { top: 0; }
.lve-menubtn__bars i:last-child { top: 8.4px; }
.lve-menubtn[aria-expanded="true"] .lve-menubtn__bars i:first-child { top: 4.2px; transform: rotate(45deg); }
.lve-menubtn[aria-expanded="true"] .lve-menubtn__bars i:last-child { top: 4.2px; transform: rotate(-45deg); }
/* =====================================================================
MENU DEL TELEFONO (hoja a pantalla completa bajo la barra)
===================================================================== */
.lve-menu {
position: fixed; inset: 0; z-index: 1590; padding-top: var(--lve-top-h);
background: rgba(0,0,0,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
opacity: 0; transition: opacity .25s var(--lve-ease);
}
.lve-menu.is-open { opacity: 1; }
.lve-menu__panel {
height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
/* Los enlaces arrancan en el mismo borde que el logo de la barra. */
padding: 18px var(--lve-gutter) calc(24px + var(--lve-safe-b));
}
.lve-menu__nav ul { margin: 0; padding: 0; list-style: none; }
.lve-menu__link {
display: block; padding: 7px 0; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--lve-text);
opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--lve-ease-out), transform .35s var(--lve-ease-out), color .2s;
}
.lve-menu.is-open .lve-menu__link { opacity: 1; transform: none; }
.lve-menu.is-open li:nth-child(2) .lve-menu__link { transition-delay: .03s; }
.lve-menu.is-open li:nth-child(3) .lve-menu__link { transition-delay: .06s; }
.lve-menu.is-open li:nth-child(4) .lve-menu__link { transition-delay: .09s; }
.lve-menu.is-open li:nth-child(5) .lve-menu__link { transition-delay: .12s; }
.lve-menu.is-open li:nth-child(6) .lve-menu__link { transition-delay: .15s; }
.lve-menu.is-open li:nth-child(n+7) .lve-menu__link { transition-delay: .18s; }
.lve-menu__link.is-active { color: var(--lve-blue-text); }
.lve-menu__foot { display: grid; gap: 14px; margin-top: auto; padding-top: 28px; }
.lve-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--lve-hair); }
.lve-menu__small {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
font-size: 16px; font-weight: 500; color: var(--lve-text-2);
}
.lve-menu__small:hover { color: var(--lve-text); }
.lve-lang--menu .lve-lang__opt { min-width: 44px; height: 44px; font-size: 14px; }
/* =====================================================================
BARRA DE ACCIONES DEL TELEFONO (#lve-actionbar)
===================================================================== */
.lve-actionbar { display: none; }
/* =====================================================================
VOLVER ARRIBA (#lve-arriba, partials/arriba.php + assets/js/arriba.js)
Boton redondo de 44 px abajo a la derecha: cristal oscuro con filo y, al
pasar o con el foco, el azul de la marca. Sale (.is-on) tras bajar una
pantalla; mientras no, visibility:hidden (ni se ve, ni se tabula, ni se
anuncia) al terminar el fundido. Por encima de las hojas (1500) y de la
barra de acciones (1550); por debajo del menu (1590), la barra de arriba
(1600), el visor (2200) y los modales (2400), que ademas lo esconden.
Dos movimientos que no se pisan: transform para salir/entrar (.2s) y
translate para subir encima de la barra de acciones (.35s, lo mismo que
tarda la barra). Con movimiento reducido, la regla general los deja en
nada.
===================================================================== */
.lve-arriba {
--lve-arriba-x: calc(24px + env(safe-area-inset-right, 0px));
--lve-arriba-lift: 0px;
position: fixed; z-index: 1560; right: var(--lve-arriba-x); bottom: calc(24px + var(--lve-safe-b));
display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
border: 1px solid var(--lve-hair-2); border-radius: 50%;
background: rgba(29,29,31,.72); color: var(--lve-text);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 8px 24px rgba(0,0,0,.32);
opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94);
translate: 0 calc(var(--lve-arriba-lift) * -1);
transition: opacity .2s var(--lve-ease), transform .2s var(--lve-ease-out), translate .35s var(--lve-ease-out),
visibility 0s linear .2s, background-color .2s, border-color .2s, color .2s;
}
.lve-arriba.is-on {
opacity: 1; visibility: visible; transform: none;
transition: opacity .2s var(--lve-ease), transform .2s var(--lve-ease-out), translate .35s var(--lve-ease-out),
visibility 0s, background-color .2s, border-color .2s, color .2s;
}
.lve-arriba .lve-i { stroke-width: 1.8; }
@media (hover: hover) {
.lve-arriba:hover { background: var(--lve-blue); border-color: var(--lve-blue); color: #fff; }
}
.lve-arriba:focus-visible {
outline: none; background: var(--lve-blue); border-color: var(--lve-blue); color: #fff;
box-shadow: var(--lve-ring), 0 8px 24px rgba(0,0,0,.32);
}
.lve-arriba.is-on:active { transform: scale(.94); }
/* Con una hoja abierta, dentro de su borde derecho: la hoja mide 1360 px
como mucho y va centrada (a 1440 px el boton caia sobre su canto). */
.lve-arriba.is-hoja { --lve-arriba-x: calc(max(0px, (100vw - 1360px) / 2) + 24px + env(safe-area-inset-right, 0px)); }
/* Al final de una hoja la ultima tarjeta no queda pegada al boton: 72 px
dejaban 4 px entre los dos. Ahora 24 (24 + 44 + 24). */
.lve-screen .lve-screen__body { padding-bottom: calc(92px + var(--lve-safe-b)); }
@media (max-width: 820px) {
/* 14 px: el mismo borde que los botones de la barra de acciones. */
.lve-arriba, .lve-arriba.is-hoja { --lve-arriba-x: calc(14px + env(safe-area-inset-right, 0px)); }
.lve-arriba { bottom: calc(14px + var(--lve-safe-b)); }
/* Encima de la barra de acciones: su alto medido (que ya lleva la zona
segura) + 12 px. Sin medida, el alto del CSS de la barra. */
.lve-arriba.is-alto { --lve-arriba-lift: calc(var(--lve-bar-h, calc(67px + var(--lve-safe-b))) - 2px - var(--lve-safe-b)); }
@supports not (translate: 0 0) {
.lve-arriba.is-alto { bottom: calc(var(--lve-bar-h, calc(67px + var(--lve-safe-b))) + 12px); }
}
/* El final de la hoja deja sitio al boton. Sin barra de acciones
(Servicios, Estudio, Contacto), con 56 px la ultima tarjeta tocaba su
borde; con la barra, el boton va 56 px mas arriba que ella (los 100 px
de su hueco no bastaban: tapaba el pie de la ultima fila de albumes). */
html:not(.lve-bar-on) .lve-screen__body { padding-bottom: calc(72px + var(--lve-safe-b)); }
html.lve-bar-on .lve-screen .lve-screen__body { padding-bottom: calc(136px + var(--lve-safe-b)); }
}
/* Y el pie: al llegar al final, su ultima fila («Español · English», a la
derecha) quedaba debajo del boton en cuanto el margen lateral bajaba de
~76 px (por debajo de 1400 px de ancho). En el telefono la fila va a la
izquierda (≤ 760 px) o el pie ya guarda sitio para la barra de acciones. */
@media (min-width: 821px) and (max-width: 1400px) {
body:has(> .lve-arriba) .lve-footer__base { padding-bottom: calc(80px + var(--lve-safe-b)); }
}
@media (min-width: 761px) and (max-width: 820px) {
html:not(.lve-bar-on) body:has(> .lve-arriba) .lve-footer__base { padding-bottom: calc(70px + var(--lve-safe-b)); }
}
@media print { .lve-arriba { display: none !important; } }
/* =====================================================================
PORTADA
===================================================================== */
.lve-hero {
position: relative; isolation: isolate; overflow: hidden;
/* No toda la pantalla: la fila de artistas (la prueba) asoma ya en la
primera vista. Sigue a sangre, sin margenes a los lados. */
min-height: calc(100vh - 150px); min-height: calc(100svh - 150px);
display: grid; place-items: center; text-align: center;
padding: calc(var(--lve-top-h) + 36px) var(--lve-gutter) 64px;
}
.lve-hero__media { position: absolute; inset: 0; z-index: -2; background: #000; overflow: hidden; }
.lve-hero__media img, .lve-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lve-hero__media iframe {
position: absolute; top: 50%; left: 50%; width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%;
transform: translate(-50%, -50%); border: 0; pointer-events: none;
}
.lve-slider { position: absolute; inset: 0; }
.lve-slider__foto { opacity: 0; transition: opacity 1.4s ease; }
/* Solo la que se ve y la que se va: con las ocho, el telefono tenia ocho
capas del tamaño de la portada en la GPU, siete sin pintar nunca. */
.lve-slider__foto.is-on, .lve-slider__foto.is-leaving { will-change: opacity; }
.lve-slider__foto.is-on { opacity: 1; }
.lve-slider--zoom .lve-slider__foto.is-on, .lve-slider--zoom .lve-slider__foto.is-leaving { animation: lveHeroZoom 9s linear both; }
@keyframes lveHeroZoom { from { transform: scale(1.05); } to { transform: scale(1); } }
.lve-hero__scrim {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(52% 38% at 50% 64%, rgba(var(--lve-glow-rgb), .16), rgba(var(--lve-glow-rgb), 0) 72%),
linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.9) 88%, #000 100%);
}
.lve-hero__inner { position: relative; width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; }
.lve-hero__logo {
display: block; width: clamp(160px, min(18vw, 30vh), 260px); height: auto; margin: 0 0 clamp(18px, 3vh, 30px);
filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
animation: lveRise .9s var(--lve-ease-out) both;
}
/* Sombra suave bajo el texto pequeño de la portada: sobre una foto clara
(la camiseta blanca de Pedro Capó) la entradilla bajaba a ~2,8:1. */
.lve-hero__eyebrow, .lve-hero__lead { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); }
.lve-hero__eyebrow { margin: 0 0 14px; color: #f5f5f7; animation: lveRise .9s .05s var(--lve-ease-out) both; }
.lve-hero__title {
margin: 0; font-size: clamp(40px, 6vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
animation: lveRise .9s .1s var(--lve-ease-out) both;
}
.lve-hero__lead {
margin: 18px auto 0; max-width: 32em; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: #d2d2d7; text-wrap: balance;
animation: lveRise .9s .15s var(--lve-ease-out) both;
}
.lve-hero__cta { margin-top: 30px; animation: lveRise .9s .2s var(--lve-ease-out) both; }
.lve-hero .lve-btn--wa { background: rgba(29,29,31,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.lve-hero .lve-btn--wa:hover { background: rgba(44,44,46,.85); }
/* La regla de arriba pesa lo mismo que .lve-btn:focus-visible y va despues:
sin esta, el WhatsApp de la portada no enseñaba ningun foco (WCAG 2.4.7). */
.lve-hero .lve-btn--wa:focus-visible { box-shadow: var(--lve-ring); }
.lve-hero .lve-more { margin-top: 14px; color: #8fc0ff; animation: lveFade .9s .3s both; }
/* (Sin boton de pausa en la portada: decision del estudio.) */
/* ---------- Prueba social: artistas ---------- */
.lve-proof { padding: 28px 0 clamp(8px, 2vw, 24px); text-align: center; }
.lve-proof__title { margin: 0 0 16px !important; padding: 0 var(--lve-gutter); font-size: 15px; font-weight: 500; color: var(--lve-text-2); }
/* Marquesina sin fin en TODOS los anchos: una sola fila (su alto no cambia
al cargar: la copia viene ya del servidor) que pasa hacia la izquierda a
~40 px/s. La pista lleva la lista dos veces (o mas pares, si una no llena
la fila) y se mueve justo la mitad: al volver a empezar se ve lo mismo y
no hay salto. Solo transform (va en la GPU). app.js:
- pone .is-moving y la duracion (--lve-proof-dur) segun el ancho;
- .is-paused fuera de la vista o con la pestaña oculta (con una hoja
abierta la para body.lve-locked, al final del archivo);
- .is-manual al tocarla, al deslizarla o al llegar con el teclado: se
queda quieta como una fila con scroll normal (el Tab trae el nombre a
la vista) y a los pocos segundos sin tocarla sigue desde ahi mismo.
Con el raton encima se para (solo donde hay raton: en el telefono el
:hover se queda pegado tras un toque). WCAG 2.2.2. */
.lve-proof__viewport {
--lve-proof-fade: clamp(28px, 6vw, 96px);
--lve-proof-gap: clamp(30px, 2.8vw, 40px);
max-width: calc(var(--lve-max) + var(--lve-gutter) * 2); margin: 0 auto;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
/* El nombre que recibe el foco no queda bajo el fundido de los bordes. */
scroll-padding-inline: calc(var(--lve-proof-fade) + 8px);
/* La fila se funde en los bordes en vez de cortarse en seco. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--lve-proof-fade), #000 calc(100% - var(--lve-proof-fade)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--lve-proof-fade), #000 calc(100% - var(--lve-proof-fade)), transparent);
}
.lve-proof__viewport::-webkit-scrollbar { display: none; }
.lve-proof__track { display: flex; width: max-content; }
/* Cada copia termina con su hueco (padding a la derecha): asi todas miden
lo mismo y la mitad de la pista es un numero exacto de copias. 6 px
arriba y abajo: el anillo del foco de un nombre cabe entero. */
.lve-proof__list { display: flex; flex: none; flex-wrap: nowrap; gap: var(--lve-proof-gap); margin: 0; padding: 6px var(--lve-proof-gap) 6px 0; list-style: none; }
.lve-proof__name {
display: inline-block; padding: 4px 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -.01em;
color: var(--lve-text-3); white-space: nowrap; transition: color .2s var(--lve-ease);
}
a.lve-proof__name:hover, a.lve-proof__name:focus-visible { color: #fff; }
.lve-proof__viewport.is-moving .lve-proof__track {
animation: lveProof var(--lve-proof-dur, 40s) linear var(--lve-proof-delay, 0s) infinite; will-change: transform;
}
.lve-proof__viewport.is-paused .lve-proof__track { animation-play-state: paused; }
/* La copia de delante (app.js) solo asoma quieta: da sitio a los dos lados. */
.lve-proof__list--lead { display: none; }
.lve-proof__viewport.is-manual .lve-proof__list--lead { display: flex; }
@media (hover: hover) {
.lve-proof__viewport:hover .lve-proof__track { animation-play-state: paused; }
}
/* ---------- Tarjetas de servicio ---------- */
.lve-stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lve-stiles--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lve-stile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); }
.lve-stile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lve-bg-3); }
.lve-stiles--home .lve-stile__media { aspect-ratio: 16 / 9; }
.lve-stile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lve-ease-out), opacity .5s; }
.lve-stile:hover .lve-stile__media img { transform: scale(1.03); }
.lve-stile__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #3a3a3c; }
.lve-stile__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 22px 26px 26px; }
.lve-stile__name { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.lve-stile__line { margin: 0; font-size: 16px; line-height: 1.45; color: var(--lve-text-2); text-wrap: pretty; }
.lve-stile__price { margin: 4px 0 0 !important; font-size: 15px; font-weight: 600; color: var(--lve-text); }
.lve-stile__actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }
/* Servicios (hoja): los diez del Catalogo en tarjetas horizontales, la foto
a la izquierda y el nombre, la linea y las dos acciones a la derecha. De
dos en dos desde 900 px (cinco filas parejas, ninguna huerfana) y una
columna en el telefono. Con la foto encima, a 1440 px la hoja medía
~3140 px; asi, menos de la mitad, y la foto sigue siendo lo primero. */
.lve-stiles--all { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .lve-stiles--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .lve-stiles--all { gap: 20px; } }
.lve-stiles--all .lve-stile { flex-direction: row; border-radius: var(--lve-r-md); }
.lve-stiles--all .lve-stile__media { flex: 0 0 42%; aspect-ratio: 4 / 3; }
/* La foto no decide el alto de la tarjeta (una vertical la estiraba). */
.lve-stiles--all .lve-stile__media img { position: absolute; inset: 0; }
.lve-stiles--all .lve-stile__body { min-width: 0; gap: 4px; padding: 20px 22px; }
.lve-stiles--all .lve-stile__name { font-size: clamp(18px, 1.5vw, 21px); text-wrap: balance; }
.lve-stiles--all .lve-stile__line { font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.lve-stiles--all .lve-stile__actions { padding-top: 14px; }
/* Tarjetas estrechas (telefono y tableta vertical): foto mas estrecha, menos
relleno y un alto minimo comun para que la lista se lea pareja. */
@media (max-width: 899px) {
.lve-stiles--all .lve-stile { min-height: 164px; }
.lve-stiles--all .lve-stile__media { flex-basis: 36%; aspect-ratio: auto; }
.lve-stiles--all .lve-stile__body { padding: 14px 16px 16px; }
.lve-stiles--all .lve-stile__name { font-size: 17px; }
.lve-stiles--all .lve-stile__line { font-size: 14px; }
.lve-stiles--all .lve-stile__actions { padding-top: 12px; }
}
/* ---------- Trabajo reciente: bento ---------- */
.lve-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 21vw, 290px); gap: 20px; }
.lve-btile { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); grid-column: span 6; }
.lve-btile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--lve-ease-out), opacity .5s; }
.lve-btile:hover img, .lve-btile:focus-visible img { transform: scale(1.03); }
.lve-btile__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.78) 100%); pointer-events: none; }
.lve-btile__type {
position: absolute; z-index: 2; top: 16px; left: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
background: rgba(22,22,24,.55); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #fff;
}
.lve-btile__type .lve-i { width: 15px; height: 15px; }
/* Rotulo: el nombre y, debajo, una linea pequeña con quien sale o que es
(Render::rotuloTesela). */
.lve-btile__label {
position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 20px; display: flex; flex-direction: column; gap: 3px;
color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45);
}
.lve-btile__name { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.lve-btile--1 .lve-btile__name { font-size: clamp(20px, 2.2vw, 30px); }
.lve-btile__meta {
overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,.78);
white-space: nowrap; text-overflow: ellipsis;
}
.lve-btile--1 .lve-btile__meta { font-size: clamp(13px, 1.1vw, 15px); }
.lve-btile:focus-visible { outline: none; box-shadow: var(--lve-ring); }
.lve-bento[data-n="6"] .lve-btile--1, .lve-bento[data-n="5"] .lve-btile--1 { grid-column: 1 / span 7; grid-row: span 2; }
.lve-bento[data-n="6"] .lve-btile--2, .lve-bento[data-n="6"] .lve-btile--3,
.lve-bento[data-n="5"] .lve-btile--2, .lve-bento[data-n="5"] .lve-btile--3 { grid-column: span 5; }
.lve-bento[data-n="6"] .lve-btile--4, .lve-bento[data-n="6"] .lve-btile--5, .lve-bento[data-n="6"] .lve-btile--6 { grid-column: span 4; }
.lve-bento[data-n="3"] .lve-btile--1 { grid-column: span 12; }
.lve-bento[data-n="1"] .lve-btile { grid-column: span 12; grid-row: span 2; }
/* ---------- Tarjeta de cierre (portada, albumes, Servicios) ---------- */
.lve-cta {
position: relative; isolation: isolate; overflow: hidden; text-align: center;
padding: clamp(44px, 6vw, 88px) 24px; border-radius: var(--lve-r-lg); background: var(--lve-bg-1);
}
.lve-cta--final {
background:
radial-gradient(60% 90% at 50% 125%, rgba(var(--lve-glow-rgb), .38), rgba(var(--lve-glow-rgb), 0) 68%),
var(--lve-bg-1);
box-shadow: inset 0 0 0 1px var(--lve-hair);
}
.lve-cta__title { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.lve-cta--final .lve-cta__title { font-size: clamp(32px, 4.5vw, 56px); }
.lve-cta__text { margin: 12px auto 0 !important; max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); color: var(--lve-text-2); text-wrap: balance; }
.lve-cta .lve-actions { justify-content: center; margin-top: 28px; }
/* Los tres pasos dentro de la llamada final: icono redondo + una etiqueta,
unidos por una linea finisima. Centrados en el eje de la pagina. */
.lve-cta__steps { display: flex; justify-content: center; max-width: 720px; margin: 36px auto 40px !important; padding: 0 !important; list-style: none; }
.lve-cta__step {
position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--lve-text); text-align: center;
}
.lve-cta__stepicon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--lve-blue-rgb), .16); color: var(--lve-blue-text); }
.lve-cta__stepicon .lve-i { width: 20px; height: 20px; }
.lve-cta__step:not(:last-child)::after {
content: ''; position: absolute; top: 24px; left: calc(50% + 36px); right: calc(-50% + 36px); height: 1px;
background: rgba(255,255,255,.16);
}
.lve-cta--album, .lve-cta--screen { margin-top: clamp(40px, 5vw, 64px); padding: clamp(36px, 4vw, 52px) 24px; background: var(--lve-bg-2); }
/* =====================================================================
PIE (+ «Pregúntale a la IA», compacto y discreto)
===================================================================== */
.lve-footer { position: relative; background: #000; color: var(--lve-text-3); font-size: 12px; line-height: 1.5; border-top: 1px solid var(--lve-hair); }
.lve-footer a { transition: color .2s; }
.lve-ai-summary { padding: 18px var(--lve-gutter); border-bottom: 1px solid var(--lve-hair); }
.lve-ai-summary__inner {
width: min(var(--lve-max), 100%); margin: 0 auto;
display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.28fr);
align-items: center; gap: 10px 28px;
}
.lve-ai-summary__copy { min-width: 0; }
.lve-ai-summary__eyebrow { margin: 0 0 2px !important; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lve-text-3); }
.lve-ai-summary__title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--lve-text-2); line-height: 1.4; }
.lve-ai-summary__actions { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; }
.lve-ai-summary__links { display: flex; flex-wrap: wrap; gap: 6px; }
.lve-ai-summary__item { display: flex; }
.lve-ai-summary__link {
display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 12px 3px 4px; border-radius: var(--lve-r-pill);
background: var(--lve-bg-2); color: var(--lve-text-2); font-size: 12px; font-weight: 500;
}
.lve-ai-summary__link:hover { background: var(--lve-bg-3); color: #fff; }
/* Marcas en gris: el bloque es discreto y no compite con la pagina (antes
verde, degradado y naranja: lo mas colorido del sitio). */
.lve-ai-summary__mark { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.06); }
.lve-ai-summary__mark img { width: 14px; height: 14px; display: block; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .85; }
.lve-ai-summary__link:hover .lve-ai-summary__mark img { opacity: 1; }
.lve-ai-summary__llms { margin: 0 !important; font-size: 12px; }
.lve-ai-summary__llms a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--lve-text-3); }
.lve-ai-summary__llms a:hover { color: var(--lve-text); }
.lve-ai-summary__llms .lve-i { width: 12px; height: 12px; }
.lve-footer__meta {
/* Sin padding a los lados: la linea del borde y el texto comparten los
mismos bordes que el contenido de la pagina. */
width: min(var(--lve-max), calc(100% - var(--lve-gutter) * 2)); margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
padding: 26px 0 16px;
}
.lve-footer__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lve-footer__logo { display: flex; align-items: center; min-height: 44px; }
.lve-footer__wordmark { display: block; width: auto; height: 15px; margin: 0; flex: 0 0 auto; opacity: .9; }
.lve-footer__loc { color: var(--lve-text-3); }
.lve-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lve-footer__nav a { color: var(--lve-text-2); }
.lve-footer__nav a:hover { color: #fff; }
.lve-footer__social { display: flex; gap: 4px; margin: 0 -9px 0 0; padding: 0; list-style: none; } /* el icono, no su circulo, en el borde */
.lve-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--lve-text-2); }
.lve-footer__social a:hover { background: var(--lve-bg-2); color: #fff; }
.lve-footer__social .lve-i { width: 17px; height: 17px; }
.lve-footer__base {
width: min(var(--lve-max), calc(100% - var(--lve-gutter) * 2)); margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
padding: 14px 0 30px; border-top: 1px solid var(--lve-hair);
}
.lve-footer__legal { margin: 0; }
.lve-footer__lang { display: flex; gap: 16px; }
.lve-footer__lang a { display: inline-flex; align-items: center; min-height: 32px; color: var(--lve-text-3); }
.lve-footer__lang a:hover, .lve-footer__lang a.is-on { color: var(--lve-text); }
/* =====================================================================
PANTALLAS: hojas de iOS que suben desde abajo
Contrato: .lve-screen[hidden] / .is-open / .is-closing (300 ms en dock.js)
===================================================================== */
.lve-screen { position: fixed; inset: 0; z-index: 1500; display: none; }
.lve-screen.is-open { display: block; }
.lve-screen::before {
content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.62);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: lveFade .4s ease both;
}
.lve-screen__panel {
position: absolute; z-index: 1; top: calc(var(--lve-top-h) + 14px); bottom: 0; left: 0; right: 0;
width: 100%; max-width: 1360px; margin: 0 auto;
display: flex; flex-direction: column; overflow: hidden;
background: var(--lve-bg-1); border-radius: var(--lve-r-lg) var(--lve-r-lg) 0 0;
box-shadow: 0 -1px 0 rgba(255,255,255,.09), 0 -24px 80px rgba(0,0,0,.55);
animation: lveSheetIn .4s var(--lve-ease-sheet) both;
}
@keyframes lveSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes lveSheetOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
/* Cierre: la hoja baja y el fondo se aclara. Total .3s = setTimeout(300) de dock.js */
.lve-screen.is-closing::before { animation: lveFadeOut .3s ease both; }
.lve-screen.is-closing .lve-screen__panel { animation: lveSheetOut .3s cubic-bezier(.4,0,1,1) both; }
/* La hoja de la ruta por la que se entro (/fotos, /fotos/album) llega ya
abierta en el HTML: se pinta tal cual, sin subir desde abajo. Al cerrarla
si baja (.is-closing). Con un album o un perfil incrustado (.is-bootview),
hasta que gallery.js lo pinta solo se ve su resumen (.lve-ssr) y no el
listado de la seccion, que ni se descarga. */
.lve-screen.is-boot:not(.is-closing)::before,
.lve-screen.is-boot:not(.is-closing) .lve-screen__panel { animation: none; }
.lve-screen.is-bootview [data-screen-body] > :not(.lve-ssr) { display: none !important; }
/* Y la portada de debajo, tapada por esa hoja, no se pinta (ni baja sus
fotos) hasta que se cierra: dock.js quita body.lve-boot. */
.lve-boot #lve-main > :not(.lve-hero), .lve-boot .lve-footer { content-visibility: hidden; }
/* El resumen del servidor (buscadores y primera pintura de /fotos/album):
titulo, texto y la portada, sobrios. */
.lve-ssr { max-width: 760px; padding: 4px 0 24px; }
.lve-ssr__title { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.lve-ssr__sub { margin: 0 0 12px; color: var(--lve-text-2); }
.lve-ssr__text { margin: 0 0 16px; color: var(--lve-text-2); text-wrap: pretty; }
.lve-ssr__img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--lve-r-md); }
/* Cambiar de seccion con una hoja abierta: cambio limpio, sin subir otra vez */
.lve-screen.is-switch::before { animation: none; }
.lve-screen.is-switch .lve-screen__panel { animation: lveFade .2s ease both; }
.lve-screen.is-view .lve-screen__body > * { animation: lveRise .45s var(--lve-ease-out) both; }
.lve-screen__bar {
position: relative; z-index: 5; flex: none;
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titles close";
align-items: start; gap: 12px 16px;
padding: 26px clamp(20px, 3.4vw, 48px) 16px; background: var(--lve-bg-1);
}
.lve-screen__bar:has(.lve-screen__back.is-shown) { grid-template-areas: "back close" "titles titles"; }
.lve-screen__back {
grid-area: back; display: none; justify-self: start; align-items: center; gap: 2px; height: 36px; padding: 0 14px 0 8px;
border: 0; border-radius: var(--lve-r-pill); background: rgba(255,255,255,.1); color: var(--lve-text);
font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s;
}
.lve-screen__back.is-shown { display: inline-flex; }
.lve-screen__back:hover { background: rgba(255,255,255,.16); }
.lve-screen__back .lve-i { width: 16px; height: 16px; stroke-width: 2.2; }
.lve-screen__titles { grid-area: titles; min-width: 0; }
.lve-screen__title {
margin: 0; font-size: clamp(28px, 3.1vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lve-screen__sub { margin: 6px 0 0; font-size: 17px; line-height: 1.4; color: var(--lve-text-2); text-wrap: pretty; }
.lve-screen__sub > span:empty { display: none; }
.lve-screen__count { color: var(--lve-text-3); white-space: nowrap; }
[data-screen-sub]:not(:empty) + .lve-screen__count:not(:empty)::before { content: "·"; margin: 0 .45em; }
.lve-screen__close {
grid-area: close; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255,255,255,.1); color: var(--lve-text); cursor: pointer; transition: background-color .2s;
}
.lve-screen__close .lve-i { width: 18px; height: 18px; stroke-width: 2; }
.lve-screen__close:hover { background: rgba(255,255,255,.18); }
.lve-screen__body {
position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
padding: 10px clamp(20px, 3.4vw, 48px) 72px;
}
/* En una pantalla todo se ve ya: la aparicion al bajar es solo de la portada */
.lve-screen [data-reveal] { opacity: 1 !important; transform: none !important; }
/* Estados */
.lve-state { padding: 64px 20px; text-align: center; color: var(--lve-text-2); }
.lve-state .lve-i { color: #48484a; }
.lve-state p { margin: 0 0 1rem; }
.lve-state .lve-actions { justify-content: center; }
.lve-spinner { width: 30px; height: 30px; margin: 0 auto 14px; border: 2.5px solid rgba(255,255,255,.14); border-top-color: var(--lve-blue-text); border-radius: 50%; animation: lveSpin .8s linear infinite; }
/* =====================================================================
ALBUMES Y GALERIAS
===================================================================== */
.lve-acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 30px 20px; }
.lve-acards--video { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Pocas colecciones (Eventos): tarjetas mas grandes que llenan la fila, como
en Videos (con columnas fijas de 360 px sobraban 145 px a la derecha). */
.lve-acards--few { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lve-acard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.lve-acard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--lve-r-md); background: var(--lve-bg-2); }
.lve-acards--video .lve-acard__media { aspect-ratio: 16 / 9; }
.lve-acard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lve-ease-out), opacity .5s; }
.lve-acard:hover .lve-acard__media img, .lve-acard:focus-visible .lve-acard__media img { transform: scale(1.03); }
.lve-acard__info { display: grid; gap: 2px; padding: 0 2px; }
.lve-acard__title { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--lve-text); text-wrap: balance; }
.lve-acard__count { font-size: 14px; color: var(--lve-text-3); }
.lve-acard:focus-visible { outline: none; }
.lve-acard:focus-visible .lve-acard__media { box-shadow: var(--lve-ring); }
/* Vista de album: una linea, las fotos y la invitacion final */
.lve-album__lead { margin: 0 0 24px !important; max-width: 62ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--lve-text-2); text-wrap: pretty; }
.lve-justified { --jgap: 8px; display: flex; flex-wrap: wrap; gap: 0 var(--jgap); }
.lve-justified::after { content: ""; flex: var(--jfin, 999) 1 0; }
/* app.js (equilibrar) reparte las piezas para que TODAS las filas, tambien
la ultima, lleguen al ancho: un salto de linea invisible (.lve-jbreak)
empieza cada fila y .is-fill quita el relleno del final. Si no hay reparto
posible (una o dos piezas estrechas), la ultima fila se centra al alto de
la de arriba (.is-center, --jh). El hueco vertical va como margen de cada
pieza y no como row-gap: asi el salto no añade una fila vacia de 8 px. */
.lve-justified.is-fill::after, .lve-justified.is-center::after { display: none; }
.lve-justified.is-center { justify-content: center; }
.lve-justified > .is-jlast { flex: 0 0 calc(var(--r) * var(--jh, 240px)); }
.lve-jbreak { flex: 0 0 100%; height: 0; }
.lve-shot {
position: relative; flex: var(--r) 1 calc(var(--r) * 240px); aspect-ratio: var(--r); min-width: 0;
padding: 0; margin: 0 0 var(--jgap); border: 0; overflow: hidden; border-radius: var(--lve-r-sm); cursor: zoom-in; background: var(--lve-bg-2);
}
.lve-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lve-ease-out), opacity .5s; -webkit-user-drag: none; user-select: none; }
.lve-shot:hover img { transform: scale(1.03); }
.lve-shot:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--lve-focus); }
/* Videos: rejilla 16:9 */
.lve-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 20px; }
.lve-vcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0; margin: 0; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.lve-justified .lve-vcard { flex: 1.778 1 calc(1.778 * 240px); margin-bottom: var(--jgap); }
.lve-vcard__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lve-r-md); background: var(--lve-bg-2); }
/* Video vertical (celular, Shorts): tarjeta con su forma real. En la rejilla
de videos ocupa una columna mas estrecha; en la justificada, su --r. */
.lve-vcard--vertical .lve-vcard__media { aspect-ratio: var(--r, .5625); }
.lve-vgrid .lve-vcard--vertical { max-width: 320px; }
.lve-justified .lve-vcard--vertical { flex: var(--r) 1 calc(var(--r) * 240px); }
.lve-vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lve-ease-out), opacity .5s; }
.lve-vcard:hover .lve-vcard__media img, .lve-vcard:focus-visible .lve-vcard__media img { transform: scale(1.03); }
.lve-vcard__info { padding: 0 2px; }
.lve-vcard__title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.lve-vcard:focus-visible { outline: none; }
.lve-vcard:focus-visible .lve-vcard__media { box-shadow: var(--lve-ring); }
.lve-play {
position: absolute; inset: 0; z-index: 3; margin: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
transition: background-color .25s, transform .25s var(--lve-ease-out);
}
.lve-play .lve-i { width: 18px; height: 18px; margin-left: 3px; }
.lve-acard:hover .lve-play, .lve-vcard:hover .lve-play, .lve-vcard:focus-visible .lve-play { background: var(--lve-blue); transform: scale(1.06); }
.lve-duration { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.66); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Carga progresiva de imagenes */
.lve-lazy { opacity: 0; transition: opacity .5s var(--lve-ease); }
.lve-lazy.is-loaded { opacity: 1; }
/* El contenido visual del portafolio no se puede arrastrar ni guardar desde
el menu contextual normal del navegador. La segunda parte la aplica JS. */
[data-lve-protected-content] img,
[data-lve-protected-content] video,
[data-lve-protected-media] {
-webkit-user-drag: none;
-webkit-touch-callout: none;
user-select: none;
}
/* Miniatura hqdefault de YouTube (4:3 con bandas negras): se recorta el
16:9 de dentro mientras no llegue maxresdefault. */
img.lve-yt43 { object-view-box: inset(12.5% 0%); }
@supports not (object-view-box: inset(0%)) {
.lve-acard__media img.lve-yt43, .lve-btile img.lve-yt43, .lve-lb__film img.lve-yt43 { scale: 1.34; }
}
/* Bandas negras propias del video (mas ancho que 16:9) dentro de su
miniatura: Render::bandas pone lve-ytb y cuanto recortar por lado. Con
hqdefault (lve-yt43) se suman a las bandas del 4:3; con maxresdefault
(app.js quita lve-yt43) solo las del video. */
img.lve-ytb { object-view-box: inset(var(--yb-t) var(--yb-r) var(--yb-b) var(--yb-l)); }
img.lve-ytb.lve-yt43 { object-view-box: inset(calc(12.5% + var(--yb-t) * .75) var(--yb-r) calc(12.5% + var(--yb-b) * .75) var(--yb-l)); }
@supports not (object-view-box: inset(0%)) {
img.lve-ytb:not(.lve-yt43), .lve-vcard__media img.lve-ytb.lve-yt43 { scale: var(--yb-s); }
.lve-acard__media img.lve-ytb.lve-yt43, .lve-btile img.lve-ytb.lve-yt43, .lve-lb__film img.lve-ytb.lve-yt43 { scale: var(--yb-s43); }
}
/* Tarjetas genericas (cursos) */
.lve-grid { display: grid; gap: 20px; }
.lve-grid--courses { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lve-card { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); color: inherit; text-align: left; cursor: pointer; }
.lve-card__media { position: relative; overflow: hidden; background: var(--lve-bg-3); }
.lve-card__media--wide { aspect-ratio: 16 / 9; }
.lve-card__media--album { aspect-ratio: 4 / 3; }
.lve-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--lve-ease-out), opacity .5s; }
.lve-card:hover .lve-card__media img { transform: scale(1.03); }
.lve-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; }
.lve-card__title { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--lve-text); }
.lve-card__meta { margin: 0; font-size: 15px; color: var(--lve-text-2); }
.lve-card__body { padding: 20px 22px 24px; }
.lve-badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 5px 11px; border-radius: var(--lve-r-pill); background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: 600; }
.lve-badge--accent { background: var(--lve-blue); }
.lve-badge--owned { background: #248a3d; }
/* =====================================================================
ESTUDIO (pantalla) y EQUIPO
===================================================================== */
.lve-studio__top { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.lve-studio__photo { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); }
.lve-studio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.lve-studio__photo img.lve-studio__ph { object-fit: contain; padding: 24%; opacity: .25; }
.lve-studio__body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lve-studio__text { display: grid; gap: 14px; }
.lve-studio__text p { margin: 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.38; letter-spacing: -.015em; color: var(--lve-text); text-wrap: pretty; }
.lve-studio__text p:has(> strong) { text-wrap: balance; } /* «Linaje. Vida. Escogido. / Eso significa LVE.» */
.lve-studio__text strong {
font-weight: 600; background: linear-gradient(90deg, #f5f5f7 0%, #9cc3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lve-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.lve-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 18px 16px; border-radius: var(--lve-r-md); background: var(--lve-bg-2); }
.lve-facts dd { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--lve-text); }
.lve-facts dt { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--lve-text-2); }
.lve-about__video { position: relative; margin: clamp(32px, 4vw, 52px) 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--lve-r-lg); background: #000; }
.lve-about__video iframe, .lve-about__video video { display: block; width: 100%; height: 100%; border: 0; }
.lve-team { margin: clamp(44px, 5vw, 64px) 0 0; }
.lve-team__title { margin: 0 0 16px !important; font-size: 24px; font-weight: 700; letter-spacing: -.015em; }
.lve-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.lve-mate {
display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px 14px 14px;
border-radius: var(--lve-r-md); background: var(--lve-bg-2); color: var(--lve-text); text-align: left; transition: background-color .2s;
}
.lve-mate:hover { background: var(--lve-bg-3); }
.lve-mate:focus-visible { outline: none; box-shadow: var(--lve-ring); }
.lve-mate__pic { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: var(--lve-bg-3); }
.lve-mate__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lve-mate__body { display: grid; gap: 2px; min-width: 0; }
.lve-mate__name { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.lve-mate__role { font-size: 14px; color: var(--lve-text-2); }
.lve-mate__go { width: 18px; height: 18px; color: var(--lve-text-3); }
/* Ficha de un colaborador */
.lve-mate-detalle { position: relative; }
.lve-mate-detalle__cover {
position: relative; width: 100%; height: clamp(170px, 28vw, 300px);
overflow: hidden; border-radius: var(--lve-r-lg); background: var(--lve-bg-2);
}
.lve-mate-detalle__cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); }
.lve-mate-detalle__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lve-mate-detalle__head { display: flex; gap: clamp(16px, 3vw, 28px); align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.lve-mate-detalle.has-cover .lve-mate-detalle__head {
position: relative; z-index: 1; align-items: flex-end;
margin: 0 clamp(14px, 3vw, 28px) 28px;
}
.lve-mate-detalle.has-cover .lve-mate-detalle__pic {
/* Solo la foto cruza el borde de la portada. El bloque de identidad se
mantiene en el flujo, debajo de la imagen. */
margin-top: -60px;
}
.lve-mate-detalle.has-cover .lve-mate-detalle__identity { padding-top: 14px; }
.lve-mate-detalle__pic {
width: clamp(110px, 14vw, 160px); height: clamp(110px, 14vw, 160px);
aspect-ratio: 1; border-radius: 50%;
object-fit: cover; flex: 0 0 auto; background: var(--lve-bg-3);
border: 4px solid var(--lve-bg-1);
box-shadow: 0 0 0 1px rgba(var(--lve-blue-rgb),.5), 0 0 26px rgba(var(--lve-blue-rgb),.26), 0 12px 32px rgba(0,0,0,.4);
}
.lve-mate-detalle__identity { min-width: 0; flex: 1 1 240px; padding-bottom: 4px; }
.lve-mate-detalle__sub { margin: 36px 0 16px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--lve-text); }
.lve-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.lve-skill { padding: 5px 12px; border-radius: var(--lve-r-pill); background: var(--lve-bg-3); font-size: 13px; font-weight: 500; color: var(--lve-text-2); }
/* La columna corta arranca en el mismo borde que el titulo de la hoja (antes
iba centrada: 260-1180 px frente al titulo en 88 px a 1440). */
.lve-mate-detalle.is-corta { max-width: 920px; margin-inline: 0; }
/* En pantalla ancha la ficha corta ocupa la hoja entera: retrato, habilidades
y bio a la izquierda y la invitacion a cotizar al lado. En una columna de
920 px quedaba una banda vacia de 344 px a la derecha y el 40 % de abajo. */
@media (min-width: 1100px) {
.lve-mate-detalle.is-corta {
max-width: none; display: grid; align-items: start;
grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); column-gap: clamp(40px, 5vw, 80px);
}
.lve-mate-detalle.is-corta > * { grid-column: 1; }
.lve-mate-detalle.is-corta > .lve-mate-detalle__cover { grid-column: 1 / -1; }
.lve-mate-detalle.is-corta > .lve-mate-detalle__cta { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 32px 28px; }
.lve-mate-detalle.is-corta.has-cover > .lve-mate-detalle__cta { grid-row: 2 / span 3; margin-top: 24px; }
.lve-mate-detalle.is-corta .lve-mate-detalle__btns { display: grid; justify-content: stretch; width: 100%; }
}
/* Sin portada: el retrato abre la ficha, con las habilidades al lado. */
.lve-mate-detalle.is-sin-portada .lve-mate-detalle__head { margin-top: 4px; }
.lve-mate-detalle__cta { display: grid; justify-items: center; gap: 18px; margin: 44px 0 8px; padding: 36px 24px; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); text-align: center; }
.lve-mate-detalle__ask { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.lve-mate-detalle__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 620px) {
.lve-mate-detalle__btns .lve-btn { flex: 1 1 100%; }
}
.lve-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lve-social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lve-bg-3); color: var(--lve-text-2); transition: background-color .2s, color .2s; }
.lve-social:hover { background: #2c2c2e; color: #fff; }
.lve-social .lve-i { width: 18px; height: 18px; }
/* Detalle de produccion */
.lve-detail__hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 24px; border-radius: var(--lve-r-lg); background: #000; }
.lve-detail__hero iframe, .lve-detail__hero video, .lve-detail__hero img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.lve-detail__meta { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0 0 24px; padding: 0 0 22px; border-bottom: 1px solid var(--lve-hair); }
.lve-detail__meta dt { margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--lve-text-3); }
.lve-detail__meta dd { margin: 0; font-size: 16px; }
.lve-detail__text { max-width: 68ch; margin-bottom: 32px; color: var(--lve-text-2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
/* Menú contextual propio de la página web pública. */
.lve-context-menu {
position: fixed; z-index: 5000;
width: min(250px, calc(100vw - 24px));
max-height: calc(100vh - 24px); overflow-y: auto;
max-height: calc(100dvh - 24px);
padding: 6px; border-radius: 14px;
color: var(--lve-text); background: rgba(36,36,38,.94);
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 0 0 .5px rgba(255,255,255,.16), 0 22px 60px rgba(0,0,0,.6);
overscroll-behavior: contain;
}
.lve-context-menu[hidden] { display: none; }
.lve-context-menu:not([hidden]) { animation: lveContextIn .14s var(--lve-ease-out) both; }
@keyframes lveContextIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lve-context-menu__brand { min-height: 36px; display: flex; align-items: center; gap: 10px; margin: 0 2px 4px; padding: 4px 8px 8px; border-bottom: 1px solid var(--lve-hair); font-size: 13px; font-weight: 600; color: var(--lve-text-2); }
.lve-context-menu__mark { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.lve-context-menu__item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--lve-text); font-size: 14px; font-weight: 500; line-height: 1.2; transition: background-color .12s; position: relative; }
.lve-context-menu__item .lve-i { flex: 0 0 auto; width: 18px; height: 18px; color: var(--lve-text-2); }
.lve-context-menu__item:hover, .lve-context-menu__item:focus-visible { background: var(--lve-blue); color: #fff; outline: none; }
.lve-context-menu__item:hover .lve-i, .lve-context-menu__item:focus-visible .lve-i { color: #fff; }
.lve-context-menu__item--primary { margin-top: 4px; color: var(--lve-blue-text); }
/* =====================================================================
VISOR (lightbox) — .lve-lb / .is-open / .is-closing .22s
===================================================================== */
.lve-lb { position: fixed; inset: 0; z-index: 2200; display: none; grid-template-rows: 60px minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr); background: #000; color: var(--lve-text); }
.lve-lb.is-open { display: grid; animation: lveFade .25s ease both; }
.lve-lb.is-closing { animation: lveFadeOut .22s ease both; }
.lve-lb__bar { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 22px; }
.lve-lb__count { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--lve-text-2); font-variant-numeric: tabular-nums; }
.lve-lb__title { min-width: 0; padding-left: 12px; font-size: 14px; font-weight: 600; color: var(--lve-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lve-lb__title:empty { display: none; }
.lve-lb__spacer { flex: 1; }
.lve-lb__tool { width: 44px; height: 44px; }
.lve-lb__tool { flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; border-radius: 50%; color: var(--lve-text-2); transition: color .2s, background-color .2s; }
.lve-lb__tool:hover { color: #fff; background: rgba(255,255,255,.1); }
.lve-lb__tool .lve-i { width: 19px; height: 19px; }
.lve-lb__tool--close { margin-left: 4px; background: rgba(255,255,255,.1); color: #fff; }
.lve-lb__tool--close:hover { background: rgba(255,255,255,.2); }
.lve-lb__stage {
grid-row: 2; grid-column: 1; position: relative; min-height: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center; padding: 12px 96px 20px;
}
.lve-lb__img {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; border-radius: 10px;
animation: lveLbIn .45s var(--lve-ease-out) both; touch-action: pan-y;
-webkit-user-drag: none; -webkit-touch-callout: none; user-select: none;
}
.lve-lb__img.is-zoomed { max-width: none; max-height: none; cursor: zoom-out; margin: auto; flex: none; border-radius: 0; touch-action: pan-x pan-y pinch-zoom; }
/* Ampliada, la foto se alinea al principio y se centra con margin:auto: con
align-items/justify-content: center la parte que sobresalia por arriba y
por la izquierda (la cabeza en un retrato) quedaba fuera del scroll. */
.lve-lb__stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.lve-lb__img.is-fixed { cursor: default; }
@keyframes lveLbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.lve-lb__video { width: min(1280px, 100%); max-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; animation: lveLbIn .45s var(--lve-ease-out) both; }
.lve-lb__video iframe, .lve-lb__video video { display: block; width: 100%; height: 100%; border: 0; }
/* La forma del video manda (lightbox.js pone --lve-ar). Vertical: lo decide
el alto de la pantalla, asi en el celular llena la pantalla. */
.lve-lb__video { aspect-ratio: var(--lve-ar, 16 / 9); }
.lve-lb__video.is-vertical { width: auto; height: 100%; max-width: 100%; }
.lve-lb__video video { object-fit: contain; background: #000; }
.lve-lb__nav {
grid-row: 2; grid-column: 1; position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; transform: translateY(-50%);
cursor: pointer; background: rgba(255,255,255,.1); border: 0; border-radius: 50%; color: #fff; transition: background-color .2s;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lve-lb__nav .lve-i { width: 22px; height: 22px; stroke-width: 2; }
.lve-lb__nav:hover { background: rgba(255,255,255,.2); }
.lve-lb__nav--prev { left: 24px; }
.lve-lb__nav--next { right: 24px; }
.lve-lb__nav[hidden] { display: none; }
.lve-lb__caption { grid-row: 3; grid-column: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 44px; padding: 6px 24px 10px; text-align: center; }
.lve-lb__caption:empty { min-height: 0; padding: 0; }
.lve-lb__caption h4 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.lve-lb__caption p { margin: 0; font-size: 14px; color: var(--lve-text-2); max-width: 90ch; }
/* El pie que repite el nombre del album (lightbox.js): fuera donde la barra
ya lo enseña; en el telefono la barra no lo lleva y el pie se queda. */
@media (min-width: 701px) and (min-height: 521px) {
.lve-lb__caption.is-dup { min-height: 0; padding: 0; }
.lve-lb__caption.is-dup h4 { display: none; }
}
.lve-lb__film {
grid-row: 4; grid-column: 1; display: flex; gap: 6px; padding: 10px 20px 16px; background: #000;
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
justify-content: center; justify-content: safe center;
}
.lve-lb__film[hidden] { display: none !important; }
.lve-lb__film::-webkit-scrollbar { display: none; }
.lve-lb__film button { position: relative; flex: none; width: 64px; height: 44px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--lve-bg-2); opacity: .45; transition: opacity .2s; }
.lve-lb__film button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lve-lb__fn { display: none; }
.lve-lb__film button:hover { opacity: .85; }
.lve-lb__film button.is-active { opacity: 1; }
/* El aro va ENCIMA de la miniatura: como sombra interior del boton quedaba
debajo de la imagen y solo asomaba por las bandas negras de YouTube. */
.lve-lb__film button.is-active::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 2px var(--lve-blue-text);
}
@media (max-width: 700px), (max-height: 520px) {
.lve-lb__film { display: none; }
.lve-lb { grid-template-rows: calc(56px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) auto calc(64px + env(safe-area-inset-bottom, 0px)); }
.lve-lb__bar {
padding-top: env(safe-area-inset-top, 0px);
padding-right: max(8px, env(safe-area-inset-right, 0px));
padding-left: max(16px, env(safe-area-inset-left, 0px));
}
.lve-lb__title { display: none; }
.lve-lb__stage { padding: 8px 8px; }
/* Las flechas bajan a su propia fila: ya no montan sobre el pie de foto. */
.lve-lb__nav {
grid-row: 4; position: relative; top: auto; transform: none; width: 44px; height: 44px; align-self: center;
margin-bottom: env(safe-area-inset-bottom, 0px);
}
.lve-lb__nav--prev { left: auto; justify-self: start; margin-left: 16px; }
.lve-lb__nav--next { right: auto; justify-self: end; margin-right: 16px; }
.lve-lb__caption { min-height: 0; padding: 10px 16px; }
.lve-lb__caption:empty { display: none; }
}
/* =====================================================================
CURSOS
===================================================================== */
.lve-course__price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; }
.lve-course__amount { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.lve-course__compare { font-size: 15px; color: var(--lve-text-3); text-decoration: line-through; }
.lve-course__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lve-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--lve-r-pill); background: var(--lve-bg-3); font-size: 13px; font-weight: 500; color: var(--lve-text-2); }
.lve-chip--xs { padding: 2px 8px; font-size: 11px; }
.lve-course-detail { display: grid; gap: clamp(24px, 4vw, 44px); grid-template-columns: 1fr; }
@media (min-width: 980px) { .lve-course-detail { grid-template-columns: 1fr 360px; align-items: start; } }
.lve-buybox { position: sticky; top: 12px; padding: 28px; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); }
.lve-buybox__price { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #fff; }
.lve-buybox__list { margin: 18px 0 22px; padding: 0; list-style: none; }
.lve-buybox__list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15px; color: var(--lve-text-2); }
.lve-buybox__list .lve-i { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--lve-blue-text); }
.lve-paylogos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.lve-paylogos span { font-size: 12px; font-weight: 600; color: var(--lve-text-3); }
.lve-module { margin-bottom: 8px; overflow: hidden; border-radius: var(--lve-r-md); background: var(--lve-bg-2); }
.lve-module__head { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 14px 18px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font-size: 16px; font-weight: 600; }
.lve-module__head:hover { background: rgba(255,255,255,.03); }
.lve-module__n { font-size: 13px; color: var(--lve-blue-text); }
.lve-module__count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--lve-text-3); }
.lve-module__chevron { flex: 0 0 auto; transition: transform .3s var(--lve-ease); }
.lve-module.is-open .lve-module__chevron { transform: rotate(180deg); }
.lve-module__list { display: none; border-top: 1px solid var(--lve-hair); }
.lve-module.is-open .lve-module__list { display: block; }
.lve-lesson { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--lve-hair); background: transparent; color: inherit; text-align: left; font-size: 15px; }
button.lve-lesson--preview { cursor: pointer; }
button.lve-lesson--preview:hover, .lve-lesson--file:hover { background: rgba(var(--lve-blue-rgb), .08); }
.lve-lesson--file { color: var(--lve-text-2); font-size: 14px; }
.lve-lesson:last-child { border-bottom: 0; }
.lve-lesson__icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--lve-text-3); }
.lve-lesson--preview .lve-lesson__icon { color: var(--lve-blue-text); }
.lve-lesson__name { flex: 1; min-width: 0; }
.lve-lesson__time { font-size: 13px; color: var(--lve-text-3); font-variant-numeric: tabular-nums; }
/* Cursos cerrados */
.lve-cursos-cerrado { max-width: 560px; margin: clamp(30px, 8vh, 80px) auto; padding: 0 20px; text-align: center; }
.lve-cursos-cerrado__tag { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: var(--lve-r-pill); background: rgba(var(--lve-blue-rgb), .16); font-size: 13px; font-weight: 600; color: var(--lve-blue-text); }
.lve-cursos-cerrado h3 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.lve-cursos-cerrado p { margin: 0 auto 24px; max-width: 440px; color: var(--lve-text-2); }
.lve-cursos-cerrado .lve-curtain__form { justify-content: center; }
/* =====================================================================
MODAL (cuenta / pago), FORMULARIOS, METODOS, AVISOS
===================================================================== */
.lve-modal {
position: fixed; inset: 0; z-index: 2400; display: none; overflow-y: auto; padding: clamp(16px, 7vh, 72px) 14px;
background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lve-modal.is-open { display: block; animation: lveFade .25s var(--lve-ease); }
.lve-modal__box { position: relative; max-width: 460px; margin: 0 auto; overflow: hidden; border-radius: var(--lve-r-lg); background: var(--lve-bg-2); box-shadow: 0 0 0 .5px rgba(255,255,255,.12), var(--lve-shadow); animation: lveModalIn .4s var(--lve-ease-out) both; }
@keyframes lveModalIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.lve-modal__head { display: flex; align-items: center; gap: 14px; padding: 22px 20px 6px 28px; }
.lve-modal__title { flex: 1; margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lve-modal__head .lve-screen__close { width: 36px; height: 36px; }
.lve-modal__body { padding: 12px 28px 28px; }
.lve-modal__body > .lve-muted:first-child { color: var(--lve-text-2); font-size: 15px !important; }
/* Los enlaces de debajo de cada formulario: en fila con aire entre ellos y,
si no caben, uno por renglon (antes quedaba un «·» colgando al final). */
.lve-acc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 22px; }
/* Contraseña y su repeticion: lado a lado si el modal lo permite, con la
pista («Mínimo 8 caracteres») debajo de las dos. */
.lve-acc-pair { margin-bottom: 18px; }
.lve-acc-pair .lve-field { margin-bottom: 0; }
.lve-acc-pair__hint { grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 559px) { .lve-acc-pair .lve-field + .lve-field { margin-top: 18px; } .lve-acc-pair__hint { grid-row: 2; } }
/* Pantallas bajas (1280x720, 1366x768, 360x740): el alta entera, con su
boton y el enlace a «Entrar», cabe sin desplazar. */
@media (max-height: 820px) {
.lve-modal { padding-top: clamp(10px, 3vh, 28px); padding-bottom: 16px; }
.lve-modal__head { padding-top: 16px; }
.lve-modal__body { padding-bottom: 20px; }
.lve-modal__body > .lve-muted:first-child { margin-bottom: 12px !important; }
.lve-modal .lve-field, .lve-modal .lve-acc-pair { margin-bottom: 12px; }
.lve-modal .lve-acc-pair .lve-field { margin-bottom: 0; }
.lve-modal .lve-label { margin-bottom: 5px; }
.lve-modal .lve-input { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.lve-modal .lve-acc-pair__hint { margin-top: 6px; }
.lve-modal form .mt-3 { margin-top: 12px !important; }
}
.lve-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 12px; border-radius: var(--lve-r-md); background: var(--lve-bg-3); }
.lve-summary img { width: 60px; height: 60px; flex: 0 0 auto; object-fit: cover; border-radius: 10px; }
.lve-summary__t { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.lve-summary__p { margin-left: auto; font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; }
.lve-field { margin-bottom: 18px; }
.lve-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--lve-text-2); }
.lve-label span { color: var(--lve-text-3); font-weight: 400; font-size: 13px; }
.lve-input, .lve-select, .lve-textarea {
display: block; width: 100%; min-height: 48px; padding: 12px 14px;
/* Borde a 3:1 o mas sobre el modal (#161618) y las hojas: con .12 salia
a ~1,5:1 y el campo no se distinguia (WCAG 1.4.11). */
background: var(--lve-bg-3); color: var(--lve-text); border: 1px solid rgba(255,255,255,.32); border-radius: var(--lve-r-sm);
font: 400 16px/1.4 var(--lve-sans);
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.lve-input::placeholder, .lve-textarea::placeholder { color: var(--lve-text-3); }
.lve-input:focus, .lve-select:focus, .lve-textarea:focus { outline: 0; border-color: var(--lve-focus); box-shadow: 0 0 0 1px var(--lve-focus); }
/* Solo lectura (la identidad de la cuenta en el formulario de cotizacion):
texto sobre una tarjeta tenue, sin marco ni fondo de campo ni anillo al
pulsar, con un candado junto al rotulo. Antes se veia igual que un campo
editable y cogia el foco sin dejar escribir. */
.lve-input[readonly] {
min-height: 0; padding: 0; border-color: transparent; border-radius: 4px; background: transparent;
color: var(--lve-text); font-size: 15px; text-overflow: ellipsis; cursor: default; box-shadow: none;
}
.lve-input[readonly]:focus { border-color: transparent; box-shadow: none; outline: none; }
.lve-ident {
display: grid; gap: 12px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.05);
}
.lve-ident .lve-field { min-width: 0; margin: 0; }
.lve-ident .lve-label { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 12px; color: var(--lve-text-3); }
.lve-ident .lve-label .lve-i { width: 12px; height: 12px; }
.lve-textarea { min-height: 132px; resize: vertical; }
.lve-select {
appearance: none; padding-right: 42px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 15px center;
}
.lve-select option { background: #1d1d1f; color: var(--lve-text); }
.lve-row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lve-row--2 { grid-template-columns: 1fr 1fr; } }
.lve-hint-level { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--lve-blue-text); }
.lve-hint-level::before { content: '↳'; opacity: .7; }
.lve-select--scale { font-variant-numeric: tabular-nums; }
.lve-error { display: none; margin: 6px 0 0; color: var(--lve-err); font-size: 13px; }
.lve-field.has-error .lve-input, .lve-field.has-error .lve-select, .lve-field.has-error .lve-textarea { border-color: var(--lve-err); }
.lve-field.has-error .lve-error { display: block; }
.lve-methods { display: grid; gap: 8px; margin-bottom: 20px; }
.lve-method { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.lve-method:hover { background: rgba(255,255,255,.03); }
.lve-method input { position: absolute; opacity: 0; pointer-events: none; }
/* El input real esta oculto: el anillo de foco va en la tarjeta. */
.lve-method:focus-within { border-color: var(--lve-focus); box-shadow: 0 0 0 1px var(--lve-focus); }
.lve-method__mark { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%; transition: border-color .2s, background-color .2s; }
.lve-method__mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .2s var(--lve-spring); }
.lve-method.is-selected { border-color: var(--lve-blue); background: rgba(var(--lve-blue-rgb), .1); }
.lve-method.is-selected .lve-method__mark { border-color: var(--lve-blue); background: var(--lve-blue); }
.lve-method.is-selected .lve-method__mark::after { transform: scale(1); }
/* La marca sigue al control DE VERDAD, sin depender de JavaScript. */
.lve-method:has(input:checked) { border-color: var(--lve-blue); background: rgba(var(--lve-blue-rgb), .1); }
.lve-method:has(input:checked) .lve-method__mark { border-color: var(--lve-blue); background: var(--lve-blue); }
.lve-method:has(input:checked) .lve-method__mark::after { transform: scale(1); }
/* Una casilla de si/no: cuadrada con visto */
.lve-method:has(input[type="checkbox"]) .lve-method__mark { border-radius: 6px; }
.lve-method[style*="border:0"], .lve-method[style*="border:0"]:has(input:checked) { background: transparent; box-shadow: none; }
.lve-method:has(input[type="checkbox"]) .lve-method__mark::after {
width: 10px; height: 5px; border-radius: 0; background: none;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
transform: rotate(-45deg) scale(0); margin-top: -3px;
}
.lve-method:has(input[type="checkbox"]:checked) .lve-method__mark::after,
.lve-method.is-selected:has(input[type="checkbox"]) .lve-method__mark::after { transform: rotate(-45deg) scale(1); }
.lve-method__text { flex: 1; min-width: 0; }
.lve-method__name { font-weight: 600; font-size: 15px; }
.lve-method__sub { font-size: 14px; color: var(--lve-text-2); }
.lve-method__logo { flex: 0 0 auto; height: 22px; opacity: .9; }
.lve-method.is-disabled { opacity: .4; pointer-events: none; }
.lve-paywrap { margin-top: 8px; min-height: 4px; }
#lve-paypal-buttons { margin-top: 6px; }
#ATHMovil_Checkout_Button_payment { margin-top: 6px; display: block; }
.lve-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--lve-text-2); }
.lve-note .lve-i { flex: 0 0 auto; margin-top: 2px; color: var(--lve-blue-text); }
.lve-alert { display: none; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--lve-r-sm); font-size: 14px; line-height: 1.5; }
.lve-alert.is-shown { display: block; animation: lveRise .3s var(--lve-ease-out) both; }
.lve-alert--error { background: rgba(255,105,97,.12); color: #ffb4ae; }
.lve-alert--ok { background: rgba(48,209,88,.12); color: #9ff0b3; }
.lve-alert--warn { background: rgba(255,196,107,.12); color: #ffdca6; }
.lve-alert--info { background: rgba(var(--lve-blue-rgb),.14); color: #b9d5ff; }
.lve-alert a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lve-done { padding: 20px 0 6px; text-align: center; }
.lve-done__icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(48,209,88,.14); color: var(--lve-ok); animation: lvePop .5s var(--lve-spring) both; }
@keyframes lvePop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
/* Ojo de "ver contraseña": dentro del campo */
.lve-pass { position: relative; display: block; }
.lve-pass .lve-input { padding-right: 50px; }
.lve-pass__eye { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--lve-text-3); cursor: pointer; transition: color .18s; }
.lve-pass__eye:hover { color: var(--lve-text); }
/* El codigo de seis cifras: grande y separado */
.lve-codigo { font-size: 1.5rem; letter-spacing: 10px; text-align: center; padding-left: 10px; }
/* Selector de archivo (foto de perfil) */
.lve-input[type="file"] { padding: 7px 8px; min-height: 48px; color: var(--lve-text-2); font-size: 14px; }
.lve-input[type="file"]::file-selector-button {
margin-right: 12px; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--lve-r-pill);
background: rgba(255,255,255,.12); color: var(--lve-text); font: 600 13px/1 var(--lve-sans); cursor: pointer;
}
.lve-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.lve-foto__ctl { display: grid; gap: 8px; min-width: 0; }
.lve-foto__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lve-foto__btns label.lve-btn { cursor: pointer; }
.lve-file:focus-visible + .lve-foto__btns label.lve-btn { box-shadow: var(--lve-ring); }
.lve-foto__btns label.is-busy { opacity: .55; pointer-events: none; }
.lve-foto__nombre { margin: 0; font-size: 13px; color: var(--lve-text-2); overflow-wrap: anywhere; }
.lve-foto__nombre:empty { display: none; }
/* =====================================================================
COTIZA TU PROYECTO (pantalla de Contacto)
===================================================================== */
/* Mismo borde izquierdo que el titulo de la hoja: nada de columna estrecha centrada. */
.lve-contact { max-width: none; margin: 0; }
/* «Servicio: Bodas» cuando se llega desde «Cotizar» en una tarjeta (app.js) */
.lve-contact__svc { margin: 0 0 18px !important; }
.lve-contact__svc span {
display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: var(--lve-r-pill);
background: rgba(var(--lve-blue-rgb), .16); color: #b9d5ff; font-size: 14px; font-weight: 600;
}
.lve-contact__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.lve-contact--form .lve-contact__cards { grid-template-columns: minmax(0, .78fr) minmax(0, 1.62fr); align-items: start; }
.lve-contact--solo .lve-contact__cards { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0; }
.lve-ccard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--lve-r-lg); background: var(--lve-bg-2); }
.lve-ccard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--lve-blue-rgb), .18); color: var(--lve-blue-text); }
.lve-ccard__icon--wa { background: rgba(37,211,102,.14); color: var(--lve-wa); }
.lve-ccard__title { margin: 6px 0 0 !important; font-size: clamp(22px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.lve-ccard__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--lve-text-2); text-wrap: pretty; }
.lve-ccard__mail { margin: 0; font-size: 15px; }
.lve-ccard--wa > .lve-btn { margin-top: auto; align-self: flex-start; }
.lve-ccard--wa .lve-checks { margin-bottom: 14px; }
.lve-ccard--wa { justify-content: flex-start; }
.lve-ccard .lve-actions { margin-top: auto; padding-top: 8px; }
.lve-checks { display: grid; gap: 10px; margin: 4px 0 6px; padding: 0; list-style: none; }
.lve-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.lve-checks .lve-i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--lve-blue-text); stroke-width: 2.2; }
.lve-ccard--form .lve-ccard__title { margin: 0 0 8px !important; }
.lve-form { padding: 0; }
.lve-form__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 18px !important; font-size: 14px; color: var(--lve-text-2); }
.lve-form__who .lve-i { width: 16px; height: 16px; color: var(--lve-blue-text); }
.lve-form__who span { flex: 1 1 220px; min-width: 0; }
.lve-form__who a { color: var(--lve-blue-text); }
.lve-form__small { margin: 12px 0 0 !important; font-size: 13px; text-align: center; color: var(--lve-text-3); }
.lve-contact__small { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 22px 0 0 !important; font-size: 14px; color: var(--lve-text-3); }
.lve-contact__small span { display: inline-flex; align-items: center; gap: 6px; }
.lve-contact__small .lve-i { width: 15px; height: 15px; }
/* Correo y telefono protegidos: el enlace lo arma el JS */
.lve-veil { cursor: pointer; }
/* =====================================================================
TELON · proximamente y mantenimiento
===================================================================== */
.lve-curtain { position: relative; min-height: 100svh; margin: 0; padding: 0; display: grid; place-items: center; overflow: hidden; background: #000; isolation: isolate; }
.lve-curtain__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.lve-curtain__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.85); animation: lveCurtainZoom 26s ease-in-out infinite alternate; }
/* Pantalla apaisada: el punto de interes de la foto (soon_focus_y, --fy)
sube por encima del logo centrado en vez de quedar debajo de el (la cara
del artista asomaba bajo el isotipo). La foto crece por arriba lo mismo
que sube, asi que el pie sigue cubierto. */
@media (min-aspect-ratio: 1/1) {
.lve-curtain__bg img {
--t: clamp(0, calc((var(--fy, 6) - 6) / (100 - var(--fy, 6)) * 100), 20);
position: absolute; left: 0; top: calc(var(--t) * -1%); height: calc(100% + var(--t) * 1%);
}
}
@keyframes lveCurtainZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.lve-curtain__scrim {
position: absolute; inset: 0; z-index: -2;
background:
radial-gradient(50% 40% at 50% 70%, rgba(var(--lve-glow-rgb), .18), rgba(var(--lve-glow-rgb), 0) 70%),
linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%);
}
.lve-curtain__lang { position: absolute; top: 16px; right: 16px; z-index: 3; }
.lve-curtain__lang .lve-lang__opt { min-width: 40px; height: 40px; }
.lve-curtain__inner { position: static; width: 100%; max-width: 720px; padding: 72px clamp(20px, 6vw, 40px) 56px; text-align: center; }
.lve-curtain__logo { position: relative; width: min(240px, 56vw); margin: 0 auto 28px; }
/* Un velo suave y redondo detras del logo: la foto de fondo (la que se elija
en Ajustes) no queda con una cara asomando bajo el isotipo. */
.lve-curtain__logo::before {
content: ''; position: absolute; inset: -42% -36%; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, rgba(0,0,0,.78), rgba(0,0,0,.5) 55%, rgba(0,0,0,0));
}
.lve-curtain__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 36px rgba(0,0,0,.5)); animation: lveRise .9s var(--lve-ease-out) both; }
.lve-curtain__kicker { margin-bottom: 12px; }
.lve-curtain__title { margin: 0 0 12px; font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; animation: lveRise .9s .06s var(--lve-ease-out) both; }
.lve-curtain__text { max-width: 40ch; margin: 0 auto 28px; color: #d2d2d7; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; text-wrap: pretty; animation: lveRise .9s .12s var(--lve-ease-out) both; }
.lve-count { display: flex; justify-content: center; gap: 10px; margin: 0 0 28px; animation: lveRise .9s .18s var(--lve-ease-out) both; }
.lve-count__box { min-width: clamp(64px, 16vw, 84px); padding: 14px 6px 12px; border-radius: var(--lve-r-md); background: rgba(22,22,24,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lve-count__n { display: block; font-size: clamp(26px, 5vw, 34px); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.lve-count__l { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--lve-text-2); }
.lve-curtain__form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; animation: lveRise .9s .24s var(--lve-ease-out) both; }
.lve-curtain__form .lve-input { flex: 1; min-width: 0; border-radius: var(--lve-r-pill); padding-left: 20px; }
.lve-curtain__form .lve-btn { flex: 0 0 auto; }
@media (max-width: 460px) {
.lve-curtain__form { flex-direction: column; }
.lve-curtain__form .lve-btn { width: 100%; }
}
.lve-curtain__msg { min-height: 22px; margin: 14px 0 0; font-size: 14px; }
.lve-curtain__msg:focus { outline: none; }
.lve-curtain__msg[data-state="ok"] { color: var(--lve-ok); }
.lve-curtain__msg[data-state="bad"] { color: var(--lve-err); }
.lve-curtain__social { justify-content: center; margin-top: 28px; }
.lve-curtain .lve-social { background: rgba(29,29,31,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lve-curtain .lve-social.lve-veil .lve-i { color: var(--lve-wa); }
/* =====================================================================
PAGINAS INTERIORES (mis cursos, cuenta, baja) y 404
===================================================================== */
body:not(.lve-home) .lve-topbar { background: rgba(0,0,0,.82); }
.lve-legal { min-height: 60vh; padding-inline: var(--lve-gutter); }
.lve-404 { position: relative; z-index: 3; display: grid; justify-items: center; gap: 14px; padding: calc(var(--lve-top-h) + 72px) var(--lve-gutter) 56px; text-align: center; background: #000; }
.lve-404__title { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.lve-404__text { margin: 0 0 8px; max-width: 52ch; color: var(--lve-text-2); text-wrap: pretty; }
.lve-404__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Sin portada debajo: el aviso llena la primera pantalla y los artistas
asoman al final. */
.lve-404 { min-height: calc(100vh - 190px); min-height: calc(100svh - 190px); align-content: center; }
@media (max-width: 480px) { .lve-404__btns { display: grid; justify-content: stretch; width: 100%; max-width: 340px; } }
/* Aparicion al hacer scroll (la clase la pone app.js) */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--lve-ease-out), transform .7s var(--lve-ease-out); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.lve-stiles .lve-stile:nth-child(2), .lve-bento .lve-btile:nth-child(2) { transition-delay: .06s; }
.lve-stiles .lve-stile:nth-child(3), .lve-bento .lve-btile:nth-child(3) { transition-delay: .12s; }
.lve-stiles .lve-stile:nth-child(4), .lve-bento .lve-btile:nth-child(4) { transition-delay: .18s; }
/* Destinos de anclas y del salto al contenido: reciben el foco (tabindex=-1)
sin dibujar un marco alrededor de toda la seccion. */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
/* Lo mismo para los titulos de las hojas y dialogos: dock.js (focusTitle) y
firma.js les llevan el foco para que el lector de pantalla diga donde se
esta; no son un control y un marco cuadrado a todo el ancho parecia uno. */
:is(h1, h2, h3, [data-screen-title])[tabindex="-1"]:focus { outline: none; }
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width: 1100px) {
.lve-nav__list { gap: 16px; }
.lve-nav__link { font-size: 12.5px; }
}
@media (max-width: 1023px) {
/* Barra: hasta 1023 px las secciones no caben junto a ES/EN y la cuenta
(a 834 px «Contacto» montaba encima de ES/EN). Quedan logo, «Cotizar» y
el boton de menu; la hoja de menu lleva las secciones, el idioma y la
cuenta. */
.lve-topbar__in { display: flex; justify-content: space-between; }
.lve-nav, .lve-topbar .lve-lang, .lve-topbar .lve-account, .lve-topbar .lve-topbar__wa { display: none; }
.lve-menubtn { display: grid; }
.lve-topbar__quote { margin-right: 4px; }
body:not(.lve-home) .lve-topbar .lve-lang, body:not(.lve-home) .lve-topbar .lve-account { display: inline-flex; }
.lve-studio__top { grid-template-columns: minmax(0, 1fr); }
.lve-studio__photo { aspect-ratio: 16 / 10; max-height: none; }
.lve-bento { grid-auto-rows: clamp(180px, 26vw, 260px); gap: 16px; }
.lve-bento[data-n="6"] .lve-btile--4, .lve-bento[data-n="6"] .lve-btile--5 { grid-column: span 6; }
.lve-bento[data-n="6"] .lve-btile--6 { grid-column: span 12; }
.lve-contact--form .lve-contact__cards { grid-template-columns: minmax(0, 1fr); }
.lve-contact--form .lve-ccard--wa { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.lve-contact--form .lve-ccard--wa .lve-ccard__icon { grid-row: span 2; }
.lve-contact--form .lve-ccard--wa .lve-ccard__title { margin: 0 !important; }
.lve-contact--form .lve-ccard--wa > .lve-btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; width: auto; align-self: center; }
.lve-contact--form .lve-ccard--wa .lve-checks { display: none; }
.lve-ai-summary__inner { grid-template-columns: 1fr; gap: 10px; }
.lve-ai-summary__actions { justify-content: flex-start; }
}
/* Telefono y tableta vertical: los cinco enteros, en una fila si caben (768)
y si no en dos (3 + 2 en el telefono). La fila que se deslizaba dejaba
«Gemini» cortado en seco en el borde derecho. */
@media (max-width: 820px) {
.lve-ai-summary__actions { display: block; }
.lve-ai-summary__links { gap: 8px 6px; }
.lve-ai-summary__item, .lve-ai-summary__link { flex: 0 0 auto; }
.lve-ai-summary__llms { margin-top: 8px !important; }
}
/* Telefono y tableta vertical: barra de 48 px con el boton de menu */
@media (max-width: 820px) {
:root { --lve-top-h: 48px; }
/* El logo en el borde del contenido; el boton de menu, con su -10 px, deja
las dos rayas en el mismo borde por la derecha. */
.lve-topbar { padding: 0 max(16px, calc(var(--lve-gutter) - 4px)) 0 var(--lve-gutter); }
/* Sin boton de menu (cotizacion, factura, cuenta, mis cursos): el ultimo
boton en el mismo borde que el logo. */
.lve-topbar:not(#lve-topbar) { padding-right: var(--lve-gutter); }
.lve-topbar__quote { display: none; }
.lve-actionbar {
display: block; position: fixed; z-index: 1550; left: 0; right: 0; bottom: 0;
padding: 10px 14px calc(10px + var(--lve-safe-b));
background: rgba(0,0,0,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
border-top: 1px solid var(--lve-hair);
transform: translateY(110%); visibility: hidden;
transition: transform .35s var(--lve-ease-out), visibility 0s linear .35s;
}
.lve-actionbar.is-on { transform: none; visibility: visible; transition: transform .35s var(--lve-ease-out), visibility 0s; }
.lve-actionbar.is-on.is-covered { transform: translateY(110%); visibility: hidden; }
.lve-actionbar__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.lve-actionbar__in:not(:has(.lve-btn--wa)) { grid-template-columns: minmax(0, 1fr); }
.lve-actionbar .lve-btn { --h: 46px; width: 100%; padding: 0 12px; font-size: 15px; }
html.lve-bar-on .lve-footer { padding-bottom: calc(68px + var(--lve-safe-b)); }
html.lve-bar-on .lve-screen__body { padding-bottom: calc(100px + var(--lve-safe-b)); }
.lve-hero { min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); }
.lve-screen__panel { top: calc(var(--lve-top-h) + 10px); }
.lve-screen__bar { padding: 20px 18px 12px; }
.lve-screen__body { padding: 6px 18px 56px; }
.lve-screen__sub { font-size: 16px; }
}
@media (max-width: 760px) {
body { font-size: 16px; }
.lve-hero { padding: calc(var(--lve-top-h) + 28px) 20px calc(40px + var(--lve-safe-b)); }
.lve-hero__logo { width: clamp(150px, 46vw, 190px); }
.lve-hero__title { font-size: clamp(32px, 9.4vw, 44px); }
.lve-hero__eyebrow { font-size: 12px; }
.lve-hero__cta { width: 100%; max-width: 360px; }
.lve-hero__cta .lve-btn { flex: 1 1 auto; }
/* Artistas: la misma marquesina (arriba, en «Prueba social»); aqui solo
la letra. El dedo la puede tomar: al tocarla se queda quieta como una
fila con scroll (.is-manual) y sin tocarla unos segundos sigue sola. */
.lve-proof__name { font-size: 18px; }
.lve-stiles--home { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lve-stile__body { padding: 20px 20px 22px; }
.lve-stile__actions .lve-btn--sm { --h: 44px; }
.lve-iconbtn { width: 44px; height: 44px; }
.lve-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; gap: 12px; }
.lve-bento .lve-btile, .lve-bento[data-n] .lve-btile { grid-column: span 1; grid-row: auto; }
.lve-bento[data-n] .lve-btile--1 { grid-column: 1 / -1; grid-row: span 2; }
.lve-bento[data-n="6"] .lve-btile--6, .lve-bento[data-n="4"] .lve-btile--4, .lve-bento[data-n="2"] .lve-btile--2 { grid-column: 1 / -1; }
.lve-btile { border-radius: 20px; }
.lve-btile__label { left: 16px; right: 16px; bottom: 14px; gap: 2px; }
.lve-btile__name { font-size: 16px; }
.lve-btile--1 .lve-btile__name { font-size: 22px; }
.lve-btile__meta, .lve-btile--1 .lve-btile__meta { font-size: 12px; }
/* En las teselas pequeñas la linea de abajo puede ir en dos renglones
(«Otro Día · Official video» se cortaba en «Official vid…»). */
.lve-btile__meta { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lve-btile__type { top: 12px; left: 12px; width: 28px; height: 28px; }
.lve-cta { border-radius: 24px; }
.lve-cta .lve-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
.lve-footer__meta { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 22px; }
/* Seis enlaces en dos filas de tres (antes 5 + «Contacto» solo abajo). */
.lve-footer__nav { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 28px; }
.lve-footer__nav a { display: inline-flex; align-items: center; min-height: 32px; }
.lve-footer__social { margin: 0 0 0 -9px; }
.lve-footer__base { flex-direction: column; align-items: flex-start; gap: 4px; }
.lve-acards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.lve-acards--video { grid-template-columns: minmax(0, 1fr); }
.lve-acard { gap: 9px; }
.lve-acard__media { border-radius: 14px; }
.lve-acard__title { font-size: 15px; }
.lve-acard__count { font-size: 13px; }
.lve-justified { --jgap: 4px; }
.lve-shot { flex-basis: calc(var(--r) * 120px); border-radius: 8px; }
.lve-vgrid { gap: 22px; }
.lve-contact__cards { grid-template-columns: minmax(0, 1fr); }
.lve-contact--form .lve-ccard--wa { grid-template-columns: 48px minmax(0, 1fr); row-gap: 4px; }
.lve-contact--form .lve-ccard--wa > .lve-btn { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 12px; }
.lve-ccard .lve-actions { flex-direction: column; align-items: stretch; }
.lve-ccard--wa > .lve-btn { align-self: stretch; }
.lve-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lve-studio .lve-actions .lve-btn, .lve-mate-detalle__btns .lve-btn { flex: 1 1 100%; }
.lve-facts div { padding: 14px 12px; }
.lve-mate { grid-template-columns: 60px minmax(0, 1fr) auto; }
.lve-mate__pic { width: 60px; height: 60px; }
.lve-modal__head { padding-left: 22px; }
.lve-modal__body { padding: 12px 22px 24px; }
.lve-lb__nav { width: 44px; height: 44px; }
}
/* Marquesina de artistas: la mitad de la pista es un numero exacto de copias. */
@keyframes lveProof { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Telefono: los pasos de la llamada final en una lista corta y ordenada
(icono a la izquierda), centrada como bloque dentro de la tarjeta. */
@media (max-width: 600px) {
/* Servicios de la portada: carrusel horizontal con imán (cuatro tarjetas
apiladas median ~1500 px). La ultima asoma a la derecha para invitar a
deslizar; «Ver todos los servicios» queda debajo. */
.lve-stiles--home {
display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
margin: 0 calc(var(--lve-gutter) * -1); padding: 0 var(--lve-gutter) 4px; scroll-padding-inline: var(--lve-gutter);
}
.lve-stiles--home::-webkit-scrollbar { display: none; }
.lve-stiles--home .lve-stile { scroll-snap-align: start; }
/* Llamada final: el titulo en dos lineas (a 32 px eran tres; «pretty» y no
«balance», que partia «Have a / project in mind?») y la promesa sin
«horas.» sola en la segunda. */
.lve-cta--final { padding-left: 20px; padding-right: 20px; }
.lve-cta--final .lve-cta__title { font-size: clamp(24px, 7vw, 30px); text-wrap: pretty; }
.lve-cta--final .lve-cta__text { font-size: 16px; }
.lve-cta__steps { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin: 28px auto 32px !important; gap: 14px; }
.lve-cta__step { flex: 0 0 auto; flex-direction: row; gap: 14px; text-align: left; }
.lve-cta__stepicon { width: 40px; height: 40px; }
.lve-cta__step:not(:last-child)::after { top: 44px; left: 19.5px; right: auto; width: 1px; height: 6px; }
}
@media (max-width: 620px) {
.lve-mate-detalle__cover { height: clamp(150px, 44vw, 210px); border-radius: 22px; }
.lve-mate-detalle.has-cover .lve-mate-detalle__head {
flex-direction: column; align-items: center; text-align: center;
margin: 0 14px 24px;
}
.lve-mate-detalle.has-cover .lve-mate-detalle__pic { margin-top: -48px; }
.lve-mate-detalle.has-cover .lve-mate-detalle__identity { width: 100%; padding-top: 0; padding-bottom: 0; }
.lve-mate-detalle.has-cover .lve-skills,
.lve-mate-detalle.has-cover .lve-socials { justify-content: center; }
}
/* Telefonos estrechos: las cifras del estudio en filas (numero y texto al
lado); en tres columnas «fotografiados» se partia por la mitad. */
@media (max-width: 440px) {
.lve-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lve-facts div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 12px; padding: 14px 16px; }
.lve-facts dd { font-size: 24px; min-width: 3.4em; }
.lve-facts dt { font-size: 14px; }
}
@media (max-width: 374px) {
.lve-hero__title { font-size: 32px; }
.lve-actionbar .lve-btn { font-size: 14px; }
}
/* Portatiles bajos (1280x720, 1366x768, 1536x864): el mensaje y la fila
ENTERA de artistas caben en la primera pantalla. A 1366x768 el borde de
la pantalla cortaba los nombres por la mitad y a 1280x720 solo asomaba el
rotulo: menos aire bajo «Ver trabajos» y un logo algo menor. */
/* Escritorio: la fila de artistas va en DOS renglones (diez nombres en
1120 px). Con la portada a 100svh - 150px el segundo renglon quedaba
cortado por el borde a 1920x1080, 1680x1050 y 2560x1440 (y justo en el
borde a 1440x900 y 1600x900): se reserva el alto de los dos. Donde la
portada la manda su contenido (pantallas bajas), el logo y el titular se
ajustan al alto de la ventana. Comprobado de 1024x768 a 2560x1440, ES y
EN: los dos renglones enteros con 20 px o mas de aire. */
@media (min-width: 761px) {
.lve-hero { min-height: calc(100vh - 190px); min-height: calc(100svh - 190px); }
}
@media (min-width: 761px) and (max-height: 900px) {
.lve-hero { padding-bottom: 32px; }
.lve-proof { padding-top: 14px; }
.lve-hero__logo { width: clamp(140px, min(18vw, 23vh), 260px); }
.lve-hero__title { font-size: clamp(40px, min(6vw, 8.6vh), 80px); }
}
@media (min-width: 761px) and (max-height: 820px) {
.lve-hero { padding-top: calc(var(--lve-top-h) + 22px); padding-bottom: 24px; }
.lve-hero__logo { width: clamp(110px, 17vh, 200px); margin-bottom: 14px; }
.lve-hero__title { font-size: clamp(36px, min(5.6vw, 8vh), 72px); }
.lve-hero__lead { margin-top: 14px; }
.lve-hero__cta { margin-top: 20px; }
}
@media (min-width: 761px) and (max-height: 740px) {
.lve-hero__logo { width: clamp(100px, 15vh, 180px); }
}
@media (min-width: 761px) and (max-height: 660px) {
.lve-hero__logo { display: none; }
}
/* Telefonos bajos (360x740): lo mismo, los nombres enteros sobre el borde. */
@media (max-width: 760px) and (max-height: 780px) {
.lve-hero { padding-bottom: calc(26px + var(--lve-safe-b)); }
.lve-proof { padding-top: 16px; }
}
/* Telefono: las caras arriba y el mensaje abajo. La foto 3:2 cubre la
portada vertical a todo lo alto, asi que solo se podia mover de lado, y
las caras (el tercio de arriba) quedaban justo bajo el logo cromado: en
Pedro Capó, Ñejo y Elvis Crespo tapaba boca, micro o gafas. Ahora:
- el bloque de texto va al pie de la portada, con el logo mas pequeño (la
barra de arriba ya lleva el de LVE);
- cada foto sube lo justo para que su punto de interes (focus_y, --fy,
que se eligio en el panel sobre la cara) quede a ~22 % del alto: la foto
crece por arriba lo mismo que sube, y el pie sigue cubierto;
- el velo deja clara la franja de las caras y oscurece donde va el texto
(la entradilla sobre la camiseta blanca de Pedro Capó bajaba de 4,5:1). */
@media (max-width: 760px) {
.lve-hero { place-items: end center; }
.lve-hero__media .lve-slider__foto, .lve-hero__media .lve-hero__still {
--t: clamp(0, calc((var(--fy, 22) - 22) / (100 - var(--fy, 22)) * 100), 26);
top: calc(var(--t) * -1%); height: calc(100% + var(--t) * 1%);
}
.lve-hero__logo { width: clamp(96px, 30vw, 124px); margin-bottom: 14px; }
.lve-hero__cta { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; margin-top: 26px; }
.lve-hero__cta .lve-btn { width: 100%; padding: 0 12px; font-size: 15px; }
.lve-hero__scrim {
background:
radial-gradient(52% 38% at 50% 64%, rgba(var(--lve-glow-rgb), .16), rgba(var(--lve-glow-rgb), 0) 72%),
linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 16%, rgba(0,0,0,.22) 30%, rgba(0,0,0,.66) 46%, rgba(0,0,0,.8) 70%, rgba(0,0,0,.92) 90%, #000 100%);
}
}
@media (max-width: 760px) and (max-height: 780px) {
.lve-hero__logo { width: clamp(88px, 26vw, 104px); margin-bottom: 10px; }
}
/* Telefonos muy bajos (375x667): como en los portatiles bajos, sin logo
grande; el de la barra sigue a la vista. */
@media (max-width: 760px) and (max-height: 700px) {
.lve-hero__logo { display: none; }
}
/* Tabletas en vertical (768x1024, 820x1180, 1024x1366): la portada a casi
toda la pantalla dejaba ~220 px de foto vacia entre «Ver trabajos» y la
fila de artistas. Se ajusta al mensaje y los artistas suben. */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1366px) {
.lve-hero { min-height: max(600px, 58vh); min-height: max(600px, 58svh); padding-bottom: 48px; }
}
/* Telon con cuenta atras en portatiles bajos */
@media (max-height: 820px) {
.lve-curtain__inner { padding-top: clamp(28px, 6vh, 56px); padding-bottom: clamp(20px, 4vh, 36px); }
.lve-curtain__logo { width: min(240px, 56vw, 24vh); margin-bottom: clamp(12px, 2.6vh, 22px); }
.lve-curtain__title { margin-bottom: 8px; }
.lve-curtain__text { margin-bottom: clamp(14px, 2.6vh, 22px); }
.lve-count { margin-bottom: clamp(14px, 2.6vh, 22px); }
.lve-count__box { padding: 10px 6px 9px; }
.lve-curtain__social { margin-top: clamp(8px, 2vh, 18px); }
}
/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.lve-slider--zoom .lve-slider__foto.is-on, .lve-curtain__bg img { animation: none !important; transform: none; }
/* Artistas sin marquesina: una sola lista (la copia no se ve). En el
telefono, una fila que se desliza con el dedo; desde 761 px, los
nombres centrados en los renglones que hagan falta. */
.lve-proof__track { animation: none !important; transform: none; }
.lve-proof__list--copy { display: none !important; }
.lve-proof__list { padding-inline: 24px; }
.js-reveal [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
.lve-proof__viewport { max-width: 1120px; padding: 0 var(--lve-gutter); overflow: visible; -webkit-mask-image: none; mask-image: none; }
.lve-proof__track { display: block; width: auto; }
.lve-proof__list { flex-wrap: wrap; justify-content: center; gap: 12px 38px; padding: 6px 0; }
}
/* La portada de detras de una pantalla abierta no anima (zoom de las fotos):
no se ve y gastaba bateria. */
body.lve-locked .lve-hero *, body.lve-locked .lve-proof * { animation-play-state: paused !important; }
@media print {
.lve-topbar, .lve-menu, .lve-actionbar, .lve-screen, .lve-lb, .lve-modal, .lve-context-menu { display: none !important; }
body { background: #fff; color: #000; padding: 0 !important; }
}