/* ==========================================================================
   Sin Moldes — hoja de estilos general
   ========================================================================== */

/* Paleta azul océano/turquesa, sacada directamente de la imagen de
   marca real de la clienta en Instagram (@sinmoldes.psicologia): el
   círculo de historias "Sobre mí" y las tarjetas con su foto usan
   exactamente este degradado azul-turquesa con texto marino oscuro
   sobre fondo claro. El azul transmite calma y amplitud (como el mar
   o el cielo) sin resultar frío, porque se combina con un coral
   cálido de acento y un fondo crema — evitando el efecto "corporativo"
   que tenía la primera versión en turquesa/marino saturados. Todas las
   combinaciones cumplen 4.5:1 (texto) o 3:1 (elementos gráficos) de
   WCAG 2.1 AA:
   - Azul océano (--color-primary-dark): color de "marco" del sitio —
     cabecera, pie de página y botones de acción (5.99:1 con blanco).
   - Turquesa (--color-primary): acento decorativo (detalles, no texto
     pequeño).
   - Turquesa casi blanco (--color-primary-pale): texto por defecto del
     menú y del pie sobre el degradado azul (4.58–5.76:1 en cualquier
     punto del degradado); el enlace activo pasa a blanco puro y negrita
     subrayada para diferenciarse sin depender solo del color.
   - Coral/terracota (--color-accent): acento cálido para títulos,
     etiquetas y detalles — el complemento clásico del azul mar/arena
     (4.92–5.26:1).
   - Marino oscuro (--color-text): mismo tono que el texto de las
     tarjetas de Instagram, en vez de un negro puro (13.6:1 sobre
     crema).
   - Crema (--color-bg): fondo principal, más cálido y cercano que un
     blanco puro; alterna con el azul pálido (--color-bg-alt) sección
     por sección para diferenciar bloques de contenido. */
:root {
  --color-bg: #faf7f2;
  --color-bg-alt: #e8f1f3;
  --color-primary: #4a9aa0;
  --color-primary-dark: #236a8b;
  --color-primary-pale: #fafdfe;
  --color-header-gradient-start: #236a8b;
  --color-header-gradient-end: #2c7c9e;
  --color-accent: #a85528;
  --color-accent-light: #f7ece2;
  --color-text: #1d2941;
  --color-text-soft: #5c6673;
  --color-white: #ffffff;
  --color-border: #dce8ec;
  --color-border-strong: #5f8494;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --max-width: 1100px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(35, 106, 139, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  display: block;
  border-radius: var(--radius);
}

a { color: var(--color-primary-dark); text-decoration: underline; }
a:hover { text-decoration: none; }

/* Los elementos interactivos (enlaces dentro de botones, tarjetas, etc.)
   recuperan un subrayado solo al recibir foco de teclado si no lo llevan
   por defecto, para no depender únicamente del color como indicador. */

/* ---------- Accesibilidad: foco visible y salto de contenido ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a4d8f;
  outline-offset: 2px;
  border-radius: 4px;
}

/* El azul del foco por defecto (#1a4d8f) apenas se distingue sobre el
   azul océano de cabecera/pie (1.40:1, no cumple el 3:1 mínimo de
   WCAG 1.4.11 para indicadores de foco). Ahí se usa un foco blanco,
   que sobre ese fondo da 5.99:1. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.skip-link:focus-visible {
  outline-color: #ffffff;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-primary-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/* ---------- Citas textuales ----------
   Antes se veían con el tamaño y la tipografía normales del texto y
   pasaban desapercibidas. Ahora destacan con tipografía de los
   títulos, tamaño mayor, cursiva y un borde lateral de color; el azul
   oscuro de los títulos cumple normativa de sobra en texto de este
   tamaño (es "texto grande" según la definición de la normativa). */
blockquote {
  margin: 0 auto;
  max-width: 760px;
  padding: 4px 28px;
  border-left: 4px solid var(--color-accent);
}

blockquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

blockquote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-soft);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ----------
   Mismo azul océano que el footer, para que la cabecera y el pie
   compartan un único color de "marco" del sitio. */
.site-header {
  background: linear-gradient(135deg, var(--color-header-gradient-start) 0%, var(--color-header-gradient-end) 100%);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-white);
  font-weight: bold;
  text-decoration: none;
}

/* El icono es solo decorativo: el nombre de la marca ya lo dice el
   texto de al lado, así que lleva alt="" para no duplicarlo en
   lectores de pantalla. En pantallas pequeñas se reduce un poco para
   dejar sitio al botón de menú, pero no se oculta: sigue siendo parte
   del nombre de la marca, no un adorno de quita y pon. */
.logo-icon {
  height: 40px;
  width: auto;
  border-radius: 0;
  flex-shrink: 0;
}

.logo-text {
  line-height: 1.1;
}

@media (max-width: 480px) {
  .logo-icon {
    height: 30px;
  }
  .logo-text {
    font-size: 1.15rem;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--color-white);
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  position: relative;
  color: var(--color-primary-pale);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 2px 6px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.main-nav a.active,
.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-white);
}

.main-nav a.active::after,
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
  font-weight: 700;
}

/* ---------- Migas de pan ----------
   Solo se muestran en el mismo punto en que el menú principal se
   convierte en el botón de tres rayas (≤860px, ver media query al
   final): en pantallas más anchas el menú ya muestra qué página está
   activa (subrayado + negrita + aria-current="page"), así que las migas
   ahí eran redundantes con lo que pedía la clienta. En móvil, sin el
   menú visible, siguen sirviendo de referencia de dónde estás. */
.breadcrumbs {
  display: none;
  padding-top: 14px;
  padding-bottom: 14px;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--color-border);
}

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Portada (primera pantalla, solo en inicio) ----------
   Ahora es la única sección "de bienvenida": incluye la frase, el H1
   real de la página, el subtítulo y el botón de "Pide cita" todo
   junto sobre la foto de mar, en vez de repartirlos en dos secciones
   seguidas casi iguales (la antigua .hero, con otra foto, quedaba
   redundante justo debajo de esto). El botón final de la página
   ("¿Quieres pedir cita?") se mantiene como refuerzo para quien llega
   al final sin decidirse arriba — es normal tener las dos, una al
   principio y otra al final, no están de más.
   El velo claro sobre la foto (mismo azul pálido --color-bg-alt de la
   web) se comprobó pixel a pixel: con textos grandes (el H1 y la
   frase, que llegan a superar el umbral de "texto grande" de la
   normativa) el azul de los títulos (--color-primary-dark) mantiene
   3.5:1 como mínimo; el subtítulo, más pequeño, usa el azul marino
   (--color-text), que llega a 8.5:1 incluso en la parte más oscura
   de la foto. */
/* 100dvh menos la altura real de la cabecera (72px, fija salvo en
   móvil pequeño): así cabecera + portada ocupan exactamente una
   pantalla completa, sin dejar hueco vacío antes de la siguiente
   sección. dvh (en vez de vh) evita el hueco extra que deja vh en
   móvil cuando la barra de direcciones del navegador se oculta o
   aparece. */
.cover-hero {
  position: relative;
  min-height: 100vh;
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(232, 241, 243, 0.78), rgba(232, 241, 243, 0.78)), url("../img/hero-cover.jpg");
  background-size: cover;
  background-position: center;
  padding: 56px 24px;
}

.cover-hero-inner {
  max-width: 720px;
}

/* Entrada al cargar la página: fundido + un ligero desplazamiento
   hacia arriba. No depende de scroll ni de JS (si algo falla, el
   contenido se ve igual), y cada elemento tarda 0.8s, muy por debajo
   del umbral de 5s de la normativa para contenido en movimiento. Cada
   uno entra un poco después que el anterior. */
@keyframes cover-reveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.cover-hero-tagline,
.cover-hero-title,
.cover-hero-subtitle,
.cover-hero-scroll {
  animation: cover-reveal 0.8s ease both;
}

.cover-hero-tagline { animation-delay: 0.1s; }
.cover-hero-subtitle { animation-delay: 0.2s; }
.cover-hero-scroll { animation-delay: 0.3s; }

.cover-hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
  line-height: 1.3;
  margin: 0 0 18px;
}

.cover-hero-tagline strong {
  font-weight: 800;
}

.cover-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  color: var(--color-primary-dark);
  margin: 0 0 16px;
}

.cover-hero-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 28px;
}

.cover-hero-scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 12px;
  border: 2px solid var(--color-primary-dark);
  border-radius: 50%;
  color: var(--color-primary-dark);
  font-size: 1.3rem;
  text-decoration: none !important;
}

/* Los 3 rebotes (~3.4s) empiezan tras el fundido de entrada y se
   detienen: si fuera un bucle infinito, al durar más de 5s en
   paralelo con el resto del contenido, la normativa (WCAG 2.2.2)
   exigiría un control para pausarla. Al ser finita y breve, no hace
   falta. */
.cover-hero-scroll {
  animation: cover-reveal 0.8s ease 0.3s both, cover-scroll-bounce 1.15s ease-in-out 1.2s 3;
}

.cover-hero-scroll:hover,
.cover-hero-scroll:focus-visible {
  background: rgba(35, 106, 139, 0.12);
}

/* El foco de teclado se queda en el azul marino (--color-text, ya
   usado en cabecera/pie) en vez del azul de marca: es el color con
   más margen de contraste de toda la paleta, y un indicador de foco
   es justo donde conviene no arriesgar ningún margen. */
.cover-hero-scroll:focus-visible {
  outline-color: var(--color-text);
}

@keyframes cover-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (max-width: 600px) {
  .cover-hero {
    min-height: auto;
    padding: 64px 20px 40px;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Entrada suave y única al cargar la página (no depende de JS ni de
   scroll, así que nunca deja contenido oculto si el script no carga).
   `prefers-reduced-motion` ya desactiva animation-duration de forma
   global (ver arriba), así que aquí se reduce a un cambio instantáneo
   sin desplazamiento para quien lo tenga activado. */
@keyframes reveal-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero .container > * {
  animation: reveal-fade 0.6s ease both;
}

.hero .container > *:nth-child(2) {
  animation-delay: 0.12s;
}

.hero h1 {
  font-size: 2.4rem;
}

.hero .subtitle {
  font-style: italic;
  color: var(--color-text-soft);
  font-size: 1.1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-primary-dark);
  color: var(--color-white) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}

.btn:hover {
  background: #184a63;
  transform: translateY(-2px);
}

.btn:active,
.btn-outline:active {
  transform: translateY(0) scale(0.97);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-dark) !important;
  border: 2px solid var(--color-primary-dark);
}

.btn-outline:hover { background: var(--color-primary-dark); color: var(--color-white) !important; }

/* ---------- Sections ---------- */
section {
  padding: 56px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

/* La sección a la que lleva la flechita de la portada: ocupa el mismo
   "tamaño de pantalla" que la propia portada (100dvh menos la
   cabecera) y centra su contenido verticalmente, así al bajar queda
   encajada en pantalla en vez de aparecer cortada por arriba o por
   abajo. */
#siguiente-seccion {
  min-height: 100vh;
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  /* Al saltar con el enlace "#siguiente-seccion", el navegador alinea
     el principio de la sección con el borde superior de la ventana,
     sin contar con que la cabecera (sticky) se queda encima tapando
     esos primeros px. Eso dejaba la sección empezando 72px más abajo
     de lo previsto y, como su alto ya estaba calculado para encajar
     justo debajo de la cabecera, sobraban esos mismos 72px al final.
     scroll-margin-top reserva ese hueco al saltar, así la sección
     queda pegada justo debajo de la cabecera y ocupa la pantalla
     completa sin dejar nada de más. */
  scroll-margin-top: 72px;
}

#siguiente-seccion .container {
  width: 100%;
}

@media (max-width: 600px) {
  #siguiente-seccion {
    min-height: auto;
  }
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Esa imagen concreta trae su propio fondo blanco "de fábrica" (viene
   así del sitio antiguo), que se notaba como un recorte raro sobre el
   fondo crema de la sección. En vez de intentar igualar el blanco
   exacto, se convierte en una tarjeta con marco a propósito —el mismo
   tratamiento (blanco, sombra, bordes redondeados) que ya usan las
   demás tarjetas de la web—, así el borde se ve intencionado en vez
   de accidental. */
.framed-image {
  background: var(--color-white);
  padding: 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.framed-image img {
  border-radius: calc(var(--radius) - 8px);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 6px;
}

.text-accent {
  color: var(--color-accent) !important;
}

/* La foto de Carmen en la sección final de la portada, un poco más
   pequeña que a ancho completo de columna para que no domine tanto. */
.carmen-photo-small {
  max-width: 85%;
  margin: 0 auto;
}

/* ---------- Las 4 etapas del viaje (página "Sobre el centro") ----------
   Reutiliza el mismo patrón visual que el resto del sitio: imagen
   enmarcada (.framed-image) + texto, alternando lado a lado solo en
   pantallas anchas; en móvil siempre va primero la imagen y luego el
   texto, en el mismo orden para las 4 etapas (más fácil de seguir). */
.journey-intro {
  max-width: 760px;
  font-size: 1.1rem;
}

.journey {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 40px 0;
}

.journey-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.journey-stage--reverse .journey-image { order: 2; }
.journey-stage--reverse .journey-text { order: 1; }

.journey-image img {
  display: block;
  width: 100%;
  height: auto;
}

.journey-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.journey-text h3 { margin: 0 0 10px; }

.journey-question {
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--color-primary-dark);
  max-width: 700px;
  margin: 24px auto 0;
}

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

  .journey-stage--reverse .journey-image,
  .journey-stage--reverse .journey-text {
    order: initial;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  /* Sin esto, el grid estira todas las tarjetas de una fila a la
     altura de la más alta: al abrir el desplegable de una, las demás
     de su misma fila se "agrandaban" también aunque no tuvieran
     contenido nuevo. Con "start", cada tarjeta ocupa solo su propia
     altura de contenido. */
  align-items: start;
}

/* Cada columna es su propia pila vertical e independiente de las
   demás: así, si una tarjeta sin nada debajo (p. ej. "Comunidad
   terapéutica") se despliega, no empuja hacia abajo las tarjetas de
   otras columnas que no tienen relación con ella. Solo se mueve lo
   que esté apilado justo debajo, en su misma columna. */
.card-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px 28px 28px;
  box-shadow: var(--shadow);
  text-align: center;
  border-top: 3px solid var(--color-accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 106, 139, 0.18);
}

.card h3 {
  margin-bottom: 12px;
  /* Reserva espacio para dos líneas de título, aunque el texto solo
     ocupe una: así todas las tarjetas cerradas quedan a la misma
     altura, tengan el título largo o corto. */
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Desplegable "Más información" de las tarjetas de servicios ----------
   Se usa <details>/<summary> nativo: funciona sin JavaScript, es
   accesible por teclado y con lectores de pantalla sin necesidad de
   atributos adicionales (el navegador gestiona aria-expanded y el
   estado abierto/cerrado). */
.card details {
  margin-top: 14px;
  text-align: left;
}

.card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-primary-dark);
  font-weight: 600;
  text-align: center;
}

.card summary::-webkit-details-marker { display: none; }

.card summary::after {
  content: '\25BE';
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.card details[open] summary::after {
  transform: rotate(180deg);
}

.card details p {
  margin: 12px 0 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
  text-align: left;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.mode-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 106, 139, 0.18);
}

/* La imagen ya no domina la tarjeta: se recorta a una franja más
   discreta (object-fit: cover) para que el texto sea lo principal. */
.mode-card img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.mode-card .mode-body { padding: 20px; }

/* Recorte fino por tarjeta: centra el encuadre en la parte de la foto
   que mejor representa cada modalidad (el portátil en la de online,
   las sillas de espera en la de presencial). */
.mode-card:nth-child(1) img { object-position: center 15%; }
.mode-card:nth-child(2) img { object-position: center 55%; }

/* ---------- Testimonios ----------
   Un testimonio visible a la vez (como en el resto del contenido, se
   prioriza la lectura sin prisas); el desplazamiento entre testimonios
   usa scroll-snap nativo, así que funciona con el dedo en móvil sin
   necesidad de JavaScript. Los puntos (añadidos por JS) son un atajo
   opcional para saltar directamente a uno. */
.testimonials {
  text-align: center;
}

.testimonial-carousel {
  max-width: 640px;
  margin: 32px auto 0;
  /* Evita que el carrusel interno (desplazamiento horizontal) "filtre"
     su ancho de scroll hacia la página completa, lo que provocaba que
     toda la web se pudiera arrastrar hacia la derecha unos píxeles. */
  contain: layout;
}

.testimonial-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0 0 20px;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}

.testimonial-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: left;
}

.testimonial-slide blockquote {
  margin: 0;
  background: var(--color-white);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}

.testimonial-slide blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
}

.testimonial-slide cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
}

.testimonial-slide cite strong {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-accent);
}

.testimonial-slide cite span {
  display: block;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

.testimonial-slide blockquote p.testimonial-stars {
  margin-top: 14px;
  color: #c98a1f;
  letter-spacing: 2px;
  font-size: 1.1rem;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.testimonial-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.testimonial-dots button[aria-current="true"] {
  background: var(--color-primary-dark);
  transform: scale(1.3);
}

.testimonial-dots button:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { scroll-behavior: auto; }
  .testimonial-dots button { transition: none; }
}

/* ---------- CTA final ---------- */
.cta-final {
  text-align: center;
  background: var(--color-bg-alt);
}

.cta-final .btn { margin: 8px; }

.cta-note {
  margin-top: 24px;
  font-weight: 600;
  color: var(--color-text-soft);
}

/* ---------- Formulario de contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

form.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form.contact-form label {
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

form.contact-form textarea { min-height: 140px; resize: vertical; }

form.contact-form input[aria-invalid="true"],
form.contact-form textarea[aria-invalid="true"] {
  border-color: #b3402a;
}

.field-error {
  display: block;
  min-height: 1.2em;
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b3402a;
}

.form-status {
  min-height: 1.4em;
  font-weight: 600;
}

.form-status.success { color: #2f7d4f; }
.form-status.error { color: #b3402a; }

.contact-info {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.contact-info li {
  margin-bottom: 10px;
}

.map-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-top: 24px;
}

.map-wrapper iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* ---------- Recursos / Materiales ---------- */
.resource-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 106, 139, 0.18);
}

.resource-card img { border-radius: 8px; }

/* ---------- Legal ---------- */
.legal-content h2 { margin-top: 32px; }
.legal-content p { margin-bottom: 1em; }

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  background: var(--color-white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

.legal-content caption { text-align: left; }

.legal-content th,
.legal-content td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}

.legal-content th {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.legal-content th[scope="row"] {
  background: transparent;
  color: var(--color-text);
  width: 220px;
  font-weight: 700;
}
.legal-placeholder {
  background: var(--color-accent-light);
  border: 1px dashed var(--color-border-strong);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--color-accent);
  font-style: italic;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(135deg, var(--color-header-gradient-start) 0%, var(--color-header-gradient-end) 100%);
  color: var(--color-primary-pale);
  padding: 40px 0 24px;
}

.site-footer a { color: var(--color-primary-pale); }

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.footer-links a,
.footer-social a {
  text-decoration: none;
}

.footer-links a:hover,
.footer-social a:hover {
  text-decoration: underline;
}

.footer-social {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-primary-pale);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 16px;
}

/* ---------- Banner de cookies (RGPD / LSSI-CE) ---------- */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 20px 22px;
  z-index: 999;
  display: none;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.consent-banner.visible { display: block; }

.consent-banner h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.consent-banner p { margin: 0 0 14px; font-size: 0.92rem; }

.consent-banner a { font-weight: 600; }

.consent-options {
  border-top: 1px solid var(--color-border);
  margin: 12px 0;
  padding-top: 12px;
  display: none;
}

.consent-options.visible { display: block; }

.consent-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.consent-option input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.consent-option label { font-size: 0.9rem; }
.consent-option label strong { display: block; }
.consent-option .always-on { color: var(--color-text-soft); font-size: 0.8rem; }

.consent-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
}

.consent-actions button {
  padding: 9px 14px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.consent-actions .accept-all { background: var(--color-primary-dark); color: #fff; }
.consent-actions .reject-all {
  background: var(--color-white);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.consent-actions .configure,
.consent-actions .save {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* ---------- Contenido diferido (mapa) hasta dar consentimiento ---------- */
.map-placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  background: var(--color-bg-alt);
}

.map-placeholder p { margin: 0 0 14px; font-size: 0.92rem; }

/* ---------- Botón flotante de WhatsApp ----------
   Visible en todo momento, en cualquier página y sin necesidad de
   bajar hasta la sección de contacto. Se desplaza con la página
   (position: fixed) y se eleva por encima del aviso de cookies
   mientras este está visible, para que no se solapen. */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  z-index: 900;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, bottom 0.2s ease;
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.whatsapp-float:focus-visible {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 3px;
}

/* Si el aviso de cookies está visible, el botón sube para no quedar
   tapado por él (el aviso ocupa la misma esquina inferior). */
.consent-banner.visible ~ .whatsapp-float {
  bottom: 100px;
}

@media (max-width: 600px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }

  .consent-banner.visible ~ .whatsapp-float {
    bottom: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    transition: none;
  }
}

/* Banner de cookies: en pantallas muy estrechas no caben los 4 botones
   en una sola fila incluso reducidos, así que pasan a una rejilla de
   2 columnas (2+2) en vez de apilarse uno debajo de otro. */
@media (max-width: 600px) {
  .consent-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 16px;
  }

  .consent-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .consent-actions button {
    flex: 1 1 calc(50% - 8px);
    padding: 9px 8px;
    font-size: 0.78rem;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero .container,
  .two-col,
  .mode-grid,
  .contact-grid,
  .resource-card {
    grid-template-columns: 1fr;
  }

  .nav-toggle { display: block; }

  .main-nav {
    display: none;
    width: 100%;
  }

  .main-nav.open { display: block; }

  .site-header .container { flex-wrap: wrap; }

  .main-nav ul {
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
  }

  /* Mismo punto de corte que el menú de tres rayas: aquí sí se
     muestran las migas de pan, porque el menú completo ya no está
     visible como referencia. */
  .breadcrumbs { display: block; }
}