/* =============================================================
   Casitos — sistema base del sitio público (portada y acceso)

   Tipografías
     Spectral        → titulares (serif académica, con itálica de acento)
     IBM Plex Sans   → texto e interfaz
     IBM Plex Mono   → etiquetas, códigos de caso, cifras

   Tema claro por defecto; oscuro con html[data-theme="dark"].
   ============================================================= */
/* ---------- reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- tokens: claro ---------- */
:root,
html[data-theme="light"] {
    --cs-paper:     #ffffff;
    --cs-paper-2:   #f5f7fa;
    --cs-surface:   #ffffff;
    --cs-surface-2: #f8fafc;
    --cs-line:      #e4e9f0;
    --cs-line-soft: #eef2f7;

    --cs-ink:       #131a2e;
    --cs-ink-soft:  #52607a;
    --cs-ink-faint: #8492a8;

    --cs-teal:      #0f7e8c;
    --cs-teal-ink:  #0b6572;
    --cs-green:     #2a8f5c;
    --cs-gold:      #a8741a;

    --cs-tint-teal:  rgba(15, 126, 140, .08);
    --cs-tint-green: rgba(42, 143, 92, .10);
    --cs-tint-gold:  rgba(168, 116, 26, .10);

    --cs-shadow-sm: 0 1px 2px rgba(19, 26, 46, .05);
    --cs-shadow:    0 10px 30px -12px rgba(19, 26, 46, .16);
    --cs-shadow-lg: 0 28px 60px -24px rgba(19, 26, 46, .26);

    --cs-logo-pad: #ffffff;
}

/* ---------- tokens: oscuro (alineado al color del sistema) ---------- */
html[data-theme="dark"] {
    --cs-paper:     #181b29;
    --cs-paper-2:   #14161f;
    --cs-surface:   #222539;
    --cs-surface-2: #1d2032;
    --cs-line:      #2d3245;
    --cs-line-soft: #262b3c;

    --cs-ink:       #fcfdfd;
    --cs-ink-soft:  #a7aec1;
    --cs-ink-faint: #7f879b;

    --cs-teal:      #4bc3d0;
    --cs-teal-ink:  #6fd3dd;
    --cs-green:     #56c98c;
    --cs-gold:      #e0ae55;

    --cs-tint-teal:  rgba(75, 195, 208, .12);
    --cs-tint-green: rgba(86, 201, 140, .12);
    --cs-tint-gold:  rgba(224, 174, 85, .12);

    --cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --cs-shadow:    0 12px 32px -14px rgba(0, 0, 0, .55);
    --cs-shadow-lg: 0 30px 64px -26px rgba(0, 0, 0, .7);

    --cs-logo-pad: #f4f6fa;
}

/* ---------- base ---------- */
body {
    background: var(--cs-paper);
    color: var(--cs-ink-soft);
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* La barra es fija: las secciones dejan aire al llegar por ancla */
section[id], header[id] { scroll-margin-top: 92px; }

::selection {
    background: var(--cs-tint-teal);
    color: var(--cs-ink);
}

:focus-visible {
    outline: 2px solid var(--cs-teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.cs-wrap {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.cs-section {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.cs-section--alt { background: var(--cs-paper-2); }
.cs-section--line { border-top: 1px solid var(--cs-line); }

/* ---------- tipografía ---------- */
.cs-eyebrow {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-teal);
}

.cs-h1 {
    font-family: Spectral, Georgia, serif;
    font-weight: 600;
    font-size: clamp(2.6rem, 6.2vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    color: var(--cs-ink);
}

.cs-h1 em {
    font-style: italic;
    font-weight: 600;
}

.cs-h1 .cs-stop { color: var(--cs-teal); }

.cs-h2 {
    font-family: Spectral, Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.85rem, 3.4vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -.018em;
    color: var(--cs-ink);
}

.cs-h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: -.005em;
    color: var(--cs-ink);
}

.cs-lead {
    font-size: clamp(1.02rem, 1.35vw, 1.15rem);
    line-height: 1.65;
    color: var(--cs-ink-soft);
}

.cs-mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* Encabezado de sección: rótulo, título y bajada */
.cs-head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.cs-head .cs-eyebrow { margin-bottom: 1rem; }
.cs-head .cs-lead { margin-top: 1rem; }

.cs-head--center {
    margin-inline: auto;
    text-align: center;
}

/* ---------- botones ---------- */
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cs-btn:hover { transform: translateY(-1px); }

.cs-btn--primary {
    background: linear-gradient(96deg, #128f9c 0%, #23a06f 55%, #2f9e5f 100%);
    color: #fff;
    box-shadow: var(--cs-shadow-sm);
}

.cs-btn--primary:hover { box-shadow: var(--cs-shadow); }

.cs-btn--ghost {
    background: transparent;
    border-color: var(--cs-line);
    color: var(--cs-ink);
}

.cs-btn--ghost:hover {
    border-color: var(--cs-teal);
    color: var(--cs-teal-ink);
}

.cs-btn--sm { padding: .6rem 1rem; font-size: .86rem; }

.cs-btn__arrow { transition: transform .18s ease; }
.cs-btn:hover .cs-btn__arrow { transform: translateX(3px); }

/* =============================================================
   Bloque de marca (logotipo + nombre)
   ============================================================= */
.cs-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
}

.cs-brand img { height: 38px; width: auto; }

.cs-brand__name {
    font-family: Spectral, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--cs-ink);
}

/* =============================================================
   Botón de modo claro / oscuro
   ============================================================= */
.theme-toggle-public {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--cs-line);
    background: var(--cs-surface);
    color: var(--cs-ink);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.theme-toggle-public:hover {
    border-color: var(--cs-teal);
    color: var(--cs-teal-ink);
}

/* En claro se ofrece la luna (ir a oscuro); en oscuro, el sol */
.theme-toggle-public .icon-dark  { display: none; }
.theme-toggle-public .icon-light { display: block; }
html[data-theme="dark"] .theme-toggle-public .icon-dark  { display: block; }
html[data-theme="dark"] .theme-toggle-public .icon-light { display: none; }


/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .cs-reveal { opacity: 1; transform: none; }
}