/* ==========================================================================
   style.css · DEMO "Therapist Management" (consulta de psicología, negocio ficticio)
   --------------------------------------------------------------------------
   Es base/style.css con OTRO TEMA: cambian los tokens de :root (colores
   calmos y cálidos, letra un poco más grande, títulos con serifa del
   sistema), el corte del menú (64em, porque son 7 enlaces) y se agregan
   al final los componentes propios de esta demo (sección 7).
   Sin fuentes descargadas: 0 KB de letra.
   --------------------------------------------------------------------------
   CÓMO ESTÁ ORDENADO
   1. Tokens (:root): colores, letras, espacios y radios. Para cambiar el
      "tema" del sitio se tocan SOLO estas variables (ver demos/ para ejemplos).
   2. Reset y base: parejo entre navegadores, letra legible, foco visible.
   3. Estructura: contenedor y secciones.
   4. Componentes: cabecera y menú, botones, tarjetas, galería, preguntas,
      contacto y pie.
   5. Pantallas más grandes (@media min-width).
   6. Movimiento reducido, colores forzados e impresión.

   POR QUÉ "PRIMERO EL CELULAR"
   Todo lo que está fuera de un @media es para una pantalla de unos 360 px.
   Las pantallas grandes solo AGREGAN reglas con @media (min-width: …).
   Así el celular (la mayoría de las visitas) descarga y aplica lo mínimo.

   POR QUÉ NO HAY style="" EN EL HTML
   La política de seguridad (CSP) del sitio solo acepta estilos de este
   archivo. Un style="" en el HTML se ignora: todo el estilo vive aquí.
   ========================================================================== */


/* 1. TOKENS ================================================================
   Una variable CSS (--nombre) guarda un valor que se reutiliza en todo el
   archivo. Si cambias --color-marca aquí, cambian todos los botones,
   enlaces y detalles a la vez.

   CONTRASTE (WCAG 2.2 AA): si cambias un color, revisa que el texto quede
   con contraste de al menos 4,5:1 sobre su fondo (3:1 en títulos grandes,
   bordes de botones y el anillo de foco). Pares que hay que revisar:
   texto/fondo, texto-suave/fondo, sobre-marca/marca, sobre-boton/boton,
   pie-texto/pie-fondo y foco/fondo.
   Valores de esta demo, medidos el 2026-10-21: texto/fondo 14,0:1 ·
   texto-suave/fondo-alt 6,6 · texto-suave/portada 6,5 · blanco/marca 6,0 ·
   marca (enlaces)/fondo-alt 5,2 · texto/acento 11,2 · foco/fondo 5,4 ·
   foco/portada 4,9 · urgencias (número)/fondo urgencias 6,2 · tiza 7,5 ·
   pie 9,7 · foco del pie 8,9. Para medir: cualquier "contrast checker"
   (por ejemplo, el de las herramientas de desarrollo del navegador). */
:root {
  /* --- Color: arena cálida + verde salvia, sin contrastes duros --- */
  --color-fondo: #fbf8f4;            /* fondo general (crema) */
  --color-fondo-alt: #f3ede5;        /* fondo de secciones alternas (arena) */
  --color-superficie: #ffffff;       /* tarjetas y paneles */
  --color-texto: #2b2724;            /* texto principal (café muy oscuro, no negro) */
  --color-texto-suave: #5a524b;      /* texto secundario */
  --color-borde: #ddd3c7;            /* líneas y bordes (decorativos) */
  --color-marca: #3d6b63;            /* verde salvia: enlaces y botones */
  --color-marca-oscuro: #2e554e;     /* marca al pasar el mouse */
  --color-sobre-marca: #ffffff;      /* texto encima de --color-marca */
  --color-acento: #f2dcc8;           /* durazno suave: etiquetas, selección */
  --color-sobre-acento: #2b2724;     /* texto encima de --color-acento */
  --color-enlace: var(--color-marca);
  --color-boton: var(--color-marca);
  --color-boton-hover: var(--color-marca-oscuro);
  --color-sobre-boton: var(--color-sobre-marca);
  --color-foco: #a64b24;             /* anillo de foco del teclado (terracota) */
  --color-cabecera-fondo: var(--color-fondo);
  --color-hero-fondo: #e7eee9;       /* salvia muy clara */
  --color-hero-texto: var(--color-texto);
  --color-hero-texto-suave: var(--color-texto-suave);
  --color-hero-foco: var(--color-foco);
  --color-pie-fondo: #2c3b38;
  --color-pie-texto: #efe9e1;
  --color-pie-foco: var(--color-acento);
  /* Propios de esta demo (sección 7) */
  --color-urgencias-fondo: #fdf3e7;  /* aviso de urgencias: cálido, sin rojo de alarma */
  --color-urgencias-borde: #a64b24;
  --color-urgencias-numero: #8a4a1c;
  --color-tiza-fondo: #fffdf9;       /* marcadores [dato del cliente: …] */
  --color-tiza-borde: #8c8075;

  /* --- Tipografía ---
     Fuentes del sistema: no se descargan (0 KB) y no consultan a otro
     dominio. Títulos con serifa (más cálidos); texto sin serifa (más
     legible en pantallas chicas). Si el dispositivo no tiene ninguna de
     la lista, usa su serifa por defecto (en Android, Noto Serif). */
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fuente-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --peso-titulos: 600;
  --espaciado-titulos: 0;
  --texto-chico: 0.9375rem;          /* 15 px */
  --texto-base: 1.0625rem;           /* 17 px: un poco más grande, se lee con calma */
  --texto-grande: 1.1875rem;         /* 19 px */
  /* clamp(mínimo, ideal, máximo): el título crece con la pantalla pero
     nunca baja del mínimo ni pasa del máximo. Al usar rem, también crece
     si la persona agranda la letra del navegador. */
  --titulo-1: clamp(2rem, 1.45rem + 2.6vw, 3.125rem);
  --titulo-2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --titulo-3: 1.25rem;
  --interlineado: 1.7;               /* más aire entre líneas: lectura tranquila */
  --interlineado-titulos: 1.2;

  /* --- Espacio --- (escala fija: usar siempre estos pasos da orden visual) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --seccion-espacio: clamp(3rem, 2rem + 4vw, 5.5rem);
  --margen-lateral: 1rem;            /* 16 px a cada lado en celular */
  --ancho-max: 72rem;
  --ancho-texto: 40rem;              /* líneas de ~65 letras: se leen mejor */
  --alto-cabecera: 4rem;

  /* --- Forma --- */
  --radio-chico: 6px;
  --radio: 12px;
  --radio-grande: 20px;
  --radio-boton: 999px;              /* 999px = píldora; 6px = rectangular */
  --sombra: 0 1px 2px rgb(60 40 20 / 0.05), 0 8px 20px rgb(60 40 20 / 0.06);
}


/* 2. RESET Y BASE ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box; /* el ancho incluye el relleno y el borde */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* La cabecera queda pegada arriba (sticky). Esto evita que tape el
     título de la sección al saltar desde el menú, o el elemento que
     recibe el foco con el teclado. */
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-4));
}

/* El desplazamiento suave solo para quien NO pidió reducir el movimiento
   en su sistema (algunas personas se marean con animaciones). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  overflow-wrap: break-word; /* palabras largas (correos) no rompen el ancho */
}

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

/* El atributo hidden siempre gana, aunque otra regla diga display. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  margin: 0 0 var(--esp-4);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--espaciado-titulos);
  text-wrap: balance; /* reparte el texto del título en líneas parejas */
}

h1 { font-size: var(--titulo-1); }
h2 { font-size: var(--titulo-2); }
h3 { font-size: var(--titulo-3); }

p,
ul,
ol,
dl,
figure {
  margin: 0 0 var(--esp-4);
}

:where(p, ul, ol, dl, figure):last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-enlace);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

/* FOCO VISIBLE: quien navega con teclado tiene que ver dónde está.
   :focus-visible lo muestra con teclado y no al hacer clic con el mouse.
   Nunca uses "outline: none" sin poner otro indicador en su lugar. */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
}

::selection {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

/* Fuente propia (opcional)
   1. Copia el .woff2 a fonts/ junto con su licencia (solo licencias que
      permitan uso comercial, como la OFL) y anótala en CREDITOS.md.
   2. Descomenta y ajusta:
   @font-face {
     font-family: "Mi Fuente";
     src: url("fonts/mi-fuente.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;   (muestra el texto con la fuente del sistema mientras carga)
   }
   3. En :root: --fuente-texto: "Mi Fuente", system-ui, sans-serif; */


/* Utilidad: oculta un texto a la vista pero lo deja para lectores de
   pantalla (por ejemplo, "se abre en una pestaña nueva"). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "Saltar al contenido": es lo primero que encuentra el teclado.
   Está fuera de la pantalla y aparece solo cuando recibe el foco. */
.saltar {
  position: absolute;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-chico);
  background: var(--color-texto);
  color: var(--color-fondo);
  font-weight: 700;
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}


/* 3. ESTRUCTURA ============================================================ */

/* Contenedor: ancho máximo y 16 px de margen a cada lado en celular. */
.contenedor {
  width: min(100% - 2 * var(--margen-lateral), var(--ancho-max));
  margin-inline: auto;
}

.seccion {
  padding-block: var(--seccion-espacio);
}

.seccion--alt {
  background: var(--color-fondo-alt);
}

.seccion__intro {
  max-width: var(--ancho-texto);
  margin-bottom: var(--esp-6);
  color: var(--color-texto-suave);
  font-size: var(--texto-grande);
}

/* main recibe el foco desde "Saltar al contenido" (tabindex="-1");
   no necesita anillo porque no es un control. */
main:focus {
  outline: none;
}


/* 4. COMPONENTES =========================================================== */

/* --- Cabecera y menú ---
   Sin JavaScript: los enlaces del menú se ven siempre, en una o dos filas.
   Con JavaScript: en celular se esconden detrás del botón "Menú".

   @media (scripting: enabled) es verdadero cuando el navegador ejecuta JS.
   Así el CSS esconde el menú desde el primer dibujo de la página, sin
   esperar a main.js (evita que la página "salte" al cargar). Navegadores
   antiguos que no la entienden muestran el menú abierto: sigue usable. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-cabecera-fondo);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  min-height: var(--alto-cabecera);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px; /* área táctil cómoda */
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos); /* mismo peso que los títulos (evita "negrita falsa") */
  font-size: 1.125rem;
  text-decoration: none;
}

.marca__logo {
  width: 2rem;
  height: 2rem;
}

.menu {
  flex-basis: 100%; /* sin JS: el menú baja a su propia fila */
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-1);
  margin: 0;
  padding: 0 0 var(--esp-2);
  list-style: none;
}

.menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--esp-2);
  border-radius: var(--radio-chico);
  color: var(--color-texto);
  font-weight: 600;
  text-decoration: none;
}

.menu a:hover {
  background: var(--color-fondo-alt);
}

.boton-menu {
  display: none; /* sin JS no sirve, así que no se muestra */
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--color-texto-suave);
  border-radius: var(--radio-boton);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Ícono de tres líneas dibujado con CSS (no es una imagen). */
.boton-menu__icono,
.boton-menu__icono::before,
.boton-menu__icono::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.boton-menu__icono {
  position: relative;
}

.boton-menu__icono::before,
.boton-menu__icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.boton-menu__icono::before { top: -6px; }
.boton-menu__icono::after { top: 6px; }

/* Abierto: las tres líneas forman una X. main.js solo cambia
   aria-expanded; el CSS lee ese atributo. Una sola fuente de verdad:
   lo que ve la persona y lo que anuncia el lector de pantalla coinciden. */
.boton-menu[aria-expanded="true"] .boton-menu__icono {
  background: transparent;
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::before {
  transform: translateY(6px) rotate(45deg);
}

.boton-menu[aria-expanded="true"] .boton-menu__icono::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (scripting: enabled) {
  .boton-menu {
    display: inline-flex;
  }

  .menu {
    display: none;
  }

  /* "+" = el elemento que viene justo después del botón (el nav). */
  .boton-menu[aria-expanded="true"] + .menu {
    display: block;
  }

  .menu li {
    flex-basis: 100%; /* en celular, un enlace por fila: fácil con el pulgar */
    border-top: 1px solid var(--color-borde);
  }
}

/* --- Botones ---
   Son enlaces con forma de botón (llevan a WhatsApp, al teléfono, etc.).
   Alto mínimo 48 px: se tocan bien con el pulgar. */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-3) var(--esp-5);
  border: 2px solid transparent; /* en modo de alto contraste se vuelve visible */
  border-radius: var(--radio-boton);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.boton svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.boton--principal {
  background: var(--color-boton);
  color: var(--color-sobre-boton);
}

.boton--principal:hover {
  background: var(--color-boton-hover);
  color: var(--color-sobre-boton);
}

.boton--secundario {
  border-color: currentColor;
  background: transparent;
  color: var(--color-texto);
}

/* color-mix: un velo del mismo color del texto. Funciona sobre fondo claro
   u oscuro sin tocar nada. Navegadores antiguos: sin velo (sigue usable). */
.boton--secundario:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: var(--color-texto);
}

.boton--ancho {
  width: 100%;
}

.etiqueta {
  display: inline-block;
  margin-bottom: var(--esp-4);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-chico);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: var(--texto-chico);
  font-weight: 700;
}

/* --- Portada (hero) --- */
.hero {
  /* Dentro de la portada, "texto" y "foco" toman los colores de la portada.
     Así, si la portada es oscura, el botón secundario y el anillo de foco
     se ven bien sin escribir reglas nuevas: basta cambiar los tokens. */
  --color-texto: var(--color-hero-texto);
  --color-foco: var(--color-hero-foco);
  padding-block: var(--esp-7) var(--seccion-espacio);
  background: var(--color-hero-fondo);
  color: var(--color-hero-texto);
}

.hero__grilla {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

.hero__bajada {
  max-width: 36rem;
  margin-bottom: var(--esp-6);
  color: var(--color-hero-texto-suave);
  font-size: var(--texto-grande);
}

.hero__imagen {
  width: 100%;
  border-radius: var(--radio-grande);
}

/* --- Tarjetas (servicios) ---
   repeat(auto-fit, minmax(…)): tantas columnas como quepan de al menos
   16rem. En celular cabe una; en escritorio, tres. Sin @media. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
}

.tarjeta {
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
}

.tarjeta h3 {
  margin-bottom: var(--esp-2);
}

/* --- Galería (trabajos) --- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
}

.galeria figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* recorta la foto para que todas midan igual */
}

.galeria figcaption {
  padding: var(--esp-3) var(--esp-4);
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

/* --- Sobre nosotros --- */
.dos-columnas {
  display: grid;
  gap: var(--esp-6);
}

.texto-largo {
  max-width: var(--ancho-texto);
}

.lista-check {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  list-style: none;
}

.lista-check li {
  position: relative;
  padding-left: 2rem;
}

/* Visto bueno dibujado con bordes: es decoración, el texto dice lo importante. */
.lista-check li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0.35rem;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--color-marca);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* --- Preguntas frecuentes (<details>) ---
   <details> abre y cierra sin JavaScript, funciona con teclado (Enter o
   Espacio) y el lector de pantalla anuncia si está abierta o cerrada. */
.preguntas {
  max-width: var(--ancho-texto);
}

.pregunta {
  border-bottom: 1px solid var(--color-borde);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 44px;
  padding-block: var(--esp-4);
  font-weight: 700;
  list-style: none; /* quita el triángulo por defecto… */
  cursor: pointer;
}

.pregunta summary::-webkit-details-marker {
  display: none; /* …también en Safari */
}

/* Signo + y − dibujados con dos líneas de fondo (no con texto, para que
   el lector de pantalla no lea "más"). */
.pregunta summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.pregunta[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.pregunta__respuesta {
  padding-bottom: var(--esp-4);
  color: var(--color-texto-suave);
}

/* --- Contacto --- */
.contacto {
  display: grid;
  gap: var(--esp-6);
}

.contacto__acciones {
  display: grid;
  gap: var(--esp-3);
  max-width: 26rem;
  margin-top: var(--esp-5);
  padding: 0;
  list-style: none;
}

.panel {
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.panel h3 {
  margin-bottom: var(--esp-3);
}

.panel h3:not(:first-child) {
  margin-top: var(--esp-6);
}

.horario div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: 1px dashed var(--color-borde);
}

.horario dt {
  font-weight: 600;
}

.horario dd {
  margin: 0;
}

address {
  font-style: normal;
}

/* --- Pie de página --- */
.pie {
  --color-foco: var(--color-pie-foco); /* el foco también se ve sobre fondo oscuro */
  padding-block: var(--esp-7) var(--esp-6);
  background: var(--color-pie-fondo);
  color: var(--color-pie-texto);
}

.pie a {
  color: inherit;
}

.pie__grilla {
  display: grid;
  gap: var(--esp-6);
}

.pie__nombre {
  margin-bottom: var(--esp-2);
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulos);
  font-size: 1.25rem;
}

.pie ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--esp-4);
  padding: 0;
  list-style: none;
}

.pie nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie__legal {
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--texto-chico);
}

/* --- Página 404 --- */
.error {
  max-width: var(--ancho-texto);
  padding-block: var(--seccion-espacio);
}


/* 5. PANTALLAS MÁS GRANDES ================================================= */

/* Desde 48em (768 px, tablet vertical): contacto y pie a dos columnas.
   (En base/ el menú también se abre aquí; esta demo tiene 7 enlaces y
   no caben al lado del nombre, así que el menú se abre desde 64em.) */
@media (min-width: 48em) {
  .contacto {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .pie__grilla {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .pie__legal {
    grid-column: 1 / -1;
  }
}

/* Desde 60em (960 px, escritorio): portada y "nosotros" a dos columnas. */
@media (min-width: 60em) {
  .hero__grilla {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .dos-columnas {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

/* Desde 64em (1024 px): el menú se ve siempre en la cabecera y el botón
   "Menú" desaparece. */
@media (min-width: 64em) {
  .boton-menu {
    display: none;
  }

  .menu {
    display: block;
    flex-basis: auto;
  }

  .menu ul {
    padding-bottom: 0;
  }

  .menu li {
    flex-basis: auto;
    border-top: 0;
  }

  .menu a {
    padding-inline: var(--esp-2);
    font-size: var(--texto-chico);
  }
}


/* 6. PREFERENCIAS DE LA PERSONA E IMPRESIÓN ================================ */

/* Quien pidió menos movimiento en su sistema: sin animaciones. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modo de colores forzados (alto contraste de Windows): los fondos de
   color desaparecen, así que el ícono del menú usa el color del texto. */
@media (forced-colors: active) {
  .boton-menu__icono,
  .boton-menu__icono::before,
  .boton-menu__icono::after {
    background: CanvasText;
  }

  .boton-menu[aria-expanded="true"] .boton-menu__icono {
    background: transparent;
  }
}

@media print {
  .cabecera,
  .saltar,
  .boton-menu {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}


/* 7. PROPIO DE ESTA DEMO ===================================================
   Componentes que base/ no trae. Todos usan los tokens de :root. */

/* Títulos grandes con serifa en peso normal: se ven más tranquilos.
   (Los h3 siguen en negrita para ordenar la lectura.) */
h1,
h2 {
  font-weight: 500;
}

/* --- Aviso de demo (obligatorio mientras sea demo) --- */
.aviso-demo {
  --color-foco: var(--color-texto); /* anillo oscuro sobre fondo durazno */
  padding: var(--esp-2) var(--margen-lateral);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-size: var(--texto-chico);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.aviso-demo p {
  margin: 0;
}

.aviso-demo a {
  color: inherit;
}

/* --- Marca: nombre con serifa y rubro chico debajo --- */
.marca {
  font-size: 1.375rem;
  line-height: 1.1;
  flex: 1 1 0; /* celular: el nombre del template se parte en dos líneas y "Menú" queda al lado */
  min-width: 0;
}

@media (min-width: 64em) {
  .marca {
    flex: 0 1 auto; /* con el menú a la vista, la marca ocupa solo lo que mide */
  }
}

.marca__logo {
  width: 2.25rem;
  height: 2.25rem;
}

.marca__rubro {
  display: block;
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Tiza: [dato del cliente: …] ---
   Marca a la vista lo que completa la profesional (en salud no se
   inventan títulos, enfoques ni registros). Se entiende sin color: va
   entre corchetes y con borde punteado. box-decoration-break: si el texto
   salta de línea, cada trozo lleva su borde. */
.tiza {
  padding: 0.05em 0.35em;
  border: 1.5px dashed var(--color-tiza-borde);
  border-radius: var(--radio-chico);
  background: var(--color-tiza-fondo);
  color: var(--color-texto-suave);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Botones de contacto de la demo ---
   En una demo, WhatsApp, teléfono y correo NUNCA llevan a un dato
   inventado (podría ser de una persona real): llevan a hammockai.site y
   lo dicen en una segunda línea DENTRO del botón, así el nombre del
   enlace dice a dónde va (también para el lector de pantalla). */
.boton--demo {
  flex-direction: column;
  gap: var(--esp-1);
}

.boton__fila {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.boton__destino {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Portada --- */
.hero .etiqueta {
  margin-bottom: var(--esp-5);
}

.hero__puntos {
  margin-top: var(--esp-6);
  color: var(--color-hero-texto-suave);
}

/* --- Aviso de urgencias ---
   Cálido y visible, sin rojo de alarma. No depende del color: tiene
   título, ícono y borde grueso a la izquierda. */
.urgencias {
  padding-block: var(--esp-6) 0;
}

.urgencias__caja {
  max-width: 52rem;
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-left: 6px solid var(--color-urgencias-borde);
  border-radius: var(--radio);
  background: var(--color-urgencias-fondo);
}

.urgencias__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
  font-size: var(--titulo-3);
  font-weight: var(--peso-titulos);
}

.urgencias__titulo svg {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-urgencias-numero);
}

.urgencias__lista {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  padding: 0;
  list-style: none;
}

/* Número arriba y texto abajo en el celular; lado a lado si cabe. */
.urgencias__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--esp-4);
}

.urgencias__lista li > span:last-child {
  flex: 1 1 16rem;
}

.urgencias__numero {
  flex: none;
  min-width: 5.5rem;
  color: var(--color-urgencias-numero);
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}

/* El 131 es un enlace tel: (en el celular abre el marcador). */
a.urgencias__numero {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration-thickness: 0.06em;
}

/* --- Tarjetas con ícono (a quién atiendo, modalidades) --- */
.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--esp-4);
  border-radius: 50%;
  background: var(--color-hero-fondo);
  color: var(--color-marca);
}

.tarjeta__icono svg {
  width: 1.5rem;
  height: 1.5rem;
}

.tarjeta p {
  color: var(--color-texto-suave);
}

.tarjeta__dato {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px dashed var(--color-borde);
  font-size: var(--texto-chico);
}

/* --- Primera sesión: pasos numerados ---
   La lista es <ol> (el orden importa). El número lo dibuja CSS con un
   contador; el lector de pantalla ya anuncia "1 de 4" por ser lista. */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--esp-4);
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.paso {
  padding: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.paso::before {
  content: counter(paso);
  counter-increment: paso;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--esp-4);
  border-radius: 50%;
  background: var(--color-marca);
  color: var(--color-sobre-marca);
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 700;
}

.paso h3 {
  margin-bottom: var(--esp-2);
}

.paso p {
  color: var(--color-texto-suave);
}

/* --- Sobre mí: enfoque y ficha de formación --- */
.texto-largo h3 {
  margin-top: var(--esp-6);
}

.ficha {
  display: grid;
  gap: var(--esp-3);
}

.ficha div {
  padding-bottom: var(--esp-3);
  border-bottom: 1px dashed var(--color-borde);
}

.ficha dt {
  font-weight: 700;
}

.ficha dd {
  margin: var(--esp-1) 0 0;
}

/* --- Valores --- */
.valores {
  max-width: 36rem;
}

.precios div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  padding-block: var(--esp-3);
  border-bottom: 1px dashed var(--color-borde);
}

.precios dt {
  font-weight: 600;
}

.precios dd {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
}

.precios__ejemplo {
  color: var(--color-texto-suave);
  font-family: var(--fuente-texto);
  font-size: var(--texto-chico);
  font-weight: 400;
}

/* --- Notas --- */
.nota {
  max-width: var(--ancho-texto);
  margin-top: var(--esp-6);
  padding: var(--esp-4) var(--esp-5);
  border-left: 4px solid var(--color-marca);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

.panel .nota {
  margin-top: var(--esp-5);
  background: var(--color-fondo);
}

/* Nota que explica algo de la DEMO (no del negocio): mismo borde punteado
   que la tiza, para que se distinga del contenido del sitio. */
.nota-demo {
  max-width: 26rem;
  padding: var(--esp-3) var(--esp-4);
  border: 1.5px dashed var(--color-tiza-borde);
  border-radius: var(--radio);
  background: var(--color-tiza-fondo);
  color: var(--color-texto-suave);
  font-size: var(--texto-chico);
}

/* --- Pie --- */
.pie__urgencias {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radio-chico);
}

.pie__aviso {
  font-weight: 700;
}

/* En la 404 el pie no tiene nada arriba: sin línea divisoria. */
.pie__legal:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 36em) {
  .urgencias__caja {
    padding: var(--esp-5) var(--esp-6);
  }
}