/* Simgia · sitio 2026 · estilos de la primera entrega.
   Tokens de color: valores del archivo oficial Marca 2026
   02-Lenguaje/simgia-2026-tokens-color.css (capa semántica, modo claro, piedra).
   El modo oscuro automático del archivo oficial no se activa: el diseño aceptado
   D-093 es claro con una superficie oscura de evidencia dentro de Inicio. */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-It.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
/* SemiBold: subconjunto oficial incrustado en el Manual 2.0 (68 glifos). Solo cubre
   los caracteres de los títulos de esta entrega; el build comprueba cada título y usa
   Regular completo cuando falta un glifo (regla aceptada D-084/D-086/D-090). */
@font-face {
  font-family: 'Source Serif 4 SemiBold';
  src: url('/assets/fonts/SourceSerif4-SemiBold.subset-manual.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/SourceSans3-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --sg-rojo: #EF4135;
  --sg-rojo-profundo: #C9372D;
  --sg-rojo-texto: #B8261C;
  --sg-rojo-texto-oscuro: #F4867C;
  --sg-rojo-tinte-10: #FCE7E3;
  --sg-superficie: #FDF9F6;
  --sg-superficie-2: #F6F3EF;
  --sg-borde: #D7D3CF;
  --sg-borde-fuerte: #918D87;
  --sg-texto: #2B2622;
  --sg-texto-2: #59544E;
  --sg-piedra-950: #18130D;
  --sg-piedra-300: #D7D3CF;
  --sg-piedra-100: #F6F3EF;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --serif-semibold: 'Source Serif 4 SemiBold', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --margin: 80px;
  --content-max: 1280px;
  --pad: 72px;
  --body: 18px;
  --body-lh: 1.45;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--sg-superficie); color: var(--sg-texto);
  font-family: var(--sans); font-size: var(--body); line-height: var(--body-lh);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p, ul, ol, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { max-width: calc(var(--content-max) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin); }

/* Tipografía ----------------------------------------------------------------- */
.h1 { font-family: var(--serif-semibold); font-weight: 600; font-size: 74px; line-height: 1.06; letter-spacing: -0.005em; max-width: 1020px; }
.h2 { font-family: var(--serif-semibold); font-weight: 600; font-size: 42px; line-height: 1.15; max-width: 880px; }
.h2-large { font-size: 58px; }
.h3 { font-family: var(--serif-semibold); font-weight: 600; font-size: 28px; line-height: 1.15; }
.serif-regular { font-family: var(--serif); font-weight: 400; }
.label { font-size: 16px; line-height: 1.4; color: var(--sg-texto-2); }
.muted { color: var(--sg-texto-2); }
.note { font-size: 16px; line-height: 1.45; color: var(--sg-texto-2); }
.lead { font-size: 20px; line-height: 1.45; color: var(--sg-texto-2); max-width: 708px; }
.attribution { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; }
.section-head .label { margin-bottom: 16px; }
.section-head { margin-bottom: 24px; }

a { color: var(--sg-rojo-texto); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.link { font-size: 17px; line-height: 1.4; display: inline-block; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 24px;
  background: var(--sg-rojo-profundo); color: #fff; border-radius: 12px; text-decoration: none;
  font-size: 18px; line-height: 1.35; font-family: var(--sans);
}
.btn:hover { background: #B8261C; }
.btn:active { background: #A9231A; }
:focus-visible { outline: 3px solid var(--sg-texto); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; border-radius: 4px; }
.surface-dark :focus-visible { outline-color: var(--sg-piedra-100); box-shadow: 0 0 0 6px var(--sg-piedra-950); }
.skip { position: absolute; left: 16px; top: -100px; background: var(--sg-texto); color: #fff; padding: 12px 16px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 16px; }

/* Cabecera --------------------------------------------------------------------- */
.site-header { background: var(--sg-superficie); }
.header-bar { display: flex; align-items: center; justify-content: space-between; min-height: 120px; gap: 24px; }
.brand { display: inline-block; line-height: 0; }
.brand img { width: 232px; height: auto; }
.nav-global ul { display: flex; gap: 28px; align-items: center; }
.nav-global a { font-size: 16px; line-height: 1.2; color: var(--sg-texto-2); text-decoration: none; }
.nav-global a:hover, .nav-global a[aria-current="page"] { color: var(--sg-texto); text-decoration: underline; }
.nav-global .nav-privacy { display: none; }
.menu-toggle { display: none; }
.nav-quick { display: none; }

/* Secciones ---------------------------------------------------------------------- */
.section { padding: var(--pad) 0; }
.section-surface { background: var(--sg-superficie-2); }
.surface-dark { background: var(--sg-piedra-950); color: var(--sg-piedra-300); }
.surface-dark .h2, .surface-dark .h3, .surface-dark .strong { color: var(--sg-piedra-100); }
.surface-dark .label, .surface-dark .note, .surface-dark .muted { color: var(--sg-piedra-300); }
.surface-dark a { color: var(--sg-rojo-texto-oscuro); }
.surface-dark .attribution { color: var(--sg-piedra-300); }
.hr { border: 0; border-top: 1px solid var(--sg-borde); margin: 0; }
.surface-dark .hr { border-top-color: var(--sg-texto-2); }

/* Hero */
.hero { padding-top: 24px; }
.hero .label { max-width: 850px; margin-bottom: 20px; }
.hero .h1 { margin-bottom: 24px; }
.hero-row { display: grid; grid-template-columns: minmax(0, 708px) 1fr; gap: 32px 40px; align-items: start; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; justify-self: end; min-width: 376px; }
.hero-actions .btn { width: 376px; }
.onda {
  height: 18.62vw; max-height: 268px; margin-top: 16px; background: var(--sg-rojo-tinte-10);
  -webkit-mask: url('/assets/brand/simgia-2026-onda-ruta1.svg') center / cover no-repeat;
  mask: url('/assets/brand/simgia-2026-onda-ruta1.svg') center / cover no-repeat;
}

/* Síntesis SPI */
.sintesis { padding-top: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--sg-borde); }
.sintesis-grid { display: grid; grid-template-columns: 336px minmax(0, 620px) 1fr; gap: 12px 0; align-items: start; }
.sintesis .label { max-width: 280px; }
.sintesis .strong { font-size: 24px; line-height: 1.45; color: var(--sg-texto); margin-bottom: 10px; }
.sintesis .link { justify-self: end; }

/* Servicios */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.service { border-top: 2px solid var(--sg-texto); padding-top: 20px; }
.service .label { margin-bottom: 14px; }
.service .h3 { margin-bottom: 16px; }
.service p.muted { font-size: 17px; margin-bottom: 20px; }
.services-note { margin-top: 32px; }
.intro-muted { max-width: 770px; margin-top: -4px; }

/* Dos caminos */
.caminos .intro { max-width: 780px; margin-bottom: 28px; color: var(--sg-texto-2); }
.branch { font-size: 17px; margin-bottom: 18px; }
.branch-lines { height: 34px; position: relative; margin: 0 0 8px; }
.branch-lines::before { content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 16px; background: var(--sg-texto-2); }
.branch-lines::after { content: ''; position: absolute; left: 25%; right: 25%; top: 6px; border-top: 1px solid var(--sg-texto-2); height: 18px; border-left: 1px solid var(--sg-texto-2); border-right: 1px solid var(--sg-texto-2); }
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.route { background: var(--sg-superficie); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.route .label { margin-bottom: 10px; }
.route .h3 { min-height: calc(2 * 1.15em); margin-bottom: 20px; }
.route .service-name { font-size: 17px; color: var(--sg-texto-2); margin-bottom: 20px; }
.route .when { color: var(--sg-texto-2); margin-bottom: 20px; }
.route .label-small { margin-bottom: 8px; }
.route .result { margin-bottom: 24px; }
.route .link { margin-top: auto; }
.caminos-notes { margin-top: 24px; max-width: 1060px; }
.caminos-notes p { font-size: 17px; color: var(--sg-texto-2); margin-bottom: 20px; }

/* Evidencia */
.evidence { padding-top: 96px; }
.evidence .h2-large { margin-bottom: 24px; }
.evidence-grid { display: grid; grid-template-columns: 220px minmax(0, 580px) 1fr; gap: 16px 0; padding: 48px 0; }
.evidence-grid .side { padding-left: 96px; max-width: 480px; }
.evidence-grid .side .label { margin-bottom: 16px; }
.evidence-grid .h3-big { font-size: 46px; line-height: 1.15; margin-bottom: 24px; color: var(--sg-piedra-100); }
.evidence-grid p { margin-bottom: 24px; }
.evidence-grid .attribution { margin-bottom: 20px; }
.result-text { font-size: 28px; line-height: 1.35; color: var(--sg-piedra-100); }
.year { font-size: 52px; line-height: 1.15; color: var(--sg-piedra-100); margin-bottom: 16px; }
.year-rule { border: 0; border-top: 2px solid var(--sg-piedra-300); margin: 0 0 18px; }
.side .note { margin-bottom: 8px; }

/* Método */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 12px; }
.step { border-top: 1px solid var(--sg-borde); padding-top: 18px; }
.step .label { margin-bottom: 8px; }
.step .h3 { font-size: 26px; margin-bottom: 14px; }
.step p { color: var(--sg-texto-2); }
.method-note { max-width: 900px; font-size: 17px; color: var(--sg-texto-2); }

/* Dos columnas (Simgia, Contacto) */
.two-col { display: grid; grid-template-columns: minmax(0, 504px) minmax(0, 624px); justify-content: space-between; gap: 32px 40px; }
.two-col .section-head { margin-bottom: 0; }
.two-col .body p { color: var(--sg-texto-2); margin-bottom: 20px; }
.contact-actions { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.contact-actions .btn { min-width: 300px; }
.contact-notice { color: var(--sg-texto); }
.mail-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.mail-line .mail { font-size: 17px; }
.copy-btn { font: inherit; font-size: 16px; line-height: 1.3; padding: 8px 14px; min-height: 44px; border: 1px solid var(--sg-borde-fuerte); background: var(--sg-superficie); color: var(--sg-texto); border-radius: 8px; cursor: pointer; display: none; }
.js .copy-btn { display: inline-block; }
.copy-status { font-size: 16px; color: var(--sg-texto-2); min-height: 1.4em; }
.copy-status[data-state="ok"] { color: var(--sg-texto); }

/* Pie ------------------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--sg-borde); margin-top: 0; }
.site-footer .wrap { padding-top: 32px; padding-bottom: 40px; }
.site-footer .label { margin-bottom: 16px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-bottom: 36px; }
.footer-nav a, .footer-mail a { font-size: 17px; }
.rule-onda { height: 10px; background: url('/assets/brand/onda-regla-16x9-rojo-profundo-3840x40.png') center / 100% 100% no-repeat; }
.page-home .site-footer { border-top-color: var(--sg-borde); }

/* Páginas interiores ------------------------------------------------------------------ */
.crumbs { padding: 24px 0 32px; font-size: 16px; }
.crumbs ol { display: flex; gap: 12px; }
.crumbs span[aria-current] { color: var(--sg-texto-2); }
.interior .h1 { font-size: 64px; margin-bottom: 28px; }
.reading { max-width: 750px; }
.reading h2 { font-family: var(--serif-semibold); font-weight: 600; font-size: 34px; line-height: 1.15; margin: 48px 0 20px; scroll-margin-top: 24px; }
.reading p, .reading ul { margin-bottom: 20px; }
.reading ul { padding-left: 20px; list-style: disc; }
.reading li { margin-bottom: 8px; }
.toc { margin-bottom: 40px; padding: 24px 28px; background: var(--sg-superficie-2); border-radius: 0 14px 0 14px; max-width: 750px; }
.toc p { margin-bottom: 12px; }
.toc ol { list-style: decimal; padding-left: 22px; }
.toc li { margin-bottom: 8px; font-size: 17px; }
.interior-end { margin: 48px 0 72px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* 404 */
.error-page { padding-top: 24px; padding-bottom: 96px; }
.error-page .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }

/* Anclas: dejar aire al saltar */
[id] { scroll-margin-top: 16px; }

/* ===================================================================================
   Intermedio 768–1199
   =================================================================================== */
@media (max-width: 1199px) {
  :root { --margin: 40px; --pad: 56px; }
  .h1 { font-size: clamp(40px, 5.2vw, 74px); }
  .h2 { font-size: clamp(28px, 3.4vw, 42px); }
  .h2-large { font-size: clamp(34px, 4.4vw, 58px); }
  .hero-row { grid-template-columns: 1fr; }
  .hero-actions { justify-self: start; align-items: flex-start; min-width: 0; }
  .sintesis-grid { grid-template-columns: 1fr; gap: 12px; }
  .sintesis .link { justify-self: start; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence { padding-top: 64px; }
  .evidence-grid { grid-template-columns: 1fr; gap: 8px; }
  .evidence-grid .side { padding-left: 0; max-width: 580px; margin-top: 8px; }
  .evidence-grid .h3-big { font-size: 36px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .interior .h1 { font-size: 48px; }
  .nav-global ul { gap: 20px; }
}

/* ===================================================================================
   Móvil < 768 (390 de referencia)
   =================================================================================== */
@media (max-width: 767px) {
  :root { --margin: 24px; --pad: 48px; --body: 17px; }
  .h1 { font-size: 40px; }
  .h2 { font-size: 28px; }
  .h2-large { font-size: 34px; }
  .h3 { font-size: 24px; }
  .lead { font-size: 17px; }
  .header-bar { min-height: 88px; }
  .brand img { width: 160px; }
  .nav-global .nav-privacy { display: block; }
  .nav-quick { display: block; border-bottom: 1px solid var(--sg-borde); padding-bottom: 12px; }
  .nav-quick ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .nav-quick a { font-size: 16px; line-height: 1.3; }
  /* Sin JavaScript: el menú completo permanece visible en flujo. Con JavaScript, botón Menú. */
  .js .menu-toggle { display: inline-block; font: inherit; font-size: 17px; line-height: 1.3; background: none; border: 0; padding: 10px 0 10px 12px; min-height: 44px; min-width: 52px; color: var(--sg-texto); cursor: pointer; text-align: right; }
  .js .menu-toggle[aria-expanded="true"]::after { content: ' ×'; }
  .js .nav-global { display: none; }
  .js .nav-global.is-open { display: block; }
  .nav-global { width: 100%; }
  .header-bar { flex-wrap: wrap; }
  .nav-global ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0 12px; }
  .nav-global li { width: 100%; border-top: 1px solid var(--sg-borde); }
  .nav-global a { display: block; padding: 14px 0; font-size: 17px; color: var(--sg-texto); }
  .hero { padding-top: 24px; }
  .hero .h1 { margin-bottom: 24px; }
  .hero-actions .btn { width: 100%; }
  .onda { height: 96px; margin-top: 4px; }
  .sintesis .strong { font-size: 20px; }
  .services { grid-template-columns: 1fr; gap: 16px; }
  .routes { grid-template-columns: 1fr; gap: 24px; }
  .route { padding: 20px; }
  .route .h3 { min-height: 0; }
  .branch-lines { display: none; }
  .branch-list { border-left: 1px solid var(--sg-texto-2); margin: 0 0 12px 2px; padding-left: 0; }
  .branch-list li { position: relative; padding-left: 23px; font-size: 17px; color: var(--sg-texto-2); margin-bottom: 12px; }
  .branch-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 1px; background: var(--sg-texto-2); }
  .evidence { padding-top: 56px; }
  .evidence-grid { padding: 32px 0; }
  .evidence-grid .h3-big { font-size: 30px; }
  .result-text { font-size: 24px; }
  .year { font-size: 44px; }
  .step .h3 { font-size: 23px; }
  .contact-actions .btn { width: 100%; min-width: 0; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 8px; }
  .interior .h1 { font-size: 40px; }
  .reading h2 { font-size: 28px; }
  .toc { padding: 20px; }
}
@media (min-width: 768px) { .branch-list { display: none; } }
@media (max-width: 359px) {
  :root { --margin: 16px; }
  .h1 { font-size: 34px; }
  .h2 { font-size: 26px; }
  .h2-large { font-size: 30px; }
  .evidence-grid .h3-big { font-size: 28px; }
  .year { font-size: 38px; }
  .interior .h1 { font-size: 34px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
}