/* Luis Hernández · tema visual, referencia Seed adaptada.
   Calma ligera: lienzo cálido casi blanco, titulares en peso 300, paneles
   redondeados y botones en píldora, sin sombras ni degradados.
   Un color principal (azul tinta), un acento raro (durazno, solo en la
   etiqueta del inicio) y un único momento de énfasis: el panel oscuro de
   "Enfoque terapéutico".
   Solo lo visual. Lo funcional vive en plantilla/base.css (se carga antes).
   Este archivo es la única fuente de colores y tipografías. */

:root {
  /* Colores (hexadecimales; se comprueban con comprobar_contraste.py) */
  --color-fondo: #faf7f2;          /* lienzo cálido */
  --color-superficie: #ffffff;     /* tarjetas y campos */
  --color-fondo-suave: #f2ece3;    /* paneles y secciones alternas */
  --color-texto: #1d2733;
  --color-texto-suave: #566170;
  --color-principal: #25384d;      /* azul tinta: botones, enlaces, panel de énfasis */
  --color-principal-hover: #16263a;
  --durazno: #f1d3b3;              /* acento raro: solo fondo de la etiqueta del inicio, nunca texto */
  --color-boton-texto: #faf7f2;
  --color-borde-campo: #7b8591;
  --color-pie-fondo: #f2ece3;
  --color-pie-texto: #1d2733;
  --color-foco: #25384d;
  --color-foco-pie: #25384d;
  --color-texto-oscuro-suave: #c9d3de; /* texto secundario sobre el panel oscuro */

  /* Tipografías */
  --fuente-titulos: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-cuerpo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuentes-google: "Hanken Grotesk:wght@300;400;500";

  --linea: #ddd4c6;                /* solo decorativa */
  --ancho: 1120px;
  --radio-panel: 28px;
  --radio-tarjeta: 20px;
  --aire: 4.5rem;
}

body { line-height: 1.65; }
::selection { background: var(--color-principal); color: var(--color-boton-texto); }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 300;
  color: var(--color-texto);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 10.5vw, 4.75rem); line-height: 1.03; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
strong { font-weight: 500; }

p { margin: 0 0 1.1em; }
a { color: var(--color-principal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { color: var(--color-principal-hover); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.contenedor--angosto { max-width: 46rem; }

/* Encabezado */
.encabezado__fila { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.marca { color: var(--color-texto); font-weight: 500; text-decoration: none; letter-spacing: -0.01em; }
.marca span { margin-left: 0.6rem; font-weight: 400; color: var(--color-texto-suave); }
.menu ul { gap: 0.25rem; }
.menu a { padding: 0 0.85rem; color: var(--color-texto); text-decoration: none; border-radius: 999px; }
.menu a:hover { background: var(--color-fondo-suave); color: var(--color-texto); }
.encabezado__contacto {
  padding: 0 1.1rem; border: 1.5px solid var(--color-texto); border-radius: 999px;
  color: var(--color-texto); text-decoration: none; font-weight: 400;
}
.barra-contacto { border-top: 1px solid var(--linea); }

/* Botones en píldora */
.boton {
  padding: 0 1.75rem; border-radius: 999px; font-weight: 500;
  border: 1.5px solid var(--color-principal); transition: background-color 0.2s, color 0.2s;
}
.boton:hover { background: var(--color-principal-hover); border-color: var(--color-principal-hover); }
.boton--secundario { background: transparent; color: var(--color-principal); }
.boton--secundario:hover { background: var(--color-fondo-suave); color: var(--color-principal); border-color: var(--color-principal); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Secciones */
.seccion { padding: var(--aire) 0; }
.seccion--suave {
  background: var(--color-fondo-suave); border-radius: var(--radio-panel);
  margin: 0 0.75rem; padding: 3.5rem 0;
}
.seccion h2 { margin-bottom: 1rem; }
.intro { max-width: 40rem; font-size: 1.1rem; color: var(--color-texto-suave); margin-bottom: 2.25rem; }
.intro strong { color: var(--color-texto); }
.nota { color: var(--color-texto-suave); }

/* Inicio: un panel redondeado con la frase principal */
.hero { padding: 0.75rem 0.75rem 2rem; }
.hero > .contenedor {
  background: var(--color-fondo-suave); border-radius: var(--radio-panel);
  padding: 2.5rem 1.5rem 2rem;
}
.etiqueta {
  display: inline-block; margin: 0 0 1.75rem; padding: 0.4rem 0.95rem; border-radius: 999px;
  background: var(--durazno); color: var(--color-texto); font-size: 0.9rem; font-weight: 500;
}
.hero h1 { max-width: 13ch; margin-bottom: 0.45em; }
.hero__sub { max-width: 34rem; font-size: 1.15rem; color: var(--color-texto-suave); margin-bottom: 1.75rem; }
.hero .acciones { margin-bottom: 1.25rem; }
.hero__nota { margin: 0; font-size: 0.95rem; color: var(--color-texto-suave); }

/* Sobre mí */
.sobre-mi { max-width: 46rem; }
.sobre-mi p { font-size: 1.1rem; }
.sobre-mi > div > p:first-of-type { font-size: 1.4rem; line-height: 1.45; font-weight: 300; letter-spacing: -0.01em; }
.sobre-mi h3 { margin-top: 2rem; font-size: 1.1rem; font-weight: 500; }
.lista { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.cedula { font-size: 1rem; color: var(--color-texto-suave); }

/* Tarjetas: superficies planas, sin borde ni sombra */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.tarjeta { background: var(--color-superficie); border-radius: var(--radio-tarjeta); padding: 1.5rem; }
.tarjeta h3 { margin-bottom: 0.5rem; }
.tarjeta p { margin: 0; color: var(--color-texto-suave); }

/* Enfoque: el único momento de énfasis (panel en el color principal) */
#enfoque { background: var(--color-principal); }
#enfoque h2, #enfoque h3, #enfoque .intro strong { color: var(--color-boton-texto); }
#enfoque .intro, #enfoque .tarjeta p { color: var(--color-texto-oscuro-suave); }
#enfoque .tarjeta { background: transparent; border: 1px solid #4a6078; }

/* Modalidad y precios */
.direccion { color: var(--color-texto); }
#precios .nota { max-width: 36rem; font-size: 1.1rem; }

/* Preguntas frecuentes */
.pregunta { background: var(--color-superficie); border-radius: var(--radio-tarjeta); margin-bottom: 0.6rem; padding: 0 1.25rem; }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; font-weight: 500; color: var(--color-texto); list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; color: var(--color-principal); flex: none; }
.pregunta[open] summary::after { content: "–"; }
.pregunta p { color: var(--color-texto-suave); padding-bottom: 0.75rem; margin: 0; }

/* Contacto y formulario */
.contacto { display: grid; gap: 2.5rem; }
.contacto > div > p:first-of-type { max-width: 30rem; font-size: 1.1rem; }
.formulario { background: var(--color-fondo-suave); border-radius: var(--radio-panel); padding: 1.5rem; }
.formulario h3 { font-weight: 400; margin-bottom: 1rem; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; margin-bottom: 0.35rem; font-weight: 500; }
.opcional { font-weight: 400; color: var(--color-texto-suave); }
.campo input, .campo select, .campo textarea {
  padding: 0.7rem 1rem; background: var(--color-superficie); border: 1.5px solid var(--color-borde-campo);
  border-radius: 14px;
}
.campo textarea { min-height: 7rem; }
.campo__nota { font-size: 0.95rem; color: var(--color-texto-suave); margin: 0.4rem 0 0; }
.formulario .acciones { margin-top: 1.25rem; }

/* Pie claro, para que el único énfasis sea el panel de enfoque */
.pie { padding: 2.5rem 0 0.5rem; margin-top: 0; border-top: 1px solid var(--linea); }
.pie a { text-decoration-thickness: 1px; }
.pie__aviso { font-size: 0.95rem; }

/* Escritorio */
@media (min-width: 640px) {
  .contenedor { padding-left: 2rem; padding-right: 2rem; }
  .hero { padding: 1.5rem 2rem 3rem; }
  .hero > .contenedor { padding: 5rem 4rem 4rem; border-radius: 40px; }
  .tarjetas--2, .tarjetas--3 { grid-template-columns: repeat(2, 1fr); }
  .seccion--suave { margin: 0 2rem; border-radius: 40px; padding: 5rem 0; }
  .tarjeta { padding: 2rem; }
}
@media (min-width: 960px) {
  :root { --aire: 7rem; }
  .seccion--suave { padding: 6rem 0; }
  #servicios .tarjetas--2 { grid-template-columns: repeat(3, 1fr); }
  .contacto { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .formulario { padding: 2.5rem; }
}