/* ============================================
   Asociación Nacional Solidaria Víctor Manuel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --navy: #1B3350;
  --navy-deep: #10233A;
  --gold: #C99A3C;
  --gold-soft: #E4C989;
  --terracota: #A2472E;
  --paper: #FAF8F4;
  --paper-alt: #F1ECE1;
  --ink: #241F19;
  --ink-soft: #5B564C;
  --line: #DDD4C2;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: 'Fraunces', Georgia, serif;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em 0;
  font-weight: 600;
}

p{ margin: 0 0 1em 0; max-width: 62ch; }

a{ color: inherit; }

img{ max-width: 100%; display: block; }

.contenedor{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Cabecera ---------- */

.cabecera{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.barra-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.marca{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca svg{ width: 40px; height: 40px; flex-shrink: 0; }

.marca-texto{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.15;
}

.marca-texto span{
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--terracota);
  margin-top: 2px;
}

.nav-enlaces{
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-enlaces a{
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-enlaces a:hover,
.nav-enlaces a[aria-current="page"]{
  border-bottom-color: var(--gold);
  color: var(--navy);
}

.nav-toggle{ display: none; }
.nav-toggle-label{ display: none; }

@media (max-width: 720px){
  .nav-enlaces{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-enlaces li{ border-top: 1px solid var(--line); }
  .nav-enlaces a{
    display: block;
    padding: 16px 24px;
    border-bottom: none;
  }
  .nav-toggle:checked ~ .nav-enlaces{ max-height: 240px; }
  .nav-toggle-label{
    display: block;
    cursor: pointer;
    width: 28px;
    height: 20px;
    position: relative;
  }
  .nav-toggle-label span,
  .nav-toggle-label::before,
  .nav-toggle-label::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--navy);
  }
  .nav-toggle-label span{ top: 9px; }
  .nav-toggle-label::before{ top: 0; }
  .nav-toggle-label::after{ bottom: 0; }
}

/* ---------- Hero ---------- */

.hero{
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.hero::after{
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(228,201,137,0.25);
}

.hero-interior{
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 24px 76px;
  position: relative;
}

.hero .eyebrow-linea{
  width: 48px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 24px;
}

.hero h1{
  color: var(--paper);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  max-width: 15ch;
}

.hero p.intro{
  color: #D9E0E8;
  font-size: 1.15rem;
  max-width: 46ch;
  margin-top: 18px;
}

.hero-acciones{
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.boton{
  display: inline-block;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.15s ease, background 0.2s ease;
}

.boton-principal{
  background: var(--terracota);
  color: #fff;
}
.boton-principal:hover{ background: #8B3A25; }

.boton-secundario{
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(250,248,244,0.5);
}
.boton-secundario:hover{ border-color: var(--gold); color: var(--gold-soft); }

/* ---------- Secciones generales ---------- */

.seccion{ padding: 72px 0; }
.seccion-alt{ background: var(--paper-alt); }

.encabezado-seccion{
  max-width: 56ch;
  margin-bottom: 44px;
}

.encabezado-seccion h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
.encabezado-seccion p{ color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Filas de servicios (evita el patrón de tarjetas idénticas) ---------- */

.lista-servicios{
  display: flex;
  flex-direction: column;
}

.fila-servicio{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.lista-servicios .fila-servicio:last-child{ border-bottom: 1px solid var(--line); }

.icono-circulo{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icono-circulo svg{ width: 26px; height: 26px; stroke: var(--gold-soft); }

.fila-servicio h3{ font-size: 1.2rem; margin-bottom: 6px; }
.fila-servicio p{ color: var(--ink-soft); margin: 0; }

/* ---------- Franja de misión ---------- */

.franja-mision{
  background: var(--navy-deep);
  color: var(--paper);
  padding: 64px 0;
  text-align: center;
}

.franja-mision blockquote{
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 500;
  max-width: 22ch;
  margin: 0 auto 20px;
  color: var(--gold-soft);
}

.franja-mision p{
  color: #C9D2DC;
  max-width: 52ch;
  margin: 0 auto;
}

/* ---------- CTA final ---------- */

.cta-final{
  padding: 64px 0;
  text-align: center;
}
.cta-final h2{ margin-bottom: 12px; }
.cta-final p{ color: var(--ink-soft); margin: 0 auto 28px; }

/* ---------- Nosotros: valores ---------- */

.valores{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}

@media (max-width: 720px){
  .valores{ grid-template-columns: 1fr; }
}

.valor h3{
  font-size: 1.05rem;
  border-left: 3px solid var(--gold);
  padding-left: 14px;
}
.valor p{ color: var(--ink-soft); padding-left: 17px; }

.bloque-texto-ancho{ max-width: 68ch; }
.bloque-texto-ancho p{ color: var(--ink-soft); max-width: none; font-size: 1.05rem; }

/* ---------- Contacto ---------- */

.grid-contacto{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 860px){
  .grid-contacto{ grid-template-columns: 1fr; }
}

.dato-contacto{
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.dato-contacto:last-child{ border-bottom: 1px solid var(--line); }

.dato-contacto svg{ width: 22px; height: 22px; stroke: var(--terracota); flex-shrink: 0; margin-top: 3px; }

.dato-contacto strong{ display: block; color: var(--navy); font-size: 0.95rem; }
.dato-contacto span, .dato-contacto a{ color: var(--ink-soft); text-decoration: none; font-size: 0.98rem; }
.dato-contacto a:hover{ color: var(--terracota); }

.formulario{
  background: var(--paper-alt);
  padding: 36px;
  border-radius: 4px;
}

.campo{ margin-bottom: 20px; }
.campo label{
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.campo input,
.campo textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--paper);
  color: var(--ink);
}
.campo input:focus,
.campo textarea:focus{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.mapa-envoltorio{
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.mapa-envoltorio iframe{ width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Pie ---------- */

.pie{
  background: var(--navy-deep);
  color: #B9C2CC;
  padding: 48px 0 28px;
}

.pie-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.1fr 0.9fr;
  gap: 32px;
  margin-bottom: 32px;
}

@media (max-width: 720px){
  .pie-grid{ grid-template-columns: 1fr; }
}

.pie h4{
  color: var(--gold-soft);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 14px;
}

.pie p, .pie a{ font-size: 0.92rem; color: #B9C2CC; text-decoration: none; }
.pie a:hover{ color: var(--gold-soft); }
.pie ul{ list-style: none; margin: 0; padding: 0; }
.pie li{ margin-bottom: 8px; }

.redes-sociales{
  display: flex;
  gap: 12px;
}

.redes-sociales a{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.redes-sociales a:hover{
  border-color: var(--gold-soft);
  background: rgba(228,201,137,0.08);
}

.redes-sociales svg{
  width: 18px;
  height: 18px;
  stroke: #B9C2CC;
  fill: none;
  transition: stroke 0.2s ease;
}

.redes-sociales a:hover svg{ stroke: var(--gold-soft); }

.pie-linea{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: #8A94A0;
}

/* ---------- Historia (página Nosotros) ---------- */

.franja-historia{
  padding: 72px 0;
}

.franja-historia.alt{
  background: var(--paper-alt);
}

.franja-historia.oscura{
  background: var(--navy);
  color: var(--paper);
}
.franja-historia.oscura h2{ color: var(--paper); }
.franja-historia.oscura p{ color: #D9E0E8; }

.franja-historia.terracota{
  background: var(--terracota);
  color: #fff;
}
.franja-historia.terracota h2{ color: #fff; }
.franja-historia.terracota p{ color: rgba(255,255,255,0.9); }

.kicker{
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
.franja-historia.oscura .kicker,
.franja-historia.terracota .kicker{ color: var(--gold-soft); }

.titular-historia{
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  max-width: 20ch;
  margin-bottom: 24px;
}

.grid-historia{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 780px){
  .grid-historia{ grid-template-columns: 1fr; gap: 8px; }
}

.grid-historia .columna-texto p{
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.franja-historia.oscura .grid-historia .columna-texto p,
.franja-historia.terracota .grid-historia .columna-texto p{
  color: inherit;
}

.linea-enfasis{
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin: 28px 0;
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--navy);
}
.franja-historia.oscura .linea-enfasis,
.franja-historia.terracota .linea-enfasis{
  border-left-color: var(--gold-soft);
  color: var(--paper);
}

.lista-simple{
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-simple li{
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
}
.lista-simple li:last-child{ border-bottom: 1px solid var(--line); }
.franja-historia.oscura .lista-simple li,
.franja-historia.terracota .lista-simple li{
  border-color: rgba(255,255,255,0.18);
}

.cifras-historia{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
@media (max-width: 720px){
  .cifras-historia{ grid-template-columns: 1fr; }
}
.cifra{
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--gold-soft);
  display: block;
  margin-bottom: 6px;
}
.cifra-etiqueta{
  font-size: 0.92rem;
  color: #D9E0E8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cita-grande{
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 500;
  max-width: 22ch;
  text-align: center;
  margin: 0 auto;
  color: var(--navy);
}

.hero-acciones.tres{ flex-wrap: wrap; }

/* Respeto por preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}