/* ============================================================
   Centro MEF — Sistema de diseño
   Colores oficiales de marca (Brandboard Centro MEF):
     #0f1360 marino oscuro · #2750a8 azul medio · #ffffff · #000000
   Tipografía: Raleway (Google Fonts)
   ============================================================ */

:root {
  /* Marca */
  --color-marino: #0f1360;
  --color-azul: #2750a8;
  --color-azul-claro: #e8edf9;
  --color-blanco: #ffffff;
  --color-negro: #000000;

  /* Texto y fondos */
  --color-texto: #1b1f2a;
  --color-texto-suave: #545b6b;
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f4f6fb;
  --color-borde: #e1e5f0;

  /* Acción / conversión */
  --color-whatsapp: #25d366;
  --color-whatsapp-oscuro: #1ebd59;

  /* Tipografía */
  --fuente: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Espaciado */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;

  /* Bordes y sombras */
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 10px 30px rgba(15, 19, 96, 0.1);
  --sombra-suave: 0 4px 14px rgba(15, 19, 96, 0.08);

  /* Layout */
  --ancho-maximo: 1180px;
  --alto-barra-movil: 64px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--fuente);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--espacio-sm);
  color: var(--color-marino);
}

h1 { font-weight: 900; letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { font-weight: 700; letter-spacing: -0.005em; }

p {
  margin: 0 0 var(--espacio-sm);
  color: var(--color-texto-suave);
}

section {
  padding: var(--espacio-xl) 0;
}

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}

/* Deja espacio para la barra fija inferior en móvil */
body {
  padding-bottom: var(--alto-barra-movil);
}
@media (min-width: 821px) {
  body { padding-bottom: 0; }
}

/* ---------- Encabezados de sección ---------- */
.encabezado-seccion {
  text-align: left;
  max-width: 680px;
  margin: 0 0 var(--espacio-lg);
}
.encabezado-seccion.centro-texto {
  text-align: center;
  margin: 0 auto var(--espacio-lg);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-azul);
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0.65rem;
}
.etiqueta::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--color-azul);
  flex-shrink: 0;
}
.centro-texto .etiqueta,
.encabezado-seccion.centro-texto .etiqueta {
  justify-content: center;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radio-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.boton:active { transform: scale(0.97); }

@media (max-width: 480px) {
  .hero-acciones .boton { white-space: normal; text-align: center; }
}

.boton-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.boton-whatsapp:hover { background: var(--color-whatsapp-oscuro); }

.boton-llamar {
  background: var(--color-marino);
  color: var(--color-blanco);
  box-shadow: 0 8px 20px rgba(15, 19, 96, 0.25);
}
.boton-llamar:hover { background: #161b7a; }

.boton-secundario {
  background: transparent;
  border-color: var(--color-borde);
  color: var(--color-marino);
}
.boton-secundario:hover { border-color: var(--color-azul); color: var(--color-azul); }

.boton-bloque { width: 100%; }

/* ---------- Encabezado / navegación ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-borde);
}

.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
  padding: 0.85rem var(--espacio-md);
  max-width: var(--ancho-maximo);
  margin: 0 auto;
}

.logo-nav img { height: 52px; width: auto; }

.nav-enlaces {
  display: none;
  align-items: center;
  gap: var(--espacio-md);
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-enlaces a:hover { color: var(--color-azul); }

.nav-acciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-boton-menu {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0.4rem;
  cursor: pointer;
}
.nav-boton-menu svg { width: 26px; height: 26px; color: var(--color-marino); }

.menu-movil {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 var(--espacio-md) var(--espacio-sm);
  border-top: 1px solid var(--color-borde);
}
.menu-movil.abierto { display: flex; }
.menu-movil a {
  padding: 0.75rem 0.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-borde);
}

@media (min-width: 981px) {
  .nav-enlaces { display: flex; }
  .nav-boton-menu { display: none; }
  .menu-movil { display: none !important; }
}

/* ---------- Barra fija inferior (móvil) ---------- */
.barra-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  height: var(--alto-barra-movil);
  background: var(--color-blanco);
  box-shadow: 0 -6px 20px rgba(15, 19, 96, 0.15);
}
.barra-movil a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.barra-movil .accion-llamar { background: var(--color-marino); color: var(--color-blanco); }
.barra-movil .accion-agendar { background: var(--color-whatsapp); color: var(--color-blanco); }

@media (min-width: 821px) {
  .barra-movil { display: none; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: calc(var(--alto-barra-movil) + 1.1rem);
  z-index: 55;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
}
.whatsapp-flotante svg { width: 30px; height: 30px; fill: var(--color-blanco); }

/* En móvil la barra inferior ya ofrece "Agendar mi cita" por WhatsApp;
   el botón flotante solo se muestra en escritorio para no competir con ella. */
.whatsapp-flotante { display: none; }

@media (min-width: 821px) {
  .whatsapp-flotante { display: flex; bottom: 1.5rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--espacio-lg) 0 var(--espacio-xl);
  background: linear-gradient(180deg, var(--color-azul-claro) 0%, var(--color-fondo) 100%);
}
.hero .contenedor {
  display: grid;
  gap: var(--espacio-lg);
  align-items: center;
}
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs);
  margin-top: var(--espacio-md);
}
.hero-imagen {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  max-width: 380px;
  margin: 0 auto;
}
.hero-imagen img { width: 100%; height: auto; display: block; }

@media (min-width: 900px) {
  .hero .contenedor { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---------- Hero de portada (home): foto protagonista ----------
   A diferencia del resto de los hero (fondo degradado + tarjeta
   flotante), aquí la foto va a sangre y el ícono de la marca
   —la figura en movimiento— aparece como marca de agua, ligando
   la promesa "vuelve a moverte" a algo visual. */
.hero-portada {
  padding: 0;
  background: var(--color-marino);
  overflow: hidden;
}
.hero-portada-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.hero-portada-texto {
  position: relative;
  padding: var(--espacio-xl) var(--espacio-md) var(--espacio-lg);
  overflow: hidden;
}
.hero-portada-texto > * { position: relative; z-index: 1; }
.hero-portada-marca {
  position: absolute;
  top: -10%;
  right: -14%;
  width: 62%;
  max-width: 420px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.hero-portada .etiqueta { color: var(--color-azul-claro); }
.hero-portada .etiqueta::before { background: var(--color-azul-claro); }
.hero-portada h1 { color: var(--color-blanco); font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.hero-portada-texto p { color: #c7cdf0; }
.hero-portada-texto .volver-equipo { color: var(--color-blanco); }
.hero-portada-texto .volver-equipo:hover { color: var(--color-azul-claro); }
.hero-portada-detalle { font-style: italic; }
.hero-portada-imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero-portada-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
@media (min-width: 900px) {
  .hero-portada-grid { grid-template-columns: minmax(380px, 44%) 1fr; }
  .hero-portada-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
    padding: var(--espacio-lg) var(--espacio-lg) var(--espacio-lg)
      max(var(--espacio-lg), calc((100vw - var(--ancho-maximo)) / 2 + var(--espacio-md)));
  }
  /* La imagen se posiciona en absoluto dentro de .hero-portada-imagen,
     así que esta ya no aporta su alto intrínseco al cálculo de la fila
     del grid: se estira (comportamiento por defecto de grid) para
     igualar la altura real del panel de texto, sin importar que la
     foto original sea vertical. */
  .hero-portada-imagen { aspect-ratio: auto; }
}

/* ---------- Barra de cifras ---------- */
.cifras {
  background: var(--color-marino);
  padding: var(--espacio-md) 0;
}
.cifras .contenedor {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-md);
  text-align: center;
}
.cifra-numero {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  color: var(--color-blanco);
}
.cifra-texto {
  font-size: 0.85rem;
  color: #c7cdf0;
  margin: 0;
}
@media (min-width: 700px) {
  .cifras .contenedor { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 981px) {
  .cifras .contenedor { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Tarjetas ---------- */
.rejilla {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}

.tarjeta {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-md);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-suave); }

/* Pasos numerados ("Qué incluye tu primera valoración", "Cómo
   funciona"): más compactas que una tarjeta de contenido normal. */
.tarjeta-paso {
  padding: var(--espacio-sm) var(--espacio-md);
}
.tarjeta-paso .cifra-numero {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin-bottom: 0.2rem;
}
.tarjeta-paso h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.tarjeta-paso p {
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* Las tarjetas de servicio se distinguen por un borde de acento,
   no por una sombra flotante como el resto de las tarjetas. */
.tarjeta-servicio {
  border-left: 3px solid var(--color-azul-claro);
  box-shadow: none;
  padding: var(--espacio-sm) var(--espacio-md);
}
.tarjeta-servicio:hover {
  border-left-color: var(--color-azul);
  box-shadow: none;
  transform: translateY(-3px);
}
.tarjeta-servicio h3 { margin-bottom: 0.35rem; }
.tarjeta-servicio p { margin-bottom: 0; }
.icono-servicio {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid var(--color-azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.65rem;
}
.icono-servicio svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-azul); }

.insignia-icono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}
.insignia-icono svg { width: 24px; height: 24px; color: var(--color-azul); }

/* ---------- Equipo ---------- */
.tarjeta-equipo { text-align: center; padding: var(--espacio-sm) var(--espacio-sm); }
.tarjeta-equipo img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.75rem;
  border: 4px solid var(--color-azul-claro);
}
.tarjeta-equipo h3 { margin-bottom: 0.15rem; font-size: 1.1rem; }
.tarjeta-equipo .puesto {
  color: var(--color-azul);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--espacio-xs);
}
.tarjeta-equipo p { margin-bottom: 0; }
a.tarjeta-equipo { display: block; cursor: pointer; }
.tarjeta-equipo .ver-perfil {
  display: inline-block;
  margin-top: var(--espacio-xs);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-azul);
}
a.tarjeta-equipo:hover .ver-perfil { text-decoration: underline; }

/* ---------- Galería ---------- */
.galeria-envoltura { position: relative; }
.galeria {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--espacio-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--espacio-xs);
  scrollbar-width: thin;
}
.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radio-sm);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
}
.galeria-pista {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  margin-top: var(--espacio-sm);
}
.galeria-flecha {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.galeria-flecha svg { width: 20px; height: 20px; color: var(--color-marino); }
.galeria-flecha.anterior { left: -16px; }
.galeria-flecha.siguiente { right: -16px; }
/* Sin contenido que desborde (p. ej. 3 testimonios que ya caben
   enteros en la pantalla), las flechas no tienen nada que hacer. */
.galeria-envoltura.sin-desborde .galeria-flecha { display: none !important; }
@media (min-width: 700px) {
  .galeria { grid-auto-columns: calc(50% - 0.5 * var(--espacio-xs)); }
  .galeria-flecha { display: flex; }
}
@media (min-width: 981px) {
  .galeria { grid-auto-columns: calc(25% - 0.75 * var(--espacio-xs)); }
}

/* ---------- Testimonios en video (embeds de Instagram) ---------- */
.video-instagram {
  display: flex;
  justify-content: center;
}
.video-instagram iframe { border-radius: var(--radio); }

/* ---------- Carrusel horizontal de testimonios (home) ----------
   Reusa .galeria-envoltura / .galeria-flecha / .galeria-pista
   (son genéricas, no dependen de que el contenido sea una imagen). */
.testimonios-carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: var(--espacio-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--espacio-xs);
  scrollbar-width: thin;
}
.testimonios-carrusel .tarjeta-testimonio,
.testimonios-carrusel .video-instagram { scroll-snap-align: start; }
@media (min-width: 700px) {
  .testimonios-carrusel { grid-auto-columns: calc(50% - 0.5 * var(--espacio-md)); }
}
@media (min-width: 981px) {
  .testimonios-carrusel { grid-auto-columns: calc(33.333% - 0.667 * var(--espacio-md)); }
}

/* ---------- Testimonios ---------- */
/* Tratadas como citas, no como tarjetas: una regla superior y una
   comilla grande en vez de la caja con sombra del resto del sitio. */
.tarjeta-testimonio {
  position: relative;
  border: none;
  border-top: 3px solid var(--color-azul-claro);
  border-radius: 0;
  padding: calc(var(--espacio-md) + 1.6rem) 0 0;
  box-shadow: none !important;
}
.tarjeta-testimonio:hover { transform: none; border-top-color: var(--color-azul); }
.tarjeta-testimonio::before {
  content: "“";
  position: absolute;
  top: 0.35rem;
  left: 0;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-azul-claro);
}
.tarjeta-testimonio .estrellas { color: var(--color-marino); margin-bottom: var(--espacio-xs); letter-spacing: 3px; font-size: 0.8rem; }
.tarjeta-testimonio p { color: var(--color-texto); font-style: italic; }
.tarjeta-testimonio .autor { font-weight: 700; color: var(--color-marino); font-style: normal; margin-top: var(--espacio-sm); }

/* ---------- FAQ (acordeón) ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-borde);
}
.faq-pregunta {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--espacio-sm) 0;
  font-family: var(--fuente);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-marino);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-sm);
  cursor: pointer;
}
.faq-pregunta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item.abierto .faq-pregunta svg { transform: rotate(45deg); }
.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item.abierto .faq-respuesta { max-height: 400px; }
.faq-respuesta p { padding-bottom: var(--espacio-sm); }

/* ---------- Ubicación / contacto ---------- */
.mapa-wrap {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 16 / 10;
}
.mapa-wrap iframe { width: 100%; height: 100%; border: 0; }

.ficha-contacto {
  display: grid;
  gap: var(--espacio-sm);
}
.ficha-contacto .item {
  display: flex;
  gap: var(--espacio-sm);
  align-items: flex-start;
}
.ficha-contacto .item svg {
  width: 22px;
  height: 22px;
  color: var(--color-azul);
  flex-shrink: 0;
  margin-top: 2px;
}
.ficha-contacto .item strong { color: var(--color-marino); display: block; }

.redes-sociales { display: flex; gap: 0.6rem; margin-top: var(--espacio-sm); }
.redes-sociales a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
}
.redes-sociales svg { width: 20px; height: 20px; color: var(--color-azul); }

/* ---------- Pie de página ---------- */
.pie {
  background: var(--color-marino);
  color: #c7cdf0;
  padding: var(--espacio-lg) 0 calc(var(--espacio-lg) + var(--alto-barra-movil));
}
.pie h4 { color: var(--color-blanco); font-size: 0.95rem; }
.pie a:hover { color: var(--color-blanco); }
.pie-rejilla {
  display: grid;
  gap: var(--espacio-lg);
  grid-template-columns: 1fr;
}
.pie-logo img { height: 36px; margin-bottom: var(--espacio-sm); }
.pie-enlaces li { margin-bottom: 0.5rem; }
.pie-base {
  margin-top: var(--espacio-lg);
  padding-top: var(--espacio-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-xs);
}
@media (min-width: 821px) {
  .pie-rejilla { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ---------- Perfil de especialista ---------- */
.perfil-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espacio-sm);
}
.perfil-foto {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--color-blanco);
  box-shadow: var(--sombra);
}
.volver-equipo {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-azul);
  margin-bottom: var(--espacio-md);
}
.perfil-encabezado .volver-equipo {
  grid-column: 1 / -1;
}
.perfil-calendario {
  text-align: center;
}
.perfil-calendario h2 { margin-bottom: 0.4rem; }
@media (min-width: 900px) {
  .hero .perfil-encabezado.contenedor {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .hero .perfil-simple.contenedor {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero de perfil, versión oscura ---------- */
.hero-oscuro {
  background: var(--color-marino);
}
.hero-oscuro .volver-equipo {
  color: var(--color-blanco);
}
.perfil-texto {
  text-align: left;
}
.perfil-texto p {
  text-align: justify;
}
.lista-simple li,
.lista-check li {
  text-align: justify;
}
.texto-justificado p {
  text-align: justify;
}
.perfil-texto h1 {
  color: var(--color-blanco);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
}
.perfil-texto p {
  color: #c7cdf0;
}
.perfil-texto h3 {
  color: var(--color-blanco);
  font-size: 1.15rem;
  margin: var(--espacio-md) 0 0.6rem;
}
.lista-simple {
  list-style: disc;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--espacio-sm);
}
.lista-simple li {
  color: #c7cdf0;
}
.boton-llamar-oscuro {
  background: transparent;
  border: 2px solid var(--color-blanco);
  color: var(--color-blanco);
}
.boton-llamar-oscuro:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lista-check {
  display: grid;
  gap: 0.65rem;
}
.lista-check li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--color-texto-suave);
}
/* En listas cortas, de 2 columnas, justificar deja huecos feos
   entre palabras: se alinean a la izquierda en vez de justificar. */
.lista-check-2col li { text-align: left; }
@media (min-width: 640px) {
  .lista-check-2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
  }
}
.lista-check svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-whatsapp);
  margin-top: 2px;
}

/* Lista de pasos numerados en orden (a diferencia de .lista-check,
   que es un conjunto de puntos sin secuencia): una sola columna,
   para que se lea de principio a fin sin perder el hilo. */
.lista-pasos {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  counter-reset: paso;
}
.lista-pasos li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  color: var(--color-texto-suave);
}
.lista-pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-azul-claro);
  color: var(--color-azul);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variante con título + descripción por paso (en vez de una sola
   línea): número un poco más grande, alineado con el título. */
.lista-pasos-detalle { gap: 1.1rem; }
.lista-pasos-detalle li::before {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}
.lista-pasos-detalle strong {
  display: block;
  color: var(--color-marino);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.lista-pasos-detalle p { margin: 0; }

/* ---------- Marcador temporal mientras llegan las fotos reales ---------- */
.foto-pendiente.perfil-foto {
  width: 180px;
  height: 180px;
  border-radius: 50%;
}
.foto-pendiente {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--espacio-sm);
  background: repeating-linear-gradient(
    135deg,
    var(--color-azul-claro),
    var(--color-azul-claro) 10px,
    #dde4f6 10px,
    #dde4f6 20px
  );
  color: var(--color-azul);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: inherit;
}

/* ---------- Utilidades ---------- */
.centro-texto { text-align: center; }
.fondo-alterno { background: var(--color-fondo-alterno); }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}