/*
 * LUMITIX 2.0 · Capa visual (lumitix-fx.css)
 * Va después de estilos.css en todas las páginas. Estilo «lujo clínico»:
 * Cormorant Garamond en titulares (con cursivas en oro), Jost en textos, el azul marino
 * del logotipo y el oro champán que ya usan los botones de la tienda de Shopify (#B1904C).
 * Para volver a la tipografía anterior basta con borrar el bloque «Tipografía».
 */

/* ---------- Colores y tipografías ---------- */
:root {
    --color-gold: #B1904C;
    --lx-gold-soft: rgba(177, 144, 76, .14);
    --lx-ink: #0F1C3F;
    --lx-cream: #FAF7F2;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --lx-ease: cubic-bezier(.2, .8, .2, 1);
}
body.dark-theme {
    --color-gold: #C9A96E;
    --lx-gold-soft: rgba(201, 169, 110, .16);
}
::selection { background: var(--color-gold); color: #fff; }
html { scrollbar-gutter: stable; }

/* ---------- Tipografía ---------- */
* { font-family: var(--font-sans); }
p, span, li, a, label, input, button, select, textarea { font-family: var(--font-sans); }
body { font-family: var(--font-sans); font-weight: 400; letter-spacing: .005em; }
h1, h2, h3 {
    font-family: var(--font-serif) !important;
    font-weight: 500 !important;
    letter-spacing: -.005em;
    font-size-adjust: .46;
}
h3 { font-weight: 600 !important; }
h4, h5, h6 { font-family: var(--font-sans) !important; font-weight: 500 !important; }
:is(h1, h2, h3) :is(span, em, strong, a) { font-family: inherit; }
.quote-body, .quote-body span { font-family: var(--font-serif); }
strong, b { font-weight: 600; }

/* Palabra destacada: cursiva en oro (antes, subrayado tipo rotulador) */
h2 .highlight, h1 .highlight, .newsletter-title .highlight, .modal-title .highlight {
    display: inline;
    font-style: italic;
    color: var(--color-gold);
}
h2 .highlight::after, .newsletter-title .highlight::after { display: none; }

/* Etiquetas pequeñas */
.section-label, .help-banner-subtitle, .card-label, .newsletter-badge, .modal-subtitle,
.footer-col-title, .section-subtitle {
    letter-spacing: .2em !important;
}

/* ---------- Botones ---------- */
.btn-primary, .btn-outline, .btn-coleccion, .hero-btn-boutique, .btn-faq-cta, .btn-newsletter-submit {
    font-family: var(--font-sans) !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8rem !important;
    font-weight: 500 !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary { padding: 18px 38px; box-shadow: 0 14px 30px rgba(15, 28, 63, .16); }
.btn-primary::before, .btn-newsletter-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .6s var(--lx-ease);
}
@media (hover: hover) {
    .btn-primary:hover::before, .btn-newsletter-submit:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
    .btn-primary:hover, .btn-newsletter-submit:hover { color: #fff; }
}
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ---------- Cabecera ---------- */
.header { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.header.lx-scrolled { box-shadow: 0 10px 30px rgba(15, 28, 63, .08) !important; }
.lx-progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--color-gold), #E2CC97);
    transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.main-nav .nav-link { letter-spacing: .06em; }

/* Tema oscuro: el logotipo azul marino desaparecía sobre la cabecera azul marino */
body.dark-theme .header .logo img { filter: brightness(0) invert(.95); }

/* Redes sin dirección configurada: ocultas (ver js/lumitix-fx.js) */
[data-lx-social][hidden] { display: none !important; }

/* Texto solo para lectores de pantalla */
.lx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Héroe (portada) ---------- */
.hero-right-panel { isolation: isolate; }
.hero-right-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(250, 247, 242, .35), transparent 22%);
}
.lx-fx .hero-banner-img { animation: lx-kenburns 2.6s var(--lx-ease) both; will-change: transform; }
@keyframes lx-kenburns { from { transform: scale(1.12); filter: saturate(.85); } to { transform: scale(1); filter: none; } }
.hero-btn-boutique { border-radius: 0 !important; }
@media (hover: hover) {
    .hero-btn-boutique:hover { background: var(--lx-ink) !important; color: #fff !important; border-color: var(--lx-ink) !important; }
}

/* Cinta de marca */
.lx-ticker {
    position: relative; overflow: hidden; padding: 18px 0;
    background: var(--lx-ink); color: #F5F1E8;
    border-top: 1px solid rgba(177, 144, 76, .35); border-bottom: 1px solid rgba(177, 144, 76, .35);
}
body.dark-theme .lx-ticker { background: #081022; }
.lx-ticker-track { display: flex; width: max-content; animation: lx-ticker 38s linear infinite; }
.lx-ticker-track span {
    display: inline-flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem;
    font: italic 500 clamp(1.15rem, 1.8vw, 1.5rem)/1 var(--font-serif); letter-spacing: .04em; white-space: nowrap;
}
.lx-ticker-track span::after { content: "✦"; font-style: normal; font-size: .7em; color: var(--color-gold); }
@media (hover: hover) { .lx-ticker:hover .lx-ticker-track { animation-play-state: paused; } }
@keyframes lx-ticker { to { transform: translateX(-50%); } }

/* ---------- Cita ---------- */
.quote-body { font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem) !important; line-height: 1.25; }
.quote-icon { color: var(--color-gold); opacity: .8; }

/* ---------- Quiénes somos ---------- */
.nosotros-image-wrapper { overflow: hidden; }
.nosotros-image-wrapper img { will-change: transform; }
.nosotros-content p { font-weight: 300; font-size: 1.08rem; line-height: 1.8; }

/* ---------- Tarjetas ---------- */
.problem-card { border-radius: 22px; }
.problem-card .card-image { border-radius: 16px; overflow: hidden; }
@media (hover: hover) {
    .problem-card:hover .card-image img { transform: scale(1.05); }
}
.card-label { color: var(--color-gold) !important; }

/* Testimonios: iniciales en lugar de fotos genéricas */
.testimonial-initials {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--lx-ink); color: #E2CC97;
    font: 500 1.25rem/1 var(--font-serif); letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px rgba(226, 204, 151, .45);
}
body.dark-theme .testimonial-initials { background: #F5F1E8; color: #0F1C3F; }
.testimonial-card { border-radius: 14px; border: 1px solid rgba(15, 28, 63, .06); }
.testimonial-text { font-weight: 300; line-height: 1.7; }
.carousel-track.lx-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
@media (hover: hover) and (pointer: fine) { .carousel-track { cursor: grab; } }

/* Preguntas frecuentes */
.faq-question span:first-child { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; }

/* Banner «El nuevo estándar…»: el texto ganaba poco contraste sobre la parte clara de la foto */
.section-banner .banner-content h2, .section-banner .banner-content p { text-shadow: 0 2px 28px rgba(15, 28, 63, .6); }
.section-banner .highlight { color: #E9D6A8; }

/* ---------- Pie ---------- */
.footer-tagline { font-family: var(--font-serif) !important; font-style: italic; font-size: 1.15rem; line-height: 1.5; }

.footer-newsletter-privacy { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .78); cursor: pointer; }
.footer-newsletter-privacy input { margin-top: 2px; accent-color: var(--color-gold); flex: 0 0 auto; }
.footer-newsletter-privacy a { color: #E2CC97; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Aviso de cookies ---------- */
.cookie-banner { border-radius: 6px; border-top: 3px solid var(--color-gold); }
.cookie-title { font-family: var(--font-serif) !important; font-size: 1.5rem; font-weight: 500 !important; }

/* ---------- Avisos (sustituyen a las ventanas del navegador) ---------- */
.lx-toasts {
    position: fixed; z-index: 100000; right: 20px; bottom: 20px;
    display: grid; gap: 10px; width: min(420px, calc(100% - 40px)); pointer-events: none;
}
.lx-toast {
    pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
    padding: 18px 18px 18px 20px; border-radius: 6px;
    background: var(--lx-ink); color: #F5F1E8;
    border-left: 3px solid var(--color-gold);
    box-shadow: 0 24px 60px rgba(15, 28, 63, .3);
    font-size: .95rem; line-height: 1.5;
    animation: lx-toast-in .5s var(--lx-ease) both;
}
.lx-toast[data-type="error"] { border-left-color: #E0817A; }
.lx-toast[data-type="success"] { border-left-color: #8FC9A0; }
.lx-toast-icon { width: 22px; height: 22px; color: var(--color-gold); margin-top: 1px; }
.lx-toast[data-type="error"] .lx-toast-icon { color: #E0817A; }
.lx-toast[data-type="success"] .lx-toast-icon { color: #8FC9A0; }
.lx-toast button { color: inherit; opacity: .7; font-size: 1.2rem; line-height: 1; padding: 2px 4px; }
.lx-toast button:hover { opacity: 1; }
.lx-toast.lx-out { animation: lx-toast-out .35s ease both; }
@keyframes lx-toast-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes lx-toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- Correcciones en el móvil ---------- */
/* La página se desplazaba hacia los lados: lo evitamos sin romper nada */
html { overflow-x: clip; }
@media (max-width: 767px) {
    /* Tarjetas de categorías: no cabían tres en fila y desbordaban la pantalla */
    .category-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .category-card {
        display: grid !important; grid-template-columns: 56px 1fr 24px; column-gap: 16px; align-items: center;
        text-align: left !important; padding: 18px 18px !important;
    }
    .category-card .category-icon-wrapper { grid-row: span 2; width: 56px !important; height: 56px !important; margin: 0 !important; }
    .category-card .category-icon-wrapper svg { width: 28px !important; height: 28px !important; }
    .category-card .category-card-title { margin: 0 !important; font-size: 1.25rem !important; }
    .category-card .category-card-desc { grid-column: 2; margin: 2px 0 0 !important; font-size: .85rem !important; }
    .category-card .category-card-arrow { grid-column: 3; grid-row: 1 / span 2; margin: 0 !important; }
    .category-card .category-card-badge { top: 8px; right: 8px; }
    /* Boutique: en el móvil el texto de la cabecera quedaba encima de la gota del fondo */
    .lx-hero-light .boutique-hero-content { background: rgba(250, 247, 242, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 28px 20px; border-radius: 6px; }
    body.dark-theme .lx-hero-light .boutique-hero-content { background: rgba(10, 19, 40, .82); }
    /* Párrafos justificados: en pantallas estrechas dejaban huecos */
    .nosotros-content p { text-align: center !important; text-align-last: center; }
    .newsletter-subtitle, .faq-intro p { text-align: left !important; }
}
@media (max-width: 820px) {
    /* El logo centrado de la cabecera tenía un ancho mínimo de 250 px */
    .header .logo { min-width: 0 !important; }
}
/* «background-attachment: fixed» no funciona en iPhone y hace la imagen gigante */
@media (hover: none) {
    .section-banner { background-attachment: scroll !important; }
}

/* ---------- Impresión ---------- */
@media print {
    [data-lx] { opacity: 1 !important; transform: none !important; }
    .lx-toasts, .lx-progress, .lx-ticker { display: none !important; }
}

/* =================================================================
   PLUGINS PRO (v2.1)
   ================================================================= */

/* Transiciones entre páginas (View Transitions API: Chrome, Edge y Safari 18+) */
@view-transition { navigation: auto; }
.header { view-transition-name: lx-header; }
::view-transition-old(root) { animation: lx-vt-out .28s ease both; }
::view-transition-new(root) { animation: lx-vt-in .55s var(--lx-ease) both; }
@keyframes lx-vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes lx-vt-in { from { opacity: 0; transform: translateY(16px); } }

/* Pantalla de carga solo en la primera página de la visita */
html.lx-no-preloader #preloader { display: none !important; }

/* Botones flotantes */
.lx-float {
    position: fixed; z-index: 9980; right: 20px; bottom: 20px;
    display: grid; gap: 12px; justify-items: end; pointer-events: none;
}
.lx-float-btn {
    pointer-events: auto; display: grid; place-items: center; position: relative;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--lx-ink); color: #F5F1E8;
    box-shadow: 0 0 0 1px rgba(245, 241, 232, .28), 0 14px 34px rgba(15, 28, 63, .28);
    transition: transform .4s var(--lx-ease), opacity .35s ease, visibility .35s, background-color .3s ease;
}
.lx-float-btn svg { width: 22px; height: 22px; }
.lx-float-wa { width: 56px; height: 56px; box-shadow: 0 0 0 1px rgba(226, 204, 151, .5), 0 14px 34px rgba(15, 28, 63, .3); }
.lx-float-wa svg { width: 27px; height: 27px; }
.lx-to-top { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); }
.lx-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.lx-to-top .lx-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lx-to-top .lx-ring circle { fill: none; stroke: var(--color-gold); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.lx-to-top .lx-arrow { width: 20px; height: 20px; }
@media (hover: hover) {
    .lx-float-btn:hover { transform: translateY(-3px); background: #18295A; }
}
body.dark-theme .lx-float-btn { background: #F5F1E8; color: #0F1C3F; }
body.menu-open .lx-float, body:has(.custom-modal.active, .video-modal.active) .lx-float { opacity: 0; pointer-events: none; }
.lx-toasts { bottom: 92px; }
@media (max-width: 600px) {
    .lx-float { right: 14px; bottom: 14px; }
    .lx-float-btn { width: 46px; height: 46px; }
    .lx-float-wa { width: 52px; height: 52px; }
}

/* «Saltar al contenido» */
.lx-skip {
    position: fixed; z-index: 100001; left: 16px; top: 12px;
    padding: 12px 18px; background: var(--lx-ink); color: #fff;
    font-size: .85rem; letter-spacing: .06em;
    transform: translateY(-160%); transition: transform .25s ease;
}
.lx-skip:focus { transform: none; }
main:focus { outline: none; }

@media print { .lx-float, .lx-skip { display: none !important; } }