/* ═══════════════════════════════════════════════════════════════
   GEPYR Landing — styles.css
   Apple-inspired: large typography, generous whitespace,
   restrained motion, warm brand palette.
   ═══════════════════════════════════════════════════════════════ */

/* ── Font ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('vendor/fonts/inter-latin.woff2') format('woff2');
}

/* ── Tokens ── */
:root {
    --bg:             #FAF6EF;
    --bg-elevated:    #ffffff;
    --bg-sunken:      #F2EBDF;
    --text-primary:   #262D38;
    --text-secondary: #6B6459;
    --text-tertiary:  #8B8378;
    --accent:         #2F3B4A;
    --accent-hover:   #3D4C60;
    --accent-subtle:  rgba(47, 59, 74, 0.06);
    --gold:           #B58D53;
    --green:          #47704F;
    --ia:             #4A7096;
    --ia-subtle:      rgba(74, 112, 150, 0.10);
    --border:         rgba(0, 0, 0, 0.06);
    --border-strong:  rgba(0, 0, 0, 0.10);
    --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.10);
    --radius:         14px;
    --radius-lg:      22px;
    --radius-xl:      30px;
    --ease:           cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration:       0.4s;
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(47, 59, 74, 0.15);
    color: var(--text-primary);
}

/* ── Accesibilidad ──
   Foco visible para navegación por teclado (antes no había NINGÚN estilo de foco:
   el tabulador era invisible). :focus-visible no afecta al clic de ratón. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Salto al contenido: oculto hasta recibir foco con el teclado. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1200;
    padding: 0.6rem 1.1rem;
    background: var(--accent);
    color: #fff;
    border-radius: 980px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: top 0.2s var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

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

/* ═══════════ NAVBAR ═══════════ */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 2rem;
    transition: background var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

#navbar.scrolled {
    background: rgba(250, 246, 239, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 0.5px 0 var(--border);
}

.nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.2px;
}

/* Logo de marca 100% CSS: círculo granate, anillo dorado, monograma G serif.
   Reutilizable en navbar y footer. Tamaño regulable con width/height/font-size. */
.logo-gp svg {
    width: 74%;
    height: 74%;
    display: block;
}

.logo-gp {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f3e9da;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1;
    user-select: none;
}

.nav-links {
    display: flex;
    gap: 2.2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    transition: color var(--duration) var(--ease);
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.btn-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 1.1rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 980px;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    transition: background var(--duration) var(--ease), opacity var(--duration);
}

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

/* Hamburger */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    /* Área táctil de 44x44 sin agrandar el dibujo: el padding centra las 3
       barras (24x18) dentro del cuadrado accesible. */
    width: 44px;
    height: 44px;
    padding: 13px 10px;
    box-sizing: border-box;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
}

.nav-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease),
                background 0.35s var(--ease);
}

/* Con el menú abierto la X queda sobre el overlay oscuro: hereda el blanco
   de los .mobile-link (el marino de --text-primary no contrastaba). */
.nav-hamburger.open span {
    background: rgba(255, 255, 255, 0.85);
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(8.25px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-8.25px) rotate(-45deg);
}

/* ═══════════ MOBILE MENU ═══════════ */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(29, 29, 31, 0.92);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
}

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

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap reducido de 2rem a 1rem porque ahora los .mobile-link aportan su
       propio padding vertical (área táctil de 44px). */
    gap: 1rem;
}

.mobile-link {
    display: block;
    padding: 0.6rem 2rem;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    transition: color 0.3s;
}

.mobile-link:hover {
    color: #fff;
}

.mobile-enter {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 0.7rem 2.2rem;
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-enter:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ═══════════ HERO ═══════════ */
#hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 10rem 2rem 8rem;
    background: var(--bg);
    overflow: hidden;
}

.hero-inner {
    /* Ancho para que el titular y el subtítulo quepan en DOS líneas en escritorio
       (a 720px el H1 rompía en tres). */
    max-width: 880px;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease) 0.1s forwards;
}

#hero h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--text-primary);
    margin-bottom: 1.8rem;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease) 0.25s forwards;
}

.hero-accent {
    color: var(--accent);
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--text-secondary);
    line-height: 1.65;
    font-weight: 400;
    max-width: 660px;
    margin: 0 auto 2.8rem;
    letter-spacing: -0.1px;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease) 0.4s forwards;
}

.hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: heroFadeUp 1s var(--ease) 0.55s forwards;
}

/* Microcopy de confianza bajo los CTAs: el argumento «sin tarjeta» no espera a Pricing. */
.hero-note {
    margin-top: 1.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0;
    animation: heroFadeUp 1s var(--ease) 0.7s forwards;
}

.hero-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--bg-sunken));
    pointer-events: none;
}

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

/* ═══════════ BUTTONS ═══════════ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.8rem;
    /* Latón (feedback 07-10): el CTA de la prueba gratis en marino resultaba serio;
       el latón con tinta marino es el mismo sistema pero alegre y cálido. */
    background: var(--gold);
    color: #262D38;
    text-decoration: none;
    border-radius: 980px;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0;
    border: none;
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                transform 0.2s var(--ease);
}

.btn-primary:hover {
    background: #C39D63;
}

.btn-primary:active {
    transform: scale(0.97);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.8rem;
    background: transparent;
    color: var(--accent);
    text-decoration: none;
    border-radius: 980px;
    font-size: 0.88rem;
    font-weight: 400;
    border: none;
    cursor: pointer;
    transition: color var(--duration), background var(--duration);
}

.btn-secondary:hover {
    background: var(--accent-subtle);
}

.btn-lg {
    padding: 0.78rem 2rem;
    font-size: 0.92rem;
}

.btn-full {
    width: 100%;
}

/* ═══════════ SECTIONS ═══════════ */
.section-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-narrow {
    max-width: 740px;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--text-primary);
}

.section-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-top: 1.2rem;
    font-weight: 400;
}

/* ═══════════ HOW IT WORKS ═══════════ */
#how-it-works {
    padding: 6rem 0;
    background: var(--bg-sunken);
}

.steps-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

.step-card {
    flex: 1;
    max-width: 320px;
    text-align: center;
    padding: 3rem 2rem;
}

.step-number {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.2;
    margin-bottom: 1.4rem;
    transition: opacity var(--duration);
}

.step-card:hover .step-number {
    opacity: 0.45;
}

.step-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.step-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-weight: 400;
}

.step-divider {
    width: 1px;
    background: var(--border-strong);
    margin: 2rem 0;
    flex-shrink: 0;
}

/* ═══════════ PRICING ═══════════ */
#pricing {
    padding: 6rem 0;
    background: var(--bg);
}

.pricing-card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
    transition: box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

/* Insignia de oferta sobre la etiqueta del plan: «14 días gratis». */
.pricing-badge {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.34rem 0.9rem;
    border-radius: 980px;
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Precio final con impuestos, discreto bajo el importe. */
.pricing-tax {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Línea de prueba gratuita bajo el importe. */
.pricing-trial {
    margin-top: 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--green);
}

.pricing-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.pricing-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 2rem;
}

.pricing-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.price-symbol {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 2px;
    align-self: flex-start;
    margin-top: 0.8rem;
}

.price-integer {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--text-primary);
}

.price-decimal {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.price-period {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 4px;
}

.pricing-divider {
    width: 40px;
    height: 1px;
    background: var(--border-strong);
    margin: 2rem auto;
}

.pricing-features {
    list-style: none;
    text-align: left;
    margin-bottom: 2.5rem;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--text-primary);
}

.pricing-features li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--green);
    stroke-width: 2.5;
}

.pricing-note {
    margin-top: 1rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ── Rejilla de planes ──
   La tarjeta nació sola y centrada (max-width + margin auto). Con el segundo plan
   pasa a rejilla de dos columnas iguales, y dentro de la rejilla se neutraliza ese
   centrado. Las tarjetas se hacen flex y la lista de ventajas crece: así el pie de
   cada una (CTA o nota) queda alineado aunque una tenga 8 líneas y la otra 3. */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing-grid .pricing-card {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.pricing-grid .pricing-features {
    flex: 1;
}

/* ── Plan aún no disponible ──
   Mismo blanco que el plan a la venta: hundirlo o atenuarlo lo haría parecer
   inferior, que es lo contrario de lo que dice un plan superior. Lo que aún no
   está disponible ya lo dice «Próximamente». La diferencia es el perfil en latón
   —el mismo de su insignia y sus iconos— y una sombra más plana, para que la
   primacía visual siga siendo del plan que hoy sí se puede comprar. Sin elevación
   al pasar por encima, porque no hay nada que pulsar. */
.pricing-card--soon {
    border-color: rgba(181, 141, 83, 0.45);
    box-shadow: var(--shadow-sm);
}

.pricing-card--soon:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

/* Insignia en latón perfilado: mismo sistema que la del plan a la venta pero sin el
   peso del sólido, para que no compita con «14 días gratis», que sí es accionable. */
.pricing-badge--soon {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

/* Ocupa el hueco del importe y reserva su altura (5rem = .price-integer), para que
   el separador y las ventajas arranquen a la misma altura en las dos tarjetas. No
   hereda el cuerpo del precio: una palabra a 5rem desbordaría la tarjeta. */
.pricing-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    /* 0.4rem propios + las DOS líneas que la tarjeta de al lado tiene bajo el importe
       y esta no (IVA incluido y prueba gratis): margen superior más caja de texto de
       cada una, por el interlineado del body. Así el separador y la lista de ventajas
       arrancan a la misma altura en ambas. */
    margin-bottom: calc(0.4rem + 0.2rem + 0.8rem * 1.5 + 0.5rem + 0.86rem * 1.5);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-primary);
}

/* Primera ventaja: no es una función suelta, es el plan de al lado entero. Negrita
   y «+» en vez de check — el patrón habitual de «todo lo anterior, y además». */
.pricing-inherit {
    font-weight: 600;
}

/* Los checks del plan a la venta son verdes («lo tienes»). Aquí nada está
   disponible todavía: van en latón, que en esta marca es lo que aún no ha llegado. */
.pricing-card--soon .pricing-features li svg {
    color: var(--gold);
}

/* ── Planes apilados ──
   Dos tarjetas de ~440px no caben por debajo de ~900px. Va después de las reglas de
   arriba, no junto a la rejilla, porque tiene que ganarles: son de igual
   especificidad y en CSS manda la última. */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        /* 1.5rem es la separación ENTRE COLUMNAS; apiladas, ese mismo hueco deja las
           dos tarjetas pegadas. En vertical necesitan aire de verdad. */
        gap: 2.5rem;
    }

    /* En una sola columna cada tarjeta es su propia fila y ya no hay nada con lo que
       alinear: la reserva de las dos líneas del importe de al lado se convierte en un
       vacío en mitad de la tarjeta. Vuelve a su margen natural. */
    .pricing-soon {
        margin-bottom: 0.4rem;
    }
}

/* ═══════════ FAQ ═══════════ */
#faq {
    padding: 6rem 0;
    background: var(--bg-sunken);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    gap: 2rem;
    letter-spacing: -0.1px;
    transition: color 0.3s;
}

.faq-question:hover {
    color: var(--accent);
}

.faq-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.4s var(--ease), color 0.3s;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
}

.faq-item.open .faq-answer {
    /* Holgado: con 200px, una respuesta de 3-4 líneas se cortaba en móvil. */
    max-height: 400px;
}

.faq-answer p {
    padding-bottom: 1.3rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.65;
    font-weight: 400;
}

/* ═══════════ NUESTRA HISTORIA ═══════════
   Carta breve de los fundadores: texto plano, sin tarjeta ni CTA — la única
   sección "humana" de la página. Lead en tinta primaria y firma en latón
   (uso puntual del dorado como acento de marca). */
#nuestra-historia {
    padding: 6rem 0;
    background: var(--bg);
}

.story-body {
    max-width: 600px;
    margin: 0 auto;
}

.story-body p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    font-weight: 400;
}

.story-body p + p {
    margin-top: 1.35rem;
}

.story-body .story-lead {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-primary);
}

.story-body .story-signature {
    margin-top: 2rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.2px;
}

/* ═══════════ CTA FINAL ═══════════ */
#cta-final {
    padding: 6rem 0;
    background: var(--bg);
}

.cta-block {
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(135deg, var(--accent), #3D4C60);
    border-radius: var(--radius-xl);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-block::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.14;
    pointer-events: none;
}

.cta-block::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.05;
    pointer-events: none;
}

.cta-block h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin-bottom: 1rem;
    position: relative;
}

.cta-block p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2.2rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    font-weight: 400;
}

/* Sobre el bloque marino, el CTA latón ya funciona tal cual; solo necesita
   position para quedar por encima de los círculos decorativos. */
.cta-block .btn-primary {
    position: relative;
}

.cta-note {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    position: relative;
}

/* ═══════════ LEAD MAGNET · captura de email ═══════════
   La sección #guia se sirve con [hidden] hasta que exista la guía y un proveedor
   de formularios configurado en landing.js (LEAD_FORM_ACTION). */
#guia {
    padding: 0 0 8rem;
    background: var(--bg);
}

.lead-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 3rem 2.5rem;
}

.lead-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--text-primary);
    margin: 0.6rem 0 0.8rem;
}

.lead-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 460px;
    margin: 0 auto 1.8rem;
}

.lead-form {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.lead-input {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    padding: 0.72rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: 980px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg);
}

.lead-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.lead-note {
    margin-top: 1rem;
    font-size: 0.74rem;
    color: var(--text-secondary);
}

/* ═══════════ FOOTER ═══════════
   Una sola fila, sin marca: copyright a la izquierda y todos los enlaces a la derecha.
   En pantallas estrechas se envuelve y se centra (ver media queries). */
#footer {
    padding: 0 2rem;
    background: var(--bg);
}

.footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    border-top: 1px solid var(--border);
    padding: 1.8rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1.4rem;
}

.footer-legal a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 400;
    transition: color 0.3s;
}

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

.footer-bottom p {
    font-size: 0.78rem;
    /* text-secondary (no tertiary): a este cuerpo, el terciario no pasa el contraste AA. */
    color: var(--text-secondary);
    font-weight: 400;
}

/* ═══════════ COOKIE BANNER ═══════════ */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: cookieUp 0.4s var(--ease);
}

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

.cookie-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.cookie-text {
    flex: 1;
    min-width: 240px;
}

.cookie-text p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.cookie-text a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.cookie-btn {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 1.1rem;
    border-radius: 980px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.cookie-btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

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

/* ═══════════ PÁGINAS LEGALES ═══════════ */
#navbar.static {
    position: static;
    background: rgba(250, 246, 239, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 0.5px 0 var(--border);
}

.legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 2rem 5rem;
}

.legal-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.8rem;
}

.legal-doc h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.legal-updated {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.legal-doc h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 2.2rem 0 0.8rem;
    color: var(--text-primary);
}

.legal-doc p,
.legal-doc li {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.legal-doc p {
    margin-bottom: 1rem;
}

.legal-doc ul {
    margin: 0 0 1rem 1.2rem;
}

.legal-doc li {
    margin-bottom: 0.5rem;
}

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

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

.legal-contact {
    margin-top: 3rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg-sunken);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

/* ═══════════ SCROLL-REVEAL ═══════════ */
/* El estado oculto SOLO se aplica si el JS está activo (landing.js añade .js a <html>).
   Sin JS —o si landing.js falla al ejecutarse— todo el contenido (precio, FAQ, pasos,
   capturas) queda visible por defecto: nunca una página en blanco bajo el hero. */
.js [data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════ TESTIMONIOS ═══════════
   RESERVADOS: la sección se retiró del HTML (los testimonios eran de ejemplo).
   Estos estilos se conservan para restaurarla cuando haya opiniones REALES con
   permiso escrito de las autoras. */
#testimonios {
    padding: 6rem 0;
    background: var(--bg-sunken);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.testimonial-stars {
    display: flex;
    gap: 0.2rem;
    color: var(--gold);
    margin-bottom: 1.1rem;
}

.testimonial-stars svg {
    width: 18px;
    height: 18px;
}

.testimonial-card blockquote {
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 1.6rem;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

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

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

/* ═══════════ CONTACTO ═══════════ */
#contacto {
    padding: 6rem 0;
    background: var(--bg-sunken);
}

/* La cabecera de Contacto va pegada a la tarjeta (su contenido es breve). */
#contacto .section-header {
    margin-bottom: 3rem;
}

/* Tarjeta de contacto: correo destacado + botón, centrada (mailto, sin formulario). */
.contact-cta {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 2.8rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
}

.contact-cta-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.contact-email {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--accent);
    text-decoration: none;
    word-break: break-word;
    transition: color var(--duration) var(--ease);
}

.contact-email:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* ═══════════ RESPONSIVE ═══════════ */
/* CTA de registro persistente en la barra (desktop). Botón primario compacto. */
.nav-cta-trial {
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
}

/* Franja de confianza bajo el hero: puntos honestos separados por un punto medio. */
.trust-strip {
    list-style: none;
    margin: 0;
    padding: 0.9rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.6rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
}

.trust-strip li {
    position: relative;
}

.trust-strip li:not(:first-child)::before {
    content: "·";
    position: absolute;
    left: -0.85rem;
    color: var(--text-tertiary);
}

@media (max-width: 640px) {
    .trust-strip li::before { content: none; }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    /* En móvil su sitio es el menú desplegable (.mobile-trial): la barra deja solo
       "Entrar" + hamburguesa para no amontonarse. */
    .nav-cta-trial {
        display: none;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .nav-hamburger {
        display: flex;
    }

    /* En móvil conviven "Entrar" y la hamburguesa: se reduce el botón y se
       garantiza separación para que no se solapen ni desborden la barra. */
    .btn-enter {
        padding: 0.34rem 0.85rem;
        font-size: 0.78rem;
    }

    #hero {
        padding: 8rem 1.5rem 5rem;
        min-height: auto;
    }

    .steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .step-card {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    .step-divider {
        width: 40px;
        height: 1px;
        margin: 0;
    }

    .pricing-card {
        padding: 3rem 1.8rem 2.5rem;
    }

    .price-integer {
        font-size: 4rem;
    }

    .cta-block {
        padding: 3.5rem 1.5rem;
        border-radius: var(--radius-lg);
    }

    #how-it-works,
    #pricing,
    #faq,
    #testimonios,
    #nuestra-historia,
    #cta-final,
    #contacto {
        padding: 5.5rem 0;
    }

    #guia {
        padding: 0 0 5.5rem;
    }

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

    .footer-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* El padding lateral fijo de 2rem apretaba el contenido en pantallas de
       320-360px; se reduce a 1rem para ganar ancho útil. */
    .section-inner,
    #navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nav-inner {
        height: 48px;
    }

    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .hero-ctas .btn-primary,
    .hero-ctas .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .footer-legal {
        justify-content: center;
    }

    .cookie-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
        padding: 0.55rem 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   POR DENTRO · mockups por funcionalidad (capturas fake animadas)
   Marco de ventana estilo macOS + UI fake. Los gráficos son SVG/CSS
   puro (la landing se publica sola en Pages: no hay acceso a ../src).
   Se animan al entrar en viewport reutilizando la clase .visible que
   añade el IntersectionObserver de landing.js a [data-animate].
   ═══════════════════════════════════════════════════════════════ */
#por-dentro {
    padding: 6rem 0;
    background: var(--bg);
}

.showcase-row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 0;
}

.showcase-row + .showcase-row {
    border-top: 1px solid var(--border);
    margin-top: 1rem;
    padding-top: 3rem;
}

/* En filas invertidas, la copia va primero en el DOM-flow visual. */
.showcase-row--reverse .showcase-media { order: 2; }
.showcase-row--reverse .showcase-copy { order: 1; }

.showcase-copy .showcase-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.9rem;
}

.showcase-copy h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.showcase-copy > p {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.6rem;
    max-width: 420px;
}

.showcase-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.showcase-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 400;
}

.showcase-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}

/* ── Marco de ventana (semáforo macOS) ── */
.appwin {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.appwin-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 1rem;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
}

.appwin-dots {
    display: inline-flex;
    gap: 0.42rem;
}

.appwin-dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ddd;
}
.appwin-dots i:nth-child(1) { background: #ff5f57; }
.appwin-dots i:nth-child(2) { background: #febc2e; }
.appwin-dots i:nth-child(3) { background: #28c840; }

.appwin-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: -0.1px;
}

.appwin-body {
    padding: 1.3rem;
}

/* ── Mock dashboard (observabilidad) ── */
.dm-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.dm-kpi {
    background: var(--bg-sunken);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
}

.dm-kpi-label {
    display: block;
    font-size: 0.62rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 0.3rem;
}

.dm-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    white-space: nowrap;
}

.dm-kpi:first-child .dm-kpi-val { color: var(--accent); }

.dm-mid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.dm-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 0.9rem;
}

.dm-card-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.dm-card-title small {
    font-weight: 400;
    color: var(--text-tertiary);
}

/* Barras verticales (histórico de pedidos) */
.dm-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 96px;
}

.dm-bar {
    flex: 1;
    height: var(--h);
    /* Acero de la paleta de DATOS de la app (inicio.js), no --gold: el showcase
       replica el producto real. */
    background: #3E74B0;
    border-radius: 4px 4px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.7s var(--ease) calc(var(--i) * 0.06s);
}

.showcase-media.visible .dm-bar { transform: scaleY(1); }

/* Donut (pedidos por estado) */
.dm-donut-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dm-donut {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.dm-donut-bg { stroke: var(--bg-sunken); }

.dm-seg {
    stroke-dasharray: 0 100;
    transform: rotate(var(--rot));
    transform-origin: center;
    transform-box: fill-box;
    transition: stroke-dasharray 0.9s var(--ease) var(--delay, 0s);
}

.showcase-media.visible .dm-seg { stroke-dasharray: var(--da); }

.dm-legend {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.7rem;
}

.dm-legend li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.dm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Área (beneficio) */
.dm-area {
    width: 100%;
    height: 88px;
    display: block;
}

.dm-area-fill {
    fill: rgba(60, 138, 80, 0.14);
    opacity: 0;
    transition: opacity 0.9s var(--ease) 0.5s;
}

.showcase-media.visible .dm-area-fill { opacity: 1; }

.dm-area-line {
    fill: none;
    stroke: #3C8A50;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.3s var(--ease) 0.15s;
}

.showcase-media.visible .dm-area-line { stroke-dashoffset: 0; }

/* ── Mock receta (replica el modal «Ver receta» de la app) ── */
.rm-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.rm-sec { margin-bottom: 1rem; }

.rm-sec-h {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.rm-sub-h {
    display: block;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin: 0.7rem 0 0.4rem;
}

.rm-ing {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.rm-ing li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.36rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.rm-ing li:last-child { border-bottom: none; }
.rm-ing b { color: var(--text-primary); font-weight: 600; white-space: nowrap; }

.rm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1rem;
}

.rm-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.rm-label { color: var(--text-secondary); }
.rm-value { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.rm-value--b { color: var(--accent); }

.rm-hl {
    background: var(--accent-subtle);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin-top: 0.4rem;
}

.rm-hl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.rm-hl-row--total {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

.rm-hl-row--unit {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rm-hl-row--unit span:last-child { color: var(--text-primary); font-weight: 600; }

.rm-fecha {
    margin-top: 0.8rem;
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

/* ── Mock pedidos ── */
.po-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.po-head > span:first-child {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.po-head-month {
    font-size: 0.76rem;
    color: var(--text-tertiary);
}

.po-list { list-style: none; }

.po-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease) calc(var(--i) * 0.08s),
                transform 0.5s var(--ease) calc(var(--i) * 0.08s);
}

.showcase-media.visible .po-row { opacity: 1; transform: translateY(0); }

.po-cli {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-date { font-size: 0.76rem; color: var(--text-tertiary); }
.po-total { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }

.po-pill {
    font-size: 0.64rem;
    font-weight: 600;
    padding: 0.22rem 0.55rem;
    border-radius: 980px;
    white-space: nowrap;
}
.po-pill--ok   { color: var(--green);  background: rgba(71, 112, 79, 0.12); }
.po-pill--prep { color: #3D5D7D;       background: rgba(74, 112, 150, 0.14); }
.po-pill--pend { color: #8a6a2b;       background: rgba(181, 141, 83, 0.18); }

.po-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.po-foot b { color: var(--accent); font-weight: 700; font-size: 0.95rem; }

/* ── Mock elaboraciones (texto libre, como en la app) ── */
.em-head { margin-bottom: 0.8rem; }
.em-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text-primary);
}
.em-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin-top: 0.25rem;
}
.em-text {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ── Mock calendario ── */
.cal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}
.cal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.cal-nav { display: flex; gap: 0.35rem; }
.cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    background: var(--bg-elevated);
}
.cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.cal-week span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-tertiary);
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-cell {
    position: relative;
    min-height: 44px;
    padding: 4px 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    overflow: hidden;
}
.cal-cell--today {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.cal-cell--has {
    background: var(--accent-subtle);
    border-color: transparent;
}
.cal-d { display: block; font-weight: 600; }
.cal-ev {
    display: block;
    margin-top: 2px;
    font-size: 0.58rem;
    line-height: 1.25;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-badge {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.56rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    padding: 0.1rem 0.35rem;
    border-radius: 980px;
}
.cal-today-tag {
    display: block;
    margin-top: 2px;
    font-size: 0.56rem;
    font-weight: 600;
    color: var(--accent);
}

/* ── Mock chat IA (mismas burbujas que el chat real de la app) ── */
.cm { display: flex; flex-direction: column; }
.cm-msgs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.cm-bubble {
    max-width: 85%;
    padding: 0.55rem 0.8rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease) calc(var(--i) * 0.18s),
                transform 0.5s var(--ease) calc(var(--i) * 0.18s);
}
.showcase-media.visible .cm-bubble { opacity: 1; transform: translateY(0); }
.cm-bubble--user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.cm-bubble--bot {
    align-self: flex-start;
    background: var(--bg-sunken);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.cm-bubble p { margin: 0 0 0.4rem; }
.cm-bubble p:last-child { margin-bottom: 0; }
.cm-bubble ul { margin: 0.2rem 0 0.5rem; padding-left: 1.1rem; }
.cm-bubble li { margin: 0.1rem 0; }
.cm-h { font-weight: 600; color: var(--accent); font-size: 0.78rem; }
.cm-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 980px;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}
.cm-input-ph { flex: 1; font-size: 0.8rem; color: var(--text-tertiary); }
.cm-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
}

/* ── Responsive showcase ── */
@media (max-width: 900px) {
    .showcase-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0;
    }
    .showcase-row + .showcase-row { padding-top: 2.5rem; }
    /* Apilado: el TEXTO (eyebrow + título) siempre encima de su captura, también en
       filas invertidas — así el móvil se lee ligero: primero qué es, luego la imagen. */
    .showcase-copy  { order: 1 !important; }
    .showcase-media { order: 2 !important; }
    /* Móvil/tablet vertical: la landing es muy larga y el mockup manda la altura.
       Se OCULTA la descripción (redundante con los bullets, que la resumen; el eyebrow
       y el título se conservan) y se ENCOGE la maqueta al 80%. Se usa `zoom` (no
       `transform: scale`) porque las maquetas son HTML/CSS/SVG —quedan nítidas a
       cualquier tamaño— y `zoom` además RECUPERA el alto (la fila se acorta de verdad). */
    .showcase-copy > p:not(.showcase-eyebrow) { display: none; }
    #por-dentro .showcase-media .appwin { zoom: 0.8; }
    #por-dentro { padding: 3.5rem 0; }
}

@media (max-width: 480px) {
    .dm-kpis { grid-template-columns: repeat(2, 1fr); }
    .dm-mid { grid-template-columns: 1fr; }
    .rm-grid { grid-template-columns: 1fr; gap: 0.3rem; }
    .appwin-body { padding: 1rem; }
    .cal-cell { min-height: 40px; }
    .cal-ev { font-size: 0.54rem; }
}

/* ── Sin animación si el usuario la rechaza ──
   Cubre TODO el movimiento: mockups, entrada del hero, scroll-reveal, scroll suave
   y banner de cookies (antes solo se desactivaban los mockups). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .dm-bar { transform: scaleY(1); transition: none; }
    .dm-seg { stroke-dasharray: var(--da); transition: none; }
    .dm-area-fill { opacity: 1; transition: none; }
    .dm-area-line { stroke-dashoffset: 0; transition: none; }
    .po-row, .cm-bubble { opacity: 1; transform: none; transition: none; }
    .hero-eyebrow, #hero h1, .hero-subtitle, .hero-ctas, .hero-note {
        animation: none;
        opacity: 1;
    }
    [data-animate] { opacity: 1; transform: none; transition: none; }
    .cookie-banner { animation: none; }
}

/* ═══════════ BLOG ═══════════
   Páginas públicas e indexables (/blog/): índice + artículos. Reutilizan el
   navbar.static y el footer de las legales, pero con tipografía de LECTURA
   (1rem/1.75) en vez de la legal (0.92rem): son textos largos de divulgación. */
.blog-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 3.5rem 2rem 5rem;
}

.blog-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.8rem;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

.blog-meta .meta-author {
    color: var(--text-secondary);
    font-weight: 600;
}

/* — Índice — */
.blog-hero {
    margin-bottom: 2.6rem;
}

.blog-hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.12;
    margin-bottom: 0.8rem;
    color: var(--text-primary);
}

.blog-hero-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.article-card {
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.9rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.article-card + .article-card {
    margin-top: 1.1rem;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.article-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin: 0.45rem 0 0.5rem;
    color: var(--text-primary);
}

.article-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.card-more {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent);
}

/* — Artículo — */
.blog-doc > .blog-meta {
    margin-bottom: 2.5rem;
}

.blog-doc h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin-bottom: 0.9rem;
    color: var(--text-primary);
}

.blog-doc h2 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 2.4rem 0 0.9rem;
    color: var(--text-primary);
}

.blog-doc h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.8rem 0 0.6rem;
    color: var(--text-primary);
}

.blog-doc p,
.blog-doc li {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

.blog-doc p {
    margin-bottom: 1.1rem;
}

.blog-doc ul,
.blog-doc ol {
    margin: 0 0 1.1rem 1.3rem;
}

.blog-doc li {
    margin-bottom: 0.55rem;
}

.blog-doc a {
    color: var(--accent);
    text-decoration: underline;
}

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

/* Idea clave destacada */
.blog-callout {
    border-left: 3px solid var(--gold);
    background: var(--bg-sunken);
    padding: 1rem 1.3rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.4rem 0;
}

.blog-callout p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Tabla de ejemplo (escandallo): envuelta para scroll horizontal en móvil. */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    margin: 1.4rem 0;
}

.blog-doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.blog-doc th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    background: var(--bg-sunken);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-strong);
}

.blog-doc td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.blog-doc tr:last-child td {
    border-bottom: none;
}

.blog-doc th.num,
.blog-doc td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.blog-doc tr.total td {
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-weight: 600;
}

/* Ficha de la autora */
.author-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 3rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg-sunken);
    border-radius: var(--radius);
}

.author-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #F3E9DA;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.15rem;
}

/* Variante con retrato (autora con foto/monograma): mismas medidas, recorte circular. */
img.author-avatar {
    object-fit: cover;
}

.author-box .author-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.author-box p {
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

/* Sigue leyendo */
.blog-related {
    margin-top: 2.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border);
}

.blog-related .related-h {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-tertiary);
    margin-bottom: 0.7rem;
}

.blog-related ul {
    list-style: none;
    margin: 0;
}

.blog-related li {
    margin-bottom: 0.45rem;
}

.blog-related a {
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .blog-main { padding: 2.5rem 1.2rem 4rem; }
    .article-card { padding: 1.4rem 1.3rem; }
    .author-box { padding: 1.2rem 1.2rem; }
}