/* =================================
   CURSOR-STYLE DESIGN SYSTEM
   Delone Tech — Dark/Light Mode
   ================================= */

/* =================================
   FONTS — Neo Sans Std
   ================================= */
@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neo Sans';
    src: url('/static/fonts/neo-sans-std/Neo Sans Std Bold Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* =================================
   SKIP TO MAIN CONTENT
   ================================= */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: var(--btn-primary-text);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
    transition: top 0.2s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
}

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

/* =================================
   VARIABLES — DARK MODE (default)
   ================================= */
:root {
    /* Backgrounds */
    --bg-primary: #13131f;
    --bg-secondary: #1a1a28;
    --bg-card: #1e1e2c;
    --bg-elevated: #262638;
    --bg-nav: rgba(15, 15, 25, 0.92);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #e0e0ea;
    --text-tertiary: #b0b0c0;

    /* Borders */
    --border-color: #2a2a3c;
    --border-subtle: #20202e;

    /* Accent */
    --accent: #d4762c;
    --accent-hover: #e88535;

    /* Buttons */
    --btn-primary-bg: #ededf0;
    --btn-primary-text: #0f0f19;
    --btn-primary-hover-bg: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #b8b8c4;
    --btn-secondary-border: #333346;
    --btn-secondary-hover-bg: rgba(237, 237, 240, 0.06);

    /* Form */
    --input-bg: #1a1a28;
    --bg-input: #1a1a28;
    --input-border: #2a2a3c;
    --input-focus-border: #d4762c;
    --input-text: #ededf0;
    --input-placeholder: #484860;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.65), 0 4px 16px rgba(0,0,0,0.45);
    --shadow-xl: 0 32px 80px rgba(0,0,0,0.75);

    /* Status */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Logo filter for dark bg */
    --logo-filter: brightness(0) invert(1);

    /* Fonts */
    --font-heading: 'Neo Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Misc */
    --nav-height: 64px;
    --max-width: 1200px;
    --transition: 0.18s ease;
}

/* =================================
   VARIABLES — LIGHT MODE
   ================================= */
[data-theme="light"] {
    --bg-primary: #f5f5f0;
    --bg-secondary: #eae8e1;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-nav: rgba(245, 245, 240, 0.85);

    --text-primary: #13131f;
    --text-secondary: #6a6a60;
    --text-tertiary: #9a9a90;

    --border-color: #d5d3cc;
    --border-subtle: #e5e3dc;

    --accent: #c46d28;
    --accent-hover: #b05e20;

    --btn-primary-bg: #13131f;
    --btn-primary-text: #f5f5f0;
    --btn-primary-hover-bg: #1e1e2c;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #13131f;
    --btn-secondary-border: #d5d3cc;
    --btn-secondary-hover-bg: rgba(19, 19, 31, 0.05);

    --input-bg: #ffffff;
    --bg-input: #ffffff;
    --input-border: #d5d3cc;
    --input-focus-border: #9a9a90;
    --input-text: #13131f;
    --input-placeholder: #9a9a90;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12);

    --color-success-rgb: 34, 197, 94;
    --color-warning-rgb: 245, 158, 11;
    --color-error-rgb: 239, 68, 68;
    --accent-rgb: 196, 109, 40;
    --bg-section: #f7fafc;
    --text-muted: #9a9a90;

    --logo-filter: none;
}

/* =================================
   RESET & BASE
   ================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip en lugar de hidden para no crear contexto de scroll que
       rompa position: sticky en descendientes (reseña de la cortina). */
    overflow-x: clip;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* =================================
   HEADER / NAV — Cursor style
   ================================= */
.header {
    --scroll-progress: 0; /* 0 → 1 actualizado por JS según scrollY */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    padding-top: calc(var(--scroll-progress) * 14px);
    transform: translateY(calc(var(--scroll-progress) * -2px));
    /* No transitions en propiedades conducidas por --scroll-progress:
       el rAF ya interpola suave cada frame, añadir transitions encima
       crea doble-motion y retardo perceptible al hacer scroll. */
    /* La banda .header cubre todo el top del viewport aunque la pill
       visible (.header-inner) esté más estrecha al hacer scroll. Con
       pointer-events:none dejamos pasar clicks en la zona transparente
       a los elementos que haya debajo (ej. flechas del carrusel a la
       altura del nav). Los hijos interactivos restauran pointer-events. */
    pointer-events: none;
}

/* En reposo (navbar sobre el hero) usa las variables invertidas — igual que
   el hero — para que logos, textos y botón CTA contrasten con el fondo del
   hero. Al hacer scroll se vuelve al esquema del tema principal. */
.header:not(.is-scrolled) {
    --bg-primary: #f5f5f0;
    --bg-secondary: #eae8e1;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --text-primary: #13131f;
    --text-secondary: #4a4a44;
    --text-tertiary: #7a7a72;
    --border-color: #d5d3cc;
    --btn-primary-bg: #13131f;
    --btn-primary-text: #f5f5f0;
}

[data-theme="light"] .header:not(.is-scrolled) {
    --bg-primary: #13131f;
    --bg-secondary: #1a1a28;
    --bg-card: #1e1e2c;
    --bg-elevated: #262638;
    --text-primary: #ffffff;
    --text-secondary: #e0e0ea;
    --text-tertiary: #b0b0c0;
    --border-color: #2a2a3c;
    --btn-primary-bg: #ededf0;
    --btn-primary-text: #0f0f19;
}

/* Logo: sobre el hero se muestra el variante opuesto al tema general */
.header:not(.is-scrolled) .logo-icon { display: none; }
.header:not(.is-scrolled) .logo-icon-light {
    display: block;
    filter: brightness(0);
    height: 48px;
}
[data-theme="light"] .header:not(.is-scrolled) .logo-icon { display: block; filter: none; }
[data-theme="light"] .header:not(.is-scrolled) .logo-icon-light { display: none; }

/* Texto del logo (palabras "Delone Tech") también invierte — usa text-primary */
/* (ya se propaga por las variables redefinidas arriba) */

.header-inner {
    /* Restaura clicks dentro de la pill visible del header (el `.header`
       contenedor tiene pointer-events:none para no bloquear los laterales). */
    pointer-events: auto;
    max-width: calc(100% - (var(--scroll-progress) * clamp(16px, 100vw - 980px, 100vw)));
    min-width: fit-content;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    height: calc(var(--nav-height) - (var(--scroll-progress) * 10px));
    display: flex;
    align-items: center;
    gap: 2rem;
    background: color-mix(in srgb, var(--bg-primary) calc(var(--scroll-progress) * 70%), transparent);
    border: 0;
    border-radius: calc(var(--scroll-progress) * 999px);
    box-shadow: none;
    backdrop-filter: blur(calc(var(--scroll-progress) * 18px)) saturate(calc(1 + var(--scroll-progress) * 0.4));
    -webkit-backdrop-filter: blur(calc(var(--scroll-progress) * 18px)) saturate(calc(1 + var(--scroll-progress) * 0.4));
    /* Sin transitions en props conducidas por --scroll-progress — rAF ya
       interpola cada frame. Con transitions encima aparece el efecto
       "goma" / desfase al hacer scroll rápido. */
}

/* Alias de compatibilidad: mantener .is-scrolled como fallback binario */
/* max-width de .header-inner ya se interpola vía --scroll-progress arriba.
   Este override binario se eliminó porque creaba un salto al activarse
   .is-scrolled encima del valor ya interpolado. */

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.logo-icon {
    display: block;
}

.logo-icon-light {
    display: none;
}

[data-theme="light"] .logo-icon {
    display: none;
}

[data-theme="light"] .logo-icon-light {
    display: block;
    filter: brightness(0);
    height: 48px;
}

.logo-text {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
}

.logo-text-primary {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.logo-text-secondary {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap: 0;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a.active {
    color: var(--text-primary);
}

.nav-cta {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-1px);
}

.nav-login {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}

.nav-login:hover {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nav-actions .theme-toggle {
    margin-left: 0;
}

/* Wrapper que agrupa .nav y .nav-actions. En desktop es un layout flex que
   reparte nav centrado + actions a la derecha. En <=1024px se convierte en
   drawer deslizable (ver bloque responsive más abajo). */
.nav-drawer {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1rem;
}

.nav-drawer > .nav {
    flex: 1;
    justify-content: center;
}

/* Backdrop para el drawer móvil. Solo visible cuando body.nav-open. */
.nav-backdrop {
    display: none;
}

body.nav-open {
    overflow: hidden;
}

/* User Menu Dropdown */
.nav-user-menu {
    position: relative;
}

.nav-user-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-primary);
}

.nav-user-button:hover {
    border-color: var(--text-tertiary);
    background: var(--bg-secondary);
}

.nav-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
}

.nav-user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition);
    z-index: 1000;
}

.nav-user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.nav-user-avatar-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.nav-user-details {
    flex: 1;
    min-width: 0;
}

.nav-user-dropdown-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.nav-user-dropdown-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.nav-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all var(--transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.nav-user-dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-user-dropdown-item i {
    width: 16px;
    text-align: center;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
}

/* =================================
   BREADCRUMBS
   ================================= */
.breadcrumbs {
    padding: 1rem 2rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    margin-top: var(--nav-height);
}

.breadcrumbs-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumbs-list li {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.breadcrumbs-list li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
    color: var(--text-tertiary);
}

.breadcrumbs-list a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumbs-list a:hover {
    color: var(--text-primary);
}

.breadcrumbs-list li[aria-current="page"] {
    color: var(--text-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 0.75rem 1rem;
    }
    
    .breadcrumbs-list {
        font-size: 0.8125rem;
    }
}

/* =================================
   SECTION BASE
   ================================= */
.section {
    padding: 0;
    border-radius: 12px;
}

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-header {
    text-align: left;
    max-width: 48rem;
    margin: 0 0 4rem;
}

.section-badge {
    display: inline-block;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* =================================
   FOCUS VISIBLE
   ================================= */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =================================
   BUTTONS — Cursor style
   ================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled,
.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--text-tertiary);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-full {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

/* =================================
   CARDS — Cursor style
   ================================= */
.card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.card:hover {
    border-color: var(--text-tertiary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.icon i {
    font-size: 1.25rem;
}

/* =================================
   FOOTER — Cursor style
   ================================= */
.footer {
    background: var(--bg-primary);
    padding: 4rem 2rem 2rem;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Triángulo apuntando hacia abajo — pintado con el mismo color visual que
   el background del FAQ: color-mix del body bg + 2.5% del text-primary
   (del tema global, no del footer invertido). Usamos solid color composite
   en vez de alpha para que no se mezcle con el fondo claro del footer. */
.footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    /* Dark mode: 97.5% #13131f + 2.5% #ffffff */
    border-top: 22px solid color-mix(in srgb, #ffffff 2.5%, #13131f);
    pointer-events: none;
}

[data-theme="light"] .footer::before {
    /* Light mode: 97.5% #f5f5f0 + 2.5% #13131f */
    border-top-color: color-mix(in srgb, #13131f 2.5%, #f5f5f0);
}

/* =================================
   FOOTER — tema invertido
   En modo oscuro → footer claro. En modo claro → footer oscuro.
   Re-escopa las variables CSS dentro del footer para que todo su
   contenido (texto, enlaces, iconos, theme-toggle…) adopte la paleta
   contraria automáticamente.
   ================================= */

/* Modo oscuro (default): footer con paleta clara */
.footer {
    --bg-primary: #f5f5f0;
    --bg-secondary: #eae8e1;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --text-primary: #13131f;
    --text-secondary: #4a4a44;
    --text-tertiary: #7a7a72;
    --border-color: #d5d3cc;
}

/* Modo claro: footer con paleta oscura */
[data-theme="light"] .footer {
    --bg-primary: #13131f;
    --bg-secondary: #1a1a28;
    --bg-card: #1a1a28;
    --bg-elevated: #20202e;
    --text-primary: #ffffff;
    --text-secondary: #e0e0ea;
    --text-tertiary: #b0b0c0;
    --border-color: #2a2a3c;
}

/* Invertir también qué logo se muestra (la regla base ata el logo al
   data-theme global — en el footer tenemos que flipearla). */
.footer-brand .logo-icon { display: none; }
.footer-brand .logo-icon-light { display: block; filter: brightness(0); }

[data-theme="light"] .footer-brand .logo-icon { display: block; filter: none; }
[data-theme="light"] .footer-brand .logo-icon-light { display: none; }

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-color);
}

.footer-newsletter-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.footer-newsletter-title {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
}

.footer-newsletter-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .footer-newsletter {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: 3rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.footer-brand .logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Reglas de display del logo están definidas arriba, en el bloque
   "FOOTER — tema invertido" (se eligen según el tema inverso). */

.footer-brand .logo-text {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
}

.footer-brand .logo-text-primary {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.footer-brand .logo-text-secondary {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
}

.footer-title {
    color: var(--text-tertiary);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.footer-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--text-secondary);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin: 0;
}

.footer-bottom-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}

.footer-legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-legal-links a:hover {
    color: var(--accent);
}

.footer-legal-links span {
    color: var(--text-tertiary);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.footer-social-link:hover {
    color: var(--accent);
    background: var(--bg-primary);
    border-color: var(--accent);
}

.footer-social-link i {
    font-size: 1.125rem;
}

/* =================================
   THEME TOGGLE — Cursor style
   ================================= */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-radius: 9999px;
    padding: 0.25rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-primary) 55%, transparent);
    font-size: 0.875rem;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    padding: 0;
}

.theme-toggle button:hover:not(.active) {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.theme-toggle button.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.theme-toggle button svg {
    width: 1rem;
    height: 1rem;
}

/* =================================
   ANIMATIONS
   ================================= */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.animate-fade-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-scale.animated {
    opacity: 1;
    transform: scale(1);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.scroll-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.6s ease;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* =================================
   ACCESSIBILITY — FOCUS STATES
   ================================= */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.nav-links a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* Form focus */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px rgba(212, 118, 44, 0.15);
    outline: none;
}

/* =================================
   TESTIMONIALS
   ================================= */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 3.5rem;
    color: var(--border-color);
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-card:hover {
    border-color: var(--text-tertiary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.testimonial-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.testimonial-stars i {
    color: var(--accent);
    font-size: 0.875rem;
}

.testimonial-text,
.testimonial-content {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.testimonial-role {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.testimonial-info strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}

.testimonial-info span {
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

/* Google Reviews */
.google-rating-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.google-logo-svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.google-rating-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.google-stars-large {
    color: #f59e0b;
    font-size: 1.25rem;
    letter-spacing: 1px;
}

.google-rating-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.btn-google-review {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-section);
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.btn-google-review:hover {
    border-color: #4285F4;
    box-shadow: 0 0 0 3px rgba(66,133,244,0.12);
}

.testimonial-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.testimonial-google-stars {
    color: #f59e0b;
    font-size: 1rem;
    letter-spacing: 1px;
}

.testimonial-google-icon {
    opacity: 0.7;
    flex-shrink: 0;
}

/* Sección Google reviews en contacto */
.google-reviews-compact {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    max-width: 700px;
    margin: 3rem auto 0;
    text-align: center;
}

.google-reviews-compact-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.google-reviews-compact-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.google-reviews-compact-stars {
    color: #f59e0b;
    font-size: 1.4rem;
    letter-spacing: 2px;
}

.google-reviews-compact-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

/* =================================
   WHATSAPP FLOATING BUTTON
   ================================= */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
    z-index: 999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float i {
    color: white;
    font-size: 1.75rem;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

.whatsapp-float:hover i {
    transform: rotate(-10deg) scale(1.05);
}

.whatsapp-tooltip {
    position: absolute;
    right: 64px;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--bg-card);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    right: 70px;
}

@keyframes whatsappPulse {
    0% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.5), 0 0 0 8px rgba(37, 211, 102, 0.08); }
    100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); }
}

.whatsapp-float {
    animation: whatsappPulse 3s infinite;
}

.whatsapp-float:hover {
    animation: none;
}

/* =================================
   FLASH MESSAGES
   ================================= */
.flash-message {
    padding: 0.875rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.flash-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.flash-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* =================================
   UTILITY: HIGHLIGHT / CHECK
   ================================= */
.highlight {
    color: var(--accent);
}

.check {
    color: var(--color-success);
    margin-right: 0.5rem;
    font-weight: 600;
}

/* =================================
   RESPONSIVE — SMALL LAPTOP (solo ≤1200px: tipografía y padding reducidos)
   ================================= */
@media (max-width: 1200px) {
    body {
        font-size: 0.9375rem;
    }

    .container {
        padding: 0 1.25rem;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    .section-title {
        font-size: clamp(1.5rem, 3.5vw, 2.25rem);
        margin-bottom: 0.75rem;
    }

    .section-subtitle {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
}

/* =================================
   RESPONSIVE — TABLET / LAPTOP PEQUEÑO (≤1024px: menú hamburguesa + drawer)
   ================================= */
@media (max-width: 1024px) {
    .header-inner {
        padding: 0 1rem;
        gap: 0.75rem;
        justify-content: space-between;
    }

    /* =================================================================
       DRAWER MÓVIL — full-screen overlay con menú centrado, limpio y
       jerárquico. Diseñado para que TODO el contenido quepa sin cortes
       (links + CTA + theme toggle) y con buena tactabilidad.
       ================================================================= */
    .nav-drawer {
        position: fixed;
        top: var(--nav-height);
        right: 0;
        left: 0;
        /* Altura controlada por el contenido — no forzamos bottom:0 porque
           en móviles con barra de URL dinámica cortaba los últimos items.
           `max-height` con `dvh` (dynamic viewport height) limita al área
           realmente visible; si el contenido es más corto, el drawer sólo
           ocupa lo necesario. */
        width: 100%;
        height: auto;
        max-height: calc(100dvh - var(--nav-height));
        background: var(--bg-primary);
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
        box-shadow: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 1.5rem;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(.22,.9,.3,1),
                    opacity 0.25s ease,
                    visibility 0s linear 0.25s;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 999;
    }

    /* Fallback para navegadores sin soporte de dvh (Safari antiguo). */
    @supports not (height: 100dvh) {
        .nav-drawer {
            max-height: calc(100vh - var(--nav-height));
        }
    }

    body.nav-open .nav-drawer,
    .nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(.22,.9,.3,1),
                    opacity 0.25s ease,
                    visibility 0s linear;
    }

    /* Nav: lista de enlaces; el drawer ahora se dimensiona al contenido,
       por lo que no forzamos centrado vertical (que requería alto fijo). */
    .nav-drawer > .nav {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 1.25rem;
    }

    .nav {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.15rem;
        width: 100%;
        margin: 0;
        list-style: none;
        padding: 0;
    }

    .nav-links li {
        width: 100%;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    }
    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 0.25rem;
        width: 100%;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--text-primary);
        border-radius: 0;
        transition: color 0.18s ease, padding-left 0.18s ease;
    }

    .nav-links a::after {
        content: "→";
        font-size: 0.9rem;
        color: var(--text-tertiary);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: transparent;
        color: var(--accent);
        padding-left: 0.5rem;
    }

    .nav-links a:hover::after,
    .nav-links a:focus-visible::after {
        opacity: 1;
        transform: translateX(0);
        color: var(--accent);
    }

    /* Bloque inferior con CTA + theme toggle separado por una línea sutil. */
    .nav-actions {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        width: 100%;
        padding-top: 1.25rem;
        border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    }

    .nav-cta {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0.7rem 1.25rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 9999px;
    }

    /* "Iniciar sesión" oculto en móvil — no es un flujo útil desde el
       drawer en mobile. */
    .nav-login {
        display: none;
    }

    .nav-user-menu {
        width: 100%;
    }

    .nav-user-button {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }

    .nav-user-dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        width: 100%;
        box-shadow: none;
        background: transparent;
        border: none;
        display: none;
    }

    .nav-user-dropdown.active {
        display: block;
    }

    /* Theme toggle: centrado en el drawer con un poco de separación. */
    .nav-actions .theme-toggle {
        align-self: center;
        margin-top: 0.25rem;
    }

    /* Backdrop: sobre el hero, debajo del drawer. Menos opaco porque el
       drawer cubre todo el área. */
    body.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        inset: var(--nav-height) 0 0 0;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 998;
        animation: nav-backdrop-in 0.2s ease;
    }

    @keyframes nav-backdrop-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .logo-img {
        height: 36px;
    }

    .logo-text-primary {
        font-size: 1.125rem;
    }

    .logo-text-secondary {
        font-size: 0.8125rem;
    }

    .mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        order: 999;
    }
}

/* =================================
   RESPONSIVE — MOBILE (ajustes específicos < 768px)
   ================================= */
@media (max-width: 768px) {
    .logo-img {
        height: 32px;
    }

    .section {
        padding: 4rem 1.5rem;
    }

    .footer-grid {
        /* Móvil: marca y servicios a fila completa; empresa y contacto
           comparten la misma fila en 2 columnas. */
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand,
    .footer-grid > div:nth-of-type(2) {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-bottom-left {
        flex-direction: column;
        gap: 0.5rem;
    }

    .footer-brand .logo-img {
        height: 32px;
    }

    .footer-brand .logo-text-primary {
        font-size: 1.125rem;
    }

    .footer-brand .logo-text-secondary {
        font-size: 0.8125rem;
    }

    .whatsapp-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }

    .whatsapp-float i {
        font-size: 1.5rem;
    }

    .whatsapp-tooltip {
        display: none;
    }
}

@media (max-width: 480px) {
    .footer-legal-links {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .footer-legal-links span[aria-hidden] {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =================================
   LEGAL PAGES
   ================================= */
/* Mini-hero al principio de cada página legal: reproduce el fondo del
   hero del landing (beige en dark / azul oscuro en light) para que el
   header flote encima en su estado "no scrolled" con los mismos colores
   invertidos que en el index. Al hacer scroll, el header se compacta. */
.legal-hero {
    background: #f5f5f0;
    color: #13131f;
    padding: calc(var(--nav-height) + 3.5rem) 2rem 2.5rem;
}

[data-theme="light"] .legal-hero {
    background: #13131f;
    color: #ffffff;
}

.legal-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.legal-hero-breadcrumbs {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-bottom: 1rem;
}

.legal-hero-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.legal-hero-breadcrumbs a:hover { text-decoration: underline; }

.legal-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: inherit;
}

.legal-hero-updated {
    font-size: 0.875rem;
    opacity: 0.7;
    margin: 0;
}

.legal-section {
    padding: 4rem 0;
    min-height: 60vh;
}

.legal-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.legal-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.legal-updated {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-content {
    line-height: 1.8;
    color: var(--text-primary);
}

.legal-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.legal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.legal-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.legal-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.legal-content a {
    color: var(--accent);
    text-decoration: underline;
    transition: color var(--transition);
}

.legal-content a:hover {
    color: var(--accent-hover);
}

.legal-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.legal-table th,
.legal-table td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--border-color);
}

.legal-table th {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
}

.legal-table td {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.legal-table tr:nth-child(even) td {
    background: var(--bg-primary);
}

.legal-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    border-radius: 0.5rem;
}

.legal-note p {
    margin-bottom: 0.75rem;
}

.legal-note ul {
    margin-top: 0.5rem;
}

/* =================================
   COOKIE BANNER
   ================================= */
.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    backdrop-filter: blur(2px);
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    padding: 1.5rem;
    max-width: 100%;
}

.cookie-banner-content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cookie-banner-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.cookie-banner-text p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.cookie-banner-links {
    margin-top: 0.5rem;
}

.cookie-banner-links a {
    color: var(--accent);
    text-decoration: underline;
    font-size: 0.875rem;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    flex: 1;
    min-width: 120px;
}

.cookie-btn-accept {
    background: var(--accent);
    color: var(--btn-primary-text);
}

.cookie-btn-accept:hover {
    background: var(--accent-hover);
}

.cookie-btn-reject {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.cookie-btn-reject:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.cookie-btn-configure {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.cookie-btn-configure:hover {
    background: var(--bg-card);
}

.cookie-btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.cookie-btn-secondary:hover {
    background: var(--bg-card);
}

/* Cookie Settings Panel */
.cookie-settings {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.cookie-settings-content {
    padding: 2rem;
}

.cookie-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.cookie-settings-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cookie-settings-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color var(--transition);
}

.cookie-settings-close:hover {
    color: var(--text-primary);
}

.cookie-settings-body {
    margin-bottom: 1.5rem;
}

.cookie-category {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.cookie-category-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.cookie-category-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* Cookie Switch Toggle */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: var(--transition);
    border-radius: 26px;
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-card);
    transition: var(--transition);
    border-radius: 50%;
}

.cookie-switch input:checked + .cookie-slider {
    background-color: var(--accent);
}

.cookie-switch input:checked + .cookie-slider:before {
    transform: translateX(24px);
}

.cookie-switch input:disabled + .cookie-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-settings-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .cookie-banner {
        padding: 1rem;
    }

    .cookie-banner-content {
        gap: 1rem;
    }

    .cookie-banner-actions {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
    }

    .cookie-settings {
        width: 95%;
        max-height: 85vh;
    }

    .cookie-settings-content {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .legal-section {
        padding: 2rem 0;
    }

    .legal-inner {
        padding: 0 1rem;
    }

    .legal-section h1 {
        font-size: 2rem;
    }

    .legal-content h2 {
        font-size: 1.5rem;
    }

    .legal-content h3 {
        font-size: 1.125rem;
    }
}

/* =================================
   REDUCED MOTION
   ================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .whatsapp-float {
        animation: none;
    }
}

/* =================================
   HERO SCROLL INDICATOR
   ================================= */
.dapps-hero-scroll {
    margin-top: 3.5rem;
    display: flex;
    justify-content: center;
}

.dapps-scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: dappsScrollLine 2s ease-in-out infinite;
}

@keyframes dappsScrollLine {
    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    40% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    60% { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 480px) {
    .dapps-hero-scroll {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dapps-scroll-line { animation: none; }
}

/* =================================
   HIGH CONTRAST
   ================================= */
@media (prefers-contrast: high) {
    :root {
        --border-color: #444440;
    }

    .card,
    .testimonial-card {
        border-width: 2px;
    }

    .btn-secondary {
        border-width: 2px;
    }
}

/* =================================
   COMPONENTE: HERO ROTATING WORD + TYPEWRITER CURSOR
   ================================= */
.hero-rotating-wrap {
    display: inline-block;
    width: 16ch;
    min-width: 16ch;
    max-width: 16ch;
    height: 1.85em;
    text-align: center;
    vertical-align: bottom;
    overflow: visible;
}

.hero-rotating-wrap--left {
    text-align: left;
}

.hero-rotating-word {
    background: linear-gradient(135deg, var(--accent) 0%, #f5a551 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
    position: relative;
    z-index: 1;
    font-size: 1.6em;
    line-height: 1.15;
    transition: opacity 0.4s ease;
    display: inline-block;
    min-height: 1.15em;
    vertical-align: middle;
    padding-right: 0.1em;
    padding-bottom: 0.15em;
}

.hero-rotating-word.is-changing {
    opacity: 0;
}

.hero-typewriter-cursor {
    font-family: var(--font-heading);
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
    font-style: italic;
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.15;
    vertical-align: middle;
    display: inline-block;
    transform: skewX(-12deg);
    animation: hero-cursor-blink 0.9s step-end infinite;
    margin-left: 6px;
}

@keyframes hero-cursor-blink {
    50% { opacity: 0; }
}

/* =================================
   NEWSLETTER FORM (global, todas las páginas)
   Sigue el sistema de diseño: tipografía heading, accent #d4762c,
   bordes suaves y botón pill tipo .lp-btn / .nav-cta.
   ================================= */
.nl-form {
    --nl-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

/* ── Variante CARD (final de artículo, listado del blog) ─── */
.nl-form--card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--nl-radius);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin: 3rem 0 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Acento degradado sutil arriba — solo en .card */
.nl-form--card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
}

.nl-card-head {
    margin-bottom: 1.25rem;
}

.nl-eyebrow {
    display: inline-block;
    font-family: var(--font-body, inherit);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.nl-title {
    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.nl-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}

/* ── Input + botón ───────────────────────────────────────── */
.nl-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.nl-row input[type="email"] {
    flex: 1 1 240px;
    min-height: 48px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    background: var(--bg-elevated, var(--bg-card, var(--bg-primary)));
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.nl-row input[type="email"]::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

.nl-row input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.nl-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    min-height: 48px;
    background: var(--accent);
    color: #ffffff;
    border: 1px solid var(--accent);
    border-radius: 9999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.nl-submit:hover:not(:disabled) {
    background: var(--accent-hover, var(--accent));
    border-color: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.nl-submit:active:not(:disabled) {
    transform: translateY(0);
}

.nl-submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 2px;
}

.nl-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.nl-submit i, .nl-submit svg {
    transition: transform var(--transition);
}

.nl-submit:hover:not(:disabled) i,
.nl-submit:hover:not(:disabled) svg {
    transform: translateX(2px);
}

/* ── Texto de privacidad y feedback ───────────────────────── */
.nl-fineprint {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0;
    line-height: 1.5;
}

.nl-feedback {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 1.2em;
}

.nl-feedback.is-success { color: #16a34a; }
.nl-feedback.is-error { color: #dc2626; }

/* ── Variante INLINE (footer global, sidebar) ─────────────── */
.nl-form--inline {
    background: transparent;
    padding: 0;
    margin: 0;
}

.nl-form--inline .nl-fineprint {
    font-size: 0.72rem;
}

.nl-form--inline .nl-row input[type="email"] {
    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
}

@media (max-width: 600px) {
    .nl-row { gap: 0.4rem; }
    .nl-row input[type="email"], .nl-submit {
        width: 100%;
        flex: 1 1 100%;
    }
}


/* =================================
   WHATSAPP FLOTANTE
   ================================= */
.wa-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-float svg { width: 30px; height: 30px; color: #ffffff; position: relative; z-index: 2; }
.wa-float:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.55); }
.wa-float-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; opacity: 0;
    animation: waPulse 8s ease-out infinite; z-index: 1;
}
@keyframes waPulse {
    0%, 80% { transform: scale(1); opacity: 0; }
    85% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float-pulse { animation: none; opacity: 0; } }
@media (max-width: 600px) {
    .wa-float { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
    .wa-float svg { width: 26px; height: 26px; }
}

/* =================================
   MINI-AUDIT FORM
   ================================= */
.ma-form { --ma-radius: 1rem; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.ma-form--card, .ma-form--popup {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--ma-radius);
    padding: clamp(1.5rem, 3vw, 2rem);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.ma-form--card::before, .ma-form--popup::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
}
.ma-card-head { margin-bottom: 1rem; }
.ma-eyebrow {
    display: inline-block; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    padding: 0.25rem 0.7rem; border-radius: 9999px; margin-bottom: 0.75rem;
}
.ma-title {
    font-family: var(--font-heading); font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700; color: var(--text-primary); line-height: 1.25;
    margin: 0 0 0.5rem; letter-spacing: -0.02em;
}
.ma-subtitle {
    font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6;
    margin: 0 0 0.85rem; max-width: 56ch;
}
.ma-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ma-bullets li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-secondary); }
.ma-bullets li i { color: var(--accent); margin-top: 3px; }
.ma-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ma-form input[type="email"], .ma-form input[type="url"], .ma-form input[type="text"], .ma-form textarea {
    min-height: 44px; padding: 0.6rem 0.85rem; border: 1px solid var(--border-color);
    border-radius: 0.5rem; background: var(--bg-elevated, var(--bg-card)); color: var(--text-primary);
    font-size: 0.95rem; font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}
.ma-form textarea { resize: vertical; min-height: 64px; }
.ma-form input:focus, .ma-form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ma-input-name, .ma-input-notes { margin-top: 0.5rem; }
.ma-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem; min-height: 48px; background: var(--accent); color: #fff;
    border: 1px solid var(--accent); border-radius: 9999px; font-family: inherit;
    font-weight: 600; font-size: 0.95rem; cursor: pointer;
    transition: all var(--transition); margin-top: 0.5rem;
}
.ma-submit:hover:not(:disabled) {
    background: var(--accent-hover, var(--accent)); transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
}
.ma-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ma-fineprint { font-size: 0.78rem; color: var(--text-tertiary); margin: 0.25rem 0 0; line-height: 1.5; }
.ma-feedback { margin: 0.25rem 0 0; font-size: 0.875rem; min-height: 1.2em; }
.ma-feedback.is-success { color: #16a34a; }
.ma-feedback.is-error { color: #dc2626; }
@media (max-width: 600px) { .ma-row { grid-template-columns: 1fr; } }

/* =================================
   EXIT-INTENT POPUP
   ================================= */
.ma-popup { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.ma-popup.is-open { display: flex; }
.ma-popup-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); }
.ma-popup-card { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; border-radius: 1rem; z-index: 1; }
.ma-popup-card .ma-form--popup { margin: 0; border-radius: 1rem; }
.ma-popup-close {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: var(--bg-secondary); color: var(--text-secondary);
    font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
}
.ma-popup-close:hover { background: var(--bg-elevated, var(--bg-card)); color: var(--text-primary); }

/* =================================
   MINI-AUDIT LANDING
   ================================= */
.ma-landing-grid {
    max-width: var(--max-width, 1200px); margin: 3rem auto; padding: 0 2rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.ma-landing-col--info h2 {
    font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
    color: var(--text-primary); margin: 1.5rem 0 0.75rem; letter-spacing: -0.02em;
}
.ma-landing-col--info h2:first-child { margin-top: 0; }
.ma-landing-bullets {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.ma-landing-bullets li {
    display: grid; grid-template-columns: 24px 1fr; gap: 0.75rem;
    color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55;
}
.ma-landing-bullets li i { color: var(--accent); margin-top: 4px; }
.ma-case-link {
    display: block; background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 0.75rem; padding: 1rem; text-decoration: none; color: var(--text-primary);
    transition: border-color var(--transition); margin-top: 0.75rem;
}
.ma-case-link:hover { border-color: var(--accent); }
.ma-case-link strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; }
.ma-case-link span { display: block; font-size: 0.85rem; color: var(--text-secondary); }
.ma-case-link-arrow { color: var(--accent); font-size: 0.85rem; font-weight: 600; margin-top: 0.5rem; }
@media (max-width: 800px) { .ma-landing-grid { grid-template-columns: 1fr; gap: 2rem; padding: 0 1rem; } }

/* =================================
   CASE STUDY DETAIL
   ================================= */
.case-page .article-hero { background: linear-gradient(160deg, #0a0a14 0%, #13131f 50%, #0a0a14 100%); }
.case-layout { max-width: 880px; margin: 0 auto; padding: 3rem 2rem 5rem; }
.case-results { margin: 0 0 3rem; }
.case-results-heading {
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;
    color: var(--text-primary); margin: 0 0 1.25rem; letter-spacing: -0.02em;
}
.case-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.case-metric { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; text-align: center; }
.case-metric--big { padding: 1.5rem 1rem; }
.case-metric-value {
    font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 1;
}
.case-metric-label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.5rem; }
.case-metric-note { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.35rem; font-style: italic; }
.case-metrics-row { display: flex; gap: 1.5rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }
.case-metrics-row .case-metric { flex: 1 1 100px; background: transparent; border: 0; padding: 0; text-align: left; }
.case-metrics-row .case-metric-value { font-size: 1.5rem; }
.case-metrics-row .case-metric-label { margin-top: 0.15rem; }
.case-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 3rem; }
.case-ba-figure { margin: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.75rem; overflow: hidden; }
.case-ba-figure figcaption {
    padding: 0.5rem 0.85rem; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.case-ba-figure img { display: block; width: 100%; height: auto; }
.case-narrative h2 { font-family: var(--font-heading); font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--text-primary); }
.case-quote {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
    border-left: 4px solid var(--accent);
    padding: 1.5rem; margin: 2.5rem 0; border-radius: 0 0.75rem 0.75rem 0;
}
.case-quote p { font-family: var(--font-heading); font-size: 1.15rem; font-style: italic; line-height: 1.55; color: var(--text-primary); margin: 0 0 0.75rem; }
.case-quote footer { font-size: 0.875rem; color: var(--text-secondary); }
.case-tools-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; }
.case-tools-list li {
    padding: 0.3rem 0.75rem; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 9999px;
    font-size: 0.85rem; color: var(--text-secondary);
}
@media (max-width: 700px) { .case-ba { grid-template-columns: 1fr; } .case-layout { padding: 2rem 1rem 4rem; } }

/* =================================
   REFERIDOS LANDING — form & FAQ (resto usa lp-page-* base)
   ================================= */
.ref-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 720px;
    margin: 0 auto;
}
.ref-fieldset { border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.ref-fieldset legend {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent); padding: 0 0.5rem;
}
.ref-fieldset label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.85rem; }
.ref-fieldset label span em { color: var(--accent); font-style: normal; }
.ref-fieldset input, .ref-fieldset textarea {
    margin-top: 0.35rem; width: 100%; padding: 0.7rem 0.95rem;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-elevated, var(--bg-card)); color: var(--text-primary);
    font-size: 0.95rem; font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.ref-fieldset input:focus, .ref-fieldset textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.ref-radio-group { display: flex; flex-direction: column; gap: 0.6rem; }
.ref-radio {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.1rem;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 10px; cursor: pointer; font-size: 0.95rem; color: var(--text-secondary);
    transition: all 0.18s;
}
.ref-radio input[type="radio"] { width: auto; accent-color: var(--accent); }
.ref-radio:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text-primary);
}
.ref-feedback { margin: 1rem 0 0; text-align: center; font-size: 0.9rem; min-height: 1.2em; }
.ref-feedback.is-success { color: #16a34a; }
.ref-feedback.is-error { color: #dc2626; }
@media (max-width: 700px) {
    .ref-row { grid-template-columns: 1fr; }
}

/* =================================
   STEP CARD (referidos cómo funciona) y FAQ-mini reutilizable
   ================================= */
.lp-step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.lp-step-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}
.lp-step-card-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}
.lp-step-card h3 {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.lp-step-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.lp-faq-mini {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.lp-faq-mini details {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.lp-faq-mini summary {
    padding: 1rem 1.25rem;
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.lp-faq-mini summary::-webkit-details-marker { display: none; }
.lp-faq-mini summary::after {
    content: "+";
    color: var(--accent);
    font-size: 1.25rem;
    transition: transform 0.2s;
}
.lp-faq-mini details[open] summary::after { transform: rotate(45deg); }
.lp-faq-mini-body {
    padding: 0 1.25rem 1.1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =================================
   INSTAGRAM LANDING
   ================================= */
body.ig-landing-body {
    background: linear-gradient(160deg, #0a0a14 0%, #13131f 50%, #0a0a14 100%);
    color: #ffffff; min-height: 100vh;
}
.ig-landing { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem; }
.ig-hero { padding: 2rem 0; text-align: center; }
.ig-hero-top {
    display: flex; align-items: center; justify-content: center; gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.ig-logo {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: #fff; text-decoration: none; font-size: 1rem;
}
.ig-logo-img { height: 32px; }
.ig-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 9999px;
    font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85);
}
.ig-headline {
    font-family: var(--font-heading); font-size: clamp(1.85rem, 6vw, 2.5rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
    color: #fff; margin: 0 0 0.85rem;
}
.ig-headline em { font-style: italic; color: #d4762c; }
.ig-sub { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0 0 1.5rem; }
.ig-cta-row { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.5rem; }
.ig-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.5rem; border-radius: 9999px; font-weight: 600;
    text-decoration: none; transition: all 0.2s ease; min-height: 50px;
}
.ig-btn--primary { background: #d4762c; color: #fff; border: 1px solid #d4762c; }
.ig-btn--primary:hover { background: #e88535; transform: translateY(-1px); }
.ig-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.ig-btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
.ig-team {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-size: 0.85rem; color: rgba(255,255,255,0.7);
}
.ig-team picture, .ig-team img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.2);
}
.ig-team picture:nth-child(2) { margin-left: -10px; }
.ig-services { padding: 2rem 0; }
.ig-section-title {
    font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
    color: #fff; margin: 0 0 1.25rem; letter-spacing: -0.02em;
}
.ig-services-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.ig-service {
    display: block; padding: 1.25rem; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem;
    color: #fff; text-decoration: none; transition: border-color 0.2s, transform 0.2s;
}
.ig-service:hover { border-color: rgba(212,118,44,0.5); transform: translateY(-2px); }
.ig-service-price { font-size: 0.78rem; font-weight: 600; color: #d4762c; margin-bottom: 0.4rem; }
.ig-service h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 0.4rem; color: #fff; }
.ig-service p { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0 0 0.6rem; line-height: 1.5; }
.ig-service-arrow { font-size: 0.85rem; color: #d4762c; font-weight: 600; }
.ig-service--all { border-style: dashed; text-align: center; }
.ig-case { padding: 2rem 0; }
.ig-case-eyebrow {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: #d4762c; margin-bottom: 0.75rem; display: block;
}
.ig-case-card {
    display: block; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem;
    overflow: hidden; text-decoration: none; color: #fff;
}
.ig-case-card img { display: block; width: 100%; height: 200px; object-fit: cover; }
.ig-case-body { padding: 1.25rem; }
.ig-case-body h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 0.5rem; color: #fff; }
.ig-case-body p { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0 0 1rem; }
.ig-case-metrics { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ig-case-metrics > div { flex: 1 1 80px; }
.ig-case-metrics strong {
    display: block; font-family: var(--font-heading); font-size: 1.4rem;
    color: #d4762c; line-height: 1;
}
.ig-case-metrics span { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 0.25rem; display: block; }
.ig-case-link { color: #d4762c; font-size: 0.9rem; font-weight: 600; }
.ig-magnet { padding: 2rem 0; }
.ig-magnet .ma-form--card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #fff; }
.ig-magnet .ma-title { color: #fff; }
.ig-magnet .ma-subtitle { color: rgba(255,255,255,0.7); }
.ig-magnet .ma-form input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; }
.ig-magnet .ma-fineprint { color: rgba(255,255,255,0.55); }
.ig-footer { padding: 2rem 0 1rem; text-align: center; color: rgba(255,255,255,0.65); font-size: 0.85rem; }
.ig-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.ig-footer a:hover { color: #d4762c; }
.ig-footer-credit { margin-top: 0.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.45); }




/* =================================
   LP-PAGE SYSTEM
   Sistema de página interna alineado con el index (Space Grotesk display,
   acento cursiva, hero invertido, secciones espaciadas). Sin el grid de
   verticales del .lp-page-grid del index — ese se queda en la home.
   ================================= */

/* Acento en cursiva (utilidad reusable: home + páginas internas) */
.lp-accent-italic {
    color: var(--accent);
    font-style: italic;
    font-weight: 600;
}

.lp-page {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
}

.lp-page-container {
    /* Columna central estrecha — todas las páginas internas (.lp-page) usan
       una "lectura única" más enfocada que los 1200px del index. Cuando el
       container vive dentro de .lp-has-grid (= envuelto por raíles tipo
       index), el override en index.css lo ensancha al ancho entre raíles. */
    max-width: 760px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
}

/* Excepción: el hero de auditoría es 2-col (copy izq + form der) y necesita
   ancho completo para no apretar el formulario. */
.lp-page--audit .lp-page-hero .lp-page-container {
    max-width: 1200px;
}

/* Breadcrumb minimal en hero */
.lp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.lp-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.18s ease;
}
.lp-breadcrumb a:hover { color: var(--text-primary); }
.lp-breadcrumb span[aria-current] { color: var(--text-primary); font-weight: 500; }
.lp-breadcrumb span[aria-hidden] { color: var(--text-tertiary); }

/* ── HERO INVERTIDO (oscuro en light theme, igual que el .lp-hero del index) ── */
.lp-page-hero {
    --bg-primary: #f5f5f0;
    --text-primary: #13131f;
    --text-secondary: #4a4a44;
    --text-tertiary: #7a7a72;
    --border-color: #d5d3cc;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;

    position: relative;
    padding: calc(var(--nav-height, 64px) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 6rem);
    color: var(--text-primary);
    overflow: hidden;
    isolation: isolate;
}

.lp-page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(at 50% 50%, rgba(0, 0, 0, 0.04), transparent 70%),
        linear-gradient(160deg, #f4efe6 0%, #eae4d5 50%, #f4efe6 100%);
}

[data-theme="light"] .lp-page-hero {
    --bg-primary: #13131f;
    --text-primary: #ffffff;
    --text-secondary: #e0e0ea;
    --text-tertiary: #b0b0c0;
    --border-color: #2a2a3c;
    --bg-card: #1e1e2c;
    --bg-elevated: #262638;
}

[data-theme="light"] .lp-page-hero-bg {
    background:
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.04), transparent 70%),
        linear-gradient(160deg, #0a0a14 0%, #0d0d1c 50%, #0a0a14 100%);
}

/* Halo de acento estático en el hero */
.lp-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 30% at 25% 25%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
        radial-gradient(35% 30% at 75% 70%, color-mix(in srgb, #6b7ae6 7%, transparent) 0%, transparent 55%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

/* Grid 2 col: copy izq, form/aside der */
.lp-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.lp-page-hero-grid--single {
    grid-template-columns: 1fr;
    max-width: 880px;
}

.lp-page-hero-copy { min-width: 0; }

/* Eyebrow estilo index */
.lp-page-hero .lp-eyebrow,
.lp-page-section .lp-eyebrow {
    display: inline-block;
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.25rem;
}

.lp-page-hero .lp-eyebrow::before,
.lp-page-section .lp-eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 0.75rem;
}

/* Título grande (display) */
.lp-page-title {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}

.lp-page-title-md {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.lp-page-lead {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 56ch;
    margin: 0 0 2rem;
}

/* Checklist en hero */
.lp-page-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.lp-page-checklist li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}
.lp-page-checklist li i {
    color: var(--accent);
    margin-top: 4px;
    font-size: 1.1rem;
}

/* Aside del hero (form, etc.) */
.lp-page-hero-form {
    min-width: 0;
}

/* Dentro del hero, las cards (.ma-form--card, .nl-form--card) heredan
   las vars locales del hero (claras en dark theme, oscuras en light theme). */
.lp-page-hero-form .ma-form--card,
.lp-page-hero-form .nl-form--card {
    margin: 0;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.18);
}

@media (max-width: 880px) {
    .lp-page-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── SECCIONES ── */
.lp-page-section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* Si la sección lleva su banda meta al inicio (horizontales discontinuas +
   cuadrados diagonales en las esquinas, igual que el index), el padding
   superior se elimina para que la banda quede pegada al borde. La banda ya
   trae su propio `margin-bottom` que separa del contenido. */
section:has(> .lp-section-meta:first-child) {
    padding-top: 0;
}

.lp-page-section--alt {
    background: var(--bg-secondary);
}

.lp-page-section-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    max-width: 760px;
}

.lp-page-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lp-page-section-sub {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
}

/* Feature grid 4 columnas */
.lp-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.lp-feature {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.lp-feature:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}

.lp-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.lp-feature h3 {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.lp-feature p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* Caso destacado — card horizontal */
.lp-feature-case {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-feature-case:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.lp-feature-case-img {
    overflow: hidden;
    min-height: 260px;
}

.lp-feature-case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.lp-feature-case:hover .lp-feature-case-img img { transform: scale(1.04); }

.lp-feature-case-body {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lp-feature-case-sector {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.65rem;
}

.lp-feature-case-body h3 {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
}

.lp-feature-case-body p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.lp-feature-case-metrics {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.lp-feature-case-metrics > div {
    flex: 0 1 auto;
}
.lp-feature-case-metrics strong {
    display: block;
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
}
.lp-feature-case-metrics span {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    display: block;
}

.lp-feature-case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap 0.2s;
}

.lp-feature-case:hover .lp-feature-case-link { gap: 0.75rem; }

@media (max-width: 760px) {
    .lp-feature-case { grid-template-columns: 1fr; }
    .lp-feature-case-img { min-height: 200px; max-height: 240px; }
}

/* ── CTA card final ── */
.lp-page-cta-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.lp-page-cta-card h2 {
    font-family: 'Space Grotesk', var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.lp-page-cta-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.75rem;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

/* ── Botones lp- (replicados aquí mínimos) ── */
.lp-page .lp-btn,
.lp-page-cta-card .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Space Grotesk', var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.lp-page .lp-btn-primary,
.lp-page-cta-card .lp-btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 65%, transparent);
}

.lp-page .lp-btn-primary:hover,
.lp-page-cta-card .lp-btn-primary:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}

.lp-page .lp-btn-secondary,
.lp-page-cta-card .lp-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.lp-page .lp-btn-secondary:hover {
    border-color: var(--text-primary);
}

.lp-page .lp-btn-lg {
    padding: 1rem 1.85rem;
    font-size: 1rem;
}

/* ── Responsive: breadcrumb más compacto ── */
@media (max-width: 600px) {
    .lp-breadcrumb { font-size: 0.8rem; margin-bottom: 1.25rem; }
    .lp-page-hero-grid { gap: 2rem; }
}


/* =================================
   CASOS — grid + cards
   ================================= */
.lp-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.lp-case-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.lp-case-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    box-shadow: var(--shadow-lg);
}

.lp-case-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-secondary);
}

.lp-case-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.lp-case-card:hover .lp-case-card-img img { transform: scale(1.04); }

.lp-case-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 3rem;
    opacity: 0.25;
}

.lp-case-card-sector {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.3rem 0.7rem;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 9999px;
    backdrop-filter: blur(6px);
}

.lp-case-card-body {
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lp-case-card-body h3 {
    font-family: "Space Grotesk", var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 0.5rem;
}

.lp-case-card-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 1rem;
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-case-card-metric {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.lp-case-card-metric strong {
    font-family: "Space Grotesk", var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.lp-case-card-metric span {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.lp-case-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.lp-case-card-footer i { color: var(--accent); transition: transform 0.2s; }

.lp-case-card:hover .lp-case-card-footer i { transform: translateX(3px); }

/* Empty state */
.lp-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-tertiary);
}

.lp-empty-state i {
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.3;
    margin-bottom: 1rem;
    display: block;
}

.lp-empty-state p {
    margin: 0;
    font-size: 1rem;
}


/* =================================
   CASE DETAIL — hero con cover, results, prose, quote
   ================================= */
.lp-case-hero {
    position: relative;
    min-height: 60vh;
    height: 60vh;
    max-height: 640px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(160deg, #0a0a14 0%, #0d0d1c 50%, #0a0a14 100%);
    color: #ffffff;
    isolation: isolate;
}

.lp-case-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 30% at 25% 25%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
        radial-gradient(35% 30% at 75% 70%, color-mix(in srgb, #6b7ae6 7%, transparent) 0%, transparent 55%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.lp-case-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: calc(var(--nav-height, 64px) + 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.lp-eyebrow--on-dark {
    color: #d4762c !important;
}
.lp-eyebrow--on-dark::before {
    background: #d4762c !important;
}

.lp-page-title--on-dark {
    color: #ffffff !important;
}

.lp-page-lead--on-dark {
    color: rgba(255, 255, 255, 0.85) !important;
}

.lp-breadcrumb--on-dark a { color: rgba(255, 255, 255, 0.7); }
.lp-breadcrumb--on-dark a:hover { color: #ffffff; }
.lp-breadcrumb--on-dark span[aria-current] { color: #ffffff; }
.lp-breadcrumb--on-dark span[aria-hidden] { color: rgba(255, 255, 255, 0.4); }

.lp-case-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.75rem;
}

.lp-case-hero-meta i { color: #d4762c; }
.lp-meta-sep { color: rgba(255, 255, 255, 0.35); }

@media (max-width: 700px) {
    .lp-case-hero { height: 50vh; min-height: 420px; }
}

/* Results grid */
.lp-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.lp-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: border-color 0.2s ease;
}

.lp-result-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}

.lp-result-value {
    font-family: "Space Grotesk", var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.lp-result-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.lp-result-note {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 0.65rem;
    font-style: italic;
    line-height: 1.4;
}

/* Before/After */
.lp-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.lp-ba-figure {
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.lp-ba-figure figcaption {
    padding: 0.6rem 1rem;
    font-family: "Space Grotesk", var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.lp-ba-figure img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 700px) { .lp-ba-grid { grid-template-columns: 1fr; } }

/* Narrativa (prose) */
.lp-case-narrative {
    max-width: 760px;
    margin: 0 auto;
}

.lp-case-prose {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

.lp-case-prose p { margin: 0 0 1.25rem; }
.lp-case-prose p:last-child { margin-bottom: 0; }
.lp-case-prose code {
    background: var(--bg-secondary);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.lp-case-tools {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.lp-case-tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.lp-case-tools-list li {
    padding: 0.4rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: "Space Grotesk", var(--font-heading);
}

/* Quote estilo automaze */
.lp-case-quote {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: var(--bg-card);
    border-left: 4px solid var(--accent);
    border-radius: 0 16px 16px 0;
    position: relative;
}

.lp-case-quote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 1.5rem;
    font-family: "Space Grotesk", var(--font-heading);
    font-size: 5rem;
    color: var(--accent);
    line-height: 1;
    opacity: 0.4;
}

.lp-case-quote p {
    font-family: "Space Grotesk", var(--font-heading);
    font-size: clamp(1.15rem, 1.75vw, 1.4rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

.lp-case-quote footer {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.lp-case-quote footer strong {
    color: var(--text-primary);
    font-family: "Space Grotesk", var(--font-heading);
}

/* =================================
   SCROLL REVEAL ANIMATIONS
   Shared across internal pages
   ================================= */

/* Base: hidden state */
.lp-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid children */
.lp-reveal-d1 { transition-delay: 0.08s; }
.lp-reveal-d2 { transition-delay: 0.16s; }
.lp-reveal-d3 { transition-delay: 0.24s; }
.lp-reveal-d4 { transition-delay: 0.32s; }
.lp-reveal-d5 { transition-delay: 0.40s; }
.lp-reveal-d6 { transition-delay: 0.48s; }

/* Slide from left */
.lp-reveal--left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.lp-reveal--right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up from small */
.lp-reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lp-reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Hero text entrance */
.lp-hero-anim .lp-eyebrow,
.lp-hero-anim .lp-page-title,
.lp-hero-anim .lp-page-lead,
.lp-hero-anim .lp-page-checklist,
.lp-hero-anim .lp-btn {
    opacity: 0;
    transform: translateY(30px);
    animation: lp-hero-entrance 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.lp-hero-anim .lp-eyebrow       { animation-delay: 0.1s; }
.lp-hero-anim .lp-page-title    { animation-delay: 0.2s; }
.lp-hero-anim .lp-page-lead     { animation-delay: 0.35s; }
.lp-hero-anim .lp-page-checklist{ animation-delay: 0.45s; }
.lp-hero-anim .lp-btn           { animation-delay: 0.5s; }

@keyframes lp-hero-entrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero form slide-in from right */
.lp-hero-anim .lp-page-hero-form {
    opacity: 0;
    transform: translateX(40px);
    animation: lp-hero-form-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}
@keyframes lp-hero-form-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Section head reveal */
.lp-page-section-head.lp-reveal {
    transform: translateY(25px);
}

/* CTA card pulse glow on reveal */
.lp-page-cta-card.lp-reveal.is-visible {
    animation: lp-cta-glow 2s ease 0.6s;
}
@keyframes lp-cta-glow {
    0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
    50% { box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 20%, transparent); }
}

/* Feature cards lift on hover (enhanced) */
.lp-feature.lp-reveal,
.lp-step-card.lp-reveal {
    will-change: transform, opacity;
}

/* FAQ accordion smooth open */
.lp-faq-mini details[open] summary ~ .lp-faq-mini-body {
    animation: lp-faq-open 0.35s ease;
}
@keyframes lp-faq-open {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Counter value emphasis on count complete */
@keyframes lp-counter-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lp-reveal,
    .lp-reveal--left,
    .lp-reveal--right,
    .lp-reveal--scale,
    .lp-hero-anim .lp-eyebrow,
    .lp-hero-anim .lp-page-title,
    .lp-hero-anim .lp-page-lead,
    .lp-hero-anim .lp-page-checklist,
    .lp-hero-anim .lp-btn,
    .lp-hero-anim .lp-page-hero-form {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}