/* ============================================================
   CITEA San Rafael — sitio público
   Marca: ámbar #F5A800 + teal #3ABFBF (heredados).
   Jerarquía nueva: el teal conduce, el ámbar sólo marca acción.
   Tipografía: Roboto Serif (títulos) + Roboto (texto e interfaz).
   ============================================================ */

:root {
  /* Tinta y papel */
  --tinta:      #16211F;
  --tinta-70:   #3E4A48;
  --tinta-50:   #6B7573;
  --papel:      #FBFAF6;
  --blanco:     #FFFFFF;
  --linea:      #E5E2DA;

  /* Teal — conduce */
  --teal-900:   #0B4A48;
  --teal-700:   #12706C;
  --teal:       #2A9999;
  --teal-300:   #7FC7C4;
  --teal-050:   #E9F4F3;

  /* Ámbar — sólo acción y marcadores de ruta */
  --ambar:      #F5A800;
  --ambar-700:  #8F5F00;
  --ambar-050:  #FFF4DC;

  --radio:      12px;
  --radio-sm:   8px;
  --sombra:     0 1px 2px rgba(11,74,72,.05), 0 8px 28px rgba(11,74,72,.07);
  --transicion: .2s ease;

  --ancho:      1120px;
  --medida:     66ch;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta-70);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-900); }
strong { color: var(--tinta); font-weight: 500; }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Tipografía ────────────────────────────────────────────── */
h1, h2, h3, h4, .display {
  font-family: "Roboto Serif", Georgia, "Times New Roman", serif;
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); margin-bottom: .55em; }
h3 { font-size: clamp(1.12rem, 1.02rem + .45vw, 1.3rem); margin-bottom: .4em; }
h4 { font-size: 1rem; font-weight: 600; margin-bottom: .3em; }

p  { margin-bottom: 1.05em; max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.28rem);
  line-height: 1.55;
  color: var(--tinta-70);
  font-weight: 300;
}

.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: .9rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  background: var(--ambar);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
}

/* ── Estructura ────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}

.seccion { padding-block: clamp(48px, 7vw, 84px); }
.seccion--ajustada { padding-block: clamp(36px, 5vw, 60px); }
.seccion--papel  { background: var(--papel); }
.seccion--blanca { background: var(--blanco); border-block: 1px solid var(--linea); }
.seccion--teal   { background: var(--teal-050); }

.seccion--oscura {
  background: var(--teal-900);
  color: rgba(255,255,255,.82);
}
.seccion--oscura h2, .seccion--oscura h3, .seccion--oscura h4 { color: #fff; }
.seccion--oscura .lead,
.seccion--oscura p { color: rgba(255,255,255,.82); }
.seccion--oscura strong { color: #fff; }
.seccion--oscura .eyebrow { color: var(--teal-300); }
.seccion--oscura a { color: #fff; }

.saltar-al-contenido {
  position: absolute; left: -9999px;
  background: var(--tinta); color: #fff;
  padding: 12px 18px; z-index: 200; border-radius: 0 0 var(--radio-sm) 0;
}
.saltar-al-contenido:focus { left: 0; top: 0; }

/* ── Encabezado ────────────────────────────────────────────── */
.encabezado {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,246,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linea);
}

.encabezado-interior {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}

.logo img { height: 40px; width: auto; }

.nav-principal { margin-left: auto; }
.nav-principal ul { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }

.nav-principal a {
  display: block;
  padding: 8px 12px;
  font-size: .935rem;
  font-weight: 400;
  color: var(--tinta-70);
  text-decoration: none;
  border-radius: var(--radio-sm);
  transition: var(--transicion);
}
.nav-principal a:hover { background: var(--teal-050); color: var(--teal-900); }
.nav-principal a[aria-current="page"] {
  color: var(--teal-900);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--ambar);
}

.nav-alternar {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 9px 12px; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--tinta);
  align-items: center; gap: 8px;
}

@media (max-width: 900px) {
  .nav-alternar { display: inline-flex; }
  .nav-principal {
    display: none; margin-left: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    padding: 8px clamp(18px, 4vw, 32px) 16px;
  }
  .nav-principal.abierta { display: block; }
  .nav-principal ul { flex-direction: column; gap: 0; }
  .nav-principal a { padding: 13px 4px; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .nav-principal a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ambar); padding-left: 12px; }
}

/* ── Botones ───────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radio-sm);
  font-family: "Roboto", sans-serif;
  font-size: 1rem; font-weight: 500;
  text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: var(--transicion);
  line-height: 1.3;
}

.boton--principal { background: var(--ambar); color: #241800; }
.boton--principal:hover { background: #ffb81a; color: #241800; transform: translateY(-1px); }

.boton--secundario { background: transparent; color: var(--teal-900); border-color: var(--teal-300); }
.boton--secundario:hover { background: var(--teal-050); color: var(--teal-900); }

.seccion--oscura .boton--secundario,
.llamado .boton--secundario {
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.seccion--oscura .boton--secundario:hover,
.llamado .boton--secundario:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

/* ── Portada ───────────────────────────────────────────────── */
.portada { padding-block: clamp(40px, 6vw, 72px) clamp(36px, 5vw, 60px); }

.portada-interior {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.portada h1 { margin-bottom: .55em; }

.portada-foto {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  border: 1px solid var(--linea);
}

@media (max-width: 860px) {
  .portada-interior { grid-template-columns: 1fr; }
  .portada-foto { order: -1; }
}

.sello {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-050);
  color: var(--teal-900);
  border: 1px solid var(--teal-300);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .8rem; font-weight: 500;
  margin-bottom: 1.1rem;
}

/* ── Barra de datos ────────────────────────────────────────── */
.datos-barra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--linea);
  border-block: 1px solid var(--linea);
}

.dato { background: var(--blanco); padding: 22px clamp(16px, 2.5vw, 26px); }
.dato dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal-700); font-weight: 700; margin-bottom: 6px; }
.dato dd { font-size: .965rem; color: var(--tinta); line-height: 1.45; }

/* ── La ruta (elemento distintivo) ─────────────────────────
   Una agenda visual: un paso por vez, en orden, sin sorpresas.
   Es la forma en que el centro organiza el trabajo, y la forma
   en que una familia necesita leer un trámite.
   ─────────────────────────────────────────────────────────── */
.ruta { list-style: none; position: relative; margin-top: 2.2rem; }

.ruta::before {
  content: "";
  position: absolute;
  left: 21px; top: 14px; bottom: 14px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--teal-300) 0 6px, transparent 6px 12px);
}

.ruta-paso { position: relative; padding-left: 62px; padding-bottom: 30px; }
.ruta-paso:last-child { padding-bottom: 0; }

.ruta-num {
  position: absolute; left: 0; top: -2px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ambar-050);
  border: 2px solid var(--ambar);
  border-radius: 50%;
  font-family: "Roboto Serif", Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--ambar-700);
}

.ruta-paso h3 { margin-bottom: .25em; }
.ruta-paso p  { margin-bottom: .5em; font-size: 1rem; }

.ruta-nota {
  display: inline-block;
  font-size: .875rem;
  background: var(--teal-050);
  color: var(--teal-900);
  border-left: 3px solid var(--teal);
  padding: 7px 13px;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  max-width: var(--medida);
}

.seccion--oscura .ruta::before { background: repeating-linear-gradient(to bottom, rgba(127,199,196,.55) 0 6px, transparent 6px 12px); }
.seccion--oscura .ruta-num { background: rgba(245,168,0,.16); color: #FFCA5C; }
.seccion--oscura .ruta-nota { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); border-left-color: var(--teal-300); }

/* Sección de ruta: intro a la izquierda, pasos a la derecha */
.bloque-ruta {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.bloque-ruta .ruta { margin-top: 0; }
.bloque-ruta .botones { margin-top: 1.8rem; }

@media (max-width: 880px) {
  .bloque-ruta { grid-template-columns: 1fr; }
  .bloque-ruta .ruta { margin-top: 1.6rem; }
}

/* ── Tarjetas ──────────────────────────────────────────────── */
.grilla { display: grid; gap: 20px; }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grilla--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px;
  transition: var(--transicion);
}
.tarjeta p { font-size: .97rem; margin-bottom: 0; }
.tarjeta p + p { margin-top: .8em; }

a.tarjeta { text-decoration: none; color: inherit; display: block; }
a.tarjeta:hover { border-color: var(--teal-300); box-shadow: var(--sombra); transform: translateY(-2px); }

.tarjeta-mas {
  display: inline-block; margin-top: 14px;
  font-size: .93rem; font-weight: 500; color: var(--teal-700);
}
a.tarjeta:hover .tarjeta-mas { color: var(--teal-900); }
.tarjeta-mas::after { content: " →"; }

/* ── Fichas de servicio ────────────────────────────────────── */
.ficha {
  border-top: 2px solid var(--teal-300);
  padding-top: 16px;
}
.ficha h3 { font-size: 1.06rem; }
.ficha p { font-size: .96rem; margin-bottom: 0; }

/* ── Etiquetas de taller ───────────────────────────────────── */
.etiquetas { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin-top: 1.4rem; }
.etiquetas li {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .92rem;
  color: var(--tinta);
}

/* ── Preguntas ─────────────────────────────────────────────── */
.preguntas { margin-top: 1.8rem; border-top: 1px solid var(--linea); }

.pregunta { border-bottom: 1px solid var(--linea); }

.pregunta summary {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 4px;
  cursor: pointer;
  font-family: "Roboto Serif", Georgia, serif;
  font-size: 1.06rem; font-weight: 600; color: var(--tinta);
  line-height: 1.35;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--teal-050); color: var(--teal-700);
  border-radius: 50%;
  font-family: "Roboto", sans-serif; font-size: 1.05rem; font-weight: 500;
  line-height: 1;
}
.pregunta[open] summary::before { content: "–"; background: var(--ambar-050); color: var(--ambar-700); }
.pregunta summary:hover { color: var(--teal-900); }

.pregunta-cuerpo { padding: 0 4px 20px 38px; }
.pregunta-cuerpo p { font-size: 1rem; }

/* ── Aviso ─────────────────────────────────────────────────── */
.aviso {
  background: var(--ambar-050);
  border: 1px solid #F0DCA8;
  border-radius: var(--radio);
  padding: 20px 22px;
  margin-block: 1.8rem;
}
.aviso h3 { font-size: 1.02rem; margin-bottom: .3em; }
.aviso p { font-size: .96rem; margin-bottom: 0; }
.aviso p + p { margin-top: .7em; }

/* ── Prosa ─────────────────────────────────────────────────── */
.prosa h2 { margin-top: 2.4rem; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.7rem; }
.prosa ul, .prosa ol { margin: 0 0 1.15em 1.25em; max-width: var(--medida); }
.prosa li { margin-bottom: .5em; padding-left: .25em; }
.prosa ul { list-style: none; margin-left: 0; }
.prosa ul li { position: relative; padding-left: 1.5em; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-300);
}
.prosa ol { padding-left: .3em; }
.prosa ol li::marker { color: var(--teal-700); font-weight: 500; }

.fuente {
  display: block;
  font-size: .84rem;
  color: var(--tinta-50);
  margin-top: -.5em;
  margin-bottom: 1.4em;
  max-width: var(--medida);
}

/* ── Contacto ──────────────────────────────────────────────── */
.contacto-grilla {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
@media (max-width: 800px) { .contacto-grilla { grid-template-columns: 1fr; } }

.contacto-lista { list-style: none; }
.contacto-lista li { padding-block: 14px; border-bottom: 1px solid var(--linea); }
.contacto-lista li:first-child { padding-top: 0; }
.contacto-lista dt,
.contacto-lista .rotulo {
  display: block;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--teal-700); font-weight: 700; margin-bottom: 3px;
}
.contacto-lista .valor { color: var(--tinta); font-size: 1.02rem; }
.contacto-lista a { font-weight: 500; }

.mapa {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--teal-050);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Llamado final ─────────────────────────────────────────── */
.llamado {
  background: var(--teal-900);
  color: rgba(255,255,255,.85);
  border-radius: var(--radio);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}
.llamado h2 { color: #fff; margin-bottom: .35em; }
.llamado p { margin-bottom: 0; color: rgba(255,255,255,.8); }
.llamado .botones { margin-top: 0; }
@media (max-width: 760px) { .llamado { grid-template-columns: 1fr; } }

/* ── Migas ─────────────────────────────────────────────────── */
.migas { font-size: .875rem; color: var(--tinta-50); padding-top: 22px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--linea); }
.migas a { color: var(--tinta-50); }

/* ── Pie ───────────────────────────────────────────────────── */
.pie {
  background: var(--tinta);
  color: rgba(255,255,255,.6);
  padding-block: 48px 32px;
  font-size: .93rem;
}
.pie a { color: rgba(255,255,255,.82); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }

.pie-grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 760px) { .pie-grilla { grid-template-columns: 1fr; gap: 26px; } }

.pie h2, .pie h3 {
  color: #fff; font-size: .78rem; font-family: "Roboto", sans-serif;
  text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  margin-bottom: 12px;
}
.pie ul { list-style: none; }
.pie li { margin-bottom: 7px; }
.pie p { color: rgba(255,255,255,.6); font-size: .93rem; }

.pie-legal {
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.52);
}

/* ── WhatsApp flotante ─────────────────────────────────────── */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  background: #16803F; color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  box-shadow: 0 6px 22px rgba(0,0,0,.2);
  transition: var(--transicion);
}
.wa:hover { background: #12692F; color: #fff; transform: translateY(-2px); }
.wa svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }
@media (max-width: 620px) {
  .wa { padding: 13px; }
  .wa span { display: none; }
}

/* ── Ilustración de marca (SVG en línea) ───────────────────── */
.ilustracion {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: #FDFBF4;
}

/* ── Movimiento ────────────────────────────────────────────
   Nada del contenido depende de una animación para verse.
   Sólo hay micro-interacciones en los elementos con los que
   se interactúa: botones, tarjetas y el acordeón.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .boton:hover, a.tarjeta:hover, .wa:hover { transform: none; }
}

/* ── Utilidades ────────────────────────────────────────────── */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.centro { text-align: center; margin-inline: auto; }
.centro p { margin-inline: auto; }
.ancho-texto { max-width: var(--medida); }
.mt-0 { margin-top: 0; }

@media print {
  .encabezado, .wa, .nav-alternar { display: none; }
  body { background: #fff; }
}