/* ==========================================================================
   FUNDESET: sections.css
   Diseño por sección + responsive. Breakpoints: 480 · 768 · 1024 · 1100 · 1280.
   Materialidad: "papel" (máx. uno por sección), "papel ligero", "plano", "chip".
   ========================================================================== */

/* ---------- NAV ---------- */
.nav__centinela {
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.nav--solida {
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--linea-fuerte);
}
@media (max-width: 767px) {
  .nav.nav--solida { background: rgba(250, 245, 236, 0.97); backdrop-filter: none; }
}
.nav nav {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}
.nav__brand svg { flex: none; }
.nav__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--tinta);
  letter-spacing: 0.02em;
}
.nav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
}
.nav__menu a:not(.btn) {
  text-decoration: none;
  color: var(--tinta);
  font-weight: 600;
  font-size: var(--t-sm);
  padding-bottom: 4px;
  /* subrayado garabato que se "traza" al pasar el cursor y marca la sección actual */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C60 4 120 14 170 8 C220 3 260 12 296 7' fill='none' stroke='%23F2B705' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 0.35em;
  transition: background-size 0.3s ease;
}
.nav__menu a:not(.btn):hover,
.nav__menu a:not(.btn):focus-visible,
.nav__menu a:not(.btn)[aria-current] { background-size: 100% 0.35em; color: var(--tinta); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.6rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.nav__toggle span {
  width: 26px;
  height: 3px;
  background: var(--tinta);
  border-radius: 3px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papel);
    border-bottom: 2px dashed var(--lapiz);
    box-shadow: 0 14px 24px rgba(43, 39, 35, 0.12);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav__menu.abierto { max-height: 30rem; visibility: visible; transition-delay: 0s; }
  .nav__menu li { text-align: center; }
  .nav__menu a:not(.btn) { display: block; padding: 0.9rem; background-image: none; font-size: var(--t-base); }
  .nav__menu a:not(.btn)[aria-current] { color: var(--enlace); }
  .btn--nav { display: block; margin: 0.8rem var(--e-6) 1.2rem; }
}

/* ---------- MARGEN DE PROGRESO (lápiz que dibuja el margen al leer) ---------- */
.margen-progreso {
  position: fixed;
  top: 0;
  bottom: 0;
  left: clamp(0.9rem, 1.5vw, 1.6rem);
  width: 2px;
  z-index: var(--z-margen);
  pointer-events: none;
  display: none;
}
@media (min-width: 1280px) {
  .margen-progreso { display: block; }
}
.margen-progreso__linea {
  position: absolute;
  inset: 0;
  background: rgba(214, 58, 47, 0.35);
  transform: scaleY(0);
  transform-origin: top center;
}
.margen-progreso__punta {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 50px;
  transform: translate(-50%, -96%);
  filter: drop-shadow(1px 2px 1px rgba(43, 39, 35, 0.2));
}

/* ---------- HERO (boceto a sangre detrás del texto) ---------- */
.s-hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem var(--gutter) var(--e-12);
}
.s-hero__fondo {
  display: block;
  width: 100%;
  max-width: 720px;
  max-height: 38svh;
  object-fit: contain;
  object-position: center;
  margin: 0 auto var(--e-6);
}
.s-hero__velo { display: none; }
.s-hero__inner {
  position: relative;
  max-width: var(--ancho-max);
  margin: 0 auto;
  width: 100%;
}
.s-hero__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 44rem;
}
.s-hero__texto h1 { max-width: 15ch; }
.s-hero__sub {
  font-size: var(--t-lg);
  color: var(--tinta);
  max-width: 30rem;
  margin-top: var(--e-2);
}
.s-hero__ctas {
  margin-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-6);
}

@media (min-width: 1024px) {
  .s-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 6rem var(--gutter) var(--e-16);
  }
  .s-hero__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: right center;
    margin: 0;
  }
  .s-hero__velo {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      var(--papel) 0%,
      rgba(250, 245, 236, 0.94) 34%,
      rgba(250, 245, 236, 0.55) 56%,
      rgba(250, 245, 236, 0) 78%);
    pointer-events: none;
  }
  .s-hero__texto { max-width: 46rem; }
}

/* ---------- TRANSFORMACIÓN (boceto → foto) ---------- */
.transformacion { position: relative; }
.transformacion__marco {
  position: relative;
  background: var(--superficie);
  border: var(--borde-papel);
  border-radius: var(--radio-papel);
  box-shadow: var(--sombra-papel);
  aspect-ratio: 4 / 3;
}
.transformacion__marco > .transformacion__boceto,
.transformacion__marco > .transformacion__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.transformacion__boceto {
  object-fit: contain;
  padding: 3%;
}
.transformacion__foto {
  object-fit: cover;
  /* la foto entra "pintándose" encima del boceto (controlado por GSAP) */
  clip-path: inset(0 100% 0 0);
}
.transformacion__pie {
  margin-top: var(--e-3);
  font-size: var(--t-mano);
  color: var(--texto-suave);
}
.transformacion__lapiz {
  position: absolute;
  top: 24%;
  left: 0;
  width: clamp(26px, 6%, 40px);
  height: 46%;
  z-index: var(--z-lapiz);
  opacity: 0;
  visibility: hidden; /* solo lo muestra GSAP mientras "pinta" la foto */
  pointer-events: none;
  filter: drop-shadow(2px 3px 2px rgba(43, 39, 35, 0.25));
}

/* ---------- HISTORIA ---------- */
.s-historia { padding: var(--espacio-seccion) var(--gutter); overflow-x: clip; }
.s-historia__pin { max-width: var(--ancho-max); margin: 0 auto; }
.s-historia__grid {
  display: grid;
  gap: var(--e-12);
  align-items: center;
}
.s-historia__texto { display: flex; flex-direction: column; gap: var(--e-4); }
.s-historia__texto p { max-width: var(--ancho-texto); }
.s-historia__texto h2 em { color: var(--tinta); }
@media (min-width: 1100px) {
  .s-historia__grid { grid-template-columns: 1fr 1.1fr; gap: var(--e-16); }
  .s-historia { padding-top: 0; }
  .s-historia__pin {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4.5rem;
    width: 100%;
  }
}

/* Cifras: tira plana bajo una línea, sin tarjetas */
.s-historia__cifras {
  max-width: var(--ancho-max);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding-top: var(--e-8);
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6) var(--e-16);
}
.cifra { display: flex; flex-direction: column; min-width: 10rem; }
.cifra__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-cifra);
  line-height: 1.05;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-display);
}
.cifra__subrayado {
  width: 64%;
  max-width: 130px;
  height: 10px;
  margin: 0.15rem 0 0.4rem;
}
.cifra:nth-child(1) .cifra__subrayado { color: var(--amarillo); }
.cifra:nth-child(2) .cifra__subrayado { color: var(--azul); }
.cifra:nth-child(3) .cifra__subrayado { color: var(--verde); }
.cifra__label { color: var(--texto-suave); font-weight: 600; font-size: var(--t-sm); }

/* ---------- FRENTES: cabecera lateral + filas ---------- */
.s-frentes { padding: var(--espacio-seccion) var(--gutter); }
.s-frentes__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  gap: var(--e-12);
}
@media (min-width: 1024px) {
  .s-frentes__inner { grid-template-columns: minmax(16rem, 4fr) 8fr; gap: var(--e-16); align-items: start; }
  .s-frentes__lado { position: sticky; top: 6rem; }
}
.s-frentes__lado .seccion-head { margin-bottom: var(--e-6); }
.s-frentes__hermanas {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  max-width: 24rem;
}
.s-frentes__grid { display: grid; gap: 0; }
.ficha {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--e-6);
  padding: var(--e-8) 0;
  border-top: 1px solid var(--linea);
}
.ficha:last-child { border-bottom: 1px solid var(--linea); }
.ficha__icono { width: 64px; }
.ficha h3 { margin-bottom: var(--e-2); color: var(--tinta); }
.ficha p { color: var(--texto-suave); max-width: var(--ancho-texto); }
@media (max-width: 479px) {
  .ficha { grid-template-columns: 1fr; gap: var(--e-3); }
  .ficha__icono { width: 56px; }
}

/* ---------- PROYECTOS: una historia protagonista + tira de tres ---------- */
.s-proyectos { padding: var(--espacio-seccion) var(--gutter); overflow-x: clip; }
.s-proyectos .seccion-head { max-width: var(--ancho-max); }

.historia--principal {
  display: grid;
  gap: var(--e-8);
  max-width: 960px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
}
.historia--principal .historia__texto { display: flex; flex-direction: column; gap: var(--e-3); max-width: var(--ancho-texto); }
.historia--principal .transformacion { order: 2; }
.historia--principal .transformacion__marco { aspect-ratio: 16 / 10; }
.historia__texto p { color: var(--tinta); }

.s-proyectos__tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 300px);
  gap: var(--e-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--e-4) var(--gutter) var(--e-4);
  margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: thin;
}
.historia--compacta {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.historia--compacta .transformacion__marco {
  border-width: 1.5px;
  border-radius: var(--radio-s);
  box-shadow: none;
}
.historia--compacta h3 { margin-top: var(--e-2); }
.historia--compacta p { font-size: var(--t-sm); color: var(--texto-suave); }
@media (min-width: 1100px) {
  .s-proyectos__tira {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-8);
    overflow: visible;
    margin: 0 auto;
    padding: 0;
    max-width: var(--ancho-max);
  }
}

/* Chip de proyecto: píldora fina, un color de texto accesible */
.historia__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 0.2rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radio-pildora);
  margin-top: var(--e-2);
}
.historia__tag[data-color="verde"]    { color: var(--verde-texto); }
.historia__tag[data-color="azul"]     { color: var(--azul-texto); }
.historia__tag[data-color="rojo"]     { color: var(--rojo-texto); }
.historia__tag[data-color="amarillo"] { color: var(--ambar-texto); }

/* ---------- ALIADOS: muro plano ---------- */
.s-aliados { padding: var(--espacio-seccion) var(--gutter); }
.s-aliados__lista {
  list-style: none;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-8) 0 0;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-6) var(--e-12);
}
.aliado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--tinta);
  transition: color 0.25s ease;
}
.aliado__icono { width: 40px; height: 40px; flex: none; }
.aliado:hover { color: var(--enlace); }
.s-aliados__nota,
.s-aliados__cta {
  max-width: var(--ancho-max);
  margin: var(--e-6) auto 0;
}
.s-aliados__cta { margin-top: var(--e-8); font-size: var(--t-lg); }

/* ---------- EQUIPO ---------- */
.s-equipo { padding: var(--espacio-seccion) var(--gutter); overflow-x: clip; }
.cita-grande {
  max-width: 640px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--t-cita);
  line-height: var(--lh-tight);
  color: var(--tinta);
  text-wrap: balance;
}
.cita-grande cite {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--f-cuerpo);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.s-equipo__grid {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  gap: var(--e-8);
}
@media (min-width: 768px) {
  .s-equipo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persona--principal { grid-column: 1 / -1; max-width: 520px; }
}
@media (min-width: 1100px) {
  .s-equipo__grid { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; }
  .persona--principal { grid-column: auto; max-width: none; }
  .persona:nth-child(3) { margin-top: var(--e-8); }
}
.persona { display: flex; flex-direction: column; gap: var(--e-1); }
.persona__marco {
  position: relative;
  margin: 0 0 var(--e-3);
  max-width: 320px;
  border: var(--borde-papel);
  border-radius: var(--radio-papel);
  box-shadow: var(--sombra-papel);
  background: var(--superficie);
  padding: 10px 10px 14px;
  transform: rotate(-1.2deg);
}
.persona--principal .persona__marco { max-width: 420px; }
.persona:nth-child(2) .persona__marco { transform: rotate(1deg); }
.persona__marco img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.persona h3 { font-size: var(--t-h3); }
.persona__rol {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-suave);
}
.persona > p:last-child { color: var(--texto-suave); max-width: 22rem; margin-top: var(--e-2); }

/* ---------- MISIÓN / VISIÓN: dos columnas con filete ---------- */
.s-mision { padding: var(--espacio-seccion) var(--gutter); }
.s-mision__grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: var(--e-12);
  perspective: 1400px;
}
@media (min-width: 768px) {
  .s-mision__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .hoja:first-child { padding-right: var(--e-12); }
  .hoja + .hoja { border-left: 1px solid var(--linea); padding-left: var(--e-12); }
}
.hoja h3 { margin-bottom: var(--e-3); color: var(--tinta); }
.hoja p { color: var(--texto-suave); }

/* ---------- DONAR: papel kraft, bento 1+2 ---------- */
.s-donar {
  background: var(--papel-kraft);
  color: var(--tinta);
  padding: var(--espacio-seccion) var(--gutter);
  border-top: 2px dashed var(--lapiz);
  overflow-x: clip;
}
.s-donar__inner { max-width: var(--ancho-max); margin: 0 auto; }
.s-donar__vias {
  display: grid;
  gap: var(--e-6);
}
@media (min-width: 1024px) {
  .s-donar__vias {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--e-6) var(--e-12);
    align-items: start;
  }
  /* orden de lectura: WhatsApp (papel) | montos / alianza | canales */
  .via--destacada { grid-column: 1; grid-row: 1; }
  .via--alianza { grid-column: 1; grid-row: 2; }
}
.via {
  border-top: 1px solid var(--linea-fuerte);
  padding: var(--e-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  align-items: flex-start;
}
.via--destacada {
  position: relative;
  background: var(--superficie);
  border: var(--borde-papel);
  border-radius: var(--radio-papel);
  box-shadow: var(--sombra-papel);
  padding: var(--e-8);
  justify-content: center;
  gap: var(--e-4);
}
.via h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tinta);
}
.via h3 svg { flex: none; }
.via p { color: var(--texto-suave); max-width: 30rem; }
.s-donar .btn--secundario:hover { background: var(--superficie); }

.via__montos { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.via__monto {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  margin-right: var(--e-2);
}
.via__montos span:last-child { color: var(--texto-suave); }

.via__datos {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  font-size: var(--t-base);
}
.via__datos li {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr auto;
  align-items: center;
  gap: var(--e-4);
  border-bottom: 1px solid var(--linea-fuerte);
  padding: var(--e-2) 0;
}
.via__etiqueta { color: var(--texto-suave); font-weight: 600; font-size: var(--t-sm); }
.via__valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.via__valor .pendiente { font-weight: 400; }
.via__copiar {
  background: none;
  border: 0;
  padding: 0.3rem 0;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--enlace);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 44px;
}
.via__copiar:hover { color: var(--tinta); }
.via__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-6); }
.via__copiado {
  font-size: var(--t-sm);
  color: var(--exito);
  min-height: 1.4em;
}
.s-donar__legal {
  max-width: 48rem;
  margin: var(--e-8) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.s-donar__nota {
  margin-top: var(--e-6);
  font-size: var(--t-mano);
  color: var(--texto-suave);
}

/* ---------- CONTACTO ---------- */
.s-contacto { padding: var(--espacio-seccion) var(--gutter); overflow-x: clip; }
.s-contacto__grid {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  gap: var(--e-12);
}
@media (min-width: 1024px) {
  .s-contacto__grid { grid-template-columns: 1fr 1.25fr; gap: var(--e-16); align-items: start; }
}
.s-contacto__info { display: flex; flex-direction: column; gap: var(--e-4); }
.s-contacto__info p { max-width: 28rem; }
.s-contacto__info address {
  font-style: normal;
  margin-top: var(--e-2);
  padding-left: var(--e-4);
  border-left: 3px solid var(--amarillo);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

/* --- La carta mad-libs: el visitante "escribe a mano" sobre la carta --- */
.s-contacto__form {
  position: relative;
  display: grid;
  gap: var(--e-6);
  background: var(--superficie);
  border: var(--borde-papel);
  border-radius: var(--radio-papel);
  box-shadow: var(--sombra-papel);
  padding: var(--e-8);
}
.carta__linea {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  line-height: 2.3;
}
.carta__linea--intro { line-height: 1.5; margin-top: var(--e-2); }
.carta__campo-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.carta__campo-wrap--bloque { display: block; }
.carta__campo,
.carta__select,
.carta__mensaje {
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--tinta);
  border: none;
  background-color: transparent;
  padding: 0 0.4ch 2px;
  vertical-align: baseline;
}
.carta__campo {
  min-width: 8ch;
  max-width: 100%;
  /* subrayado punteado dibujado con gradiente (GSAP lo "traza" al entrar) */
  background-image: repeating-linear-gradient(90deg, var(--lapiz) 0 9px, transparent 9px 15px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 2px;
}
.carta__campo::placeholder,
.carta__mensaje::placeholder { color: var(--texto-suave); font-weight: 600; opacity: 1; }
.carta__campo:focus-visible,
.carta__select:focus-visible,
.carta__mensaje:focus-visible {
  outline: 3px dashed var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}
.carta__campo:focus {
  background-image: linear-gradient(var(--azul), var(--azul));
  background-color: rgba(46, 111, 183, 0.07);
}
.carta__select {
  appearance: none;
  -webkit-appearance: none;
  border-bottom: 2px dashed var(--lapiz);
  padding-right: 1.7em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M3 4 C7 9 10 12 12 13 C15 10 19 6 21 3' fill='none' stroke='%232B2723' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.35em center;
  background-size: 0.75em;
  cursor: pointer;
}
.carta__select:focus {
  border-bottom-color: var(--azul);
  border-bottom-style: solid;
  background-color: rgba(46, 111, 183, 0.07);
}
.carta__mensaje {
  display: block;
  width: 100%;
  min-height: 5.2rem;
  margin-top: 0.4rem;
  padding: 0 0.2rem 0.4rem;
  line-height: 2.1rem;
  resize: none;
  overflow: hidden; /* crece sola con autoCrecer() */
  border-bottom: 2px dashed var(--lapiz);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent calc(2.1rem - 2px),
    var(--renglon) calc(2.1rem - 2px),
    var(--renglon) 2.1rem
  );
  background-attachment: local;
}
.carta__mensaje:focus { border-bottom-color: var(--azul); border-bottom-style: solid; }

/* Estados de error: anotación en tinta roja, legible (Source Sans, no manuscrita) */
.carta__campo--error { color: var(--error); }
.carta__campo.carta__campo--error { background-image: linear-gradient(var(--error), var(--error)); }
.carta__select.carta__campo--error,
.carta__mensaje.carta__campo--error { border-bottom: 2px solid var(--error); }
.carta__error {
  display: block;
  margin-top: var(--e-1);
  font-family: var(--f-cuerpo);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--error);
}
.carta__error[hidden] { display: none; }

/* Espejo invisible para medir el ancho de los campos inline */
.carta__medidor {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: 1.35rem;
}

/* Honeypot fuera de pantalla */
.carta__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.carta__consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}
.carta__consentimiento input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--azul);
}
.carta__consentimiento .carta__error { grid-column: 1 / -1; }
.carta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  flex-wrap: wrap;
}
.carta__envio { display: flex; align-items: center; gap: 0.6rem; }
.carta__garabato { width: 58px; flex: none; }
.carta__enviar { white-space: nowrap; }

.form-aviso {
  font-weight: 600;
  min-height: 1.4em;
  margin: 0;
}
.form-aviso[data-tipo="ok"] { color: var(--exito); }
.form-aviso[data-tipo="error"] { color: var(--error); }

/* Carta apilada en pantallas estrechas: los campos pasan a inputs con etiqueta visible */
@media (max-width: 479px) {
  .s-contacto__form { padding: var(--e-6) var(--e-4); }
  .carta__prosa, .carta__linea--intro { display: none; }
  .carta__linea { display: grid; gap: var(--e-4); line-height: var(--lh-cuerpo); font-family: var(--f-cuerpo); }
  .carta__campo-wrap { display: grid; gap: var(--e-1); }
  .carta .carta__campo-wrap .visualmente-oculto {
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
    font: 600 var(--t-sm) / 1.3 var(--f-cuerpo);
    color: var(--texto-suave);
  }
  .carta__campo, .carta__select {
    display: block;
    width: 100% !important; /* neutraliza el ancho del autogrow */
    min-width: 100%;
    font-size: var(--t-lg);
    padding: 0.4rem 0.2rem;
    border-bottom: 2px dashed var(--lapiz);
    background-image: none;
  }
  .carta__campo:focus { background-image: none; border-bottom-color: var(--azul); border-bottom-style: solid; }
  .carta__campo-wrap--bloque .carta__mensaje { margin-top: 0; }
}

/* ---------- FOOTER: la contraportada del cuaderno ---------- */
.pie {
  background: var(--tinta);
  color: rgba(250, 245, 236, 0.82);
  padding: var(--e-16) var(--gutter) var(--e-8);
  border-top: 2px dashed var(--lapiz);
}
.pie__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: grid;
  gap: var(--e-8);
  align-items: start;
}
@media (min-width: 768px) {
  .pie__inner { grid-template-columns: 1.4fr 1fr auto; }
}
.pie__marca { display: flex; gap: var(--e-4); align-items: flex-start; max-width: 420px; }
.pie__marca p { font-size: var(--t-sm); line-height: 1.5; }
.pie__marca strong { color: var(--papel); font-size: var(--t-lg); font-family: var(--f-display); letter-spacing: 0.02em; }
.pie__nav { display: flex; flex-direction: column; gap: var(--e-2); }
.pie__nav a { color: rgba(250, 245, 236, 0.82); text-decoration: none; }
.pie__nav a:hover { color: var(--amarillo); }
.pie__redes { display: flex; gap: var(--e-4); }
.pie__redes a {
  color: rgba(250, 245, 236, 0.82);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(250, 245, 236, 0.35);
  border-radius: var(--radio-s);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pie__redes a:hover { color: var(--amarillo); border-color: var(--amarillo); }
.pie__legal {
  max-width: var(--ancho-max);
  margin: var(--e-8) auto 0;
  padding-top: var(--e-6);
  border-top: 1px solid rgba(250, 245, 236, 0.2);
  font-size: var(--t-sm);
  color: rgba(250, 245, 236, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-8);
  align-items: baseline;
  justify-content: space-between;
}
.pie__legal .pendiente { color: rgba(250, 245, 236, 0.72); }
.pie__firma { font-family: var(--f-mano); font-weight: 600; font-size: var(--t-mano); color: var(--amarillo); }