/*
Theme Name: Lex-Vita Template
Theme URI: https://falopyscorp.com
Author: Instituto LEXVITA
Description: Template base institucional para el Instituto LEXVITA — paleta de marca, tipografías, logos y estructura de header/footer. Pensado para construir el contenido de cada página con Elementor.
Version: 1.3.1
Requires at least: 6.8
Requires PHP: 8.0
Text Domain: lex-vita-template
*/

/* ==========================================================
   PALETA INSTITUCIONAL LEXVITA
   Derivada del logotipo oficial (escudo + balanza + figura)
   ========================================================== */

:root {
    /* Teal (VITA) */
    --brand-teal: #1F858A;
    --brand-teal-light: #28A0A6;
    --brand-teal-dark: #125559;

    /* Gold (balanza) */
    --brand-gold: #C5A566;
    --brand-gold-light: #DFB876;
    --brand-gold-dark: #8C6A28;

    /* Neutros institucionales */
    --brand-ink: #121926;   /* texto principal / fondo oscuro (footer) */
    --brand-paper: #F6F4EF; /* fondo claro alterno */
    --brand-white: #FFFFFF;

    /* Tipografía */
    --font-serif: "Playfair Display", Georgia, serif;   /* titulares */
    --font-sans: "Inter", -apple-system, sans-serif;      /* cuerpo de texto / UI */
    --font-display: "Montserrat", sans-serif;             /* labels, hero, mayúsculas trackeadas */
}

/* ==========================================================
   BASE
   ========================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; } /* demo-3: reveal-left/right start 50px off-screen */

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--brand-ink);
    background: var(--brand-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.5em;
    color: var(--brand-ink);
}

p { margin: 0 0 1em; }

a {
    color: var(--brand-teal-dark);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover { color: var(--brand-teal); }

img { max-width: 100%; height: auto; display: block; }

::selection { background-color: var(--brand-teal); color: #ffffff; }

/* Scrollbar — same as demo-3 custom.css (page + mobile drawer) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f0eee7; }
::-webkit-scrollbar-thumb { background: #c9c2b2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-teal); }

.container {
    width: min(1200px, 100% - 3rem);
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--brand-white);
    border-bottom: 1px solid rgba(18, 25, 38, 0.1);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 92px;
    width: 100%;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .site-header__inner { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
    .site-header__inner { padding-inline: 3rem; }
}

.site-header__logo img {
    height: clamp(3rem, 5.6vw, 4.1rem);   /* a touch smaller so "INSTITUTO" + logo fit the 92px header */
    width: auto;
}

/* "INSTITUTO" above the LEXVITA logo (header, mobile drawer, footer) —
   same serif as the logo's "DERECHO · BIENESTAR · VIDA" line. The left
   padding equals the letter-spacing so the word stays optically centred
   over the logo's star. */
.site-header__logo .custom-logo-link,
.site-footer__logo,
.mobile-menu__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.brand-instituto {
    display: block;
    margin-bottom: 0.2rem;
    padding-left: 0.42em;
    font-family: var(--font-serif);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--brand-ink);
}

.brand-instituto--sm { font-size: 0.5rem; margin-bottom: 0.15rem; }
.brand-instituto--light { color: #ffffff; }

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-header__nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav a {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(18, 25, 38, 0.72);
}

.site-header__nav a:hover { color: var(--brand-ink); }

.site-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--brand-ink);
    color: var(--brand-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.site-header__cta:hover {
    background: var(--brand-ink);
    color: #ffffff;
}

/* demo-3 .header-cta is `hidden sm:flex`: phones use the drawer's Contactar button */
@media (max-width: 639px) { .site-header__cta { display: none; } }

.site-header__toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--brand-ink);
}

@media (max-width: 900px) {
    .site-header__nav { display: none; }
    .site-header__toggle { display: inline-flex; }
}

/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    background: var(--brand-ink);
    color: rgba(255, 255, 255, 0.7);
    padding: 3.5rem 0;
    font-size: 0.8rem;
}

.site-footer__inner {
    width: 100%;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 640px) {
    .site-footer__inner { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
    .site-footer__inner { padding-inline: 3rem; }
}

@media (min-width: 900px) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__logo img {
    height: clamp(3.4rem, 6.4vw, 4.6rem);
    width: auto;
}

.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__nav a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.site-footer__nav a:hover { color: #ffffff; }

.site-footer__legal {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
}

/* ==========================================================
   MOBILE MENU DRAWER
   ========================================================== */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.4);
    backdrop-filter: blur(12px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer — mirror of demo-3's #mobile-menu (w-72 max-w-[85vw] p-6,
   flex column with the CTA pinned to the bottom). */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18rem;
    max-width: 85vw;
    padding: 1.5rem;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.is-open { transform: translateX(0); }

/* Logo + close on one row, hairline below (mb-8 pb-4 border-b) */
.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.mobile-menu__brand img { height: 2.5rem; width: auto; }

.mobile-menu__close {
    padding: 0.5rem;
    background: none;
    border: 0;
    color: #64748b;
    line-height: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mobile-menu__close:hover { color: var(--brand-teal); }

/* Nav: space-y-1 text-xs font-semibold tracking-wider uppercase text-slate-700 */
.mobile-menu__nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu__nav > ul > li + li { margin-top: 0.25rem; }
.mobile-menu__nav > ul > li { border-bottom: 1px solid #e2e8f0; }

.mobile-menu__nav a {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #334155;
    transition: color 0.2s ease;
}

.mobile-menu__nav a:hover { color: var(--brand-teal); }

/* Sub-items: pl-4 pb-2 space-y-1 normal-case font-medium text-slate-500, links py-1 */
.mobile-menu__nav .sub-menu { margin-top: 0.25rem; padding: 0 0 0.5rem 1rem; }
.mobile-menu__nav .sub-menu li + li { margin-top: 0.25rem; }
.mobile-menu__nav .sub-menu a {
    padding: 0.25rem 0;
    font-weight: 500;
    text-transform: none;
    color: #64748b;
}

/* Bottom CTA (pt-6, btn-outline btn-outline-teal w-full justify-center) */
.mobile-menu__cta { padding-top: 1.5rem; }

.mobile-menu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.05rem 2.25rem;
    border: 1px solid var(--brand-teal);
    background: transparent;
    color: var(--brand-teal-dark);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu__btn:hover { background: var(--brand-teal); color: #ffffff; }

/* ==========================================================
   PLACEHOLDER PAGE CONTENT (fallback, no Elementor)
   ========================================================== */

.page-placeholder {
    padding: 6rem 0;
    text-align: center;
}

.page-placeholder h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

/* ==========================================================
   ELEMENTOR ATOMIC WIDGETS — site-wide typography helpers
   (font-family is set here, not via Elementor local styles,
   because the atomic API silently drops the whole style
   payload when a font-family prop is present)
   ========================================================== */

#cita-destacada-1 {
    font-family: var(--font-serif);
    font-style: italic;
}

.kw-serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
}

.border-accent-teal {
    border-left: 2px solid var(--brand-teal);
}

.border-accent-gold {
    border-left: 2px solid var(--brand-gold);
}

/* ==========================================================
   HOME COMPONENTS — shared helper classes used on atomic
   Elementor elements (ported from demo-3 custom.css). Only
   things the atomic props API can't express live here.
   ========================================================== */

/* Section hairline top border (per-side borders don't work via props) */
.lv-border-top { border-top: 1px solid #e2e8f0; }

/* Scroll reveal (demo-3 reveal-*) — JS in assets/js/main.js */
.lv-reveal-up, .lv-reveal-down, .lv-reveal-left, .lv-reveal-right, .lv-reveal-scale, .lv-reveal-flip {
    opacity: 0;
    transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.lv-reveal-up    { transform: translateY(35px); }
.lv-reveal-down  { transform: translateY(-35px); }
.lv-reveal-left  { transform: translateX(-50px); }
.lv-reveal-right { transform: translateX(50px); }
.lv-reveal-scale { transform: scale(.92); }
.lv-reveal-flip  { transform: perspective(600px) rotateX(15deg) translateY(30px); transition-duration: .9s; }
.lv-reveal-up.is-visible, .lv-reveal-down.is-visible, .lv-reveal-left.is-visible,
.lv-reveal-right.is-visible, .lv-reveal-scale.is-visible, .lv-reveal-flip.is-visible { opacity: 1; transform: none; }
.lv-delay-150 { transition-delay: .15s; }
.lv-delay-250 { transition-delay: .25s; }
.elementor-editor-active [class*="lv-reveal-"] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    [class*="lv-reveal-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Image that fills its column (lg:h-auto in demo-3) + hover zoom */
.lv-cover { position: relative; overflow: hidden; }
.lv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lv-zoom { overflow: hidden; }
.lv-zoom img, .lv-cover img { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.lv-zoom:hover img, .lv-cover:hover img { transform: scale(1.06); }
.lv-rounded, .lv-rounded img { border-radius: .5rem; }

/* Outline button with sliding arrow (demo-3 .btn-outline) */
.lv-btn {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    width: fit-content;
    padding: 1.05rem 2.25rem;
    border: 1px solid currentColor;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: transparent;
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
}
.lv-btn::after { content: "→"; display: inline-block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.lv-btn:hover::after { transform: translateX(6px); }
.lv-btn--teal { color: var(--brand-teal-dark); border-color: var(--brand-teal); }
.lv-btn--teal:hover { background: var(--brand-teal); color: #ffffff; }
.lv-btn--gold { color: var(--brand-gold-dark); border-color: var(--brand-gold); }
.lv-btn--gold:hover { background: var(--brand-gold); color: #121926; }

/* Pull quote (demo-3 .pull-quote) */
.lv-pull-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    border-left: 3px solid var(--brand-gold);
    padding-left: 1.75rem;
}

/* Serif heading helper for small bold h4-like labels that must stay sans */
.lv-sans { font-family: var(--font-sans); }

/* Bullet list item (demo-3 li + w-1.5 h-1.5 rounded-full dot) */
.lv-dot { display: flex; align-items: center; gap: .75rem; }
.lv-dot::before { content: ""; flex-shrink: 0; width: .375rem; height: .375rem; border-radius: 999px; background: var(--brand-teal); }

/* ==========================================================
   CONTACT FORM 7 — demo-3 underline fields + solid teal button
   ========================================================== */
.lv-cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 1.75rem; }
.lv-cf7 .lv-cf7-row { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 768px) { .lv-cf7 .lv-cf7-row { grid-template-columns: 1fr 1fr; } }
.lv-cf7 label {
    display: block;
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #334155;
}
.lv-cf7 .wpcf7-form-control-wrap { display: block; }
.lv-cf7 .field-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(18, 25, 38, .25);
    border-radius: 0;
    padding: .9rem .25rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--brand-ink);
    transition: border-color .3s ease;
}
.lv-cf7 textarea.field-input { resize: vertical; }
.lv-cf7 .field-input::placeholder { color: rgba(18, 25, 38, .35); }
.lv-cf7 .field-input:focus { outline: none; border-color: var(--brand-teal); }
.lv-cf7 .lv-cf7-submit {
    width: 100%;
    padding: 1rem;
    border: 0;
    background: var(--brand-teal);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s cubic-bezier(.16, 1, .3, 1);
}
.lv-cf7 .lv-cf7-submit:hover { background: var(--brand-teal-dark); transform: translateY(-2px); }
.lv-cf7 .wpcf7-spinner { display: none; }
.lv-cf7 .wpcf7-not-valid-tip { font-size: .75rem; margin-top: .35rem; }
.lv-cf7 .wpcf7-response-output { margin: 0 !important; text-align: center; font-size: .875rem; }

/* ----- Layout helpers for atomic containers (demo-3 grid utilities) ----- */
/* !important: Elementor sets display:flex on atomic containers with a higher-specificity selector. */
.lv-grid-3.lv-grid-3 { display: grid !important; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .lv-grid-3.lv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* lg:grid-cols-2 image/text split; --rev puts the first child last below lg (order-2 lg:order-1) */
.lv-split.lv-split { display: grid !important; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .lv-split.lv-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .lv-split--rev > :first-child { order: 2; } }
@media (min-width: 1024px) { .lv-self-start { align-self: start; } }

/* demo-3 .feature-box */
.lv-feature {
    background: #ffffff;
    border: 1px solid rgba(18, 25, 38, .14);
    padding: 3rem !important;
    min-height: 340px !important;
    transition: background-color .3s ease, border-color .3s ease;
}
.lv-feature:hover { background: var(--brand-paper); border-color: rgba(18, 25, 38, .28); }

/* border-t border-slate-300/70 */
.lv-border-top-soft { border-top: 1px solid rgba(203, 213, 225, .7); }

/* gap-x-3 gap-y-2 keyword row */
.lv-kw-row { column-gap: .75rem; row-gap: .5rem; }

/* Tailwind preflight strong = bolder; demo-3 colours it slate-900 */
.e-paragraph-base strong { font-weight: bolder; }
.lv-strong-ink strong { color: #0f172a; }
.lv-strong-semibold strong { font-weight: 600; }

/* e-paragraph with a link renders <p class="lv-btn"><a>…</a></p>: inherit colours, whole box clickable */
.lv-btn { position: relative; }
.lv-btn a, .lv-btn a:hover { color: inherit; }
.lv-btn a::before { content: ""; position: absolute; inset: 0; }

/* ==========================================================
   NAV DROPDOWNS — native WP sub-menus styled like demo-3's
   .nav-dropdown (white panel, hairline border, paper hover)
   ========================================================== */

.site-header__nav .menu-item-has-children { position: relative; }

.site-header__nav .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Chevron caret (demo-3 inline SVG, as a currentColor mask) */
.site-header__nav .menu-item-has-children > a::after {
    content: "";
    width: .75rem;
    height: .75rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.site-header__nav .menu-item-has-children:hover > a::after,
.site-header__nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

.site-header__nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    display: block;
    min-width: 260px;
    margin: 0;
    padding: calc(.85rem + .5rem) 0 .5rem;
    list-style: none;
    background: linear-gradient(transparent .85rem, #ffffff .85rem);
    border: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* Hairline border only around the visible panel (below the .85rem hover bridge) */
.site-header__nav .sub-menu::before {
    content: "";
    position: absolute;
    inset: .85rem 0 0;
    border: 1px solid rgba(18, 25, 38, .1);
    pointer-events: none;
}

.site-header__nav .menu-item-has-children:hover > .sub-menu,
.site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-header__nav .sub-menu li { display: block; }

.site-header__nav .sub-menu a {
    display: block;
    padding: .65rem 1.25rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: .04em;
    text-transform: none;
    white-space: nowrap;
    color: rgba(18, 25, 38, .72);
    transition: background-color .2s ease, color .2s ease;
}

.site-header__nav .sub-menu a:hover {
    background: var(--brand-paper);
    color: var(--brand-teal-dark);
}

/* ----- Media helpers (Quiénes Somos and inner pages) ----- */
/* Anchor jumps (/quienes-somos/#principios) land below the 92px sticky header */
html { scroll-padding-top: 92px; }

/* aspect-[16/9] full-width page hero, aspect-square column image */
.lv-aspect-16x9 { aspect-ratio: 16 / 9; }
.lv-square { aspect-ratio: 1 / 1; }

/* Section with a full-bleed background photo + dark overlay (demo-3 absolute inset-0 img + bg-slate-950/75).
   The photo stays a native, editable e-image inside .lv-bg-media. */
.lv-bg-host { position: relative; overflow: hidden; }
.lv-bg-host > .lv-bg-media { position: absolute !important; inset: 0; z-index: 0; }
.lv-bg-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(2, 6, 23, .75); }
.lv-bg-host > :not(.lv-bg-media) { position: relative; z-index: 1; }

/* border-t border-slate-900 on dark sections */
.lv-border-top.lv-border-top--dark { border-top-color: #0f172a; }
.lv-bg-media.lv-bg-media--60::after { background: rgba(2, 6, 23, .6); }   /* bg-slate-950/60 */
.lv-pull-quote.lv-pull-quote--center { border-left: 0; padding-left: 0; }  /* demo-3 .pull-quote--center */

/* Servicios hero: image carries text, so on phones show it whole (aspect-[16/9]) instead of a fixed height */
@media (max-width: 767px) { .lv-aspect-16x9-mobile.lv-aspect-16x9-mobile { height: auto !important; aspect-ratio: 16 / 9; } }

/* btn-outline-teal !text-white — outline button on dark sections */
.lv-btn.lv-btn--on-dark { color: #ffffff; }

/* ----- Academia: "¿Qué busca desarrollar este Modelo?" check cards ----- */
/* sm:grid-cols-2 (Tailwind sm = 640px) */
.lv-grid-2.lv-grid-2 { display: grid !important; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .lv-grid-2.lv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-span-2 { grid-column: span 2 / span 2; }
}

/* p-6 border rounded-lg card; the check-circle icon lives on the paragraph
   (Elementor reserves a container's own ::before for its background overlay) */
.lv-check-card { border-radius: .5rem; }
.lv-check { position: relative; padding-left: 2.5rem; }   /* w-6 icon + gap-4 */
.lv-check::before {
    content: "";
    position: absolute;
    left: 0;
    top: .125rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--brand-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75l1.5-1.5 4.5 4.5m-6-3.75l1.5 1.5 4.5-4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75l1.5-1.5 4.5 4.5m-6-3.75l1.5 1.5 4.5-4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lv-check--gold::before { background: var(--brand-gold-dark); }
/* Academia hero: whiteboard photo (2:1) shown whole on phones — aspect-[2/1] sm:aspect-auto */
@media (max-width: 767px) { .lv-aspect-2x1-mobile.lv-aspect-2x1-mobile { height: auto !important; aspect-ratio: 2 / 1; } }

/* Kicker whose label wraps to 2 lines only below ~385px (e.g. "Conversaciones Especializadas"):
   demo-3's inline-flex kicker loses its ~10px baseline offset when it wraps. */
@media (max-width: 384px) { .lv-kicker-narrow { margin-top: 0.0625rem !important; } }

/* ----- 404 ----- */
.lv-404 {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1rem;
    background: var(--brand-paper);
}
.lv-404__code { margin: 0; font-family: var(--font-serif); font-size: clamp(4.5rem, 12vw, 7.5rem); line-height: 1; color: var(--brand-gold); }
.lv-404__title { margin: 1rem 0 .75rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.875rem, 4vw, 2.25rem); color: #0f172a; }
.lv-404__text { margin: 0 0 2.5rem; color: #475569; font-weight: 300; }