/* =========================================================
   Fundación Ángeles Rosa — estilos del sitio
   Blanco y rosa claro, con lazos rosa como motivo principal.
   ========================================================= */

/* ---------- Tipografías (alojadas en el propio sitio) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2-variations"),
       url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2-variations"),
       url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  /* Fondos */
  --blanco: #FFFFFF;
  --rosa-50: #FFF5F8;
  --rosa-100: #FDE6EE;
  --rosa-200: #F7CFDD;
  --menta: #EAF5F4;

  /* Texto */
  --tinta: #2A1F33;
  --tinta-suave: #5A4A60;

  /* Colores de marca (aptos para texto) */
  --fucsia: #B8175A;
  --fucsia-oscuro: #94104A;
  --teal: #0B6B6B;
  --teal-oscuro: #075454;
  --morado: #55358F;

  /* Lazos (decorativos) */
  --lazo: #E5598E;
  --lazo-sombra: #C23B71;
  --lazo-claro: #F4A3C1;
  --lazo-claro-sombra: #E27FA6;

  --foco: var(--fucsia);
  --f-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1120px;
  --cabecera-alto: 72px;
  --espacio-seccion: clamp(3.5rem, 8vw, 6.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera-alto) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.125rem;          /* 18 px */
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 100;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.6rem); letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; line-height: 1.25; }

p { margin: 0 0 1em; max-width: 65ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--fucsia); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--fucsia-oscuro); text-decoration-thickness: 2px; }

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.icono {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Enlace para saltar al contenido (visible solo con teclado) */
.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--tinta);
  color: var(--blanco);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.saltar:focus { top: 1rem; color: var(--blanco); }

/* Marcador de información que falta */
.pendiente {
  display: inline-block;
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5B4400;
  background: #FFF4CC;
  border: 1px dashed #C79A00;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}

/* ---------- Lazos rosa (motivo del sitio) ---------- */
.lazo {
  --c: var(--lazo);
  --s: var(--lazo-sombra);
  display: inline-block;
  flex: none;
  width: var(--t, 0.62em);
  height: calc(var(--t, 0.62em) * 4 / 3);
  rotate: var(--r, 0deg);
  overflow: visible;
}
.lazo-claro  { --c: var(--lazo-claro); --s: var(--lazo-claro-sombra); }
.lazo-morado { --c: #8E6AD0; --s: #6E4BB8; }
.lazo-teal   { --c: #2FB3BE; --s: #1A8F99; }

/* Títulos de sección con un lazo al inicio */
.titulo { display: flex; align-items: center; gap: 0.4em; }
.titulo .lazo { --t: 0.6em; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.boton:hover { text-decoration: none; }

.boton-principal { background: var(--fucsia); color: var(--blanco); }
.boton-principal:hover { background: var(--fucsia-oscuro); color: var(--blanco); }

.boton-secundario { background: var(--blanco); color: var(--fucsia); border-color: var(--fucsia); }
.boton-secundario:hover { background: var(--rosa-100); color: var(--fucsia-oscuro); border-color: var(--fucsia-oscuro); }

.boton-texto { color: var(--fucsia); padding-inline: 0.75rem; }
.boton-texto:hover { color: var(--fucsia-oscuro); text-decoration: underline; }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ---------- Cabecera y menú ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--rosa-200);
}
.cabecera-interior {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--cabecera-alto);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.marca img { width: 60px; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.marca-fundacion {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal);
}
.marca-nombre {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: 1.3rem;
  font-weight: 650;
  color: var(--fucsia);
}

.cabecera-acciones { display: flex; align-items: center; gap: 0.5rem; }
.boton-donar { min-height: 44px; padding: 0.55rem 1.25rem; }

.boton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rosa-200);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
}
.boton-menu .icono { width: 26px; height: 26px; }
.boton-menu .icono-cerrar { display: none; }
.menu-abierto .boton-menu .icono-abrir { display: none; }
.menu-abierto .boton-menu .icono-cerrar { display: block; }

.nav-principal ul { list-style: none; margin: 0; padding: 0; }
.nav-principal a {
  display: block;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.nav-principal a:hover { color: var(--fucsia); }

/* Menú en celular: panel desplegable debajo de la cabecera */
@media (max-width: 1059px) {
  .nav-principal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--rosa-200);
    box-shadow: 0 18px 30px -18px rgba(184, 23, 90, 0.35);
  }
  .menu-abierto .nav-principal { display: block; }
  .nav-principal ul { padding: 0.5rem clamp(1rem, 4vw, 2rem) 1rem; }
  .nav-principal li + li { border-top: 1px solid var(--rosa-100); }
  .nav-principal a { padding: 0.95rem 0; font-size: 1.15rem; }
}
@media (max-width: 459px) {
  .cabecera-interior { gap: 0.5rem; }
  .marca { gap: 0.45rem; }
  .marca img { width: 48px; }
  .marca-fundacion { font-size: 0.95rem; }
  .marca-nombre { font-size: 1.15rem; }
  .boton-donar { padding-inline: 1.1rem; }
}
@media (max-width: 359px) {
  .marca img { display: none; }
}

/* Menú en computadora: enlaces en línea */
@media (min-width: 1060px) {
  .boton-menu { display: none; }
  .solo-movil { display: none; }
  .nav-principal ul { display: flex; gap: 0.15rem; }
  .nav-principal a { padding: 0.5rem 0.6rem; border-radius: 8px; font-size: 1.0625rem; }
  .marca { margin-right: 0; }
  .nav-principal { margin-left: auto; }
}

/* ---------- Inicio ---------- */
.hero {
  background: var(--rosa-50);
  padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-interior {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.hero-imagen { order: -1; justify-self: center; }
.hero-imagen img {
  width: min(84vw, 360px);
  border-radius: 24px;
  box-shadow: 0 28px 50px -30px rgba(184, 23, 90, 0.55);
}

.hero h1 {
  font-size: clamp(2.15rem, 1.35rem + 3.6vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 620;
  max-width: 17ch;
  margin-bottom: 0.45em;
}
.hero-intro {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  color: var(--tinta-suave);
  max-width: 52ch;
  margin-bottom: 1.75rem;
}
.hero-contacto { margin-top: 1.25rem; color: var(--tinta-suave); }
.hero-contacto a { font-weight: 600; }

@media (min-width: 600px) {
  .hero-imagen img { width: 420px; border-radius: 28px; }
}
@media (min-width: 960px) {
  .hero-interior { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; }
  .hero-imagen { order: 0; }
  .hero-imagen img { width: 100%; max-width: 460px; }
}

/* Guirnalda de lazos bajo el inicio */
.guirnalda {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(6px, 1.4vw, 14px);
  padding: clamp(2rem, 5vw, 3rem) 1rem 0;
  overflow: hidden;
}
.guirnalda .lazo {
  animation: brotar 0.5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * 45ms + 150ms);
}
.guirnalda .lazo:nth-child(odd) { translate: 0 -4px; }
@media (max-width: 599px) {
  .guirnalda .lazo:nth-child(n+14) { display: none; }
}
@keyframes brotar {
  from { opacity: 0; scale: 0.2; }
  to   { opacity: 1; scale: 1; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--espacio-seccion); }
.seccion-rosa { background: var(--rosa-50); }

.encabezado-seccion { margin-bottom: clamp(2rem, 4vw, 3rem); }
.encabezado-seccion p { color: var(--tinta-suave); font-size: 1.2rem; }

/* Quiénes somos */
.nosotros { display: grid; gap: 2.5rem; }
.nosotros-texto p { font-size: 1.2rem; }
.proposito { display: grid; gap: 1rem; }
.proposito-bloque { border-radius: 20px; padding: 1.5rem 1.6rem; }
.proposito-bloque h3 { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.4em; }
.proposito-bloque h3 .lazo { --t: 16px; }
.proposito-mision { background: var(--rosa-100); }
.proposito-mision h3 { color: var(--fucsia); }
.proposito-vision { background: var(--menta); }
.proposito-vision h3 { color: var(--teal); }
@media (min-width: 860px) {
  .nosotros { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: start; }
}

/* Cómo ayudamos */
.destacado {
  display: grid;
  gap: 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--rosa-200);
  border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.destacado h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--fucsia); margin-bottom: 0.35em; }
.destacado-lema {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
}
.destacado-lazos { display: flex; align-items: flex-end; gap: 8px; }
@media (min-width: 760px) {
  .destacado { grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
  .destacado-lazos { flex-direction: column; align-items: center; gap: 10px; padding-inline: 0.5rem; }
}

.programas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  column-gap: 3rem;
}
.programas li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rosa-200);
}
.programas .lazo { --t: 20px; margin-top: 0.15rem; }
.programas li:nth-child(even) .lazo { --c: var(--lazo-claro); --s: var(--lazo-claro-sombra); }
.programas h3 { margin-bottom: 0.3em; }
.programas p { color: var(--tinta-suave); }
@media (min-width: 760px) {
  .programas { grid-template-columns: 1fr 1fr; }
}

/* Solicitar apoyo */
.apoyo { display: grid; gap: 1.25rem; }
.apoyo-bloque {
  background: var(--blanco);
  border: 1px solid var(--rosa-200);
  border-radius: 20px;
  padding: 1.6rem;
}
.apoyo-bloque h3 { color: var(--fucsia); }
.apoyo-bloque .grupo-botones { margin-top: 1.25rem; }
@media (min-width: 760px) {
  .apoyo { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* Cómo ayudar: banda rosa con lazos de fondo */
.seccion-donar {
  background-color: var(--rosa-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23F9D3E1' stroke-width='4.4'%3E%3Cg transform='translate(20 16) rotate(-14) scale(.75)'%3E%3Cpath d='M8.1 5.6C6.9 7.6 7.1 10.4 8.6 12.8L18.6 29.4M5.4 29.4 15.4 12.8C18 8 16.2 2.6 12 2.6C10.2 2.6 8.9 3.6 8.1 5.6'/%3E%3C/g%3E%3Cg transform='translate(98 88) rotate(12) scale(.6)'%3E%3Cpath d='M8.1 5.6C6.9 7.6 7.1 10.4 8.6 12.8L18.6 29.4M5.4 29.4 15.4 12.8C18 8 16.2 2.6 12 2.6C10.2 2.6 8.9 3.6 8.1 5.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.metodos { display: grid; gap: 1rem; }
.metodo, .otra-forma {
  background: var(--blanco);
  border: 1px solid var(--rosa-200);
  border-radius: 20px;
  padding: 1.6rem;
}
.metodo h3 { color: var(--fucsia); margin-bottom: 0.75rem; }
.metodo p { color: var(--tinta-suave); margin-bottom: 1.25rem; }
.metodo dl { margin: 0; }
.metodo dt { color: var(--tinta-suave); font-size: 1rem; margin-top: 0.85rem; }
.metodo dt:first-child { margin-top: 0; }
.metodo dd { margin: 0.1rem 0 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.dato-grande { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.02em; }
.dato-copiable { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }

.boton-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--fucsia);
  background: var(--blanco);
  color: var(--fucsia);
  font: 600 1rem var(--f-texto);
  cursor: pointer;
}
.boton-copiar:hover { background: var(--rosa-100); }
.boton-copiar.copiado { background: var(--fucsia); color: var(--blanco); }

.otras-formas { display: grid; gap: 1rem; margin-top: 1rem; }
.otra-forma h3 { color: var(--tinta); }
.otra-forma p { color: var(--tinta-suave); margin-bottom: 1.25rem; }
.otra-forma .otra-forma-correo { margin-top: -0.5rem; color: var(--tinta); overflow-wrap: anywhere; }
.otra-forma-correo a { font-weight: 600; }

.gracias {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fucsia);
  max-width: 36ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

@media (min-width: 760px) {
  .metodos, .otras-formas { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .otras-formas { margin-top: 1.25rem; }
}

/* Contacto */
.contacto { display: grid; gap: 2.5rem; }
.contacto-datos { display: grid; gap: 2rem; align-content: start; }
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.canales li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; }
.canal-icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rosa-100);
  color: var(--fucsia);
}
.canal-icono .icono { width: 24px; height: 24px; }
.canal-nombre { display: block; font-size: 1rem; color: var(--tinta-suave); }
.canal-dato {
  display: block;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.2rem);
  font-weight: 600;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
a.canal-dato { color: var(--fucsia); }
.canal-nota { display: block; font-size: 1rem; color: var(--tinta-suave); margin-top: 0.15rem; }
.enlace-pequeno { display: inline-block; margin-top: 0.35rem; font-size: 1rem; font-weight: 600; }

.redes {
  background: var(--rosa-50);
  border: 1px solid var(--rosa-200);
  border-radius: 20px;
  padding: 1.6rem;
}
.redes h3 { color: var(--fucsia); }
.redes-lista { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.redes-lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--blanco);
  border: 1px solid var(--rosa-200);
  color: var(--fucsia);
  font-weight: 600;
  text-decoration: none;
}
.redes-lista a:hover { background: var(--fucsia); border-color: var(--fucsia); color: var(--blanco); }
.redes-lista .icono { width: 1em; height: 1em; }

.mapa {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--rosa-200);
  background: var(--rosa-50);
  aspect-ratio: 4 / 3;
  min-height: 280px;
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 459px) {
  .canales li { grid-template-columns: 44px 1fr; gap: 0.75rem; }
  .canal-icono { width: 44px; height: 44px; }
  .canal-icono .icono { width: 21px; height: 21px; }
}
@media (min-width: 860px) {
  .contacto { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .mapa { aspect-ratio: auto; min-height: 100%; }
}


/* Nuestras actividades: texto + dos fotos */
.actividades { display: grid; gap: 1.75rem; }
.actividades-texto p { color: var(--tinta-suave); font-size: 1.2rem; }
.actividades-texto .galeria-mas { font-size: 1.05rem; color: var(--tinta); margin-top: 1.25rem; }
.galeria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.galeria a { display: block; border-radius: 16px; overflow: hidden; cursor: zoom-in; }
.galeria img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--rosa-100);
}
@media (min-width: 760px) {
  .galeria { gap: 1.25rem; }
  .galeria a { border-radius: 22px; box-shadow: 0 24px 40px -30px rgba(184, 23, 90, 0.5); }
}
@media (min-width: 960px) {
  .actividades { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: center; }
  /* La segunda foto baja un poco para dar ritmo */
  .galeria li:nth-child(2) { margin-top: 3rem; }
  .galeria li:nth-child(1) { margin-bottom: 3rem; }
}

/* Prevención: autoexamen */
.prevencion-intro { display: grid; gap: 2rem; align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.prevencion-intro p { font-size: 1.15rem; }
.prevencion-lema {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem) !important;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fucsia);
}
.prevencion-imagen { margin: 0; justify-self: center; width: min(100%, 420px); }
.prevencion-imagen a { display: block; border-radius: 24px; overflow: hidden; cursor: zoom-in; }
@media (min-width: 860px) {
  .prevencion-intro { grid-template-columns: 1.2fr 0.8fr; gap: 3.5rem; }
}

.guias { display: grid; gap: 1.5rem; }
.guia {
  background: var(--rosa-50);
  border: 1px solid var(--rosa-200);
  border-radius: 24px;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.guia h3 { color: var(--fucsia); font-size: 1.45rem; }
.guia-imagen {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  cursor: zoom-in;
}
.guia-imagen img { width: 100%; }
.guia-ampliar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--fucsia);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(42, 31, 51, 0.45);
}
.guia-ampliar .icono { width: 1em; height: 1em; }

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pasos li {
  counter-increment: paso;
  position: relative;
  min-height: 2.2rem;
  padding-left: 3.05rem;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--fucsia);
  color: var(--blanco);
  font-weight: 700;
  font-size: 1.05rem;
}
.pasos strong { color: var(--tinta); }
@media (min-width: 860px) {
  .guias { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
}

.consultar {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 2px solid var(--rosa-200);
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.25rem;
}
.consultar h3 { color: var(--fucsia); font-size: 1.45rem; margin-bottom: 0.3em; }
.consultar ul { list-style: none; margin: 0.25rem 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.consultar li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.consultar .lazo { --t: 15px; }
.consultar-nota { color: var(--tinta-suave); }
@media (min-width: 760px) {
  .consultar ul { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* Dona tu cabello */
.cabello {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--rosa-200);
  border-radius: 20px;
  padding: 1.25rem;
}
.cabello-imagen { display: block; border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.cabello-texto { padding: 0 0.35rem 0.35rem; }
.cabello-texto h3 { color: var(--fucsia); font-size: 1.5rem; }
.cabello-texto p { color: var(--tinta-suave); }
.cabello-texto .boton { margin-top: 0.5rem; }
@media (min-width: 760px) {
  .cabello { grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: 2.25rem; padding: 1.5rem; }
}

/* Visor de fotos ampliadas */
.visor {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(42, 31, 51, 0.97);
  color: var(--blanco);
  --foco: var(--blanco);
}
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: transparent; }
.visor-figura {
  margin: 0;
  padding: 4.5rem 1rem 5.5rem;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  max-width: 100%;
}
.visor-img {
  max-width: min(94vw, 1100px);
  max-height: calc(100dvh - 11rem);
  width: auto;
  height: auto;
  border-radius: 12px;
  background: var(--blanco);
}
.visor-texto { font-size: 1.05rem; text-align: center; max-width: 60ch; color: #F6E9F1; }
.visor-boton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--blanco);
  color: var(--fucsia);
  cursor: pointer;
}
.visor-boton .icono { width: 26px; height: 26px; }
.visor-cerrar { top: 14px; right: 14px; }
.visor-anterior, .visor-siguiente { bottom: 18px; }
.visor-anterior { left: calc(50% - 64px); }
.visor-siguiente { right: calc(50% - 64px); }
.visor-boton[hidden] { display: none; }
@media (min-width: 860px) {
  .visor-anterior, .visor-siguiente { bottom: auto; top: 50%; translate: 0 -50%; }
  .visor-anterior { left: 24px; }
  .visor-siguiente { right: 24px; }
}
html.visor-abierto { overflow: hidden; }

/* ---------- Pie de página ---------- */
.pie {
  background: var(--rosa-100);
  padding: 0 0 6rem;
  font-size: 1rem;
  color: var(--tinta-suave);
}
.pie-lazos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 2rem 1rem 0.5rem;
}
.pie-interior { display: grid; gap: 1.75rem; padding-top: 1.5rem; }
.pie p { margin: 0 0 0.35rem; }
.pie a { color: var(--tinta); }
.pie a:hover { color: var(--fucsia); }
.pie-marca { display: flex; gap: 1rem; align-items: flex-start; }
.pie-marca img { width: 60px; margin-top: 0.2rem; }
.pie-nombre {
  font-family: var(--f-titulo);
  font-variation-settings: "SOFT" 100;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
}
.pie-redes { display: flex; flex-wrap: wrap; gap: 1rem; }
.aviso-medico {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rosa-200);
  padding-top: 1.5rem;
  max-width: none;
}
.pie-legal { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .pie-interior { grid-template-columns: 1.4fr 1fr; }
  .pie { padding-bottom: 3rem; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  min-width: 56px;
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  background: var(--teal);
  color: var(--blanco);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(7, 84, 84, 0.6);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.whatsapp-flotante:hover { background: var(--teal-oscuro); color: var(--blanco); }
.whatsapp-flotante .icono { width: 26px; height: 26px; }
/* Mientras se ve el inicio, el botón se oculta para no tapar el texto */
.en-inicio .whatsapp-flotante {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
@media (max-width: 479px) {
  .whatsapp-flotante { padding: 0.75rem; }
  .whatsapp-flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Páginas sencillas (privacidad, 404) ---------- */
.pagina-sencilla { padding-block: var(--espacio-seccion); }
.pagina-sencilla h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.pagina-sencilla h2 { font-size: 1.5rem; margin-top: 2rem; }
.pagina-sencilla ul { padding-left: 1.25rem; max-width: 65ch; }
.pagina-sencilla li { margin-bottom: 0.4rem; }

.fondo-rosa { background: var(--rosa-50); }
.error-404 { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }
.error-404 img { margin: 0 auto 1.5rem; width: 220px; }
.error-404 p { margin-inline: auto; }
.error-404 .grupo-botones { justify-content: center; margin-top: 2rem; }

/* Los números de teléfono no se parten en dos líneas */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}