/* =============================================================
   Suricat's — Estilos del sitio publico
   Namespace .lp-* (landing page)
   ============================================================= */

:root {
    --c-azul-oscuro: #023E8A;
    --c-azul-medio:  #48CAE4;
    /* Variante oscura del medio, ratio AA sobre blanco (>=4.5:1).
       Usar para texto/labels donde antes se usaba --c-azul-medio sobre fondo claro. */
    --c-azul-texto:  #0077B6;
    --c-azul-claro:  #ADE8F4;
    --c-azul-bg:     #f0fbfd;
    --c-azul-bg-2:   #e8f8fb;
    --c-amarillo:    #FFD60A;
    --c-amarillo-b:  #f0c000;
    --c-wa:          #25D366;
    --c-wa-b:        #128C7E;
    --c-texto:       #1a2e35;
    --c-texto-sec:   #4a6572;

    --f-cuerpo:      'Nunito', system-ui, -apple-system, sans-serif;
    --f-titulo:      'Pacifico', cursive;

    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;

    --max-w: 1100px;

    /* Sistema de bordes redondeados — usar consistentemente:
       --r-xs (pills, tags), --r-sm (botones, chips), --r-md (cards),
       --r-lg (cards grandes / hero), --r-pill (full pill). */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* Sistema de sombras — escala progresiva. */
    --shadow-sm: 0 2px 6px rgba(15, 30, 60, .08);
    --shadow-md: 0 10px 28px rgba(15, 30, 60, .18);
    --shadow-lg: 0 20px 50px rgba(15, 30, 60, .28);
    --shadow-xl: 0 30px 70px rgba(15, 30, 60, .35);
}

/* -------------------------------------------------------------
   Reset
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--f-cuerpo);
    color: var(--c-texto);
    background: var(--c-azul-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------
   Premium UX: scroll progress + fade-in al scroll + counters
   ------------------------------------------------------------- */
.lp-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--c-amarillo), var(--c-amarillo-b));
    z-index: 9999;
    pointer-events: none;
    transition: width .12s ease-out;
}

/* Layout de documento con TOC lateral (páginas legales, políticas) */
.lp-doc-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.lp-doc-toc {
    position: sticky;
    top: 88px;
    background: #fff;
    border: 1px solid rgba(2, 62, 138, .1);
    border-radius: var(--r-md);
    padding: 20px 18px;
    box-shadow: var(--shadow-sm);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.lp-doc-toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c-azul-claro);
}
.lp-doc-toc-title i { color: var(--c-azul-medio); font-size: 18px; }
.lp-doc-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-doc-toc-link {
    display: block;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-texto-sec);
    text-decoration: none;
    line-height: 1.35;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lp-doc-toc-link.is-sub {
    padding-left: 22px;
    font-size: 12.5px;
    font-weight: 600;
}
.lp-doc-toc-link:hover {
    color: var(--c-azul-oscuro);
    background: var(--c-azul-bg);
}
.lp-doc-toc-link.is-active {
    color: var(--c-azul-oscuro);
    background: var(--c-azul-bg);
    border-left-color: var(--c-amarillo);
}

.lp-doc-article {
    min-width: 0;
}
.lp-doc-article .lp-article-body {
    max-width: 70ch;
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-texto);
    font-feature-settings: 'kern', 'liga';
}
.lp-doc-article .lp-article-body h2 {
    margin-top: 48px;
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--c-azul-oscuro);
    scroll-margin-top: 90px;
}
.lp-doc-article .lp-article-body h2:first-child { margin-top: 0; }
.lp-doc-article .lp-article-body h3 {
    margin-top: 28px;
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--c-azul-oscuro);
    scroll-margin-top: 90px;
}
.lp-doc-article .lp-article-body p { margin-bottom: 16px; }
.lp-doc-article .lp-article-body ul,
.lp-doc-article .lp-article-body ol {
    margin: 0 0 16px 20px;
}
.lp-doc-article .lp-article-body li { margin-bottom: 6px; }
.lp-doc-article .lp-article-body strong { color: var(--c-azul-oscuro); }

@media (max-width: 880px) {
    .lp-doc-layout { grid-template-columns: 1fr; gap: 24px; }
    .lp-doc-toc {
        position: static;
        max-height: none;
        order: -1;
    }
    .lp-doc-toc-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .lp-doc-toc-link {
        border-left: 0;
        border-bottom: 2px solid transparent;
        border-radius: var(--r-pill);
        padding: 6px 12px;
        background: var(--c-azul-bg);
    }
    .lp-doc-toc-link.is-active {
        border-bottom-color: transparent;
        background: var(--c-azul-oscuro);
        color: #fff;
    }
}

/* Avatar con inicial (fallback cuando no hay foto). Se aplica dentro de
   .lp-equipo-foto y .lp-testi-foto, que ya definen tamaño y border-radius. */
.lp-avatar-inicial {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-azul-oscuro) 0%, var(--c-azul-texto) 100%);
    color: #fff;
    font-family: var(--f-cuerpo);
    font-weight: 900;
    font-size: 38px;
    letter-spacing: -.02em;
    line-height: 1;
    user-select: none;
}
.lp-testi-foto .lp-avatar-inicial { font-size: 22px; }

/* Breadcrumbs */
.lp-breadcrumbs {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--c-texto-sec);
}
.lp-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.lp-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-breadcrumbs a {
    color: var(--c-azul-texto);
    text-decoration: none;
    font-weight: 700;
    transition: color .15s ease;
}
.lp-breadcrumbs a:hover { color: var(--c-azul-oscuro); }
.lp-breadcrumbs span[aria-current="page"] {
    color: var(--c-texto);
    font-weight: 700;
}
.lp-breadcrumbs i {
    font-size: 14px;
    color: var(--c-azul-claro);
}

.lp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
                transform .7s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.lp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .lp-reveal,
    .lp-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lp-scroll-progress { transition: none; }
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip link para usuarios de teclado / lector de pantalla */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--c-azul-oscuro);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 8px;
    font-weight: 800;
    font-size: 14px;
    z-index: 1000;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Focus visible global: outline contrastado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--c-amarillo);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Inputs ya tienen su propio focus de borde; no doblamos */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
}

/* -------------------------------------------------------------
   Layout base
   ------------------------------------------------------------- */
.lp { background: var(--c-azul-bg); width: 100%; }
.lp-full { width: 100%; }
.lp-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

/* -------------------------------------------------------------
   Banner top promocional
   Fondo amarillo cálido (alto contraste) + jerarquía clara:
   [ícono] [texto principal] [CTA tipo botón]
   ------------------------------------------------------------- */
.lp-banner-top {
    background: linear-gradient(90deg, var(--c-amarillo) 0%, #ffe04a 50%, var(--c-amarillo) 100%);
    padding: 10px 0;
    border-bottom: 2px solid var(--c-amarillo-b);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.lp-banner-top .lp-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.lp-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-azul-oscuro);
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.lp-banner-text {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    letter-spacing: -0.2px;
}
.lp-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--c-azul-oscuro);
    color: #fff !important;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 2px solid var(--c-azul-oscuro);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.lp-banner-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 62, 138, .35);
    background: #012a63;
}
.lp-banner-cta i {
    font-size: 13px;
}
@media (max-width: 640px) {
    .lp-banner-text { font-size: 12px; }
    .lp-banner-cta { font-size: 11px; padding: 6px 12px; }
}

/* -------------------------------------------------------------
   Navegacion
   ------------------------------------------------------------- */
.lp-nav-full {
    background: #fff;
    border-bottom: 2px solid var(--c-azul-medio);
    position: sticky;
    top: 0;
    z-index: 50;
}
.lp-nav {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lp-nav-logo { display: flex; align-items: center; gap: 10px; }
.lp-nav-logo-circle {
    width: 44px; height: 44px;
    background: var(--c-azul-medio);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-cuerpo);
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    border: 2px solid var(--c-azul-oscuro);
}
.lp-nav-logo-img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-azul-oscuro);
    background: #fff;
    display: block;
}
.lp-nav-brand-main {
    font-family: var(--f-titulo);
    font-size: 20px;
    color: var(--c-azul-oscuro);
    line-height: 1;
}
.lp-nav-brand-sub {
    font-size: 10px;
    color: var(--c-azul-texto);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.lp-nav-links { display: flex; gap: 20px; align-items: center; }
.lp-nav-links a {
    color: var(--c-texto);
    font-size: 13px;
    font-weight: 700;
}
.lp-nav-cta {
    background: var(--c-azul-oscuro);
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--c-azul-oscuro);
    transition: background .12s ease;
}
.lp-nav-cta:hover { background: #012a63; }
.lp-nav-cta-mobile { justify-content: center; }

/* Boton hamburguesa */
.lp-nav-toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: var(--c-azul-oscuro);
    font-size: 22px;
}
.lp-nav-mobile {
    display: none;
    background: #fff;
    border-top: 1px solid var(--c-azul-claro);
    padding: 16px 24px;
    flex-direction: column;
    gap: 14px;
}
.lp-nav-mobile a {
    color: var(--c-texto);
    font-size: 15px;
    font-weight: 700;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-azul-bg);
}
.lp-nav-mobile a:last-child { border-bottom: 0; }
.lp-nav-mobile.is-open { display: flex; }

/* -------------------------------------------------------------
   Hero
   ------------------------------------------------------------- */
.lp-hero-full { background: var(--c-azul-medio); }
.lp-hero {
    padding: 56px 24px 0;
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: var(--max-w);
    margin: 0 auto;
}
.lp-hero > div:first-child { flex: 1; min-width: 0; }
.lp-hero-logo-area { flex-shrink: 0; }
.lp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 20px;
    padding: 4px 14px;
    margin-bottom: 14px;
    border: 1.5px solid var(--c-azul-oscuro);
}
.lp-hero-eyebrow span { font-size: 12px; font-weight: 800; color: var(--c-azul-oscuro); }
.lp-hero-h1 {
    font-family: var(--f-titulo);
    font-size: 52px;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 14px;
    text-shadow: 3px 3px 0 var(--c-azul-oscuro);
}
.lp-hero-h1 span { color: var(--c-amarillo); }
.lp-hero-sub {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 28px;
    font-weight: 600;
    opacity: .95;
}
.lp-hero-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 32px;
}
.lp-btn-wa {
    background: var(--c-wa);
    color: #fff !important;
    padding: 13px 26px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--c-wa-b);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.lp-btn-wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}
/* Boton secundario: peso visual reducido para no competir con el primario */
.lp-btn-cita {
    background: transparent;
    color: #fff !important;
    padding: 11px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    transition: background .12s ease, border-color .12s ease;
}
.lp-btn-cita:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}
/* Variante para usar fuera del hero (fondo claro) */
.lp-btn-cita.on-light {
    background: #fff;
    color: var(--c-azul-oscuro) !important;
    border-color: var(--c-azul-oscuro);
}
.lp-btn-cita.on-light:hover { background: var(--c-azul-bg); }
.lp-hero-text { flex: 1; min-width: 0; }
.lp-hero-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-hero-logo-img {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 6px solid var(--c-azul-oscuro);
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 28px rgba(2, 62, 138, 0.3);
    display: block;
    margin: 0 auto;
}

/* Hero con foto rectangular (cuando el admin sube hero_imagen).
   Opción A del diseño: layout asimétrico con foto grande horizontal. */
.lp-hero-photo {
    width: 520px;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 18px 44px rgba(2, 62, 138, 0.38);
    background: #fff;
    transform: rotate(-1deg);
    transition: transform .3s ease;
}
.lp-hero-photo:hover { transform: rotate(0deg) scale(1.02); }
.lp-hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Legacy del mock — se mantiene para compatibilidad con codigo viejo */
.lp-hero-logo-mock {
    width: 220px; height: 220px;
    background: #fff;
    border-radius: 50%;
    border: 5px solid var(--c-azul-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lp-hero-logo-top {
    font-size: 9px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
}
.lp-hero-logo-animals {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.lp-hero-animal {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--c-azul-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.lp-hero-logo-name {
    font-family: var(--f-titulo);
    font-size: 22px;
    color: var(--c-azul-oscuro);
    text-align: center;
}
.lp-hero-logo-tagline {
    font-size: 8px;
    color: var(--c-azul-medio);
    font-weight: 800;
    text-align: center;
    margin-top: 3px;
    font-style: italic;
}
.lp-hero-wave {
    background: var(--c-azul-bg);
    height: 36px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    margin-top: 8px;
}

/* -------------------------------------------------------------
   Stats
   ------------------------------------------------------------- */
.lp-stats-full { background: #fff; border-bottom: 2px solid var(--c-azul-claro); }
.lp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.lp-stat { text-align: center; padding: 20px 16px; }
.lp-stat-num {
    font-family: var(--f-cuerpo);
    font-size: 32px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    line-height: 1;
    letter-spacing: -1px;
}
.lp-stat-lbl {
    font-size: 12px;
    color: var(--c-azul-texto);
    font-weight: 700;
    margin-top: 3px;
}
.lp-stat:not(:last-child) { border-right: 1px solid var(--c-azul-claro); }

/* -------------------------------------------------------------
   Secciones genericas
   ------------------------------------------------------------- */
.lp-section-full { padding: 52px 0; }
.lp-section-full.alt { background: #fff; }
.lp-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-azul-claro);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 12px;
}
.lp-section-label span {
    font-size: 11px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lp-section-title {
    font-family: var(--f-cuerpo);
    font-size: 30px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.lp-section-sub {
    font-size: 15px;
    color: var(--c-texto-sec);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* -------------------------------------------------------------
   Servicios
   ------------------------------------------------------------- */
.lp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 32px;
}
.lp-svc {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    padding: 28px 24px 22px;
    text-align: left;
    border: 1px solid rgba(2, 62, 138, .08);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
}
.lp-svc:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-amarillo);
}
.lp-svc-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-amarillo) 0%, var(--c-amarillo-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--c-azul-oscuro);
    box-shadow: 0 4px 14px rgba(255, 196, 0, .35);
}
.lp-svc-name {
    font-size: 19px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 0;
    line-height: 1.2;
}
.lp-svc-desc {
    font-size: 14px;
    color: var(--c-texto-sec);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.lp-svc-badge {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--c-azul-claro);
    color: var(--c-azul-oscuro);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: var(--r-pill);
}
.lp-svc-badge-hot {
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    box-shadow: 0 4px 12px rgba(255, 196, 0, .4);
}
.lp-svc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(2, 62, 138, .08);
}
.lp-svc-precio {
    font-size: 15px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
}
.lp-svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-azul-oscuro);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.lp-svc-cta:hover {
    background: var(--c-azul-texto);
    transform: translateX(2px);
}
.lp-svc-cta i { font-size: 14px; transition: transform .15s ease; }
.lp-svc-cta:hover i { transform: translateX(2px); }

/* Card destacada: fondo cyan saturado, ícono y texto en blanco */
.lp-svc-destacada {
    background: linear-gradient(135deg, var(--c-azul-oscuro) 0%, var(--c-azul-texto) 100%);
    border-color: var(--c-azul-oscuro);
    color: #fff;
}
.lp-svc-destacada:hover {
    box-shadow: 0 22px 50px rgba(2, 62, 138, .35);
    border-color: var(--c-amarillo);
}
.lp-svc-destacada .lp-svc-name { color: #fff; }
.lp-svc-destacada .lp-svc-desc { color: rgba(255, 255, 255, .9); }
.lp-svc-destacada .lp-svc-precio { color: var(--c-amarillo); }
.lp-svc-destacada .lp-svc-footer { border-top-color: rgba(255, 255, 255, .15); }
.lp-svc-destacada .lp-svc-cta {
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
}
.lp-svc-destacada .lp-svc-cta:hover {
    background: var(--c-amarillo-b);
}

@media (max-width: 880px) {
    .lp-services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
    .lp-services-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════
   /servicios — vista de DETALLE PROFUNDO (no es grid resumen)
   Cada servicio renderiza como bloque grande con ¿Qué incluye?,
   ¿Para quién?, Antes de venir y CTA prominente.
   ═════════════════════════════════════════════════════════ */

/* Nav sticky con anclas */
.lp-svcd-nav {
    background: #fff;
    border-bottom: 1px solid rgba(2, 62, 138, .08);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}
.lp-svcd-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.lp-svcd-nav-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-texto-sec);
}
.lp-svcd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--c-azul-bg);
    color: var(--c-azul-oscuro);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.lp-svcd-nav-link:hover {
    background: var(--c-amarillo);
    transform: translateY(-1px);
}
.lp-svcd-nav-link i { font-size: 15px; }

/* Bloque por servicio */
.lp-svcd-section {
    background: #fff;
    padding: 80px 0;
    scroll-margin-top: 80px;
}
.lp-svcd-section-alt {
    background: var(--c-azul-bg);
}

.lp-svcd-block {
    max-width: 1080px;
    margin: 0 auto;
}

.lp-svcd-header {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 2px solid var(--c-azul-claro);
}
.lp-svcd-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-amarillo) 0%, var(--c-amarillo-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--c-azul-oscuro);
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(255, 196, 0, .35);
}
.lp-svcd-header-text { flex: 1; min-width: 0; }
.lp-svcd-name {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 8px 0 10px;
    line-height: 1.1;
}
.lp-svcd-desc {
    font-size: 17px;
    color: var(--c-texto);
    line-height: 1.5;
    margin: 0 0 16px;
    max-width: 720px;
}
.lp-svcd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.lp-svcd-precio {
    background: var(--c-azul-oscuro);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 900;
}
.lp-svcd-duracion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-texto-sec);
    font-size: 14px;
    font-weight: 700;
}
.lp-svcd-duracion i { color: var(--c-azul-medio); font-size: 18px; }

/* Cuerpo: ¿Qué incluye? grande + columna lateral */
.lp-svcd-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
}
@media (max-width: 880px) {
    .lp-svcd-body { grid-template-columns: 1fr; }
    .lp-svcd-header { flex-direction: column; gap: 16px; }
    .lp-svcd-icon { width: 72px; height: 72px; font-size: 36px; }
}

.lp-svcd-card {
    background: #fff;
    border: 1px solid rgba(2, 62, 138, .08);
    border-radius: var(--r-md);
    padding: 24px 26px;
    box-shadow: var(--shadow-sm);
}
.lp-svcd-section-alt .lp-svcd-card { background: #fff; }
.lp-svcd-card-soft {
    background: rgba(72, 202, 228, .08);
    border-color: rgba(72, 202, 228, .3);
    box-shadow: none;
}
.lp-svcd-section-alt .lp-svcd-card-soft {
    background: rgba(255, 255, 255, .65);
    border-color: rgba(2, 62, 138, .1);
}
.lp-svcd-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.lp-svcd-card-title i {
    color: var(--c-azul-medio);
    font-size: 22px;
}
.lp-svcd-card p {
    font-size: 14.5px;
    color: var(--c-texto);
    line-height: 1.6;
    margin: 0;
}

.lp-svcd-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-svcd-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--c-texto);
    line-height: 1.5;
}
.lp-svcd-list li i {
    color: var(--c-amarillo-b);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.lp-svcd-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-svcd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: var(--r-pill);
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px rgba(255, 196, 0, .35);
    text-align: center;
}
.lp-svcd-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 196, 0, .5);
}
.lp-svcd-cta-wa {
    background: var(--c-wa);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
}
.lp-svcd-cta-wa:hover {
    background: var(--c-wa-b);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .5);
}

.lp-paw-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
    background: var(--c-azul-bg);
}
.lp-paw-divider i { font-size: 16px; color: var(--c-azul-claro); }

/* -------------------------------------------------------------
   Galeria
   ------------------------------------------------------------- */
.lp-gallery-full {
    background: var(--c-azul-oscuro);
    padding: 80px 0;
    position: relative;
}
/* Wave divider hacia la siguiente sección (--c-azul-bg, fondo claro). */
.lp-gallery-full::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 56px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'><path d='M0,0 C360,56 1080,56 1440,0 L1440,56 L0,56 Z' fill='%23f0fbfd'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Bento layout para preview de galería en home:
   1 grande izquierda (4/5) + 2 chicas top derecha (1/1) + 1 panorámica abajo */
.lp-gallery-bento {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
        "big small1 small2"
        "big wide  wide";
    gap: 18px;
    max-width: 1000px;
    margin: 32px auto 36px;
}
.lp-bento-item {
    position: relative;
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    box-shadow: var(--shadow-md);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-bento-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.lp-bento-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.lp-bento-item:hover img { transform: scale(1.04); }
.lp-bento-item-1 {
    grid-area: big;
    aspect-ratio: 4 / 5;
}
.lp-bento-item-2 {
    grid-area: small1;
    aspect-ratio: 1 / 1;
}
.lp-bento-item-3 {
    grid-area: small2;
    aspect-ratio: 1 / 1;
}
.lp-bento-item-4 {
    grid-area: wide;
    /* sin aspect-ratio: ocupa el alto restante de la columna grande */
}
.lp-bento-item-cat {
    position: absolute;
    bottom: 12px; left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(2, 62, 138, .9);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.lp-bento-item-cat i { font-size: 13px; }

@media (max-width: 768px) {
    .lp-gallery-bento {
        grid-template-columns: 1fr 1fr;
    }
    .lp-bento-item-1 {
        grid-column: span 2;
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }
}
.lp-gallery-title {
    font-family: var(--f-cuerpo);
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.lp-gallery-sub {
    font-size: 14px;
    color: var(--c-azul-claro);
    margin-bottom: 24px;
    font-weight: 600;
}
.lp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.lp-gallery-item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .15);
    background: var(--c-azul-medio);
}
.lp-gallery-item.a { background: var(--c-azul-medio); }
.lp-gallery-item.b { background: #0096C7; }
.lp-gallery-item.c { background: #0077B6; }
.lp-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Preview enriquecido (home): overlay con título y categoría visible al hover */
.lp-gallery-item-rich { position: relative; }
.lp-gallery-item-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(180deg, transparent 40%, rgba(2, 62, 138, .85) 100%);
    opacity: 0;
    transition: opacity .15s ease;
}
.lp-gallery-item-rich:hover .lp-gallery-item-info,
.lp-gallery-item-rich:focus-visible .lp-gallery-item-info { opacity: 1; }
.lp-gallery-item-cat {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lp-gallery-item-title-sm {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}
.lp-gallery-ph { text-align: center; color: rgba(255, 255, 255, .7); }
.lp-gallery-ph i { font-size: 24px; display: block; margin-bottom: 6px; }
.lp-gallery-ph span { font-size: 11px; font-weight: 700; }
.lp-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: var(--c-azul-claro);
    font-size: 14px;
    font-weight: 800;
}

/* -------------------------------------------------------------
   Video destacado en home — 3 cards 9:16 unificados
   ------------------------------------------------------------- */
.lp-video-destacado-full {
    background: var(--c-azul-medio);
    padding: 88px 0;
}
.lp-video-destacado-full .lp-inner { text-align: center; }
.lp-section-label.lp-on-dark {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
}
.lp-section-label.lp-on-dark span { color: #fff; }
.lp-section-title.lp-on-dark { color: #fff; }
.lp-gallery-link.lp-on-dark {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 2px;
}

.lp-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: 980px;
    margin: 36px auto 0;
    justify-items: center;
}
.lp-video-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    width: 100%;
    max-width: 280px;
    transition: transform .2s ease;
}
.lp-video-card-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: center;
    cursor: pointer;
}
.lp-video-card:hover { transform: translateY(-4px); }
.lp-video-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--r-md, 16px);
    overflow: hidden;
    background: rgba(0, 0, 0, .25);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(0, 0, 0, .35));
    transition: box-shadow .2s ease;
}
.lp-video-card:hover .lp-video-card-thumb {
    box-shadow: var(--shadow-lg, 0 18px 44px rgba(0, 0, 0, .45));
}
.lp-video-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease, transform .4s ease;
}
.lp-video-card:hover .lp-video-card-thumb img {
    opacity: .92;
    transform: scale(1.03);
}
.lp-video-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, .55);
    pointer-events: none;
    transition: transform .2s ease;
}
.lp-video-card:hover .lp-video-card-play { transform: scale(1.1); }
.lp-video-card-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    padding: 0 4px;
}
.lp-video-destacado-cta { margin-top: 36px; }

/* Wave divider SVG para suavizar transición a la siguiente sección
   (galería, fondo --c-azul-oscuro). Usa el color de la sección siguiente. */
.lp-video-destacado-full {
    position: relative;
}
.lp-video-destacado-full::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 48px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'><path d='M0,0 C320,48 720,48 1440,0 L1440,48 L0,48 Z' fill='%23023E8A'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

@media (max-width: 768px) {
    .lp-videos-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 32px;
    }
    .lp-video-card { max-width: 100%; }
}

/* -------------------------------------------------------------
   "Por que" cards - feature highlights con peso visual
   ------------------------------------------------------------- */
.lp-why-full { background: var(--c-azul-bg); padding: 80px 0; }
.lp-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
.lp-why-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: 36px 28px 32px;
    text-align: center;
    border: 1px solid rgba(2, 62, 138, .08);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
}
.lp-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-amarillo);
}
.lp-why-icon {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-amarillo) 0%, var(--c-amarillo-b) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 34px;
    color: var(--c-azul-oscuro);
    box-shadow: 0 6px 18px rgba(255, 196, 0, .35);
}
.lp-why-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 10px;
    line-height: 1.25;
}
.lp-why-desc {
    font-size: 14.5px;
    color: var(--c-texto-sec);
    line-height: 1.6;
    max-width: 280px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .lp-why-grid { grid-template-columns: 1fr; gap: 16px; }
    .lp-why-card { padding: 28px 22px 26px; }
}

/* -------------------------------------------------------------
   Banner promocional amarillo
   ------------------------------------------------------------- */
.lp-promo-full {
    background: var(--c-amarillo);
    border-top: 2px solid var(--c-amarillo-b);
    border-bottom: 2px solid var(--c-amarillo-b);
}
.lp-promo {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.lp-promo-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--c-texto);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-promo-btn {
    background: var(--c-azul-oscuro);
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

/* -------------------------------------------------------------
   Contacto
   ------------------------------------------------------------- */
.lp-contact-full { background: #fff; padding: 52px 0; }
.lp-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 24px;
}
.lp-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.lp-contact-icon {
    width: 36px; height: 36px;
    background: var(--c-azul-claro);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
    color: var(--c-azul-oscuro);
    border: 1.5px solid var(--c-azul-medio);
}
.lp-contact-lbl {
    font-size: 11px;
    color: var(--c-azul-texto);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}
.lp-contact-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-texto);
}
.lp-map-box {
    background: var(--c-azul-claro);
    border-radius: 16px;
    min-height: 220px;
    overflow: hidden;
    border: 2px solid var(--c-azul-medio);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-map-box iframe { width: 100%; height: 100%; min-height: 220px; border: 0; }
.lp-map-inner { text-align: center; color: var(--c-azul-oscuro); }
.lp-map-inner span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}
.lp-wa-btn {
    background: var(--c-wa);
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    width: fit-content;
    border: 2px solid var(--c-wa-b);
}

/* -------------------------------------------------------------
   Footer ampliado
   ------------------------------------------------------------- */
.lp-footer-full { background: var(--c-azul-oscuro); color: #fff; }
.lp-footer { padding: 40px 0 20px; }
.lp-footer-cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.lp-footer-col h4 {
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 14px;
}
.lp-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-footer-col a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .12s ease;
}
.lp-footer-col a:hover { color: #fff; text-decoration: underline; }
.lp-footer-col a i { font-size: 15px; color: var(--c-azul-claro); }
.lp-footer-col p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
    margin-bottom: 8px;
}
.lp-footer-brand {
    font-family: var(--f-titulo);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}
.lp-footer-tagline {
    font-size: 12px;
    color: #fff;
    margin-bottom: 16px;
    font-style: italic;
    opacity: 0.92;
}
.lp-footer-social { display: flex; gap: 8px; margin-top: 4px; }
.lp-footer-social a {
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, .12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    transition: background .12s ease, transform .12s ease;
}
.lp-footer-social a:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}
.lp-footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
}

/* -------------------------------------------------------------
   Boton flotante WhatsApp
   ------------------------------------------------------------- */
.lp-wa-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-wa);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    border: 2px solid var(--c-wa-b);
    z-index: 100;
    transition: transform .15s ease;
}
.lp-wa-float:hover { transform: scale(1.08); }

/* Botón "Volver arriba" — flotante encima del WhatsApp */
.lp-back-to-top {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-azul-oscuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 2px solid #fff;
    box-shadow: 0 6px 18px rgba(2, 62, 138, .35);
    cursor: pointer;
    z-index: 99;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
}
.lp-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.lp-back-to-top:hover {
    background: var(--c-azul-texto);
    transform: translateY(-2px);
}
.lp-back-to-top:focus-visible {
    outline: 3px solid var(--c-amarillo);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .lp-back-to-top { transition: opacity .15s ease; transform: none !important; }
}

/* -------------------------------------------------------------
   Utilidades reusables (extraen estilos inline repetidos)
   ------------------------------------------------------------- */
/* Cards de blog y artículos */
.lp-card-blog {
    background: var(--c-azul-bg);
    border-radius: 16px;
    border: 2px solid var(--c-azul-claro);
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.lp-card-blog-img { display: block; }
.lp-card-blog-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.lp-card-blog-body { padding: 18px; }
.lp-card-blog-meta {
    font-size: 11px;
    color: var(--c-azul-texto);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.lp-card-blog-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 8px;
    line-height: 1.3;
}
.lp-card-blog-excerpt {
    font-size: 13px;
    color: var(--c-texto-sec);
    line-height: 1.6;
    margin-bottom: 12px;
}
.lp-card-blog-readmore {
    font-size: 12px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-badge-campana {
    background: var(--c-amarillo);
    color: var(--c-texto);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid var(--c-amarillo-b);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Empty states */
.lp-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--c-texto-sec);
}
.lp-empty-icon {
    font-size: 48px;
    color: var(--c-azul-medio);
    display: block;
    margin-bottom: 16px;
}
.lp-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    margin-bottom: 6px;
}

/* Paginación */
.lp-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.lp-pagination .info {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-texto-sec);
}

/* Variante pequeña de lp-btn-cita */
.lp-btn-cita.sm { padding: 8px 16px; font-size: 12px; }

/* Variantes de tamaño de section-title */
.lp-section-title-sm { font-size: 22px; }

/* Grid de 2 columnas (mobile-first: 1col, ≥640px: 2 col) */
.lp-grid-2 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .lp-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Section centrada para vacíos / 404 */
.lp-section-empty { padding: 80px 0; }
.lp-section-empty .lp-inner { text-align: center; }

/* Variante reducida de sección intro (header de página interna) */
.lp-section-intro { padding-top: 40px; padding-bottom: 24px; }

/* -------------------------------------------------------------
   Galería de videos multi-fuente (YouTube + Facebook + Instagram + TikTok)
   Grid uniforme 16:9: todas las cards tienen el mismo alto para look
   profesional tipo plataforma de video. Verticales se identifican con
   badge en la esquina y se reproducen verticales en el lightbox.
   ------------------------------------------------------------- */
.lp-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    align-items: start;
}

.lp-video-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-video-item {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #000;
    box-shadow: 0 4px 14px rgba(2, 62, 138, .15);
    transition: transform .2s ease, box-shadow .2s ease;
}
.lp-video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(2, 62, 138, .25);
}
/* Aspect uniforme 16:9 en TODAS las cards del listado público.
   El aspect real (vertical/cuadrado) se preserva en el lightbox al reproducir. */
.lp-video-fig .lp-video-item { aspect-ratio: 16 / 9; }

.lp-video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease;
}
.lp-video-item:hover img { opacity: .85; }
/* Para Reels verticales: mostrar la imagen completa con letterbox negro
   en lugar de recortar el centro. Conserva caras y texto del video. */
.lp-video-fig.lp-video-vertical .lp-video-item {
    background: #0a0a0a;
}
.lp-video-fig.lp-video-vertical .lp-video-item img {
    object-fit: contain;
}
.lp-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 56px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    pointer-events: none;
}

/* Chip de fuente en la esquina inferior izquierda */
.lp-video-source-chip {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Badge "vertical" en esquina superior derecha: indica que el video es 9:16
   sin romper el aspect uniforme del grid. */
.lp-video-vertical-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lp-vchip-youtube   { background: rgba(255, 0, 0, .9);    color: #fff; border-color: rgba(255, 0, 0, 1); }
.lp-vchip-facebook  { background: rgba(24, 119, 242, .9); color: #fff; border-color: rgba(24, 119, 242, 1); }
.lp-vchip-instagram { background: rgba(228, 64, 95, .9);  color: #fff; border-color: rgba(228, 64, 95, 1); }
.lp-vchip-tiktok    { background: rgba(0, 0, 0, .85);     color: #fff; border-color: rgba(255, 255, 255, .3); }

.lp-video-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
    text-align: left;
}
.lp-video-caption-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    line-height: 1.3;
}
.lp-video-caption-desc {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-texto-sec);
    line-height: 1.4;
}

/* Lightbox multi-plataforma */
.lp-vlightbox {
    position: fixed; inset: 0;
    background: rgba(2, 62, 138, .96);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    z-index: 200;
}
.lp-vlightbox.is-open { display: flex; }
.lp-vlightbox-close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
    z-index: 2;
}
.lp-vlightbox-stage {
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: center;
}
/* Cuando es vertical, ajustar el grid para que video y meta estén juntos */
.lp-vlightbox-stage.is-vertical {
    grid-template-columns: auto 280px;
    justify-content: center;
    max-width: 760px;
}
.lp-vlightbox-stage.is-square {
    grid-template-columns: auto 280px;
    justify-content: center;
    max-width: 900px;
}
.lp-vlightbox-frame {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
}
.lp-vlightbox-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lp-vlightbox-fallback {
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}
.lp-vlightbox-fallback a {
    color: var(--c-amarillo);
    text-decoration: underline;
    font-weight: 700;
}

/* Aspect del frame según la plataforma.
   YouTube usa iframe directo y respeta aspect-ratio.
   Facebook/Instagram/TikTok renderizan sus propios SDK con dimensiones internas:
   no forzamos aspect-ratio; el SDK ajusta el contenido. */
.lp-vlightbox-stage.is-horizontal[data-fuente="youtube"] .lp-vlightbox-frame { aspect-ratio: 16 / 9; }
.lp-vlightbox-stage.is-vertical[data-fuente="youtube"]   .lp-vlightbox-frame { aspect-ratio: 9 / 16; max-height: 80vh; margin: 0 auto; max-width: 420px; }
.lp-vlightbox-stage.is-square[data-fuente="youtube"]     .lp-vlightbox-frame { aspect-ratio: 1 / 1;  max-height: 80vh; margin: 0 auto; max-width: 600px; }

/* Para FB/IG/TT: contenedor con max-width sensato y altura natural del SDK.
   Importante: el SDK de Facebook/Instagram/TikTok inyecta sus propios iframes
   con altura calculada dinámicamente. NO forzamos overflow: usamos display
   centrado y dejamos que el SDK ajuste. */
.lp-vlightbox-stage[data-fuente="facebook"]  .lp-vlightbox-frame,
.lp-vlightbox-stage[data-fuente="instagram"] .lp-vlightbox-frame,
.lp-vlightbox-stage[data-fuente="tiktok"]    .lp-vlightbox-frame {
    background: transparent;
    box-shadow: none;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* El contenedor interno que crea el SDK debe respetar el ancho */
.lp-vlightbox-stage[data-fuente="facebook"]  .lp-vlightbox-frame > *,
.lp-vlightbox-stage[data-fuente="instagram"] .lp-vlightbox-frame > *,
.lp-vlightbox-stage[data-fuente="tiktok"]    .lp-vlightbox-frame > * {
    max-width: 100%;
    width: 100% !important;
}
/* Facebook envuelve el video en .fb-video > span > iframe; forzar ancho 100% */
.lp-vlightbox-stage[data-fuente="facebook"] .fb-video,
.lp-vlightbox-stage[data-fuente="facebook"] .fb-video > span,
.lp-vlightbox-stage[data-fuente="facebook"] .fb-video iframe {
    width: 100% !important;
    max-width: 100% !important;
}

.lp-vlightbox-meta {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-vlightbox-meta strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}
.lp-vlightbox-meta span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    line-height: 1.5;
}
.lp-vlightbox-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lp-vlightbox-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .3);
    text-decoration: none;
}
.lp-vlightbox-action.lp-vlightbox-wa {
    background: var(--c-wa);
    border-color: var(--c-wa-b);
}

@media (max-width: 900px) {
    .lp-vlightbox-stage { grid-template-columns: 1fr; max-height: 100%; overflow-y: auto; }
    .lp-vlightbox-stage.is-vertical .lp-vlightbox-frame { max-height: 65vh; }
}

/* -------------------------------------------------------------
   Landing de campaña (template dedicado, NO la home)
   Layout simplificado: nav minimal + hero + bloques + CTA sticky.
   ------------------------------------------------------------- */
.lp-landing-body {
    background: #fff;
}

.lp-landing-nav {
    background: #fff;
    border-bottom: 2px solid var(--c-azul-medio);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(2, 62, 138, .06);
}
.lp-landing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.lp-landing-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-landing-nav-logo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--c-azul-oscuro);
    object-fit: cover;
    background: #fff;
    box-shadow: 0 4px 12px rgba(2, 62, 138, .15);
}
.lp-landing-nav-brand {
    font-family: var(--f-titulo);
    font-size: 26px;
    color: var(--c-azul-oscuro);
    line-height: 1;
}
.lp-landing-nav-sub {
    font-size: 10px;
    color: var(--c-azul-texto);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 3px;
}
.lp-landing-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-azul-texto);
    font-size: 13px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--c-azul-claro);
    transition: background .12s ease, border-color .12s ease;
}
.lp-landing-nav-back:hover {
    background: var(--c-azul-bg);
    border-color: var(--c-azul-medio);
}
@media (max-width: 540px) {
    .lp-landing-nav-back span { display: none; }
}

/* ═════════════════════════════════════════════════════════
   FLYER REAL: poster compacto tipo afiche.
   No es landing-page. Es single-screen denso con composición
   no-lineal: foto + sello GRATIS + título dominante + tics +
   CTA gigante + datos. Letra chica opcional al final.
   ═════════════════════════════════════════════════════════ */

.lp-flyer {
    background: var(--c-azul-oscuro);
    min-height: calc(100vh - 80px);
}

.lp-flyer-poster {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 15% 110%, rgba(72, 202, 228, .35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255, 214, 10, .15) 0%, transparent 55%),
        linear-gradient(135deg, var(--c-azul-oscuro) 0%, #034ea8 100%);
    padding: 64px 0 56px;
}

/* Blobs decorativos sutiles */
.lp-flyer-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
    opacity: .35;
}
.lp-flyer-blob-1 {
    width: 320px; height: 320px;
    top: -80px; left: -80px;
    background: var(--c-amarillo);
}
.lp-flyer-blob-2 {
    width: 380px; height: 380px;
    bottom: -120px; right: -120px;
    background: var(--c-azul-medio);
}
/* Huellitas decorativas flotando */
.lp-flyer-paw {
    position: absolute;
    color: rgba(255, 255, 255, .08);
    pointer-events: none;
    font-size: 80px;
}
.lp-flyer-paw-1 { top: 8%;  left: 6%;  transform: rotate(-18deg); font-size: 110px; }
.lp-flyer-paw-2 { top: 60%; right: 4%; transform: rotate(22deg); font-size: 70px; }
.lp-flyer-paw-3 { bottom: 14%; left: 42%; transform: rotate(-8deg); font-size: 56px; }

.lp-flyer-poster-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}

/* === VISUAL: foto + sello GRATIS === */
.lp-flyer-visual {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-flyer-photo {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 5;
    border-radius: 28px;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    transform: rotate(-3deg);
    background: #000;
}
.lp-flyer-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Sticker tipo sello "GRATIS" */
.lp-flyer-sticker {
    position: absolute;
    top: -8px; right: -8px;
    width: 168px; height: 168px;
    border-radius: 50%;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    transform: rotate(12deg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    border: 4px dashed #fff;
    padding: 12px;
}
.lp-flyer-sticker-top    { font-size: 16px; font-weight: 900; letter-spacing: .05em; margin-bottom: 4px; }
.lp-flyer-sticker-big    { font-family: 'Anton', 'Impact', sans-serif; font-size: 54px; font-weight: 400; line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.lp-flyer-sticker-bottom { font-size: 11px; font-weight: 700; margin-top: 6px; line-height: 1.2; }

/* === PITCH: copy + CTA === */
.lp-flyer-pitch { color: #fff; }

.lp-flyer-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(255, 196, 0, .35);
}
.lp-flyer-chip-vigente   { background: #22c55e; color: #fff; }
.lp-flyer-chip-expirada  { background: #6b7280; color: #fff; }

.lp-flyer-eyebrow {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 6px;
}
.lp-flyer-h1 {
    font-family: 'Anton', 'Impact', 'Oswald', sans-serif;
    font-size: clamp(64px, 10vw, 132px);
    font-weight: 400;
    line-height: .88;
    color: #fff;
    margin-bottom: 18px;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    letter-spacing: .005em;
    text-transform: uppercase;
}
.lp-flyer-sub {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    line-height: 1.45;
    margin-bottom: 22px;
    max-width: 540px;
}

/* Ticks (lo que antes era "qué incluye") */
.lp-flyer-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.lp-flyer-ticks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.lp-flyer-ticks i {
    color: var(--c-amarillo);
    font-size: 22px;
    flex-shrink: 0;
}

/* CTA gigante */
.lp-flyer-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    padding: 22px 36px;
    border-radius: 999px;
    font-size: 22px;
    font-weight: 900;
    text-decoration: none;
    box-shadow:
        0 0 0 6px rgba(255, 214, 10, .25),
        0 18px 40px rgba(255, 214, 10, .4);
    transition: transform .2s ease, box-shadow .2s ease;
    margin-bottom: 22px;
    animation: lp-flyer-pulse 2.4s ease-in-out infinite;
}
.lp-flyer-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 0 0 10px rgba(255, 214, 10, .3),
        0 26px 56px rgba(255, 214, 10, .5);
    animation-play-state: paused;
}
.lp-flyer-cta i:first-child { font-size: 28px; }
.lp-flyer-cta-arrow { font-size: 22px; transition: transform .2s ease; }
.lp-flyer-cta:hover .lp-flyer-cta-arrow { transform: translateX(4px); }
@keyframes lp-flyer-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 214, 10, .25),  0 18px 40px rgba(255, 214, 10, .4); }
    50%      { box-shadow: 0 0 0 14px rgba(255, 214, 10, .0),  0 18px 40px rgba(255, 214, 10, .4); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-flyer-cta { animation: none; }
}

.lp-flyer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}
.lp-flyer-contact i { color: var(--c-amarillo); margin-right: 4px; }
.lp-flyer-dot { color: rgba(255, 255, 255, .4); }

/* === Tira de pasos compacta === */
.lp-flyer-pasos {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 48px auto 0;
    padding: 18px 28px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    color: #fff;
    backdrop-filter: blur(8px);
}
.lp-flyer-pasos-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-amarillo);
    margin-right: 8px;
}
.lp-flyer-paso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lp-flyer-paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
}
.lp-flyer-paso-txt {
    font-size: 14px;
    font-weight: 700;
}
.lp-flyer-paso-sep {
    color: rgba(255, 255, 255, .35);
    font-size: 16px;
}

/* === LETRA CHICA: FAQ colapsable === */
.lp-flyer-letra-chica {
    background: #fff;
    padding: 32px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.lp-flyer-fineprint summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    padding: 4px 0;
}
.lp-flyer-fineprint summary::-webkit-details-marker { display: none; }
.lp-flyer-fineprint summary > i:first-child { font-size: 18px; }
.lp-flyer-fineprint-chev {
    margin-left: auto;
    transition: transform .2s ease;
}
.lp-flyer-fineprint[open] .lp-flyer-fineprint-chev { transform: rotate(180deg); }
.lp-flyer-fineprint-body {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 32px;
    color: var(--c-texto-sec);
}
.lp-flyer-fp-item strong {
    display: block;
    color: var(--c-azul-oscuro);
    font-size: 13px;
    margin-bottom: 4px;
}
.lp-flyer-fp-item p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* === Responsive === */
@media (max-width: 960px) {
    .lp-flyer-poster-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px;
    }
    .lp-flyer-visual { order: -1; max-width: 360px; margin: 0 auto; }
    .lp-flyer-h1 { font-size: clamp(48px, 11vw, 84px); }
    .lp-flyer-pasos { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 540px) {
    .lp-flyer-poster { padding: 36px 0; }
    .lp-flyer-cta { font-size: 18px; padding: 18px 28px; width: 100%; justify-content: center; }
    .lp-flyer-sticker { width: 110px; height: 110px; }
    .lp-flyer-sticker-big { font-size: 28px; }
}

/* HERO */
.lp-landing-hero {
    background: linear-gradient(135deg, var(--c-azul-oscuro) 0%, var(--c-azul-medio) 100%);
    color: #fff;
    padding: 56px 0 0;  /* sin padding-bottom: el wave se pega al trust strip sin espacios */
    position: relative;
    overflow: hidden;
}
/* El wave es la transición suave entre el hero azul y el trust strip amarillo.
   Fondo amarillo (mismo que trust) con curvas superiores que "muerden" el azul. */
.lp-landing-hero .lp-hero-wave {
    background: var(--c-amarillo);
    margin-top: 48px;  /* respiro entre el CTA y la curva, dentro del hero azul */
    height: 44px;
}
.lp-landing-hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 880px) {
    .lp-landing-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}
.lp-landing-urgencia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ef4444;
    color: #fff;
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .35);
    margin-bottom: 18px;
    animation: lp-urgencia-pulse 2s ease-in-out infinite;
}
.lp-landing-urgencia-futura {
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    animation: none;
}
.lp-landing-urgencia-expirada {
    background: #64748b;
    color: #fff;
    box-shadow: 0 4px 12px rgba(100, 116, 139, .35);
    animation: none;
}
@keyframes lp-urgencia-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}
.lp-landing-h1 {
    font-family: var(--f-titulo);
    font-size: clamp(40px, 7vw, 72px);
    line-height: 1.05;
    color: #fff;
    text-shadow: 4px 4px 0 var(--c-azul-oscuro);
    margin-bottom: 16px;
    letter-spacing: -1px;
}
.lp-landing-hero-sub {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, .95);
    margin-bottom: 26px;
    max-width: 540px;
}
.lp-landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro) !important;
    padding: 16px 28px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .3px;
    border: 3px solid var(--c-azul-oscuro);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
    transition: transform .15s ease, box-shadow .15s ease;
}
.lp-landing-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.lp-landing-cta i { font-size: 18px; }
.lp-landing-cta-large {
    padding: 20px 36px;
    font-size: 18px;
}
.lp-landing-hero-img {
    border-radius: 24px;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    aspect-ratio: 4 / 5;
    max-width: 420px;
    margin: 0 auto;
}
.lp-landing-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TRUST STRIP */
.lp-landing-trust {
    background: var(--c-amarillo);
    border-bottom: 2px solid var(--c-amarillo-b);
    padding: 14px 0;
}
.lp-landing-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 24px;
}
.lp-landing-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    line-height: 1.3;
}
.lp-landing-trust-item i {
    font-size: 22px;
    flex-shrink: 0;
}

/* Paw divider en landing (más sutil que en home) */
.lp-paw-divider-landing {
    background: #fff;
    padding: 22px 0;
}
.lp-paw-divider-landing i {
    color: var(--c-azul-medio);
    opacity: .6;
    font-size: 18px;
}

/* SECCIONES (beneficios, pasos, FAQ) */
.lp-landing-section {
    padding: 64px 0;
    background: #fff;
}
.lp-landing-section.lp-landing-section-alt {
    background: var(--c-azul-bg);
}
.lp-landing-section-title {
    font-family: var(--f-cuerpo);
    font-size: 32px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    text-align: center;
    margin-bottom: 36px;
    letter-spacing: -0.5px;
}

/* BENEFICIOS */
.lp-landing-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}
.lp-landing-benef {
    background: #fff;
    border: 2px solid var(--c-azul-claro);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp-landing-benef:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(2, 62, 138, .15);
    border-color: var(--c-azul-medio);
}
.lp-landing-benef-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-azul-bg);
    color: var(--c-azul-oscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    border: 2px solid var(--c-azul-medio);
}
.lp-landing-benef h3 {
    font-size: 17px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 8px;
    line-height: 1.3;
}
.lp-landing-benef p {
    font-size: 14px;
    color: var(--c-texto-sec);
    line-height: 1.55;
}

/* PASOS */
.lp-landing-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}
@media (max-width: 960px) {
    .lp-landing-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .lp-landing-pasos { grid-template-columns: 1fr; }
}
.lp-landing-paso {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 2px solid var(--c-azul-claro);
}
.lp-landing-paso-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-azul-oscuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}
.lp-landing-paso h3 {
    font-size: 17px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 4px;
    line-height: 1.3;
}
.lp-landing-paso p {
    font-size: 14px;
    color: var(--c-texto-sec);
    line-height: 1.55;
}

/* FAQ wrap (reusa estilos de .lp-faq-item de la página FAQ) */
.lp-landing-faq-wrap {
    max-width: 760px;
}

/* CTA final */
.lp-landing-cta-final {
    background: linear-gradient(135deg, var(--c-azul-oscuro) 0%, var(--c-azul-medio) 100%);
    color: #fff;
    padding: 64px 0;
    text-align: center;
}
.lp-landing-cta-final h2 {
    font-family: var(--f-titulo);
    font-size: clamp(32px, 5vw, 52px);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 14px;
    text-shadow: 3px 3px 0 var(--c-azul-oscuro);
}
.lp-landing-cta-final p {
    font-size: 17px;
    color: rgba(255, 255, 255, .92);
    max-width: 620px;
    margin: 0 auto 28px;
}

/* CTA Sticky en mobile: barra inferior fija con el CTA */
.lp-landing-cta-sticky {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--c-amarillo);
    color: var(--c-azul-oscuro) !important;
    padding: 14px 20px;
    border-radius: 28px;
    font-size: 15px;
    font-weight: 900;
    border: 2px solid var(--c-azul-oscuro);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    z-index: 90;
    text-align: center;
}
@media (max-width: 768px) {
    .lp-landing-cta-sticky { display: flex; }
    /* Espacio extra abajo para que no tape el footer */
    .lp-landing-footer { padding-bottom: 80px; }
}

/* FOOTER landing minimal */
.lp-landing-footer {
    background: var(--c-azul-oscuro);
    color: #fff;
    padding: 32px 0 24px;
}
.lp-landing-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.lp-landing-footer-brand {
    font-family: var(--f-titulo);
    font-size: 24px;
    margin-bottom: 2px;
    line-height: 1;
}
.lp-landing-footer-tagline {
    font-size: 12px;
    color: var(--c-azul-claro);
    font-style: italic;
    margin-bottom: 12px;
}
.lp-landing-footer-row {
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.lp-landing-footer-row i { font-size: 16px; }
.lp-landing-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}
.lp-landing-footer-contact a {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lp-landing-footer-contact a:hover { text-decoration: underline; }
.lp-landing-footer-legal {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.lp-landing-footer-legal a {
    color: #fff;
    text-decoration: underline;
}
.lp-landing-footer-legal a:hover { color: var(--c-amarillo); }
.lp-landing-footer-copy {
    color: rgba(255, 255, 255, .7);
}
@media (max-width: 640px) {
    .lp-landing-footer-legal { align-items: flex-start; }
}

/* -------------------------------------------------------------
   Equipo veterinario (Fase C)
   ------------------------------------------------------------- */
.lp-equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 28px;
}

/* Teaser de equipo en home (clickeable, lleva a /equipo#m-{id}) */
.lp-equipo-teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 32px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.lp-equipo-teaser {
    background: #fff;
    border: 1px solid rgba(2, 62, 138, .08);
    border-radius: var(--r-lg);
    padding: 26px 22px 22px;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lp-equipo-teaser:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-amarillo);
}
.lp-equipo-teaser-foto {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(2, 62, 138, .2);
    background: var(--c-azul-claro);
}
.lp-equipo-teaser-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lp-equipo-teaser-nombre {
    font-size: 17px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 0;
    line-height: 1.2;
}
.lp-equipo-teaser-cargo {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-azul-texto);
    margin: 4px 0;
    line-height: 1.3;
}
.lp-equipo-teaser-exp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-texto-sec);
    margin: 6px 0 14px;
}
.lp-equipo-teaser-exp i { color: var(--c-amarillo-b); font-size: 14px; }
.lp-equipo-teaser-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(2, 62, 138, .08);
    width: 100%;
    justify-content: center;
    color: var(--c-azul-oscuro);
    font-size: 13px;
    font-weight: 800;
    transition: gap .15s ease;
}
.lp-equipo-teaser:hover .lp-equipo-teaser-link { gap: 8px; }

/* ═════════════════════════════════════════════════════════
   /equipo — vista de detalle profundo por miembro
   (mismo patrón que /servicios, no es el grid del home)
   ═════════════════════════════════════════════════════════ */
.lp-eqd-section {
    background: #fff;
    padding: 72px 0;
    scroll-margin-top: 80px;
}
.lp-eqd-section-alt { background: var(--c-azul-bg); }

.lp-eqd-block {
    max-width: 1020px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.lp-eqd-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-azul-claro) 0%, var(--c-azul-medio) 100%);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 90px;
}
.lp-eqd-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.lp-eqd-photo .lp-avatar-inicial {
    font-size: 88px;
}

.lp-eqd-body { min-width: 0; }
.lp-eqd-nombre {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 0 0 6px;
    line-height: 1.1;
}
.lp-eqd-cargo {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-azul-texto);
    margin: 0 0 22px;
}
.lp-eqd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--c-azul-claro);
}
.lp-eqd-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--c-texto);
}
.lp-eqd-stat strong { color: var(--c-azul-oscuro); font-weight: 900; }
.lp-eqd-stat i { color: var(--c-amarillo-b); font-size: 18px; }
.lp-eqd-stat-link {
    color: var(--c-azul-oscuro);
    font-weight: 700;
    text-decoration: none;
}
.lp-eqd-stat-link:hover { color: var(--c-azul-texto); }
.lp-eqd-stat-link i { color: #E1306C; }
.lp-eqd-bio {
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-texto);
    margin: 0 0 28px;
}
.lp-eqd-card {
    background: #fff;
    border: 1px solid rgba(2, 62, 138, .08);
    border-radius: var(--r-md);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}
.lp-eqd-section-alt .lp-eqd-card { background: #fff; }
.lp-eqd-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 14px;
}
.lp-eqd-card-title i {
    color: var(--c-azul-medio);
    font-size: 20px;
}
.lp-eqd-card p {
    font-size: 14.5px;
    color: var(--c-texto);
    line-height: 1.6;
    margin: 0;
}
.lp-eqd-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lp-eqd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--c-azul-bg);
    border: 1px solid var(--c-azul-claro);
    color: var(--c-azul-oscuro);
    font-size: 13px;
    font-weight: 700;
}
.lp-eqd-chip i { color: var(--c-amarillo-b); font-size: 15px; }

@media (max-width: 880px) {
    .lp-eqd-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .lp-eqd-photo {
        position: static;
        max-width: 280px;
        margin: 0 auto;
    }
}
.lp-equipo-card {
    background: #fff;
    border-radius: 18px;
    border: 2px solid var(--c-azul-claro);
    padding: 24px 20px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lp-equipo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(2, 62, 138, .15);
    border-color: var(--c-azul-medio);
}
.lp-equipo-foto {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--c-azul-claro);
    background: var(--c-azul-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-azul-medio);
    font-size: 64px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(2, 62, 138, .15);
}
.lp-equipo-foto img { width: 100%; height: 100%; object-fit: cover; }
.lp-equipo-info { width: 100%; }
.lp-equipo-nombre {
    font-size: 17px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 2px;
    line-height: 1.2;
    letter-spacing: -0.2px;
}
.lp-equipo-cargo {
    font-size: 12px;
    font-weight: 800;
    color: var(--c-azul-texto);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}
.lp-equipo-bio {
    font-size: 13px;
    color: var(--c-texto-sec);
    line-height: 1.5;
    margin-bottom: 14px;
}
.lp-equipo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--c-azul-oscuro);
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid var(--c-azul-claro);
}
.lp-equipo-meta i { margin-right: 3px; }
.lp-equipo-meta a {
    color: var(--c-azul-oscuro);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.lp-equipo-meta a:hover { color: var(--c-azul-texto); text-decoration: underline; }

/* -------------------------------------------------------------
   Testimonios (Fase C)
   ------------------------------------------------------------- */
.lp-testimonios-full {
    background: linear-gradient(135deg, var(--c-azul-oscuro) 0%, var(--c-azul-medio) 100%);
    padding: 56px 0;
    color: #fff;
}
.lp-testimonios-full .lp-inner { text-align: center; }
.lp-section-sub.lp-on-dark {
    color: rgba(255, 255, 255, .92);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.lp-testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 28px;
    text-align: left;
}
.lp-testi-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    padding: 24px 22px 22px;
    position: relative;
    backdrop-filter: blur(4px);
    color: #fff;
    display: flex;
    flex-direction: column;
}
.lp-testi-mark {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 56px;
    color: rgba(255, 255, 255, .15);
    line-height: 1;
}
.lp-testi-rating {
    color: var(--c-amarillo);
    font-size: 18px;
    line-height: 1;
    margin-bottom: 12px;
    display: flex;
    gap: 2px;
}
.lp-testi-rating .ti-star { color: rgba(255, 255, 255, .25); }
.lp-testi-content {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .95);
    font-style: italic;
    margin-bottom: 18px;
    font-weight: 500;
    flex: 1;
}
.lp-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.lp-testi-foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
    border: 2px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .7);
    font-size: 22px;
    flex-shrink: 0;
}
.lp-testi-foto img { width: 100%; height: 100%; object-fit: cover; }
.lp-testi-nombre { font-size: 14px; font-weight: 900; color: #fff; line-height: 1.2; }
.lp-testi-mascota { font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 1px; }
.lp-testi-fecha   { font-size: 11px; color: rgba(255, 255, 255, .65); margin-top: 2px; font-weight: 600; }

/* Variante light para /testimonios página completa */
.lp-testi-card-light {
    background: #fff;
    border: 2px solid var(--c-azul-claro);
    color: var(--c-texto);
    backdrop-filter: none;
}
.lp-testi-card-light .lp-testi-mark { color: rgba(72, 202, 228, .15); }
.lp-testi-card-light .lp-testi-content { color: var(--c-texto); }
.lp-testi-card-light .lp-testi-author { border-top-color: var(--c-azul-claro); }
.lp-testi-card-light .lp-testi-foto {
    background: var(--c-azul-bg);
    border-color: var(--c-azul-claro);
    color: var(--c-azul-medio);
}
.lp-testi-card-light .lp-testi-nombre  { color: var(--c-azul-oscuro); }
.lp-testi-card-light .lp-testi-mascota { color: var(--c-texto-sec); }
.lp-testi-card-light .lp-testi-fecha   { color: var(--c-azul-texto); }
.lp-testi-card-light .lp-testi-rating .ti-star { color: #cbd5e1; }
.lp-testimonios-grid-page { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* -------------------------------------------------------------
   FAQ (Fase C)
   ------------------------------------------------------------- */
.lp-faq-wrap {
    max-width: 820px;
    margin: 0 auto;
}

/* Búsqueda en vivo */
.lp-faq-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid var(--c-azul-claro);
    border-radius: var(--r-pill);
    padding: 4px 18px 4px 16px;
    margin-bottom: 32px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-faq-search:focus-within {
    border-color: var(--c-azul-oscuro);
    box-shadow: 0 0 0 4px rgba(2, 62, 138, .1);
}
.lp-faq-search > i {
    color: var(--c-azul-medio);
    font-size: 20px;
    flex-shrink: 0;
}
.lp-faq-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 12px 0;
    font: inherit;
    font-size: 15px;
    color: var(--c-texto);
}
.lp-faq-search input::placeholder { color: var(--c-texto-sec); }
.lp-faq-search-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--c-texto-sec);
    background: var(--c-azul-bg);
    padding: 4px 10px;
    border-radius: var(--r-pill);
}
.lp-faq-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--c-texto-sec);
}
.lp-faq-empty i {
    font-size: 48px;
    color: var(--c-azul-claro);
    display: block;
    margin-bottom: 8px;
}

.lp-faq-categoria { margin-bottom: 32px; }
.lp-faq-categoria-titulo {
    font-size: 16px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-azul-claro);
}
.lp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-faq-item {
    background: #fff;
    border: 2px solid var(--c-azul-claro);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-faq-item[open] {
    border-color: var(--c-azul-medio);
    box-shadow: 0 6px 16px rgba(2, 62, 138, .1);
}
.lp-faq-pregunta {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.4;
}
.lp-faq-pregunta::-webkit-details-marker { display: none; }
.lp-faq-chev {
    font-size: 20px;
    color: var(--c-azul-medio);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.lp-faq-item[open] .lp-faq-chev { transform: rotate(180deg); }
.lp-faq-respuesta {
    padding: 0 20px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-texto-sec);
}

.lp-faq-cta {
    background: var(--c-azul-bg);
    border: 2px solid var(--c-azul-claro);
    border-radius: 18px;
    padding: 24px;
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.lp-faq-cta > i.ti {
    font-size: 40px;
    color: var(--c-azul-medio);
}
.lp-faq-cta > div {
    flex: 1;
    min-width: 200px;
}
.lp-faq-cta-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin-bottom: 2px;
}
.lp-faq-cta-sub {
    font-size: 13px;
    color: var(--c-texto-sec);
}

/* -------------------------------------------------------------
   Footer: links legales
   ------------------------------------------------------------- */
.lp-footer-legal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lp-footer-legal a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}
.lp-footer-legal a:hover { color: var(--c-amarillo); }
.lp-footer-legal span[aria-hidden] { opacity: .5; }

/* -------------------------------------------------------------
   Galería rediseñada (Fase B): chips de categoría, masonry, lightbox enriquecido
   ------------------------------------------------------------- */

/* Tabs limpias (reemplazo de chips/pills) */
.lp-galeria-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 28px;
    border-bottom: 2px solid var(--c-azul-claro);
    padding-bottom: 0;
    justify-content: center;
}
.lp-galeria-tab {
    position: relative;
    padding: 12px 20px;
    color: var(--c-texto-sec);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: color .15s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.lp-galeria-tab:hover { color: var(--c-azul-oscuro); }
.lp-galeria-tab.is-active {
    color: var(--c-azul-oscuro);
    border-bottom-color: var(--c-azul-oscuro);
}

/* Secciones de categoría con header */
.lp-galeria-seccion {
    margin-bottom: 56px;
}
.lp-galeria-seccion:last-child { margin-bottom: 0; }
.lp-galeria-seccion-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-azul-claro);
}
.lp-galeria-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-azul-oscuro);
    font-size: 22px;
    font-weight: 900;
    margin: 0;
    line-height: 1;
}
.lp-galeria-seccion-titulo i {
    font-size: 20px;
    color: var(--c-azul-texto);
}
.lp-galeria-seccion-count {
    color: var(--c-texto-sec);
    font-size: 13px;
    font-weight: 700;
    margin-left: auto;
}

/* Variantes de color para chips de categoría (públicas) */
.lp-chip-azul     { background: rgba(72, 202, 228, .15); border-color: var(--c-azul-medio); color: var(--c-azul-oscuro); }
.lp-chip-verde    { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.lp-chip-rosa     { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }
.lp-chip-amarillo { background: rgba(255, 214, 10, .25); border-color: var(--c-amarillo-b); color: #7a5b00; }
.lp-chip-rojo     { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.lp-chip-morado   { background: #f3e8ff; border-color: #d8b4fe; color: #6b21a8; }
.lp-chip-gris     { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }

/* Grid de fotos: tipo masonry usando CSS columns (alturas reales conservadas) */
.lp-galeria-masonry {
    column-count: 3;
    column-gap: 14px;
}
@media (max-width: 900px) { .lp-galeria-masonry { column-count: 2; } }
@media (max-width: 540px) { .lp-galeria-masonry { column-count: 1; } }

.lp-galeria-item {
    break-inside: avoid;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-galeria-item-btn {
    position: relative;
    display: block;
    width: 100%;
    border: 2px solid var(--c-azul-claro);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: var(--c-azul-bg);
    cursor: zoom-in;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lp-galeria-item-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2, 62, 138, .25);
    border-color: var(--c-azul-medio);
}
.lp-galeria-item-btn img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .15s ease;
}
.lp-galeria-item-btn:hover img { opacity: .88; }
.lp-galeria-item-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 14px;
    border: 1.5px solid;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.lp-galeria-item-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(2, 62, 138, .85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: opacity .15s ease;
}
.lp-galeria-item-btn:hover .lp-galeria-item-overlay,
.lp-galeria-item-btn:focus-visible .lp-galeria-item-overlay { opacity: 1; }

.lp-galeria-item-caption {
    padding: 0 4px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-galeria-item-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--c-azul-oscuro);
}
.lp-galeria-item-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texto-sec);
}

/* Lightbox enriquecido */
.lp-galeria-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(2, 62, 138, .96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 200;
}
.lp-galeria-lightbox.is-open { display: flex; }
.lp-galeria-lightbox-stage {
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: center;
}
.lp-galeria-lightbox-stage img {
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    background: #000;
}
.lp-galeria-lightbox-meta {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-galeria-lightbox-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 18px;
    border: 1.5px solid;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lp-galeria-lightbox-title {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
}
.lp-galeria-lightbox-desc {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
}
.lp-galeria-lightbox-actions {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.lp-galeria-lightbox-counter {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lp-galeria-lightbox-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--c-wa);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    border: 2px solid var(--c-wa-b);
    text-decoration: none;
}
.lp-galeria-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
    z-index: 2;
}
.lp-galeria-lightbox-close:hover { background: rgba(255, 255, 255, .25); }
.lp-galeria-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .25);
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease;
}
.lp-galeria-lightbox-nav:hover { background: rgba(255, 255, 255, .22); }
.lp-galeria-lightbox-nav.prev { left: 24px; }
.lp-galeria-lightbox-nav.next { right: 24px; }

@media (max-width: 900px) {
    .lp-galeria-lightbox-stage {
        grid-template-columns: 1fr;
        max-height: 100%;
        overflow-y: auto;
    }
    .lp-galeria-lightbox-stage img { max-height: 60vh; }
    .lp-galeria-lightbox-title { font-size: 18px; }
    .lp-galeria-lightbox-nav { width: 40px; height: 40px; font-size: 22px; }
    .lp-galeria-lightbox-nav.prev { left: 8px; }
    .lp-galeria-lightbox-nav.next { right: 8px; }
}

/* Versión "on-light" de lp-gallery-link (texto azul sobre fondo claro) */
.lp-gallery-link.lp-on-light { color: var(--c-azul-oscuro); }

/* CTA centrado al final de sección */
.lp-section-cta { margin-top: 24px; text-align: center; }

/* Mapa placeholder */
.lp-map-icon { font-size: 40px; }
.lp-map-hint { font-size: 11px; opacity: .7; }

/* Wrappers de sección con fondo azul-bg y padding superior reducido */
.lp-videos-grid-section,
.lp-galeria-grid-section {
    background: var(--c-azul-bg);
    padding: 24px 0 52px;
}

/* Servicios: precio y CTA */
.lp-svc-precio {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 900;
    color: var(--c-azul-oscuro);
}
.lp-svc-cta-row { margin-top: 14px; }

/* Imagen circular del hero de página/campaña */
.lp-pagina-hero-img {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--c-azul-oscuro);
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 8px 28px rgba(2, 62, 138, 0.3);
}
.lp-pagina-hero-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .lp-pagina-hero-img { width: 200px; height: 200px; border-width: 4px; }
}

/* Vista de detalle de artículo */
.lp-article {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 8px;
}
.lp-article-back {
    color: var(--c-azul-texto);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}
.lp-article-back:hover { text-decoration: underline; }
.lp-article-meta {
    font-size: 11px;
    color: var(--c-azul-texto);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.lp-article h1 {
    font-size: 32px;
    font-family: var(--f-cuerpo);
    font-weight: 900;
    color: var(--c-azul-oscuro);
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.lp-article-hero {
    width: 100%;
    border-radius: 16px;
    margin: 20px 0;
    border: 2px solid var(--c-azul-claro);
}
.lp-article-body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--c-texto);
}
.lp-article-body h2, .lp-article-body h3 {
    font-family: var(--f-cuerpo);
    font-weight: 900;
    color: var(--c-azul-oscuro);
    margin: 28px 0 12px;
    line-height: 1.25;
    letter-spacing: -0.3px;
}
.lp-article-body h2 { font-size: 24px; }
.lp-article-body h3 { font-size: 19px; }
.lp-article-body p { margin-bottom: 14px; }
.lp-article-body ul, .lp-article-body ol { margin: 0 0 14px 24px; }
.lp-article-body li { margin-bottom: 6px; }
.lp-article-body strong, .lp-article-body b { color: var(--c-azul-oscuro); }
.lp-article-body a { color: var(--c-azul-texto); text-decoration: underline; }
.lp-article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }

/* -------------------------------------------------------------
   Responsive (mobile-first overrides)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
    .lp-nav-links { display: none; }
    .lp-nav-toggle { display: flex; }

    .lp-hero {
        flex-direction: column;
        padding: 40px 24px 0;
        text-align: center;
        gap: 24px;
    }
    .lp-hero-visual { order: -1; }
    .lp-hero-logo-img { width: 180px; height: 180px; border-width: 4px; }
    .lp-hero-photo { width: 100%; max-width: 420px; transform: none; }
    .lp-hero-photo:hover { transform: scale(1.02); }
    .lp-hero-h1 { font-size: 36px; }
    .lp-hero-eyebrow { margin: 0 auto 14px; }
    .lp-hero-btns { justify-content: center; }
    .lp-hero-sub { margin-left: auto; margin-right: auto; }

    .lp-stats { grid-template-columns: 1fr; }
    .lp-stat:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--c-azul-claro);
    }

    .lp-services-grid { grid-template-columns: 1fr; }
    .lp-why-grid { grid-template-columns: 1fr; }
    .lp-gallery-grid { grid-template-columns: repeat(2, 1fr); }

    .lp-contact-grid { grid-template-columns: 1fr; }
    .lp-map-box { min-height: 280px; order: -1; }

    .lp-promo { flex-direction: column; align-items: stretch; text-align: center; }
    .lp-promo-text { justify-content: center; }
    .lp-promo-btn { align-self: center; }

    .lp-section-title { font-size: 24px; }
    .lp-gallery-title { font-size: 22px; }

    .lp-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
    .lp-footer-cols .lp-footer-col:first-child { grid-column: 1 / -1; }
    .lp-footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
    .lp-footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .lp-services-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-why-grid { grid-template-columns: repeat(2, 1fr); }
}