@charset "UTF-8";
/* ============================================================================
   Base / Reset – Academia Demo
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Barra de desplazamiento con la marca: pista verde muy clara, indicador verde
   principal. Delgada y discreta, consistente en todas las vistas del sistema. */
* { scrollbar-width: thin; scrollbar-color: var(--green-500) var(--green-50); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--green-50); }
::-webkit-scrollbar-thumb {
    background: var(--green-500); border-radius: 999px;
    border: 2px solid var(--green-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-600); }
::-webkit-scrollbar-corner { background: var(--green-50); }

body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; font-weight: 700; color: var(--gray-900); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { color: var(--gray-700); }

/* Layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--tight { padding: clamp(36px, 6vw, 64px) 0; }

/* Utilidades */
.text-center { text-align: center; }
.accent { color: var(--accent); }
.green { color: var(--brand-link); }
.eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-link);
    background: var(--green-50);
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.lead { font-size: 1.12rem; color: var(--gray-700); max-width: 60ch; }

/* ---------------- PÁGINAS DE ESTADO ---------------- */
.error-page {
    position: relative; isolation: isolate; overflow: hidden;
    width: min(1100px, calc(100% - 40px)); min-height: 470px;
    margin: clamp(40px, 7vw, 96px) auto;
    padding: clamp(42px, 7vw, 82px);
    display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    align-items: center; gap: clamp(30px, 7vw, 92px);
    background: linear-gradient(135deg, #fffdf8 0%, #f3efe4 100%);
    border: 1px solid rgba(31, 74, 58, .10); border-radius: 32px;
    box-shadow: 0 24px 70px rgba(31, 74, 58, .14);
}
.error-page::before, .error-page::after { content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%; }
.error-page::before { width:330px; height:330px; left:-170px; bottom:-190px; background:rgba(212,98,58,.18); }
.error-page::after { width:270px; height:270px; right:-130px; top:-150px; background:rgba(31,74,58,.13); }
.error-page__art { position:relative; display:grid; place-items:center; min-height:220px; color:#1f4a3a; }
.error-page__code { font-family: Georgia, 'Times New Roman', serif; font-size:clamp(7rem, 16vw, 11rem); line-height:.8; font-weight:700; letter-spacing:-.1em; }
.error-page__dot { position:absolute; right:16%; top:18%; width:34px; height:34px; border-radius:50%; background:#d4623a; box-shadow:0 10px 20px rgba(212,98,58,.25); }
.error-page__line { position:absolute; left:16%; bottom:18%; width:96px; height:10px; border-radius:99px; background:#d4623a; transform:rotate(-18deg); }
.error-page__content { max-width:610px; }
.error-page__content h1 { margin:12px 0 16px; color:#1f4a3a; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(2rem, 4vw, 3.4rem); letter-spacing:-.05em; }
.error-page__content .lead { margin-bottom:28px; line-height:1.55; }
.error-page__actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.error-page__note { margin-top:18px; max-width:52ch; color:var(--gray-600); font-size:.93rem; }
.error-page__lock { display:grid; place-items:center; width:112px; height:112px; border:2px solid #1f4a3a; border-radius:28px; color:#d4623a; font-size:4rem; transform:rotate(-8deg); }
.error-page--private { grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr); }
.error-page--private .error-page__code { font-size:clamp(6rem, 13vw, 9rem); }
@media (max-width:700px) {
    .error-page, .error-page--private { grid-template-columns:1fr; min-height:0; gap:20px; padding:36px 26px; text-align:center; }
    .error-page__art { min-height:130px; }
    .error-page__content .lead { margin-left:auto; margin-right:auto; }
    .error-page__actions { justify-content:center; }
    .error-page__note { margin-left:auto; margin-right:auto; }
}

/* Encabezado de sección */
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head p { margin-top: 12px; }

/* Animación de entrada al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Accesibilidad */
:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; border-radius: 4px; }
.sr-only {
    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) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    /* El contenido del hero conserva su opacidad por defecto: su estado oculto
       inicial vive tras @media (prefers-reduced-motion: no-preference) en
       componentes.css, así que aquí no hay nada que revelar. */
}