/* nmc-public-refresh-13824.css
   Capa FINAL de refinamiento UX de la web pública NoMásCaos.
   Se carga la última, por lo que afina el acabado global sin tocar el renderer ni la estructura.
   No cambia la marca (rojo #dc2626) ni el layout: mejora tipografía, ritmo, tarjetas, botones,
   foco accesible, hero y comportamiento móvil. Usa los tokens existentes de nmc-public.css. */

:root {
    /* Sombras por capas, más realistas y menos "planas". */
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -14px rgba(15, 23, 42, .20);
    --shadow-lg: 0 2px 4px rgba(15, 23, 42, .05), 0 26px 64px -26px rgba(15, 23, 42, .30);
    --shadow-red: 0 12px 26px -12px rgba(220, 38, 38, .45);
    --line: rgba(15, 23, 42, .08);
    /* Anillo de foco accesible. */
    --ring: 0 0 0 3px rgba(220, 38, 38, .32);
    /* Escala de espaciado vertical entre secciones (fluida). */
    --space-section: clamp(52px, 7vw, 100px);
}

/* ---- Tipografía base más premium y legible ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--text);
}

h1, .page-hero h1, .hero-text h1, .hero-banner h1, .center-detail-hero h1 {
    letter-spacing: -.03em;
    line-height: 1.04;
    text-wrap: balance;
}

h2, .section h2, .section-head h2 {
    letter-spacing: -.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.section p, .page-hero p, .section-head p {
    text-wrap: pretty;
}

/* Cabeceras de sección centradas y con medida de lectura cómoda. */
.section-head {
    max-width: 820px;
}
.section-head.centered {
    margin-left: auto;
    margin-right: auto;
}

/* ---- Eyebrow: etiqueta de sección más fina y con sello de marca ---- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red-dark);
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--red), rgba(220, 38, 38, 0));
}

/* ---- Ritmo vertical homogéneo entre secciones ---- */
.section {
    padding-top: var(--space-section);
    padding-bottom: 0;
}
.page-main > .section:last-child {
    padding-bottom: var(--space-section);
}

/* ---- Tarjeta genérica: radio, borde y sombra unificados + hover sutil ---- */
.card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(220, 38, 38, .22);
}

/* ---- Botones: pill coherente, estados y micro-interacción ---- */
.hero-btn, .note-btn, .investors-btn, .tp-btn, .btn-contact {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -.01em;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.hero-btn:hover, .note-btn:hover, .investors-btn:hover, .tp-btn:hover {
    transform: translateY(-2px);
}
.hero-btn:active, .note-btn:active, .tp-btn:active, .btn-contact:active {
    transform: translateY(0) scale(.99);
}
/* Botón secundario sobrio (solo en contexto de botón). */
.hero-btn.secondary, .tp-btn.secondary, .hero-actions .secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero-btn.secondary:hover, .tp-btn.secondary:hover, .hero-actions .secondary:hover {
    border-color: rgba(220, 38, 38, .30);
    color: var(--red-dark);
}

/* ---- Foco visible accesible en toda la web (teclado) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 12px;
}

/* ---- Hero: más aire y legibilidad del texto sobre fondo ---- */
.hero-banner, .slogan-banner, .center-detail-hero {
    box-shadow: var(--shadow-lg);
}
.hero-banner h1, .center-detail-hero h1 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* ---- FAQ: acordeón más limpio ---- */
.faq-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.faq-item + .faq-item {
    margin-top: 10px;
}
.faq-question {
    font-weight: 800;
    color: var(--ink);
}
.faq-answer {
    color: var(--muted);
}

/* ---- Campos de formulario un punto más suaves ---- */
.page-main input,
.page-main select,
.page-main textarea {
    border-radius: 14px;
}

/* ---- Franja superior un poco más sobria ---- */
.top-banner {
    font-weight: 700;
    letter-spacing: .01em;
}

/* ---- Respeta reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Móvil: aire y áreas táctiles cómodas ---- */
@media (max-width: 640px) {
    :root {
        --space-section: 46px;
    }
    .hero-btn, .btn-contact, .tp-btn, .note-btn {
        min-height: 48px;
    }
    .wrap {
        padding-left: 16px;
        padding-right: 16px;
    }
    .eyebrow {
        font-size: .68rem;
    }
}