/* style.css - VaultGrid Labs Industrial Design System (Apple / Tesla Energy Aesthetic) */

@font-face {
    font-family: 'Eloquia Display';
    src: local('Eloquia Display Bold'),
         url('assets/fonts/EloquiaDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Realtime Rounded';
    src: local('Realtime Rounded Regular'),
         url('assets/fonts/RealtimeRounded-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---------------------------------------------------------------
       PALETA DE MARCA. Solo estos cuatro colores mas el blanco.
       Nada de verdes ni ambares fluorescentes.
       --------------------------------------------------------------- */
    --bg-primary: #C4D7D1;       /* Verde grisaceo claro: acento unico */
    --green-mid:  #4E736C;       /* Verde medio: bordes, divisores, hover */
    --green-dark: #001412;       /* Verde casi negro: fondo base */
    --brown-warm: #4E4635;       /* Marron calido: acento secundario */
    --white: #FFFFFF;

    /* Sombras derivadas del verde base, no colores nuevos */
    --green-darker: #000c0b;
    --green-deep:   var(--green-deep);

    /* Acento (#C4D7D1) en sus distintas intensidades */
    --accent: var(--bg-primary);
    --accent-soft: rgba(196, 215, 209, 0.10);
    --accent-line: rgba(196, 215, 209, 0.30);
    --accent-strong: rgba(196, 215, 209, 0.55);

    /* Acento calido (#4E4635) para bloques que deben distinguirse */
    --warm-soft: rgba(78, 70, 53, 0.42);
    --warm-line: rgba(78, 70, 53, 0.85);

    --text-muted: rgba(255, 255, 255, 0.78);
    --text-dim: rgba(255, 255, 255, 0.62);
    --glass-bg: rgba(0, 20, 18, 0.75);
    --glass-border: rgba(196, 215, 209, 0.14);
    --card-border: rgba(255, 255, 255, 0.09);
    --surface-1: rgba(255, 255, 255, 0.028);
    --surface-2: rgba(255, 255, 255, 0.05);

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-2xl: 96px;
    --space-3xl: 128px;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);
    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Misma barra de scroll que danielbrosed.com: el sitio es oscuro, así que se
       declara el esquema de color y el navegador pinta la barra nativa oscura en
       vez de la clara por defecto (danielbrosed.com lo hace en html[data-theme='dark']). */
    color-scheme: dark;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--green-dark);
    color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Eloquia Display', 'Outfit', system-ui, sans-serif;
    color: var(--white);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.section-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* Typography Utilities */
.kicker {
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    color: var(--bg-primary);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.section-header {
    margin-bottom: var(--space-2xl);
}
.section-header.center {
    text-align: center;
}
.section-header h2 {
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}
.section-lead {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 760px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.65;
}

h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    line-height: 1.08;
    margin-bottom: var(--space-lg);
}

.highlight-text {
    background: linear-gradient(135deg, #FFFFFF 0%, #C4D7D1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    color: var(--text-muted);
    font-weight: 300;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 32px;
    border-radius: var(--radius-sm);
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-primary {
    background-color: var(--white);
    color: var(--green-dark);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
    background-color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(196, 215, 209, 0.25);
}
.btn-ghost {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover {
    background-color: var(--white);
    color: var(--green-dark);
    border-color: var(--white);
    transform: translateY(-2px);
}
.btn-nav {
    background-color: rgba(196, 215, 209, 0.1);
    border: 1px solid rgba(196, 215, 209, 0.3);
    color: var(--white);
    padding: 9px 20px;
    font-size: 0.85rem;
}
.btn-nav:hover {
    background-color: var(--white);
    color: var(--green-dark);
}
.btn-card {
    width: 100%;
    margin-top: var(--space-lg);
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-card:hover {
    background: var(--white);
    color: var(--green-dark);
}

/* Animations On Scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   NAVBAR & CO-BRANDING LOCKUP (PERFECT HORIZONTAL OPTICAL ALIGNMENT)
   ========================================================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    transition: all 0.35s ease;
    border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    background: rgba(0, 20, 18, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(196, 215, 209, 0.12);
    padding: 12px 48px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Co-branding Container */
.brand-container {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 44px;
}
.logo-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.brand-logo {
    display: block;
    object-fit: contain;
    width: auto;
}

/* Dimensiones calibradas al píxel para que la altura de texto coincida perfectamente */
.primary-logo {
    height: 26px; /* Altura de texto ~23px */
    max-width: 140px;
    display: block;
}
.secondary-logo {
    height: 36px; /* Altura de texto mayúscula ~23.5px, icono cubo 36px */
    max-width: 150px;
    display: block;
    opacity: 0.98;
}
.brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(196, 215, 209, 0.4);
    font-size: 0.95rem;
    font-weight: 300;
    user-select: none;
    line-height: 1;
    margin: 0 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}
.nav-links a:hover {
    color: var(--white);
}
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--white);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.fullscreen-section {
    min-height: 100vh;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.fullscreen-section.hero {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.fullscreen-section.right-align {
    align-items: center;
    justify-content: flex-end;
    text-align: left;
}
.fullscreen-section.center-align {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.overlay-gradient-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0,20,18,0.65) 0%, rgba(0,20,18,0.92) 85%);
}
.overlay-gradient-bottom {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,20,18,1) 0%, rgba(0,20,18,0.8) 40%, transparent 80%);
}
.overlay-gradient-side-right {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 35%, rgba(0,20,18,0.92) 75%);
}
.overlay-gradient-center {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,20,18,0.55) 0%, rgba(0,20,18,0.94) 85%);
}

.content-container {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
}
.side-box {
    max-width: 520px;
    margin-right: var(--space-xl);
    padding: 40px;
    background: rgba(0, 20, 18, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.side-box h2 {
    font-size: 2.2rem;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}
.side-box p {
    font-size: 0.98rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-lg);
}
.side-box-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: var(--space-md);
    border-top: 1px solid var(--card-border);
}
.mini-spec {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--bg-primary);
}
.mini-icon {
    width: 18px;
    height: 18px;
    stroke: var(--bg-primary);
}

.center-box {
    max-width: 860px;
    margin: 0 auto;
}
.center-box h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}

.interior-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: var(--space-xl);
}
.int-badge {
    background: rgba(0, 20, 18, 0.75);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
}

.hero-kicker-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(196, 215, 209, 0.1);
    border: 1px solid rgba(196, 215, 209, 0.2);
    font-family: 'Realtime Rounded', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--bg-primary);
    margin-bottom: var(--space-lg);
}
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    box-shadow: 0 0 10px var(--bg-primary);
    animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}

.hero-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: var(--space-xl) 0;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    background: rgba(0, 20, 18, 0.6);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(8px);
    font-size: 0.88rem;
    color: var(--text-muted);
}
.pill-icon {
    width: 16px;
    height: 16px;
    stroke: var(--bg-primary);
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-lg);
}

/* ==========================================================================
   ARQUITECTURA "TODO EN UNO" (ALL-IN-ONE SUBSYSTEMS)
   ========================================================================== */
.architecture-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}

/* ==========================================================================
   SECCIÓN INGENIERÍA 360° (VISTAS LATERALES 2 Y 3)
   ========================================================================== */
.deepdive-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}

.wide-container {
    max-width: 1280px;
    width: 100%;
}

.showcase-split-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
    align-items: center;
}
.showcase-split-row.reverse {
    grid-template-columns: 1fr 1.35fr;
}
.showcase-split-row.reverse .showcase-img-pane {
    order: 2;
}
.showcase-split-row.reverse .showcase-content-pane {
    order: 1;
}

.showcase-img-pane {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(196, 215, 209, 0.25);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
    background: #001412;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.showcase-img-pane:hover {
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 30px rgba(196, 215, 209, 0.25);
    border-color: var(--bg-primary);
}

.img-zoom-wrapper {
    overflow: hidden;
    height: 520px;
    position: relative;
    border-radius: 20px;
}
.showcase-img {
    width: 100%;
    height: 110%;
    object-fit: cover;
    display: block;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.showcase-split-row:hover .showcase-img {
    transform: scale(1.04);
}

.pane-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 5;
    background: rgba(0, 20, 18, 0.88);
    border: 1px solid rgba(196, 215, 209, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--white);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-family: 'Realtime Rounded', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.hud-stat-chip {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    background: rgba(0, 20, 18, 0.88);
    border: 1px solid rgba(196, 215, 209, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bg-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.showcase-content-pane h3 {
    font-size: 2.1rem;
    margin-bottom: 16px;
    line-height: 1.25;
}
.showcase-content-pane p {
    font-size: 1.02rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}
.clean-check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.clean-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--white);
}
.check-ico {
    width: 18px;
    height: 18px;
    stroke: var(--bg-primary);
    flex-shrink: 0;
}

.diagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 24px;
    margin-bottom: var(--space-2xl);
}

.diagram-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 32px;
    position: relative;
    transition: all 0.35s ease;
}
.diagram-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--green-mid);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(196, 215, 209, 0.08);
    border: 1px solid rgba(196, 215, 209, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}
.sys-icon {
    width: 24px;
    height: 24px;
    stroke: var(--bg-primary);
}

.diagram-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}
.diagram-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}
.card-spec-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-family: 'Realtime Rounded', monospace;
    color: var(--bg-primary);
    background: rgba(196, 215, 209, 0.08);
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid rgba(196, 215, 209, 0.15);
}

.tech-callout-banner {
    background: linear-gradient(135deg, rgba(78, 115, 108, 0.2) 0%, rgba(0, 20, 18, 0.6) 100%);
    border: 1px solid var(--green-mid);
    border-radius: var(--radius-md);
    padding: 36px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.callout-tag {
    font-family: 'Realtime Rounded', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--bg-primary);
    margin-bottom: 6px;
    font-weight: 600;
}
.callout-content h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}
.callout-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 720px;
}
.callout-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.c-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--white);
    text-align: center;
}

/* ==========================================================================
   MODELOS BESS (10FT, 20FT, 40FT)
   ========================================================================== */
.modalidades {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 32px;
}

.power-card {
    background: rgba(0, 20, 18, 0.7);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.power-card:hover {
    border-color: var(--green-mid);
    background: rgba(0, 20, 18, 0.9);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.power-card.popular {
    border-color: var(--bg-primary);
    background: linear-gradient(180deg, rgba(196, 215, 209, 0.12) 0%, rgba(0, 20, 18, 0.85) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 215, 209, 0.2);
}
.power-card.popular:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 25px rgba(196, 215, 209, 0.3);
}

.card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}
.card-badge {
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: 'Realtime Rounded', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.card-badge.std { background: rgba(255, 255, 255, 0.1); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.15); }
.card-badge.pop { background: var(--white); color: var(--green-dark); font-weight: 700; }
.card-badge.prem { background: var(--brown-warm); color: var(--bg-primary); }

.model-code {
    font-size: 0.82rem;
    color: var(--text-dim);
    font-family: monospace;
    letter-spacing: 0.08em;
}

.card-hero-spec {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}
.model-icon-box {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: rgba(196, 215, 209, 0.08);
    border: 1px solid rgba(196, 215, 209, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.model-hero-ico {
    width: 28px;
    height: 28px;
    stroke: var(--bg-primary);
}
.pop-glow {
    background: rgba(196, 215, 209, 0.22);
    border-color: var(--bg-primary);
    box-shadow: 0 0 20px rgba(196, 215, 209, 0.35);
}
.prem-glow {
    background: rgba(78, 70, 53, 0.55);
    border-color: rgba(78, 70, 53, 0.55);
}

.power-headline .power-val {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    font-family: 'Outfit', sans-serif;
}
.power-headline .unit {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--text-muted);
}
.power-headline .capacity-val {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bg-primary);
    margin-top: 4px;
}
.mwh-badge {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 400;
}

.card-rate-pill {
    font-size: 0.78rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 24px;
    text-align: center;
}

.spec-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    flex-grow: 1;
}
.spec-b-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}
.spec-b-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.b-ico-box {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(196, 215, 209, 0.08);
    border: 1px solid rgba(196, 215, 209, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.b-ico {
    width: 17px;
    height: 17px;
    stroke: var(--bg-primary);
}
.b-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.b-lbl {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.b-val {
    font-size: 0.86rem;
    color: var(--white);
    font-weight: 500;
    line-height: 1.3;
}

.card-actions-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}
.btn-specs-trigger {
    width: 100%;
    padding: 11px 16px;
    background: rgba(196, 215, 209, 0.08);
    border: 1px solid rgba(196, 215, 209, 0.2);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.btn-specs-trigger:hover {
    background: rgba(196, 215, 209, 0.18);
    border-color: var(--bg-primary);
    color: var(--white);
}
.btn-card-order {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    text-align: center;
}

/* Technical Icon Helpers */
.check-pill {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(196, 215, 209, 0.12);
    border: 1px solid rgba(196, 215, 209, 0.3);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.check-ico {
    width: 12px;
    height: 12px;
    stroke: var(--bg-primary);
}
.spec-mini-ico,
.badge-mini-ico,
.footer-contact-ico,
.footer-inline-ico {
    width: 16px;
    height: 16px;
    stroke: var(--bg-primary);
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.lock-mini-ico {
    width: 14px;
    height: 14px;
    stroke: var(--text-dim);
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.menu-ico {
    width: 24px;
    height: 24px;
    stroke: var(--white);
    display: block;
}
.wa-avatar-ico {
    width: 20px;
    height: 20px;
    stroke: var(--bg-primary);
}
.brand-x {
    color: rgba(196, 215, 209, 0.5);
    font-size: 1.1rem;
    line-height: 1;
}
.footer-divider-dot {
    color: rgba(196, 215, 209, 0.5);
    font-size: 1.4rem;
    line-height: 1;
    margin: 0 4px;
}

/* ==========================================================================
   SECCIÓN MODELO DE VALOR (HOY VS FUTURO TOKENIZACIÓN)
   ========================================================================== */
.value-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}

.value-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.value-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.35s ease;
}
.value-card.traditional {
    border-color: rgba(196, 215, 209, 0.2);
}
.value-card.traditional:hover {
    border-color: var(--bg-primary);
    background: rgba(196, 215, 209, 0.03);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.value-card.web3 {
    border-color: rgba(196, 215, 209, 0.35);
    background: linear-gradient(180deg, rgba(196, 215, 209, 0.06) 0%, rgba(0, 20, 18, 0.4) 100%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.value-card.web3:hover {
    border-color: var(--bg-primary);
    box-shadow: 0 20px 50px rgba(196, 215, 209, 0.15);
}

.tag-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Realtime Rounded', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}
.tag-pill.present {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.tag-pill.future {
    background: linear-gradient(135deg, #4E736C 0%, #4E736C 100%);
    color: var(--white);
}

.value-card-header h3 {
    font-size: 1.7rem;
    margin-bottom: 10px;
    line-height: 1.25;
}
.card-intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.value-points-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-grow: 1;
}
.v-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.point-icon-box {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: rgba(196, 215, 209, 0.08);
    border: 1px solid rgba(196, 215, 209, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.point-icon-box.token-ico {
    background: rgba(196, 215, 209, 0.15);
    border-color: rgba(196, 215, 209, 0.4);
}
.v-ico {
    width: 20px;
    height: 20px;
    stroke: var(--bg-primary);
}
.point-text h4 {
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.point-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.value-badge-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bg-primary);
    padding-top: 24px;
    margin-top: 32px;
    border-top: 1px solid var(--card-border);
}
.value-badge-footer.token-footer {
    color: var(--bg-primary);
}

/* ==========================================================================
   SIMULADOR DE ROI Y RENTABILIDAD
   ========================================================================== */
.simulator-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}

.sim-card {
    background: rgba(0, 20, 18, 0.85);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.sim-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px auto;
}
.sim-header h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin-bottom: 12px;
}
.sim-header p {
    font-size: 1rem;
    color: var(--text-muted);
}

.sim-interactive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.sim-controls {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.control-group label {
    display: block;
    font-size: 0.95rem;
    color: var(--white);
    margin-bottom: 14px;
}
.control-group label strong {
    color: var(--bg-primary);
}

.range-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 14px var(--bg-primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 10px;
}
.slider-ticks .active-tick {
    color: var(--bg-primary);
    font-weight: 600;
}

.profile-toggle-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.profile-btn {
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.profile-btn.active {
    background: rgba(196, 215, 209, 0.15);
    border-color: var(--bg-primary);
    color: var(--white);
}

.sim-results-pane {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.res-box.highlight {
    background: rgba(0, 20, 18, 0.7);
    border: 1px solid var(--green-mid);
    border-radius: var(--radius-sm);
    padding: 24px;
    text-align: center;
}
.res-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bg-primary);
    margin-bottom: 8px;
}
.res-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
    margin-bottom: 6px;
}
.res-sub {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.res-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.res-mini-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    text-align: center;
}
.res-mini-lbl {
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.res-mini-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    font-family: 'Outfit', sans-serif;
}
.btn-sim-cta {
    width: 100%;
    margin-top: 8px;
}

/* ==========================================================================
   MODAL DE ESPECIFICACIONES TÉCNICAS (DRAWERS / MODALS)
   ========================================================================== */
.specs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 10, 9, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.specs-modal-overlay.open {
    display: flex;
    opacity: 1;
}

.specs-modal-dialog {
    background: #001412;
    border: 1px solid var(--green-mid);
    border-radius: var(--radius-md);
    max-width: 980px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.specs-modal-overlay.open .specs-modal-dialog {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 28px;
}
.modal-kicker {
    font-family: 'Realtime Rounded', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    color: var(--bg-primary);
    display: block;
    margin-bottom: 4px;
}
.modal-header h3 {
    font-size: 1.8rem;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 2.2rem;
    color: var(--text-dim);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}
.modal-close-btn:hover {
    color: var(--white);
}

.modal-body-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 36px;
    align-items: flex-start;
}
.modal-cell-img {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    display: block;
}
.modal-img-caption {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 8px;
}
.modal-specs-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ==========================================================================
   FICHA TÉCNICA
   ========================================================================== */
.specs-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}

.specs-layout {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 48px;
    align-items: flex-start;
}

.specs-image-wrapper {
    position: sticky;
    top: 100px;
}
.specs-closeup-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: block;
}
.image-caption-badge {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.specs-data-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.spec-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 24px;
}
.group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--bg-primary);
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}
.group-icon {
    width: 18px;
    height: 18px;
    stroke: var(--bg-primary);
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--text-muted);
}
.spec-row .label {
    flex-shrink: 0;
}
.dots {
    flex: 1;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
    margin: 0 12px;
    position: relative;
    top: -4px;
}
.spec-row .value {
    color: var(--white);
    font-weight: 500;
    text-align: right;
}

.cert-grid-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cert-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    padding: 12px;
    border-radius: 4px;
}
.cert-name {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--white);
}
.cert-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* ==========================================================================
   CASOS DE ÉXITO (ARAGÓN / HUESCA)
   ========================================================================== */
.casos-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}

.casos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 36px;
}

.caso-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.35s ease;
}
.caso-card:hover {
    border-color: var(--green-mid);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.caso-img-wrapper {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.caso-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.caso-card:hover .caso-img {
    transform: scale(1.04);
}
.caso-tag-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(0, 20, 18, 0.85);
    border: 1px solid rgba(196, 215, 209, 0.3);
    backdrop-filter: blur(8px);
    color: var(--bg-primary);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Realtime Rounded', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.caso-body {
    padding: 32px;
}
.caso-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}
.caso-body h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    line-height: 1.25;
}
.caso-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.caso-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(0, 20, 18, 0.6);
    border: 1px solid var(--card-border);
    padding: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    text-align: center;
}
.metric-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
}
.metric-lbl {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.2;
}

.caso-specs-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--bg-primary);
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
}

/* ==========================================================================
   DESPLIEGUE EN CAMPO
   ========================================================================== */
.stats-row {
    display: flex;
    gap: 32px;
    margin-top: var(--space-xl);
    flex-wrap: wrap;
    justify-content: center;
}
.stat {
    text-align: center;
}
.stat-number {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bg-primary);
}

/* ==========================================================================
   PREGUNTAS FRECUENTES (FAQ ACCORDION)
   ========================================================================== */
.faq-section {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}

.faq-accordion-container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-item.active {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--green-mid);
}

.faq-question {
    width: 100%;
    padding: 22px 28px;
    background: none;
    border: none;
    text-align: left;
    color: var(--white);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-toggle-icon {
    font-size: 1.4rem;
    color: var(--bg-primary);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-toggle-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 28px;
}
.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 28px 24px 28px;
}
.faq-answer p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ==========================================================================
   CONTACTO & FORMULARIO
   ========================================================================== */
.contacto {
    padding: var(--space-3xl) var(--space-lg);
    background-color: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}

.contact-form {
    max-width: 760px;
    margin: var(--space-xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-row {
    display: flex;
    gap: 16px;
}
.contact-form input, 
.contact-form select, 
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    background: rgba(0, 20, 18, 0.8);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.contact-form input:focus, 
.contact-form select:focus, 
.contact-form textarea:focus {
    outline: none;
    border-color: var(--bg-primary);
    background: rgba(0, 20, 18, 0.95);
}
.contact-form select option {
    background: var(--green-dark);
    color: var(--white);
}

.btn-submit {
    background-color: var(--white);
    color: var(--green-dark);
    border: none;
    padding: 18px;
    font-size: 1.05rem;
    margin-top: 8px;
}
.btn-submit:hover {
    background-color: var(--bg-primary);
}
.form-disclaimer {
    font-size: 0.78rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 6px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: #000807;
    color: var(--text-muted);
    padding: var(--space-3xl) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--glass-border);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: var(--space-2xl);
}

.footer-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    height: 38px;
}
.footer-logo.primary-footer-logo {
    height: 22px;
    width: auto;
    display: block;
}
.footer-logo.vaultbit-sub {
    height: 30px;
    width: auto;
    display: block;
    opacity: 0.95;
}
.footer-divider {
    color: rgba(196, 215, 209, 0.4);
    font-size: 0.85rem;
    line-height: 1;
}

.footer-tagline {
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.5;
}
.footer-org {
    font-size: 0.85rem;
    color: var(--bg-primary);
    margin-bottom: 16px;
}
.spain-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.badge-ico {
    width: 16px;
    height: 16px;
    stroke: var(--bg-primary);
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 16px;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.footer-col a {
    display: block;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.footer-col a:hover {
    color: var(--white);
}
.contact-link {
    font-size: 0.88rem;
    margin-bottom: 6px !important;
}
.location-text {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 10px;
}
.social-links {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-dim);
}

/* ==========================================================================
   WIDGET FLOTANTE DE WHATSAPP (rediseño: sobrio e integrado en la marca)
   ========================================================================== */
.whatsapp-widget-container {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    z-index: 1500;
    font-family: 'Inter', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* --- Aviso discreto de una sola vez (sustituye al pulso infinito) --- */
.wa-tip {
    display: none;
    align-items: center;
    gap: 10px;
    max-width: 265px;
    padding: 11px 12px 11px 15px;
    background: var(--green-darker);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    font-size: 0.83rem;
    line-height: 1.4;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.wa-tip.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.wa-tip strong {
    color: var(--white);
    font-weight: 600;
}
.wa-tip-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-dim);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.wa-tip-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

/* --- Botón disparador: círculo de marca que se despliega a píldora --- */
.whatsapp-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 15px;
    background: var(--green-darker);
    color: var(--white);
    border: 1px solid var(--accent-line);
    border-radius: 100px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out),
                box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.whatsapp-trigger-btn:hover,
.whatsapp-trigger-btn:focus-visible {
    background: var(--green-deep);
    border-color: var(--accent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
}

.wa-trigger-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    fill: var(--accent);
    transition: fill 0.3s var(--ease-out);
}

/* La etiqueta solo se revela al pasar el ratón o al enfocar con teclado */
.wa-badge-text {
    display: block;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    letter-spacing: 0.01em;
    transition: max-width 0.35s var(--ease-out), opacity 0.25s ease, margin-left 0.35s var(--ease-out);
}
.whatsapp-trigger-btn:hover .wa-badge-text,
.whatsapp-trigger-btn:focus-visible .wa-badge-text {
    max-width: 220px;
    margin-left: 10px;
    opacity: 1;
}

/* Estado abierto: el botón pasa a ser el cierre */
.whatsapp-trigger-btn[aria-expanded="true"] {
    background: var(--accent);
    border-color: var(--accent);
}
.whatsapp-trigger-btn[aria-expanded="true"] .wa-trigger-icon {
    fill: var(--green-darker);
}
.whatsapp-trigger-btn[aria-expanded="true"] .wa-badge-text {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
}

/* --- Panel de conversación --- */
.whatsapp-chat-window {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 372px;
    max-width: calc(100vw - 32px);
    background: var(--green-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px) scale(0.97);
    transform-origin: bottom right;
    opacity: 0;
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.whatsapp-chat-window.open {
    display: flex;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.wa-chat-header {
    background: linear-gradient(135deg, #062a24 0%, #001412 100%);
    border-bottom: 1px solid var(--card-border);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wa-avatar-box {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-avatar-logo {
    width: 24px;
    height: auto;
    display: block;
}
.wa-avatar-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    background: var(--accent);
    border-radius: 50%;
    border: 2px solid var(--green-dark);
}
.wa-header-info {
    flex-grow: 1;
    min-width: 0;
}
.wa-header-info h4 {
    font-size: 0.92rem;
    color: var(--white);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}
.wa-header-info p {
    font-size: 0.74rem;
    color: var(--accent);
}
.wa-chat-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.wa-chat-close:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
}

.wa-chat-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: min(62vh, 470px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.wa-chat-body::-webkit-scrollbar { width: 6px; }
.wa-chat-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}

/* Burbuja con la geometría de WhatsApp: esquina viva arriba a la izquierda */
.wa-bot-message {
    align-self: flex-start;
    max-width: 94%;
    background: var(--surface-2);
    border: 1px solid var(--card-border);
    border-radius: 2px 12px 12px 12px;
    padding: 13px 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.wa-bot-message p + p {
    margin-top: 8px;
}
.wa-bot-message strong {
    color: var(--white);
    font-weight: 600;
}

/* Resumen que llega desde la calculadora */
.wa-context-chip {
    align-self: flex-start;
    display: none;
    gap: 9px;
    align-items: flex-start;
    max-width: 94%;
    padding: 11px 13px;
    background: var(--warm-soft);
    border: 1px solid rgba(78, 70, 53, 0.90);
    border-radius: 2px 12px 12px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--white);
}
.wa-context-chip.show { display: flex; }
.wa-context-chip .wa-chip-ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: var(--accent);
    fill: none;
}

.wa-mini-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.wa-field label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 7px;
    font-weight: 600;
}
.wa-field input,
.wa-field select,
.wa-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.86rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wa-field textarea { resize: vertical; }
.wa-field input::placeholder,
.wa-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.wa-field input:focus,
.wa-field select:focus,
.wa-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(196, 215, 209, 0.05);
}
.wa-field select option {
    background: var(--green-dark);
    color: var(--white);
}

.wa-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--text-dim);
}
.wa-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
}
.wa-consent a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wa-consent a:hover { color: var(--accent); }

.btn-wa-send {
    width: 100%;
    gap: 9px;
    padding: 13px 18px;
    background: var(--accent);
    color: var(--green-darker);
    border: none;
    font-size: 0.88rem;
}
.btn-wa-send:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(196, 215, 209, 0.22);
}
.wa-send-icon {
    width: 18px;
    height: 18px;
    fill: var(--green-darker);
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .navbar { padding: 16px 24px; }
    .navbar.scrolled { padding: 12px 24px; }
    .specs-layout { grid-template-columns: 1fr; }
    .specs-image-wrapper { position: static; max-width: 600px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .tech-callout-banner { flex-direction: column; align-items: flex-start; }
    .callout-badges { flex-direction: row; flex-wrap: wrap; }
    .showcase-split-row, .showcase-split-row.reverse { grid-template-columns: 1fr; gap: 32px; }
    .showcase-split-row.reverse .showcase-img-pane { order: 1; }
    .showcase-split-row.reverse .showcase-content-pane { order: 2; }
    .img-zoom-wrapper { height: 380px; }
    .side-box { margin-right: 0; max-width: 100%; }
    .value-columns-grid { grid-template-columns: 1fr; }
    .sim-interactive-grid { grid-template-columns: 1fr; }
    .modal-body-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .menu-toggle { display: block; }
    .fullscreen-section.right-align { justify-content: center; text-align: center; }
    .side-box-specs { align-items: center; }
    .img-zoom-wrapper { height: 280px; }
    .pane-tag { font-size: 0.7rem; padding: 6px 12px; }
    .hud-stat-chip { font-size: 0.75rem; padding: 6px 12px; }
    .showcase-content-pane h3 { font-size: 1.6rem; }
    .casos-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr; }
    .primary-logo { height: 22px; max-width: 120px; }
    .secondary-logo { height: 30px; max-width: 125px; }
    .hero-buttons { flex-direction: column; }
    .stats-row { gap: 20px; }
    .stat-number { font-size: 2.2rem; }
    .cert-grid-badges { grid-template-columns: 1fr; }
    .whatsapp-widget-container { bottom: 18px; right: 18px; }
    .whatsapp-trigger-btn { padding: 10px 16px 10px 14px; font-size: 0.85rem; }
    .whatsapp-chat-window { bottom: 65px; width: calc(100vw - 36px); right: 0; }
}

/* ==========================================================================
   CAPA DE REFINAMIENTO
   Jerarquía de color, accesibilidad, cifras tabulares y bloques nuevos.
   Se carga al final para prevalecer sobre las reglas base.
   ========================================================================== */

/* --- 1. Accesibilidad y movimiento -------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background: var(--accent-soft);
    color: var(--white);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--accent);
    color: var(--green-darker);
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    left: 0;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .parallax-img {
        transform: none !important;
    }
}

/* El fondo fijo provoca tirones al hacer scroll y no funciona en iOS */
.fullscreen-section {
    background-attachment: scroll;
}

/* --- 2. Cifras técnicas en versalitas tabulares ------------------------- */

.res-number,
.stat-number,
.metric-val,
.power-val,
.capacity-val,
.b-val,
.spec-row .value,
.calc-kpi-value,
.calc-figure,
.calc-range,
.compare-table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- 3. Jerarquía de color: verde = acción, ámbar = dinero, cian = I+D --- */

.btn-primary {
    background-color: var(--accent);
    color: var(--green-darker);
    box-shadow: 0 6px 22px rgba(196, 215, 209, 0.18);
}
.btn-primary:hover {
    background-color: #FFFFFF;
    color: var(--green-darker);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(196, 215, 209, 0.28);
}

.btn-nav {
    background-color: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--white);
}
.btn-nav:hover {
    background-color: var(--accent);
    color: var(--green-darker);
    border-color: var(--accent);
}

.btn-submit {
    background-color: var(--accent);
    color: var(--green-darker);
}
.btn-submit:hover {
    background-color: #FFFFFF;
}

.kicker {
    color: var(--accent);
}
.kicker::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--accent);
    opacity: 0.7;
}
.section-header.center .kicker::before {
    display: none;
}

.pulse-dot {
    background: var(--accent);
}

.check-pill,
.point-icon-box {
    border-color: var(--accent-line);
}
.check-ico,
.footer-inline-ico {
    stroke: var(--accent);
}

.stat-number,
.metric-val {
    color: var(--accent);
}

.highlight-text {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--accent) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-badge.pop {
    background: var(--accent);
    color: var(--green-darker);
}

/* --- 4. Navegación móvil (sin estilos inline desde JS) ------------------ */

.menu-toggle {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 7px;
    line-height: 0;
}
.menu-ico {
    width: 22px;
    height: 22px;
    stroke: var(--white);
    fill: none;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 24px 24px;
        background: rgba(0, 12, 11, 0.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }
    .nav-links.open {
        display: flex;
        animation: navDrop 0.28s var(--ease-out);
    }
    .nav-links a {
        padding: 14px 4px;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-links a.btn-nav {
        margin-top: 16px;
        justify-content: center;
        border: 1px solid var(--accent-line);
        border-radius: var(--radius-sm);
    }
    body.nav-open {
        overflow: hidden;
    }
}

@keyframes navDrop {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 5. Calculadora ----------------------------------------------------- */

.calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: start;
}

.calc-panel {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.calc-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.calc-preset {
    padding: 13px 10px;
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s var(--ease-out);
}
.calc-preset span {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-dim);
    margin-top: 3px;
}
.calc-preset:hover {
    border-color: var(--green-mid);
    color: var(--white);
}
.calc-preset.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--white);
}
.calc-preset.active span { color: var(--text-muted); }

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calc-field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.calc-field-head label {
    font-size: 0.88rem;
    color: var(--white);
    font-weight: 500;
}
.calc-hint {
    font-size: 0.74rem;
    color: var(--text-dim);
}
.calc-value-box {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 11px;
    background: var(--surface-2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}
.calc-value-box input {
    width: 5.6ch;
    background: none;
    border: none;
    color: var(--white);
    font-family: 'Outfit', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0;
    -moz-appearance: textfield;
}
.calc-value-box input::-webkit-outer-spin-button,
.calc-value-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calc-value-box input:focus { outline: none; }
.calc-value-box:focus-within {
    border-color: var(--accent);
}
.calc-unit {
    font-size: 0.76rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.calc-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--green-darker);
    box-shadow: 0 0 0 1px var(--accent-line), 0 2px 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.18s var(--ease-out);
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--green-darker);
    cursor: pointer;
}

.calc-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.calc-seg-btn {
    padding: 12px 8px;
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: all 0.25s var(--ease-out);
}
.calc-seg-btn:hover { color: var(--white); border-color: var(--green-mid); }
.calc-seg-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--white);
}

.calc-advanced {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    overflow: hidden;
}
.calc-advanced > summary {
    padding: 15px 18px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--white);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.2s ease;
}
.calc-advanced > summary::-webkit-details-marker { display: none; }
.calc-advanced > summary:hover { background: rgba(255, 255, 255, 0.03); }
.calc-advanced > summary::after {
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.25s var(--ease-out);
}
.calc-advanced[open] > summary::after {
    content: "\2212";
}
.calc-advanced-body {
    padding: 4px 18px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.calc-advanced-body .calc-field-wide { grid-column: 1 / -1; }

.calc-num-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.calc-num-field label {
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.35;
}
.calc-num-field input {
    width: 100%;
    padding: 10px 12px;
    background: var(--green-darker);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--white);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s ease;
}
.calc-num-field input:focus {
    outline: none;
    border-color: var(--accent);
}

.calc-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.79rem;
    line-height: 1.45;
    color: var(--text-muted);
    cursor: pointer;
}
.calc-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.calc-check small {
    display: block;
    color: var(--text-dim);
    font-size: 0.72rem;
}

/* Panel de resultados */
.calc-results {
    position: sticky;
    top: 100px;
    background: linear-gradient(160deg, rgba(196, 215, 209, 0.05) 0%, rgba(0, 12, 11, 0.9) 45%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.calc-headline-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 600;
}
.calc-headline-value {
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
    font-size: clamp(2.3rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}
.calc-range {
    font-size: 0.82rem;
    color: var(--text-dim);
}
.calc-range strong {
    color: var(--text-muted);
    font-weight: 600;
}

.calc-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--card-border);
    padding-top: 18px;
}
.calc-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.85rem;
}
.calc-line .calc-line-lbl { color: var(--text-muted); }
.calc-line .calc-line-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}
.calc-line .calc-line-val {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.calc-line.is-off { opacity: 0.4; }

.calc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.calc-kpi {
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    text-align: center;
}
.calc-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 5px;
    line-height: 1.3;
}
.calc-kpi-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
}

.calc-method {
    border-top: 1px solid var(--card-border);
    padding-top: 16px;
}
.calc-method > summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
    list-style: none;
}
.calc-method > summary::-webkit-details-marker { display: none; }
.calc-method > summary::before {
    content: "\203A  ";
    display: inline-block;
    transition: transform 0.2s ease;
}
.calc-method[open] > summary::before { content: "\2039  "; }
.calc-method-body {
    margin-top: 14px;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-dim);
}
.calc-method-body code {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--green-darker);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.73rem;
    color: var(--text-muted);
    overflow-x: auto;
    white-space: nowrap;
}
.calc-method-body ul {
    margin: 8px 0 0 18px;
}
.calc-method-body li { margin-bottom: 4px; }
.calc-method-body a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.calc-method-body a:hover { color: var(--accent); }

.calc-disclaimer {
    font-size: 0.73rem;
    line-height: 1.55;
    color: var(--text-dim);
    padding: 12px 14px;
    background: var(--surface-1);
    border-left: 2px solid var(--green-mid);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.calc-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.calc-cta-group .btn { width: 100%; }

/* --- 6. Soluciones por sector ------------------------------------------ */

.sectores-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}
.sectores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
    gap: 20px;
}
.sector-card {
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.sector-card:hover {
    border-color: var(--accent-line);
    background: var(--surface-2);
    transform: translateY(-3px);
}
.sector-ico-box {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    margin-bottom: 4px;
}
.sector-ico-box svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent);
    fill: none;
}
.sector-card h3 {
    font-size: 1.18rem;
    line-height: 1.3;
}
.sector-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
}
.sector-gain {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
    font-size: 0.83rem;
    color: var(--text-dim);
}
.sector-gain strong {
    display: block;
    color: var(--accent);
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

/* Nota de acabado del contenedor: el verde de marca es opcional y con sobrecoste,
   no el acabado de serie. Va discreta bajo la foto de los modelos. */
.modelos-acabado {
    max-width: 900px;
    margin: var(--space-lg) auto 0;
    padding: 16px 20px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent-line);
    border-radius: 0 10px 10px 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.modelos-acabado strong { color: var(--white); }

/* --- 7. Tabla comparativa ---------------------------------------------- */

/* La comparativa vive tras la FAQ como anexo. Pierde la foto de fondo y baja de
   tamano el titular para que no compita con las secciones del relato principal:
   quien llega hasta aqui ya viene buscandola. */
.comparativa-anexo {
    background: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}
.comparativa-anexo .kicker { opacity: 0.75; }
.comparativa-anexo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.compare-wrapper {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    -webkit-overflow-scrolling: touch;
}
.compare-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.compare-table th,
.compare-table td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
}
.compare-table thead th {
    background: rgba(255, 255, 255, 0.04);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
}
.compare-table thead th.is-ours {
    color: var(--accent);
    background: var(--accent-soft);
}
.compare-table tbody th {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    color: var(--white);
    width: 27%;
}
.compare-table td { color: var(--text-muted); }
.compare-table td.is-ours {
    color: var(--white);
    background: rgba(196, 215, 209, 0.045);
    font-weight: 500;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

/* --- 8. Glosario -------------------------------------------------------- */

.glosario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 2px;
    background: var(--card-border);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.glosario-item {
    background: var(--green-dark);
    padding: 24px 26px;
}
.glosario-item dt {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}
.glosario-item dd {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* --- 9. Roadmap I+D (cian, sin promesas económicas) --------------------- */

.roadmap-section {
    padding: var(--space-2xl) var(--space-lg);
    background: var(--green-darker);
    border-top: 1px solid var(--glass-border);
}
.roadmap-card {
    border: 1px solid var(--warm-line);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--warm-soft) 0%, rgba(0, 12, 11, 0.6) 55%);
    padding: 40px;
}
.roadmap-card .kicker {
    color: var(--accent);
}
.roadmap-card .kicker::before { background: var(--accent); }
.roadmap-head {
    max-width: 780px;
    margin-bottom: 32px;
}
.roadmap-head h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    margin-bottom: 14px;
}
.roadmap-head p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}
.roadmap-lines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.roadmap-line {
    background: rgba(0, 12, 11, 0.5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 22px;
}
.roadmap-line h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.roadmap-line h3 svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent);
    fill: none;
    flex-shrink: 0;
}
.roadmap-line p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.roadmap-stage {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--warm-soft);
    border: 1px solid var(--warm-line);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
}
.roadmap-legal {
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-dim);
    padding: 18px 20px;
    background: rgba(0, 12, 11, 0.6);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.roadmap-legal strong { color: var(--text-muted); }

/* --- 10. Zonas de actuación -------------------------------------------- */

.zonas-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}
.zonas-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.zonas-prose p {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.75;
    margin-bottom: 16px;
}
.zonas-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zonas-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-border);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.zona-row {
    background: var(--green-darker);
    padding: 16px 20px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.zona-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--white);
    min-width: 118px;
}
.zona-detail {
    font-size: 0.83rem;
    color: var(--text-dim);
    line-height: 1.5;
    flex: 1;
    min-width: 180px;
}

/* --- 11. Nota de fuentes ------------------------------------------------ */

.fuentes-note {
    margin-top: 36px;
    padding: 20px 24px;
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    font-size: 0.79rem;
    line-height: 1.7;
    color: var(--text-dim);
}
.fuentes-note strong {
    display: block;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    margin-bottom: 8px;
}
.fuentes-note a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fuentes-note a:hover { color: var(--accent); }

/* --- 12. Consentimiento RGPD en el formulario principal ----------------- */

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
    margin-top: 4px;
}
.form-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.form-consent a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-consent a:hover { color: var(--accent); }

.form-status {
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    line-height: 1.55;
    display: none;
}
.form-status.show { display: block; }
.form-status.ok {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--white);
}
.form-status.err {
    background: rgba(78, 70, 53, 0.30);
    border: 1px solid rgba(78, 70, 53, 0.90);
    color: var(--white);
}

/* --- 13. Páginas legales ------------------------------------------------ */

.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 160px var(--space-lg) var(--space-3xl);
}
.legal-page h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin-bottom: 12px;
}
.legal-updated {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--card-border);
}
.legal-page h2 {
    font-size: 1.35rem;
    margin: 40px 0 14px;
}
.legal-page h3 {
    font-size: 1.05rem;
    margin: 26px 0 10px;
}
.legal-page p,
.legal-page li {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}
.legal-page p { margin-bottom: 14px; }
.legal-page ul,
.legal-page ol { margin: 0 0 16px 22px; }
.legal-page li { margin-bottom: 7px; }
.legal-page a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
    font-size: 0.88rem;
}
.legal-page th,
.legal-page td {
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    text-align: left;
    color: var(--text-muted);
    vertical-align: top;
}
.legal-page th {
    background: var(--surface-1);
    color: var(--white);
    font-weight: 600;
}
.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 0.88rem;
    color: var(--text-dim);
}
.legal-back:hover { color: var(--accent); }

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 0.82rem;
}
.footer-legal-links a { color: var(--text-dim); }
.footer-legal-links a:hover { color: var(--accent); }

/* --- 14. Responsive ----------------------------------------------------- */

@media (max-width: 1200px) {
    .section-container { padding-left: 8px; padding-right: 8px; }
    .diagram-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
    .roadmap-card { padding: 32px; }
}

@media (max-width: 1024px) {
    .calc-layout { grid-template-columns: 1fr; gap: 32px; }
    .calc-results { position: static; }
    .zonas-layout { grid-template-columns: 1fr; gap: 32px; }
    .legal-page { padding-top: 130px; }
}

@media (max-width: 768px) {
    .simulator-section,
    .sectores-section,
    .zonas-section { padding: var(--space-2xl) var(--space-md); }
    .sim-card { padding: 26px 20px; }
    .calc-results { padding: 24px 20px; }
    .calc-advanced-body { grid-template-columns: 1fr; }
    .calc-presets { grid-template-columns: 1fr; }
    .calc-segmented { grid-template-columns: 1fr; }
    .roadmap-card { padding: 26px 22px; }
    .glosario-item { padding: 20px 22px; }

    /* El panel de WhatsApp pasa a hoja inferior a pantalla completa */
    .whatsapp-widget-container {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right: 16px;
    }
    .whatsapp-trigger-btn {
        height: 52px;
        padding: 0 13px;
    }
    .wa-trigger-icon { width: 24px; height: 24px; }
    .whatsapp-trigger-btn:hover .wa-badge-text { max-width: 0; margin-left: 0; opacity: 0; }
    .wa-tip { max-width: min(280px, calc(100vw - 40px)); }
    .whatsapp-chat-window {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        transform: translateY(100%);
        transform-origin: bottom center;
    }
    .whatsapp-chat-window.open { transform: translateY(0); }
    .wa-chat-body {
        max-height: calc(88vh - 74px);
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .calc-kpi-grid { grid-template-columns: 1fr; }
    .caso-metrics-grid,
    .caso-card .caso-metrics-grid { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .hero-pills-row { gap: 8px; }
    .hero-pill { font-size: 0.75rem; }
    .zona-row { flex-direction: column; gap: 5px; }
    .zona-name { min-width: 0; }
}

/* --- 15. Últimos remates ------------------------------------------------ */

/* Estas dos etiquetas compartían color y peso y se leían como una sola línea. */
.caso-type {
    color: var(--accent);
    font-weight: 600;
}
.caso-date {
    color: var(--text-dim);
    white-space: nowrap;
}
.caso-meta {
    gap: 16px;
    align-items: baseline;
    text-transform: uppercase;
}

/* La caja de métricas del caso: separadores en lugar de tres bloques sueltos. */
.metric-box + .metric-box {
    border-left: 1px solid var(--card-border);
}
.caso-metrics-grid {
    padding: 18px 8px;
}

.premium .model-icon-box,
.prem-glow {
    border-color: rgba(78, 70, 53, 1.00);
}
.power-card.premium .card-badge.prem {
    color: var(--accent);
    border-color: rgba(78, 70, 53, 1.00);
}

.modal-title-box { min-width: 0; }
.modal-image-col { min-width: 0; }

/* En pantallas estrechas, cuatro cifras en fila se comprimen hasta ser ilegibles. */
@media (max-width: 480px) {
    .stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }
    .stat-number { font-size: 1.9rem; }
    .stat-label { font-size: 0.72rem; letter-spacing: 0.08em; }
    .caso-body { padding: 22px 18px; }
    .caso-img-wrapper { height: 200px; }
    .metric-box + .metric-box { border-left: none; border-top: 1px solid var(--card-border); padding-top: 12px; }
    .specs-modal-dialog { padding: 24px 20px; }
    .modal-header h3 { font-size: 1.3rem; }
}

@media (max-width: 560px) {
    .casos-grid { grid-template-columns: 1fr; }
}

/* --- 16. Correcciones tras revisar la web en el navegador --------------- */

/* El H2 del simulador heredaba el interlineado del cuerpo y quedaba deshilachado. */
.sim-header h2 {
    line-height: 1.15;
}

/* Un poco menos de velo sobre el hero: el producto tiene que verse. */
.overlay-gradient-dark {
    background: radial-gradient(circle at center, rgba(0, 20, 18, 0.48) 0%, rgba(0, 20, 18, 0.88) 88%);
}

/* En móvil el panel ocupa la pantalla y el botón flotante estorbaba encima
   del formulario. Con el panel abierto, el cierre es la X de la cabecera. */
@media (max-width: 768px) {
    .whatsapp-trigger-btn[aria-expanded="true"] {
        opacity: 0;
        pointer-events: none;
    }
}

/* --- 17. Fotografía: que se vea, y que el texto siga siendo legible ------ */

/* Antes: velo uniforme sobre toda la sección. El producto quedaba casi negro.
   Ahora: el velo general se aligera y el contraste del texto lo aporta un
   halo local justo detrás del bloque de copy. */
.overlay-gradient-dark {
    background: radial-gradient(ellipse at center, rgba(0, 20, 18, 0.34) 0%, rgba(0, 20, 18, 0.82) 92%);
}
.overlay-gradient-center {
    background: radial-gradient(ellipse at center, rgba(0, 20, 18, 0.28) 0%, rgba(0, 20, 18, 0.80) 92%);
}
.overlay-gradient-bottom {
    background: linear-gradient(to top, rgba(0, 20, 18, 0.97) 0%, rgba(0, 20, 18, 0.72) 45%, rgba(0, 20, 18, 0.12) 85%);
}


/* Cuatro elementos en una fila se partían en 3 + 1 y parecía un descuido. */
.hero-pills-row {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
}
.interior-badges-row {
    gap: 12px;
}
.int-badge {
    padding: 9px 16px;
    font-size: 0.85rem;
}

/* Las fotos de ingeniería se recortaban por los lados y cortaban el rótulo
   del contenedor. El marco pasa a tener la misma proporción que el original. */
.img-zoom-wrapper {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
}
.showcase-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1024px) {
    .img-zoom-wrapper { height: auto; aspect-ratio: 16 / 9; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .img-zoom-wrapper { height: auto; aspect-ratio: 16 / 10; }
    .hero-pills-row { max-width: 100%; }
}

/* --- 18. Cuadrar las filas de cifras y de píldoras ---------------------- */

/* Con 880 px caben tres píldoras y la cuarta caía sola. A 700 px reparte 2 + 2. */
.hero-pills-row {
    max-width: 700px;
}

/* Cuatro columnas obligan a bajar el cuerpo de la cifra para que no se parta. */
#despliegue .center-box {
    max-width: 1040px;
}
.stats-row .stat-number {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    white-space: nowrap;
}
.stats-row .stat-label {
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .hero-pills-row { max-width: 520px; }
}

/* El halo de legibilidad se extiende 90 px a cada lado del bloque de texto.
   En pantallas medias eso ensanchaba el documento y aparecía scroll lateral. */
.fullscreen-section {
    overflow: hidden;
}

/* En móvil el tipo de proyecto y la fecha se solapaban en la misma línea. */
@media (max-width: 560px) {
    .caso-meta {
        flex-direction: column;
        gap: 4px;
    }
    .caso-date { white-space: normal; }
}

/* ==========================================================================
   19. TARJETA DE PRODUCTO: LO QUE GANAS + FICHA TÉCNICA A LA VISTA
   Las especificaciones ya no viven en una ventana emergente. Están dentro
   de cada producto, en la propia página.
   ========================================================================== */

.cards-grid {
    align-items: start;
}

.power-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.card-block-title {
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    color: var(--bg-primary);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
}

/* --- Lo que ganas ------------------------------------------------------- */

.card-gains {
    background: rgba(78, 70, 53, 0.22);
    border: 1px solid rgba(78, 70, 53, 0.7);
    border-radius: var(--radius-md);
    padding: 20px 20px 18px;
}
.card-gains .card-block-title {
    border-bottom-color: rgba(196, 215, 209, 0.18);
    color: var(--white);
}

.gain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gain-list li {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    gap: 12px;
    align-items: baseline;
}
.gain-fig {
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bg-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.gain-txt {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.gain-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(196, 215, 209, 0.14);
    font-size: 0.81rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.gain-note a {
    color: var(--bg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gain-note a:hover { color: var(--white); }

/* --- Ficha técnica en línea --------------------------------------------- */

.card-specs {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    padding: 20px;
}
.card-specs .spec-group + .spec-group {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--card-border);
}
.card-specs .group-title {
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--green-mid);
    margin-bottom: 12px;
}
.card-specs .spec-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8rem;
    line-height: 1.45;
}
.card-specs .spec-row .label {
    color: var(--text-dim);
    flex-shrink: 0;
}
.card-specs .spec-row .dots {
    flex: 1 1 auto;
    min-width: 12px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}
.card-specs .spec-row .value {
    color: var(--white);
    font-weight: 500;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* El botón queda siempre abajo aunque las tarjetas tengan distinta altura. */
.power-card .btn-card-order {
    margin-top: auto;
    width: 100%;
}

/* La insignia del modelo destacado, sin brillos */
.card-badge.pop {
    background: var(--bg-primary);
    color: var(--green-dark);
}
.card-badge.prem {
    background: var(--brown-warm);
    color: var(--bg-primary);
}
.power-card.popular {
    border-color: var(--accent-line);
}

@media (max-width: 1200px) {
    .cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
}

@media (max-width: 560px) {
    .card-specs, .card-gains { padding: 18px 16px; }
    .gain-list li {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .card-specs .spec-row {
        flex-wrap: wrap;
        gap: 2px 8px;
    }
    .card-specs .spec-row .dots { display: none; }
    .card-specs .spec-row .value {
        text-align: left;
        width: 100%;
    }
}

/* ==========================================================================
   20. LEGIBILIDAD SOBRE FOTOGRAFÍA, SIN CAJAS OSCURAS
   El halo rectangular detrás del texto dejaba un borde visible. Se sustituye
   por un degradado a sangre (sin bordes posibles) más sombra en el propio
   texto, que es lo que de verdad separa la tipografía de la foto.
   ========================================================================== */

.overlay-gradient-dark {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.82) 0%,
            rgba(0, 20, 18, 0.44) 26%,
            rgba(0, 20, 18, 0.46) 58%,
            rgba(0, 20, 18, 0.93) 100%);
}

.overlay-gradient-center {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.80) 0%,
            rgba(0, 20, 18, 0.40) 28%,
            rgba(0, 20, 18, 0.44) 60%,
            rgba(0, 20, 18, 0.92) 100%);
}

.overlay-gradient-bottom {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.62) 0%,
            rgba(0, 20, 18, 0.18) 22%,
            rgba(0, 20, 18, 0.58) 62%,
            rgba(0, 20, 18, 0.97) 100%);
}

.overlay-gradient-side-right {
    background:
        linear-gradient(90deg,
            rgba(0, 20, 18, 0.55) 0%,
            rgba(0, 20, 18, 0.10) 28%,
            rgba(0, 20, 18, 0.72) 68%,
            rgba(0, 20, 18, 0.94) 100%);
}

/* La sombra del texto no tiene borde: se funde con la foto a cualquier tamaño. */
.fullscreen-section h1,
.fullscreen-section h2,
.fullscreen-section .subtitle,
.fullscreen-section .content-container > p,
.fullscreen-section .kicker {
    text-shadow:
        0 1px 2px rgba(0, 12, 11, 0.55),
        0 4px 22px rgba(0, 12, 11, 0.75);
}

/* Dentro del panel opaco del lateral no hace falta y ensuciaría. */
.side-box h2,
.side-box p,
.side-box .kicker {
    text-shadow: none;
}

/* Las píldoras ya tienen fondo propio: se les quita el halo heredado. */
.hero-pill,
.int-badge,
.hero-kicker-badge {
    text-shadow: none;
}

/* Sombras de las píldoras: más suaves y sin halo de color. */
.hero-pill,
.int-badge {
    background: rgba(0, 12, 11, 0.62);
    border: 1px solid var(--accent-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.hero-kicker-badge {
    background: rgba(0, 12, 11, 0.6);
    border: 1px solid var(--accent-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Los botones del hero llevaban un resplandor de color. Sombra neutra. */
.btn-primary {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.btn-primary:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   21. SECCIONES CON FONDO FOTOGRÁFICO
   Ninguna sección queda seguida de otra sin imagen. La foto va a sangre y el
   texto se apoya en un degradado, nunca en una caja.
   ========================================================================== */

.bg-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.bg-photo > * {
    position: relative;
    z-index: 1;
}
.bg-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--bg-photo);
    background-size: cover;
    background-position: var(--bg-photo-pos, center);
    background-repeat: no-repeat;
    transform: scale(1.04);
}
.bg-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.97) 0%,
            rgba(0, 20, 18, 0.87) 26%,
            rgba(0, 20, 18, 0.89) 74%,
            rgba(0, 20, 18, 0.98) 100%);
}

/* ==========================================================================
   22. FOTOGRAFÍA DE PRODUCTO EN LA SECCIÓN DE MODELOS
   ========================================================================== */

.modelos-hero {
    margin: 0 0 var(--space-xl);
    text-align: center;
}
.modelos-hero img {
    width: 100%;
    max-width: 1100px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.modelos-hero figcaption {
    max-width: 640px;
    margin: 20px auto 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ==========================================================================
   23. FICHA TÉCNICA PLEGADA DENTRO DE CADA PRODUCTO
   Delante va lo que gana el cliente. El detalle técnico, a un clic.
   ========================================================================== */

details.card-specs {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    padding: 0;
    overflow: hidden;
}
details.card-specs > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bg-primary);
    transition: background 0.2s ease, color 0.2s ease;
}
details.card-specs > summary::-webkit-details-marker { display: none; }
details.card-specs > summary::after {
    content: "+";
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 400;
    color: var(--bg-primary);
    flex-shrink: 0;
}
details.card-specs[open] > summary::after { content: "\2212"; }
details.card-specs > summary:hover {
    background: rgba(196, 215, 209, 0.06);
    color: var(--white);
}
.card-specs-body {
    padding: 4px 18px 20px;
    border-top: 1px solid var(--card-border);
}
details.card-specs[open] .card-specs-body {
    animation: specsIn 0.28s var(--ease-out);
}
@keyframes specsIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card-specs-body .spec-group:first-child { margin-top: 16px; }

/* ==========================================================================
   24. GLOSARIO EN EL PIE, PLEGADO
   ========================================================================== */

.footer-glosario {
    margin: var(--space-xl) 0 var(--space-lg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}
.footer-glosario > summary {
    padding: 18px 24px;
    cursor: pointer;
    list-style: none;
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: background 0.2s ease;
}
.footer-glosario > summary::-webkit-details-marker { display: none; }
.footer-glosario > summary::after {
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
}
.footer-glosario[open] > summary::after { content: "\2212"; }
.footer-glosario > summary:hover { background: rgba(196, 215, 209, 0.05); }

.footer-glosario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 22px 32px;
    padding: 8px 24px 28px;
    margin: 0;
    border-top: 1px solid var(--card-border);
}
.footer-glosario-grid dt {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    margin: 16px 0 6px;
}
.footer-glosario-grid dd {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ==========================================================================
   25. HERO EN LA PALETA DE MARCA
   Menos blanco plano: el titular alterna blanco y el verde claro de marca,
   y el bloque descansa sobre el degradado, no sobre una caja.
   ========================================================================== */

.fullscreen-section.hero h1 {
    font-family: 'Eloquia Display', 'Outfit', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.04;
}
.highlight-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--bg-primary);
}
.fullscreen-section.hero .subtitle {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.86);
}
.fullscreen-section.hero .subtitle strong {
    color: var(--bg-primary);
    font-weight: 600;
}

.hero-kicker-badge {
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    color: var(--bg-primary);
}
.hero-pill {
    font-family: 'Inter', system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.9);
}
.hero-pill .pill-icon {
    stroke: var(--bg-primary);
}

/* El botón secundario, en el verde claro de marca en vez de blanco puro */
.btn-ghost {
    background-color: rgba(196, 215, 209, 0.07);
    color: var(--bg-primary);
    border: 1px solid var(--accent-line);
}
.btn-ghost:hover {
    background-color: var(--bg-primary);
    color: var(--green-dark);
    border-color: var(--bg-primary);
}

/* ==========================================================================
   26. EFECTOS DE SCROLL
   ========================================================================== */

/* Barra de progreso de lectura sobre el navbar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 1200;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--green-mid), var(--bg-primary));
    pointer-events: none;
    will-change: transform;
}

/* Entradas escalonadas y direccionales */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }

/* Las tarjetas de una misma rejilla entran una detrás de otra */
.stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.stagger.visible > * {
    opacity: 1;
    transform: none;
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.00s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.07s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.14s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.21s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.28s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.35s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.42s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.49s; }

/* Las fotografías se descubren con una cortina en vez de aparecer de golpe */
.img-reveal {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease-out);
}
.img-reveal.visible {
    clip-path: inset(0 0 0 0);
}

/* El contenido del hero se desvanece al salir de pantalla */
.hero .content-container {
    will-change: transform, opacity;
}

/* Subrayado que se dibuja al entrar la sección */
.section-header.center h2 {
    position: relative;
    display: inline-block;
}
.section-header.center h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    height: 1px;
    width: 0;
    background: var(--bg-primary);
    opacity: 0.55;
    transform: translateX(-50%);
    transition: width 0.9s var(--ease-out) 0.25s;
}
.section-header.center.visible h2::after,
.reveal.visible .section-header.center h2::after {
    width: 64px;
}

/* Las cifras que cuentan desde cero necesitan ancho estable */
[data-count] {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress { display: none; }
    .stagger > *,
    .img-reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .section-header.center h2::after { width: 64px; transition: none; }
}

@media (max-width: 768px) {
    .modelos-hero { margin-bottom: var(--space-lg); }
    .footer-glosario-grid { padding: 8px 18px 24px; }
    .footer-glosario > summary { padding: 16px 18px; font-size: 0.82rem; }
}

/* ==========================================================================
   27. NUMERACIÓN DE TARJETAS Y SECCIÓN DE PROCESO
   El recurso de numerar (01, 02, 03) ordena la lectura y da altura
   profesional sin añadir un solo color nuevo.
   ========================================================================== */

.sector-card {
    position: relative;
}
.card-num {
    position: absolute;
    top: 22px;
    right: 24px;
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bg-primary);
    opacity: 0.22;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transition: opacity 0.3s var(--ease-out);
    pointer-events: none;
}
.sector-card:hover .card-num { opacity: 0.5; }

.proceso-section {
    padding: var(--space-3xl) var(--space-lg);
    background: var(--green-dark);
    border-top: 1px solid var(--glass-border);
}

/* Alcance del servicio: la linea roja de que hace VaultGrid y que no.
   Va en el acento calido y no en el verde de marca a proposito, para que se
   lea como una advertencia y no como una ventaja mas de la seccion. */
.proceso-alcance {
    max-width: 900px;
    margin: var(--space-lg) auto 0;
    padding: 18px 22px;
    text-align: left;
    background: var(--warm-soft);
    border: 1px solid var(--warm-line);
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.proceso-alcance strong { color: var(--white); }

.proceso-lista {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    counter-reset: none;
}
.proceso-paso {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 28px;
    align-items: start;
    padding: 30px 0;
    border-top: 1px solid var(--card-border);
}
.proceso-paso:first-child { border-top: none; padding-top: 0; }
.proceso-paso:last-child { padding-bottom: 0; }

.paso-num {
    font-family: 'Eloquia Display', 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 0.9;
    color: var(--green-mid);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    transition: color 0.35s var(--ease-out);
}
.proceso-paso:hover .paso-num { color: var(--bg-primary); }

.paso-cuerpo h3 {
    font-size: 1.32rem;
    line-height: 1.25;
    margin-bottom: 10px;
}
.paso-cuerpo p {
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 62ch;
}

@media (max-width: 640px) {
    .proceso-paso {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
    }
    .paso-num { font-size: 1.9rem; }
    .paso-cuerpo h3 { font-size: 1.15rem; }
    .card-num { top: 18px; right: 18px; font-size: 1.3rem; }
}

/* En una tarjeta de ~400 px, partir el beneficio en dos columnas dejaba
   renglones de tres palabras. Se apila: titular del beneficio y debajo el
   texto, que es como se lee de un vistazo. */
.gain-list li {
    display: block;
}
.gain-fig {
    display: block;
    margin-bottom: 5px;
    font-size: 1.02rem;
    white-space: normal;
}
.gain-fig br { display: none; }
.gain-txt {
    display: block;
}

/* El salto de línea del titular del beneficio se sustituyó por un espacio real:
   ocultarlo por CSS pegaba las palabras ("No tirasel sol que sobra"). */
.gain-fig br { display: inline; }

/* En una tarjeta estrecha, el guiado de puntos empujaba las unidades a la línea
   siguiente ("645,12 / kWh"). La etiqueta pasa arriba y el dato debajo, entero. */
.card-specs .spec-row {
    display: block;
    padding: 8px 0;
}
.card-specs .spec-row + .spec-row {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.card-specs .spec-row .dots { display: none; }
.card-specs .spec-row .label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green-mid);
    margin-bottom: 3px;
}
.card-specs .spec-row .value {
    display: block;
    text-align: left;
    font-size: 0.86rem;
    color: var(--white);
}

/* El chevron del desplegable de la metodología quedaba pegado al texto. */
.calc-method > summary::before { content: "\203A"; margin-right: 8px; }
.calc-method[open] > summary::before { content: "\2039"; margin-right: 8px; }

/* La cortina de revelado iba sobre el mismo elemento que observaba el
   IntersectionObserver. Al recortarlo a cero, el observador nunca lo veía
   entrar en pantalla, así que no recibía la clase .visible y la imagen no
   llegaba a cargarse nunca. El recorte pasa al hijo: el contenedor queda
   sin recortar y el observador funciona. */
.img-reveal {
    clip-path: none;
}
.img-reveal > img,
.img-reveal .img-zoom-wrapper,
.img-reveal > picture {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease-out);
}
.img-reveal.visible > img,
.img-reveal.visible .img-zoom-wrapper,
.img-reveal.visible > picture {
    clip-path: inset(0 0 0 0);
}

/* Aquí la clase está en el propio contenedor de la imagen. Recortar la <img>
   con clip-path impedía que el navegador la considerase visible y nunca
   llegaba a cargarla (loading="lazy"). Se revela con opacidad, que no
   interfiere con la carga diferida y queda igual de bien. */
.img-zoom-wrapper.img-reveal > .showcase-img,
.caso-img-wrapper.img-reveal > .caso-img {
    opacity: 0;
    transition: opacity 0.9s var(--ease-out), transform 0.6s var(--ease-out);
}
.img-zoom-wrapper.img-reveal.visible > .showcase-img,
.caso-img-wrapper.img-reveal.visible > .caso-img {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .img-reveal > img,
    .img-reveal .img-zoom-wrapper,
    .img-zoom-wrapper.img-reveal > .showcase-img,
    .caso-img-wrapper.img-reveal > .caso-img { opacity: 1 !important; }
}

/* ==========================================================================
   28. ICONOGRAFÍA DE LA PARRILLA
   Los iconos son PNG blancos recortados de las parrillas, pintados con
   `mask-image` para que tomen el color de marca del contexto. Así el mismo
   archivo sirve en cualquier fondo sin salirse de la paleta.
   ========================================================================== */

.ico { color: var(--bg-primary); }

/* Tamaños heredados de las clases que antes llevaban los SVG */
.sector-ico-box .ico { width: 24px; height: 24px; }
.card-icon-box .ico  { width: 30px; height: 30px; }
.model-icon-box .ico { width: 30px; height: 30px; }
.b-ico-box .ico      { width: 18px; height: 18px; }
.pill-icon           { width: 16px; height: 16px; }
.mini-icon           { width: 18px; height: 18px; }
.badge-mini-ico      { width: 16px; height: 16px; }
.spec-mini-ico       { width: 16px; height: 16px; }
.footer-contact-ico  { width: 16px; height: 16px; }
.badge-ico           { width: 18px; height: 18px; }
.lock-mini-ico       { width: 15px; height: 15px; }
.v-ico               { width: 20px; height: 20px; }
.sys-icon            { width: 30px; height: 30px; }
.model-hero-ico      { width: 30px; height: 30px; }
.roadmap-line h3 .ico { width: 18px; height: 18px; }

/* Contextos con color propio */
.hero-pill .ico,
.int-badge .ico,
.mini-spec .ico,
.spain-badge .ico,
.caso-specs-summary .ico,
.hud-stat-chip .ico { color: var(--bg-primary); }

.footer-col .ico,
.location-text .ico,
.form-disclaimer .ico { color: var(--green-mid); }

.card-specs .ico,
.b-ico-box .ico { color: var(--bg-primary); }

.roadmap-line h3 .ico { color: var(--bg-primary); }

/* El recuadro que enmarca el icono en las tarjetas */
.sector-ico-box,
.card-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sin soporte de mask-image (navegadores antiguos) el icono se vería como un
   bloque de color. Se oculta y el texto de la tarjeta sigue explicándolo todo. */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .ico { display: none; }
}

/* ==========================================================================
   29. TARJETAS DE SECTOR CON FOTOGRAFÍA
   Cada sector lleva su propia foto de fondo, al estilo de vaultbit.es: la
   imagen contextualiza y el velo garantiza que el texto se lea siempre.
   ========================================================================== */

.sector-card--foto {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.12);
}
.sector-card--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--card-photo);
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 0.9s var(--ease-out);
}
.sector-card--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.72) 0%,
            rgba(0, 20, 18, 0.86) 42%,
            rgba(0, 12, 11, 0.96) 100%);
    transition: background 0.5s var(--ease-out);
}
.sector-card--foto:hover::before { transform: scale(1.08); }
.sector-card--foto:hover::after {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.58) 0%,
            rgba(0, 20, 18, 0.80) 42%,
            rgba(0, 12, 11, 0.95) 100%);
}
.sector-card--foto:hover {
    background: transparent;
    border-color: var(--accent-line);
}

/* Sobre foto, la caja del icono necesita algo más de cuerpo */
.sector-card--foto .sector-ico-box {
    background: rgba(0, 12, 11, 0.55);
    border-color: var(--accent-line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sector-card--foto .card-num { opacity: 0.4; }
.sector-card--foto:hover .card-num { opacity: 0.75; }
.sector-card--foto h3 {
    text-shadow: 0 2px 12px rgba(0, 12, 11, 0.8);
}

/* Con foto, la tarjeta pide algo más de alto para que respire */
.sectores-section .sector-card--foto {
    min-height: 400px;
    padding-top: 32px;
}

/* El velo de las tarjetas de sector estaba tan cargado que la foto no se leía.
   Se aclara la mitad superior, donde está el icono y el titular. */
.sector-card--foto::after {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.50) 0%,
            rgba(0, 20, 18, 0.78) 38%,
            rgba(0, 12, 11, 0.95) 100%);
}
.sector-card--foto:hover::after {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.34) 0%,
            rgba(0, 20, 18, 0.70) 38%,
            rgba(0, 12, 11, 0.94) 100%);
}

/* ==========================================================================
   30. TARJETAS DE SECTOR COMO CARTEL DE ENTRADA
   Dejan de ser artículos: foto nítida, titular, una frase y enlace a su
   página. El desarrollo vive en la subpágina de cada sector.
   ========================================================================== */

a.sector-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-height: 340px;
}

.sector-card--foto::before {
    /* Sin escalado en reposo: reescalar la imagen la reblandecía.
       El zoom queda reservado al hover, donde el movimiento lo justifica. */
    transform: none;
    background-image: var(--card-photo);
}
@media (min-width: 1600px) {
    /* Solo en pantallas muy anchas, donde la tarjeta supera los 480 px, compensa
       descargar la fotografía completa. Por debajo, la de 960 va sobrada. */
    .sector-card--foto::before { background-image: var(--card-photo-lg, var(--card-photo)); }
}
.sector-card--foto:hover::before { transform: scale(1.05); }

/* Con menos texto encima, el velo puede aclararse y dejar ver la fotografía. */
.sector-card--foto::after {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.30) 0%,
            rgba(0, 20, 18, 0.58) 45%,
            rgba(0, 12, 11, 0.92) 100%);
}
.sector-card--foto:hover::after {
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.18) 0%,
            rgba(0, 20, 18, 0.46) 45%,
            rgba(0, 12, 11, 0.90) 100%);
}

.sector-card--foto h3 {
    margin-top: auto;
    font-size: 1.22rem;
    line-height: 1.25;
}
.sector-gancho {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 10px rgba(0, 12, 11, 0.7);
}
.sector-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(196, 215, 209, 0.18);
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bg-primary);
}
.sector-link span {
    transition: transform 0.3s var(--ease-out);
}
a.sector-card:hover .sector-link span { transform: translateX(4px); }
a.sector-card:focus-visible { outline-offset: 4px; }

/* El icono, sobre foto más clara, necesita algo más de cuerpo */
.sector-card--foto .sector-ico-box {
    width: 44px;
    height: 44px;
    background: rgba(0, 12, 11, 0.62);
}

@media (max-width: 560px) {
    a.sector-card { min-height: 280px; }
    .sector-card--foto h3 { font-size: 1.1rem; }
}

/* Reparto vertical buscado: icono y titular arriba, enlace anclado abajo y la
   fotografía respirando en la franja central. El flex-grow que .sector-card p
   ya traía es justo lo que abre esa franja, así que se conserva. */
.sector-card--foto h3 { margin-top: 0; }
.sector-card--foto .sector-link { margin-top: auto; }

/* ==========================================================================
   31. PREGUNTAS FRECUENTES PLEGADAS
   Tres a la vista y el resto tras un desplegable, con el mismo tratamiento
   que las fichas técnicas y el glosario del pie.
   ========================================================================== */

.faq-mas {
    margin-top: 18px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    overflow: hidden;
}
.faq-mas > summary {
    padding: 18px 24px;
    cursor: pointer;
    list-style: none;
    font-family: 'Realtime Rounded', 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: background 0.2s ease;
}
.faq-mas > summary::-webkit-details-marker { display: none; }
.faq-mas > summary::after {
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
}
.faq-mas[open] > summary::after { content: "\2212"; }
.faq-mas > summary:hover { background: rgba(196, 215, 209, 0.05); }

.faq-mas-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 18px 20px;
    border-top: 1px solid var(--card-border);
}
.faq-mas[open] .faq-mas-cuerpo {
    animation: specsIn 0.3s var(--ease-out);
}
.faq-mas-cuerpo .faq-item:first-child { margin-top: 14px; }

@media (max-width: 768px) {
    .faq-mas > summary { padding: 16px 18px; font-size: 0.82rem; }
    .faq-mas-cuerpo { padding: 4px 12px 18px; }
}

/* El botón del formulario principal ahora lleva el glifo de WhatsApp */
.btn-submit { gap: 10px; }
.btn-submit .wa-send-icon {
    width: 18px;
    height: 18px;
    fill: var(--green-dark);
}

/* Salida alternativa: solo aparece después de pulsar enviar */
.form-fallback {
    display: none;
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: center;
}
.form-fallback.show { display: block; }
.form-fallback a {
    color: var(--bg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.form-fallback a:hover { color: var(--white); }

/* ==========================================================================
   32. PÁGINAS DE SECTOR
   Reutilizan los componentes de la home (kicker, proceso, gain-list, faq) y
   solo añaden la portada, el ancho de lectura y la tarjeta de modelo.
   ========================================================================== */

.section-container.narrow {
    max-width: 820px;
}

/* --- Portada ------------------------------------------------------------ */

.sector-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 190px var(--space-lg) var(--space-2xl);
}
.sector-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--bg-photo);
    background-size: cover;
    background-position: center;
}
.sector-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(0, 20, 18, 0.88) 0%,
            rgba(0, 20, 18, 0.62) 38%,
            rgba(0, 12, 11, 0.94) 100%);
}
.sector-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.08;
    margin-bottom: 18px;
    max-width: 18ch;
    text-shadow: 0 2px 20px rgba(0, 12, 11, 0.7);
}
.sector-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 300;
    max-width: 62ch;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 16px rgba(0, 12, 11, 0.7);
}
.sector-hero .kicker .ico {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 6px;
}
.sector-hero .kicker::before { display: none; }
.sector-hero .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Migas de pan */
.migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.migas a { color: var(--text-muted); }
.migas a:hover { color: var(--bg-primary); }
.migas span[aria-hidden] { opacity: 0.5; }
.migas [aria-current] { color: var(--bg-primary); }

/* --- Bloques de contenido ----------------------------------------------- */

.sector-bloque {
    padding: var(--space-2xl) var(--space-lg);
    background: var(--green-dark);
}
.sector-bloque.alterno {
    background: var(--green-darker);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}
.sector-bloque h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.18;
    margin-bottom: 20px;
}
.sector-bloque > .section-container > p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    max-width: 68ch;
}
.sector-bloque .proceso-lista { margin-top: 8px; }
.sector-bloque .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

/* Beneficios en dos columnas, que aquí hay sitio */
.sector-ganancias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 26px 36px;
    margin-top: 8px;
}
.sector-ganancias li {
    padding-top: 18px;
    border-top: 1px solid var(--card-border);
}
.sector-ganancias .gain-fig {
    font-size: 1.05rem;
    margin-bottom: 8px;
}
.sector-ganancias .gain-txt { font-size: 0.92rem; }

/* --- Modelo recomendado -------------------------------------------------- */

.modelo-sugerido {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 34px;
    align-items: center;
    margin-top: 10px;
    padding: 30px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}
.modelo-sugerido-cifras {
    border-right: 1px solid var(--card-border);
    padding-right: 30px;
}
.modelo-sugerido-cifras .model-code {
    display: block;
    margin-bottom: 10px;
}
.modelo-sugerido-fmt {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.modelo-sugerido-texto p {
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.sector-mas-faq {
    margin-top: 22px;
    font-size: 0.88rem;
    color: var(--text-dim);
}
.sector-mas-faq a {
    color: var(--bg-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tarjeta de "los ocho sectores", sin foto */
.sector-card--todos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 340px;
    padding: 32px 26px 28px;
    background: var(--surface-1);
    border: 1px dashed var(--accent-line);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.sector-card--todos:hover {
    background: var(--surface-2);
    border-color: var(--bg-primary);
}
.sector-card--todos .sector-ico-box { margin-bottom: auto; }
.sector-card--todos h3 { font-size: 1.18rem; }

@media (max-width: 768px) {
    .sector-hero { padding: 140px var(--space-md) var(--space-xl); }
    .sector-bloque { padding: var(--space-xl) var(--space-md); }
    .modelo-sugerido {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 20px;
    }
    .modelo-sugerido-cifras {
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        padding-right: 0;
        padding-bottom: 22px;
    }
}

/* Los títulos de columna del pie pasaron de h4 a h3 para no saltar niveles
   en la jerarquía de encabezados; el aspecto no cambia. */
.footer-col-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-md);
    font-family: 'Outfit', sans-serif;
}

/* ==========================================================================
   MÓVIL · TABLAS DESPLAZABLES Y ZONAS TÁCTILES
   ========================================================================== */

/* Las tablas de las páginas legales llegan a cinco columnas (tratamiento, datos,
   finalidad, base jurídica, conservación). En un móvil no caben, y sin esto
   arrastraban la página entera hacia los lados. Se desplazan dentro de su caja.
   Va envuelta en un div en lugar de poner display:block en la <table>, porque eso
   último le quita la semántica de tabla a algunos lectores de pantalla. */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 0 var(--space-md);
}
.tabla-scroll > table { margin-bottom: 0; }
.tabla-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
@media (max-width: 768px) {
    /* Pista de que se puede arrastrar: un degradado en el borde derecho. */
    .tabla-scroll {
        background:
            linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat,
            linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat;
        background-attachment: local, local;
    }
    .tabla-scroll > table { min-width: 460px; }
}

/* Zonas táctiles: 44 px es el mínimo cómodo con el dedo (WCAG 2.2 · 2.5.8 y las
   guías de iOS y Android). Estos tres se quedaban en 21-38 px. */
@media (max-width: 768px) {
    .menu-toggle {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .footer-legal-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .legal-back {
        min-height: 44px;
        margin-bottom: 24px;
    }
}

/* La miga de pan se quedaba en 20 px de alto: por debajo del mínimo de 24 px
   que pide WCAG 2.2 (2.5.8, tamaño de destino). */
@media (max-width: 768px) {
    .migas a {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 2px 0;
    }
}

/* ==========================================================================
   MÓVIL · CALCULADORA USABLE CON EL DEDO
   ========================================================================== */

/* El deslizador medía 6 px de alto. Como el área sensible de un <input type=range>
   es la caja del propio input y no la del pulsador que sobresale, arrastrarlo con el
   dedo era casi imposible. Se le da altura real y la barra fina pasa a la pista,
   así que se ve exactamente igual pero se puede agarrar. */
.calc-slider {
    height: 24px;
    background: transparent;
    border-radius: 0;
    touch-action: pan-y;
}
.calc-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
}
.calc-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.13);
}
.calc-slider::-webkit-slider-thumb {
    margin-top: -7px; /* (6 px de pista - 20 px de pulsador) / 2, para centrarlo */
}

@media (max-width: 768px) {
    .calc-slider { height: 44px; }
    .calc-slider::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
        margin-top: -10px;
    }
    .calc-slider::-moz-range-thumb { width: 26px; height: 26px; }

    /* 16 px es el umbral por debajo del cual Safari de iOS hace zoom al enfocar un
       campo. Con 14-15 px la página daba un salto cada vez que se tocaba un número. */
    .calc-value-box { padding: 2px 11px; }
    .calc-value-box input {
        font-size: 16px;
        min-height: 40px;
    }
    .calc-num-field input {
        font-size: 16px;
        min-height: 44px;
    }
    .calc-check input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }
    .calc-method > summary {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Los enlaces de las columnas del pie son navegación de verdad, no texto corrido:
   con 23 px de alto se fallaba el dedo. Y la casilla del consentimiento se quedaba
   en 17 px, por debajo del mínimo de 24 px de WCAG 2.2. */
@media (max-width: 768px) {
    .footer-col a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .form-consent input[type="checkbox"] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   MÓVIL · RITMO VERTICAL Y ESCALA TIPOGRÁFICA
   --------------------------------------------------------------------------
   La web estaba compuesta para escritorio y en un teléfono medía casi 48 pantallas
   de alto. Dos causas, las dos de raíz:

   1. Las secciones usan `padding: var(--space-3xl) var(--space-lg)`, o sea 128 px
      arriba y 128 abajo. Con quince secciones eso son casi 4.000 px solo de aire.
      En vez de retocar sección por sección, se encogen los tokens grandes: como
      todo el sitio los usa, el ritmo entero baja de golpe y sin descuadres.

   2. Los titulares usan clamp(mínimo, vw, máximo) con mínimos de escritorio. En un
      teléfono el término vw siempre queda por debajo del mínimo, así que el clamp
      se queda clavado ahí: un h1 de 41 px que se comía seis líneas. Se bajan los
      mínimos solo en móvil, dejando intacto el escritorio.
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --space-xl: 44px;
        --space-2xl: 56px;
        --space-3xl: 68px;
    }

    h1 { font-size: 1.95rem; margin-bottom: var(--space-md); }
    .section-header h2,
    .center-box h2 { font-size: 1.72rem; }
    .sim-header h2 { font-size: 1.6rem; }
    .roadmap-head h2 { font-size: 1.45rem; }
    .sector-hero h1 { font-size: 1.75rem; }
    .sector-bloque h2 { font-size: 1.4rem; }
    .legal-page h1 { font-size: 1.65rem; }
    .calc-headline-value { font-size: 1.85rem; }
    .stats-row .stat-number { font-size: 1.5rem; }

    .subtitle { font-size: 1rem; }
    .section-lead,
    .sector-lead { font-size: 1rem; }

    /* Los bloques de texto centrado a 17-18 px sobre 390 px de ancho salían a seis
       y siete líneas por frase. */
    .section-header { margin-bottom: var(--space-lg); }
}

@media (max-width: 480px) {
    :root {
        --space-xl: 36px;
        --space-2xl: 46px;
        --space-3xl: 54px;
    }

    h1 { font-size: 1.78rem; }
    .section-header h2,
    .center-box h2 { font-size: 1.55rem; }
    .sector-hero h1 { font-size: 1.6rem; }
}

/* La tabla comparativa se desplaza de lado, pero no había forma de saberlo: se veía
   una columna cortada a media palabra y parecía un fallo de maquetación. */
@media (max-width: 768px) {
    .compare-wrapper {
        position: relative;
        background:
            linear-gradient(to left, var(--surface-1) 20%, rgba(0, 0, 0, 0)) right / 32px 100% no-repeat,
            var(--surface-1);
        background-attachment: local, scroll;
    }
    .compare-wrapper::after {
        content: 'Desliza de lado para ver el resto →';
        display: block;
        position: sticky;
        left: 0;
        padding: 8px 14px 10px;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: var(--text-dim);
        border-top: 1px solid var(--card-border);
    }
    .compare-table { min-width: 620px; }
}

/* ==========================================================================
   MÓVIL · FOTOGRAFÍA DE FONDO
   --------------------------------------------------------------------------
   Las fotos de fondo son 16:9 (1920x1072) y se usan con background-size: cover
   sobre secciones que en un teléfono miden 390 px de ancho por hasta 3.716 de
   alto. Cubrir esa proporción obliga al navegador a mostrar una franja vertical
   de apenas el 10 % de la foto ampliada diez veces: de ahí que se vieran
   deformadas y sin poder reconocer qué son.

   Encima el velo iba del 87 % al 98 % de opacidad, pensado para pantallas anchas
   donde la foto es solo textura. En móvil eso la borra del todo.

   Solución: en móvil la foto deja de intentar cubrir la sección entera y pasa a
   ser una banda superior a proporción casi natural, que se funde con el color de
   fondo. Se ve la foto, se entiende, y el texto sigue legible.
   ========================================================================== */

@media (max-width: 768px) {
    .bg-photo::before {
        inset: 0 0 auto 0;
        height: 320px;
        background-position: center 40%;
        transform: none;
    }
    /* Paradas en píxeles y no en porcentaje: el gradiente tiene que fundirse a la
       altura de la banda, no a un porcentaje de una sección de 3.000 px. El último
       tramo es rgba(0,20,18,1), que es exactamente --green-dark, así que por debajo
       de la banda el velo es invisible sobre el fondo del sitio. */
    .bg-photo::after {
        background: linear-gradient(180deg,
            rgba(0, 20, 18, 0.42) 0px,
            rgba(0, 20, 18, 0.70) 150px,
            rgba(0, 20, 18, 0.94) 270px,
            rgba(0, 20, 18, 1) 330px,
            rgba(0, 20, 18, 1) 100%);
    }

    /* Las secciones a pantalla completa tenían el mismo problema, más suave. Bajarlas
       a dos tercios de pantalla reduce el recorte a la mitad. svh en vez de vh: con vh
       el navegador cuenta la barra de direcciones desplegada y la sección pega un salto
       al hacer scroll. */
    .fullscreen-section {
        min-height: 62vh;
        min-height: 62svh;
        background-position: center 45%;
    }
    /* El hero sí merece ocupar casi toda la pantalla: es lo primero que se ve. */
    .fullscreen-section.hero {
        min-height: 82vh;
        min-height: 82svh;
    }

    /* Velos de las secciones a pantalla completa: los de escritorio dejaban la foto
       casi negra en una pantalla pequeña. */
    .overlay-gradient-dark {
        background: radial-gradient(circle at center, rgba(0,20,18,0.42) 0%, rgba(0,20,18,0.86) 90%);
    }
    .overlay-gradient-center {
        background: radial-gradient(circle, rgba(0,20,18,0.38) 0%, rgba(0,20,18,0.88) 90%);
    }
    .overlay-gradient-bottom {
        background: linear-gradient(to top, rgba(0,20,18,1) 0%, rgba(0,20,18,0.72) 45%, rgba(0,20,18,0.18) 85%);
    }
    /* Este estaba compuesto para texto a la derecha en pantalla ancha. En vertical
       no hay "derecha": se convierte en un velo de abajo arriba. */
    .overlay-gradient-side-right {
        background: linear-gradient(to top, rgba(0,20,18,0.97) 0%, rgba(0,20,18,0.78) 40%, rgba(0,20,18,0.28) 85%);
    }
}

/* ==========================================================================
   MÓVIL · REJILLAS DE CIFRAS EN DOS COLUMNAS
   --------------------------------------------------------------------------
   Una etiqueta corta y un número no necesitan el ancho entero del teléfono. Al
   caer a una sola columna, los cinco KPI de la calculadora ocupaban 800 px de
   scroll para mostrar cinco cifras. En dos columnas caben igual de holgados.
   ========================================================================== */
@media (max-width: 768px) {
    .calc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .calc-kpi { padding: 12px 10px; }
    .caso-card .caso-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Por debajo de 380 px sí compensa una sola columna: a dos, las cifras largas
   ("247.250 €") se partirían. */
@media (max-width: 380px) {
    .calc-kpi-grid { grid-template-columns: 1fr; }
}

/* Los cards de producto miden 1.400 px cada uno en móvil, y eso es contenido real
   (modelo, capacidad, ficha técnica, precio), no aire. Pero 36/30 de padding y 22 de
   hueco interno sí son medidas de escritorio: apretándolas se recuperan tres pantallas
   sin quitar una sola línea. */
@media (max-width: 768px) {
    .power-card { padding: 26px 20px; gap: 16px; }
    .cards-grid { gap: 20px; }
}