/* Ángela García · Psicóloga Sanitaria
   Paleta: blanco, azul grisáceo muy claro, azul petróleo y un acento verde azulado apagado. */

:root {
  --blanco: #ffffff;
  --niebla: #f0f5f7;
  --linea: #d3dee4;
  --linea-oscura: rgba(255, 255, 255, 0.2);
  --petroleo: #15394a;
  --petroleo-hondo: #0e2b39;
  --salvia: #5e918b;
  --salvia-texto: #3a6e68;
  --salvia-clara: #a6cbc5;
  --texto: #2b3e47;
  --suave: #587079;

  --serif: "Fraunces Variable", "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Jost Variable", "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 1180px;
  --margen: clamp(20px, 5vw, 56px);
  --alto-cabecera: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--salvia-texto); outline-offset: 3px; }
.cierre :focus-visible, .pie :focus-visible { outline-color: #ffffff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 0.7rem 1rem; background: var(--petroleo); color: #fff; border-radius: 2px; }
.salto:focus { top: 12px; }

/* ---------- Tipografía ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 350;
  color: var(--petroleo);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 4.7vw, 4.25rem); }
h2, .h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
h3 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.005em; }
em { font-style: italic; font-weight: 300; color: var(--salvia-texto); }
.intro { margin-top: 1.5rem; max-width: 36rem; color: var(--suave); font-size: 1.15rem; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: clamp(72px, 9vw, 128px); }
.seccion--niebla { background: var(--niebla); }
.dos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 112px); align-items: start; }
.cabecera-seccion { max-width: 46rem; }
.texto-largo { max-width: 38rem; font-size: 1.15rem; }
.texto-largo p + p { margin-top: 1.1em; }
.texto-largo .enlace { margin-top: 2rem; }
.texto-largo--solo { max-width: 40rem; }
.texto-largo--solo .h2 { margin-bottom: 1.25rem; }

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.8rem;
  font: 500 1rem/1.2 var(--sans); letter-spacing: 0.01em; text-decoration: none; text-align: center;
  background: var(--petroleo); color: #fff; border: 1px solid var(--petroleo); border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--petroleo-hondo); border-color: var(--petroleo-hondo); }
.enlace {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-bottom: 3px; text-decoration: none; font-weight: 500; color: var(--petroleo);
  border-bottom: 1px solid var(--salvia);
  transition: border-color 0.2s, color 0.2s;
}
.enlace .icono { width: 18px; height: 18px; transition: transform 0.25s; }
.enlace:hover { color: var(--salvia-texto); border-color: var(--salvia-texto); }
.enlace:hover .icono { transform: translateX(4px); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.acciones--arriba { margin-top: 2.25rem; }
.icono { flex: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cabecera__in {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen);
  min-height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marca { display: flex; align-items: baseline; gap: 0.9rem; text-decoration: none; color: var(--petroleo); }
.marca__nombre { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; }
.marca__profesion { padding-left: 0.9rem; border-left: 1px solid var(--linea); font-size: 0.95rem; color: var(--suave); white-space: nowrap; }
.menu { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.menu ul { display: flex; gap: clamp(16px, 2vw, 30px); }
.menu a:not(.btn) { padding-block: 0.4rem; text-decoration: none; font-size: 0.98rem; color: var(--texto); border-bottom: 1px solid transparent; white-space: nowrap; }
.menu a:not(.btn):hover, .menu a[aria-current="page"] { border-bottom-color: var(--salvia); }
.btn--menu { padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.menu-btn { display: none; width: 46px; height: 46px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--petroleo); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn__barras, .menu-btn__barras::before, .menu-btn__barras::after { content: ""; display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.25s, background 0.25s; }
.menu-btn__barras::before { position: absolute; top: -7px; }
.menu-btn__barras::after { position: absolute; top: 7px; }
.menu-btn[aria-expanded="true"] .menu-btn__barras { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__barras::before { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1099px) {
  .menu-btn { display: inline-flex; }
  .menu { flex-direction: column; align-items: stretch; gap: 22px; padding: 8px var(--margen) 30px; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu li a:not(.btn) { display: block; padding: 0.9rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--linea); }
  html.js .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linea); }
  html.js .menu.abierto { display: flex; }
  .btn--menu { padding: 0.95rem 1.4rem; }
}
@media (max-width: 520px) {
  .marca { flex-direction: column; gap: 0; }
  .marca__profesion { padding-left: 0; border-left: 0; font-size: 0.85rem; }
}

/* ---------- Portada ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); min-height: clamp(560px, calc(100svh - var(--alto-cabecera)), 780px); }
.hero__texto {
  align-self: center;
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px) clamp(48px, 7vw, 96px) max(var(--margen), calc((100vw - var(--ancho)) / 2));
}
.hero__kicker { margin-bottom: 1.25rem; color: var(--suave); }
.hero h1 { max-width: 14ch; }
.hero__sec { margin-top: 1.75rem; max-width: 30rem; font-size: 1.25rem; color: var(--texto); }
.hero .acciones { margin-top: 2.5rem; }
.hero__linea { margin-top: 2.75rem; padding-top: 1.5rem; max-width: 32rem; border-top: 1px solid var(--linea); font-size: 0.98rem; color: var(--suave); }
.hero__foto { position: relative; min-height: 420px; background: var(--niebla); overflow: hidden; }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 28%; }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__texto { padding: 44px var(--margen) 48px; }
  .hero__foto { min-height: 0; aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: aparece 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero__texto > *:nth-child(2) { animation-delay: 0.08s; }
  .hero__texto > *:nth-child(3) { animation-delay: 0.16s; }
  .hero__texto > *:nth-child(4) { animation-delay: 0.24s; }
  .hero__foto img { animation: revela 1.2s ease-out both; }
}
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes revela { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cómo puedo ayudarte ---------- */
.ayuda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.ayuda__cab { position: sticky; top: calc(var(--alto-cabecera) + 40px); }
.ayuda__lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 28px; padding: 30px 0; border-top: 1px solid var(--linea); }
.ayuda__lista li:first-child { padding-top: 6px; border-top: 0; }
.ayuda__lista .icono { width: 40px; height: 40px; color: var(--salvia-texto); }
.ayuda__lista p { margin-top: 0.5rem; color: var(--suave); }
.ayuda__cierre { margin-top: 8px; padding-top: 40px; border-top: 1px solid var(--linea); }
.cierre-texto { max-width: 34rem; font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--petroleo); }
.ayuda__cierre .acciones { margin-top: 1.75rem; }

@media (max-width: 899px) {
  .ayuda, .dos { grid-template-columns: 1fr; }
  .ayuda__cab { position: static; }
  .ayuda__lista li:first-child { padding-top: 30px; border-top: 1px solid var(--linea); }
  .ayuda__lista li { grid-template-columns: 32px minmax(0, 1fr); gap: 20px; }
  .ayuda__lista .icono { width: 32px; height: 32px; }
}

/* ---------- Servicios ---------- */
.servicios__lista { margin-top: 56px; border-bottom: 1px solid var(--linea); }
.servicio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 24px; gap: 32px; align-items: center; padding: 32px 0; border-top: 1px solid var(--linea); text-decoration: none; }
.servicio h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); transition: color 0.2s; }
.servicio p { color: var(--suave); }
.servicio .icono { width: 24px; height: 24px; color: var(--salvia-texto); transition: transform 0.25s; }
.servicio:hover h3 { color: var(--salvia-texto); }
.servicio:hover .icono { transform: translateX(5px); }
.modalidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 48px; margin-top: 40px; color: var(--suave); font-size: 1rem; }
.cierre-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 72px; }
@media (max-width: 899px) {
  .servicio { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 20px; padding: 26px 0; }
  .servicio h3 { grid-column: 1; }
  .servicio p { grid-column: 1; grid-row: 2; }
  .servicio .icono { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .modalidades { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Sobre mí ---------- */
.dos > h2 { max-width: 14ch; }

/* ---------- Dónde atiendo ---------- */
.lugares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--linea); }
.lugar { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 24px; padding: 36px 32px 36px 0; border-bottom: 1px solid var(--linea); }
.lugar:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--linea); }
.lugar .icono { width: 36px; height: 36px; color: var(--salvia-texto); }
.lugar p { margin-top: 0.4rem; color: var(--suave); }
@media (max-width: 767px) {
  .lugares { grid-template-columns: 1fr; }
  .lugar, .lugar:nth-child(even) { padding: 28px 0; border-left: 0; }
}

/* ---------- Talleres ---------- */
.talleres { display: grid; gap: 48px; }
.talleres--con-proximo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.proximo { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; padding: 24px; background: #fff; border: 1px solid var(--linea); }
.proximo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--niebla); }
.proximo__etiqueta { margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--salvia-texto); }
.proximo__fecha { margin-bottom: 0.4rem; font-weight: 500; color: var(--petroleo); }
.proximo h3 { margin-bottom: 0.75rem; }
.proximo__meta { margin-top: 0.75rem; font-size: 0.98rem; color: var(--suave); }
.proximo .acciones--arriba { margin-top: 1.5rem; }
.proximo .btn { padding: 0.85rem 1.3rem; font-size: 0.95rem; }
@media (max-width: 899px) {
  .talleres--con-proximo { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .proximo { grid-template-columns: 1fr; padding: 20px; }
  .proximo img { max-width: 220px; }
}

/* ---------- Preguntas frecuentes ---------- */
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; color: var(--petroleo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--salvia-texto); }
.faq .respuesta { max-width: 40rem; padding: 0 40px 28px 0; }
.faq .respuesta p + p { margin-top: 0.9em; }

/* ---------- Cierre y contacto ---------- */
.cierre { padding-block: clamp(72px, 10vw, 136px); background: var(--petroleo); color: #dce8ec; }
.cierre h2 { max-width: 16ch; font-size: clamp(2.2rem, 4.6vw, 4rem); color: #fff; }
.cierre .btn { background: #fff; color: var(--petroleo); border-color: #fff; }
.cierre .btn:hover { background: var(--niebla); border-color: var(--niebla); }
.canales { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--linea-oscura); }
.canal { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.canal .icono { width: 26px; height: 26px; color: var(--salvia-clara); }
.canal span { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.canal:hover span { border-bottom-color: var(--salvia-clara); }
.cierre__instagram { margin-top: 28px; }
.canal--discreto { font-size: 0.95rem; color: #b9cdd4; }
.canal--discreto .icono { width: 20px; height: 20px; }
@media (max-width: 599px) {
  .canales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

/* ---------- Pie ---------- */
.pie { background: var(--petroleo-hondo); color: #b9cdd4; font-size: 0.98rem; }
.pie__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.55fr) minmax(0, 0.9fr); gap: 40px; padding-top: 72px; padding-bottom: 56px; }
.pie a { text-decoration: none; border-bottom: 1px solid transparent; }
.pie a:hover { color: #fff; border-bottom-color: var(--salvia-clara); }
.pie__nombre { font-family: var(--serif); font-size: 1.5rem; color: #fff; margin-bottom: 0.25rem; }
.pie__colegio { margin-top: 1rem; font-size: 0.9rem; color: #93aab3; }
.pie__tit { margin-bottom: 1rem; color: #fff; font-weight: 500; }
.pie__lista li + li { margin-top: 0.75rem; }
.pie__lista strong { font-weight: 500; color: #fff; }
.pie__base { padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--linea-oscura); font-size: 0.9rem; color: #93aab3; }
.pie__fila { max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
@media (max-width: 999px) { .pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pie__in { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; } .pie a { overflow-wrap: anywhere; } }

/* ---------- Páginas interiores: Contacto ---------- */
.pagina-cab { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.intro--grande { max-width: 38rem; margin-top: 1.5rem; font-size: 1.3rem; color: var(--texto); }
.seccion--compacta { padding-block: clamp(56px, 7vw, 96px); }
.seccion--franja { padding-block: clamp(32px, 4vw, 48px); }
.h2--medio { font-size: clamp(1.75rem, 3vw, 2.4rem); }

.contacto-canales { margin-top: 40px; border-bottom: 1px solid var(--linea); }
.contacto-canal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--linea); }
.contacto-canal__nombre { display: flex; align-items: center; gap: 20px; }
.contacto-canal__nombre .icono { width: 32px; height: 32px; color: var(--salvia-texto); }
.contacto-canal h3 { font-size: 1.5rem; }
.contacto-canal__valor { font-size: 1.15rem; overflow-wrap: anywhere; }
.contacto-canal__valor .btn { gap: 0.75rem; }
.contacto-canal__valor .btn .icono { width: 18px; height: 18px; }
.contacto-canal--principal { padding-block: 36px; }

.ubicaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--linea); }
.ubicacion { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 24px; padding: 36px 32px 36px 0; border-bottom: 1px solid var(--linea); }
.ubicacion:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--linea); }
.ubicacion > .icono { width: 36px; height: 36px; color: var(--salvia-texto); }
.ubicacion p { margin: 0.5rem 0 1.25rem; color: var(--suave); }
.ubicaciones__otras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; margin-top: 48px; }
.ubicaciones__otras p { max-width: 40rem; color: var(--suave); }
.ubicaciones__aviso { margin-top: 0.75rem; }

.franja-instagram { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; color: var(--suave); font-size: 1rem; }
.canal-discreto { display: inline-flex; align-items: center; gap: 10px; color: var(--petroleo); text-decoration: none; font-weight: 500; }
.canal-discreto .icono { width: 22px; height: 22px; color: var(--salvia-texto); }
.canal-discreto span { border-bottom: 1px solid var(--salvia); padding-bottom: 2px; }
.canal-discreto:hover span { color: var(--salvia-texto); border-color: var(--salvia-texto); }

@media (max-width: 899px) {
  .contacto-canal { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .contacto-canal--principal { padding-block: 28px; }
  .contacto-canal__valor { padding-left: 52px; }
}
@media (max-width: 767px) {
  .ubicaciones { grid-template-columns: 1fr; }
  .ubicacion, .ubicacion:nth-child(even) { padding: 28px 0; border-left: 0; }
}
@media (max-width: 519px) {
  .contacto-canal__valor { font-size: 1.02rem; }
  .contacto-canal__valor .btn { width: 100%; font-size: 1rem; }
}

/* ---------- Páginas interiores: Sobre mí ---------- */
.cierre .enlace { color: #fff; border-bottom-color: var(--salvia-clara); }
.cierre .enlace:hover { color: var(--salvia-clara); border-bottom-color: var(--salvia-clara); }
.cierre--texto h2 { max-width: 22ch; font-size: clamp(2rem, 4vw, 3.4rem); }

.sobre-cab { padding-block: clamp(56px, 8vw, 112px) clamp(56px, 8vw, 104px); }
.sobre-cab__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.sobre-cab--foto .sobre-cab__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.sobre-lead { margin-top: 1.75rem; max-width: 44rem; font-family: var(--serif); font-size: clamp(1.6rem, 2.9vw, 2.4rem); font-weight: 350; line-height: 1.28; letter-spacing: -0.01em; color: var(--petroleo); text-wrap: pretty; }
.sobre-cab .texto-largo { margin-top: 1.75rem; }
.sobre-datos { margin-top: 2.25rem; padding-top: 1.25rem; max-width: 44rem; border-top: 1px solid var(--linea); font-size: 0.98rem; color: var(--suave); }
.sobre-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--niebla); }
@media (max-width: 899px) {
  .sobre-cab__grid, .sobre-cab--foto .sobre-cab__grid { grid-template-columns: 1fr; }
}
.sobre-ficha { padding: 4px 0 4px 32px; border-left: 1px solid var(--salvia); color: var(--suave); font-size: 1rem; }
.sobre-ficha p + p { margin-top: 0.4rem; }
.sobre-ficha .sobre-ficha__titulo { margin-bottom: 0.9rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: var(--petroleo); }

.texto-largo .destacado { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 350; line-height: 1.4; color: var(--petroleo); }

.esperar__lista { margin-top: 48px; border-bottom: 1px solid var(--linea); }
.esperar__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px 48px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--linea); }
.esperar__item h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.esperar__item p { color: var(--suave); }
@media (max-width: 899px) {
  .esperar__item { grid-template-columns: 1fr; padding: 26px 0; }
}

.titulos { align-self: start; border-bottom: 1px solid var(--linea); }
.titulos li { padding: 18px 0; border-top: 1px solid var(--linea); font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--petroleo); }

/* ---------- Tarifas ---------- */
.pagina-cab--tarifas { padding-bottom: clamp(56px, 8vw, 104px); }
.pestanas { margin-top: 56px; }
.pestanas__lista { display: flex; flex-wrap: wrap; gap: 4px 36px; border-bottom: 1px solid var(--linea); }
.pestanas__lista[hidden] { display: none; }
.pestana { appearance: none; margin: 0 0 -1px; padding: 14px 2px; border: 0; border-bottom: 2px solid transparent; background: none; font: 500 1.15rem/1.2 var(--sans); color: var(--suave); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.pestana:hover { color: var(--petroleo); }
.pestana[aria-selected="true"] { color: var(--petroleo); border-bottom-color: var(--petroleo); }
.pestanas__panel { padding-top: 32px; }
.pestanas__panel[hidden] { display: none; }
html.js .panel-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel-titulo { font-size: 1.8rem; margin-bottom: 0.5rem; }
.panel-nota { color: var(--suave); }
.pestanas__panel:not(:first-of-type) { margin-top: 24px; }
.tarifas-lista { margin-top: 24px; border-bottom: 1px solid var(--linea); }
.tarifas-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 40px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--linea); }
.tarifa__nombre { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.tarifa__duracion { color: var(--suave); white-space: nowrap; }
.tarifa__precio { min-width: 4.5ch; text-align: right; font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 350; line-height: 1.1; color: var(--petroleo); }
.tarifa__detalle { grid-column: 1 / -1; font-size: 1rem; color: var(--suave); }
@media (max-width: 639px) {
  .tarifas-lista li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; }
  .tarifa__nombre { grid-column: 1 / -1; }
  .tarifa__duracion { grid-column: 1; grid-row: 2; }
  .tarifa__precio { grid-column: 2; grid-row: 2; }
  .tarifa__detalle { grid-row: 3; }
}
.practica__lista li { padding: 28px 0; border-top: 1px solid var(--linea); }
.practica__lista li:first-child { padding-top: 6px; border-top: 0; }
.practica__lista h3 { font-size: 1.4rem; }
.practica__lista p { margin-top: 0.5rem; max-width: 38rem; color: var(--suave); }
@media (max-width: 899px) {
  .practica__lista li:first-child { padding-top: 28px; border-top: 1px solid var(--linea); }
}
.cierre__texto { max-width: 36rem; margin-top: 1.25rem; font-size: 1.2rem; color: #dce8ec; }

/* ---------- Servicios ---------- */
.servicios-nav { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 2.5rem; }
.servicios-nav a { padding-bottom: 3px; text-decoration: none; font-weight: 500; color: var(--petroleo); border-bottom: 1px solid var(--salvia); transition: color 0.2s, border-color 0.2s; }
.servicios-nav a:hover { color: var(--salvia-texto); border-bottom-color: var(--salvia-texto); }
.h2--ficha { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.modalidad { margin-top: 1.25rem; max-width: 20rem; font-size: 0.98rem; color: var(--suave); }
.modalidades-resumen li { padding: 18px 0; border-top: 1px solid var(--linea); font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--petroleo); }
.modalidades-resumen li:last-child { border-bottom: 1px solid var(--linea); }
.modalidades-resumen + .enlace { margin-top: 2rem; }

/* ---------- Cómo puedo ayudarte (página completa) ---------- */
.acordeon details { border-top: 1px solid var(--linea); }
.acordeon details:last-child { border-bottom: 1px solid var(--linea); }
.acordeon summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 0 28px; align-items: start; padding: 32px 0; cursor: pointer; list-style: none; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary > .icono { width: 40px; height: 40px; color: var(--salvia-texto); }
.ac-cab { display: block; }
.ac-titulo { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 350; line-height: 1.2; color: var(--petroleo); transition: color 0.2s; }
.ac-frase { display: block; margin-top: 0.5rem; max-width: 40rem; color: var(--suave); }
.acordeon summary:hover .ac-titulo { color: var(--salvia-texto); }
.acordeon summary::after {
  content: ""; width: 14px; height: 14px; margin-top: 0.55rem; color: var(--petroleo);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 0.25s;
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.ac-cuerpo { padding: 0 44px 36px 68px; }
.ac-cuerpo p { max-width: 40rem; font-size: 1.15rem; }
@media (max-width: 639px) {
  .acordeon summary { grid-template-columns: 32px minmax(0, 1fr) 14px; gap: 0 18px; padding: 26px 0; }
  .acordeon summary > .icono { width: 32px; height: 32px; }
  .ac-cuerpo { padding: 0 0 28px 50px; }
}

/* ---------- Talleres infantiles ---------- */
.sub-titulo { margin-bottom: 1rem; font-size: 1.35rem; }
.datos { margin: 0; }
.datos > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-top: 1px solid var(--linea); }
.datos > div:last-child { border-bottom: 1px solid var(--linea); }
.datos dt { font-weight: 500; color: var(--petroleo); }
.datos dd { margin: 0; }
.datos dd span { display: block; }
.dato-nota { font-size: 0.95rem; color: var(--suave); }
.dato-nota--suelta { margin-top: 1rem; }
.datos--compacto { margin-top: 1.5rem; }
.datos--compacto > div { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); padding: 12px 0; }
@media (max-width: 519px) {
  .datos > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
}

.proximo--grande { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 40px; padding: clamp(20px, 3vw, 36px); }
.proximo--grande h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.proximo--grande .proximo__datos > p { max-width: 38rem; }
.trabajaremos { margin: 1rem 0 0; padding-left: 1.2rem; list-style: disc; color: var(--suave); }
.trabajaremos li::marker { color: var(--salvia); }
@media (max-width: 719px) {
  .proximo--grande { grid-template-columns: 1fr; }
  .proximo--grande img { max-width: 260px; }
}

.programacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 48px; }
.taller-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 24px; background: #fff; border: 1px solid var(--linea); }
.taller-card h3 { font-size: 1.4rem; }
.taller-card__mes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-weight: 500; color: var(--petroleo); }
.taller-card__objetivo, .taller-card__edades { color: var(--suave); }
.taller-card__fecha { margin-top: auto; padding-top: 0.5rem; font-size: 0.95rem; color: var(--suave); }
.taller-card details { margin-top: 0.25rem; }
.taller-card summary, .taller-previo summary { cursor: pointer; font-weight: 500; color: var(--petroleo); }
.taller-card summary:hover, .taller-previo summary:hover { color: var(--salvia-texto); }
.taller-card details ul, .taller-previo details ul { margin: 0.6rem 0 0; padding-left: 1.2rem; list-style: disc; color: var(--suave); font-size: 1rem; }
.etiqueta { display: inline-block; padding: 1px 12px; border: 1px solid var(--linea); border-radius: 999px; font-size: 0.85rem; font-weight: 400; line-height: 1.7; }
.etiqueta--proximo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.etiqueta--previsto { border-color: var(--salvia); color: var(--salvia-texto); }
.etiqueta--realizado { color: var(--suave); }

.anteriores { margin-top: 40px; border-bottom: 1px solid var(--linea); }
.taller-previo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; padding: 32px 0; border-top: 1px solid var(--linea); }
.taller-previo--cartel { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.taller-previo h3 { margin: 0.4rem 0; font-size: 1.5rem; }
.taller-previo .taller-card__objetivo { margin-top: 0.5rem; max-width: 40rem; }
.taller-previo__cartel img { width: 100%; height: auto; }
.taller-previo__cartel figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--suave); }
@media (max-width: 599px) {
  .taller-previo--cartel { grid-template-columns: 1fr; }
  .taller-previo__cartel img { max-width: 200px; }
}

/* ---------- Psicología online ---------- */
.pasos { margin: 48px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linea); }
.pasos li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--linea); }
.pasos__num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 300; line-height: 1; color: var(--salvia-texto); }
.pasos h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.pasos p { margin-top: 0.5rem; max-width: 40rem; color: var(--suave); }
@media (max-width: 599px) {
  .pasos li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 26px 0; }
}

/* ---------- Páginas legales ---------- */
.pagina-cab--legal { padding-bottom: clamp(32px, 5vw, 56px); }
.borrador { max-width: 40rem; margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid #9a6b2f; background: #fbf5ea; font-size: 0.98rem; color: var(--texto); }
.legal-texto { max-width: 40rem; font-size: 1.15rem; }
.datos--legal { margin: 0; }
.datos--legal > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.datos--legal dd p + p { margin-top: 0.25rem; }
.datos--legal dd .enlace { margin-top: 0.75rem; }
.legal-texto + .datos--legal { margin-top: 1.5rem; }
@media (max-width: 519px) {
  .datos--legal > div { grid-template-columns: 1fr; }
}
.legal-cuerpo > * + * { margin-top: 1.1rem; }
.legal-lista { padding-left: 1.2rem; list-style: disc; max-width: 40rem; }
.legal-lista li + li { margin-top: 0.6rem; }
.legal-lista li::marker { color: var(--salvia); }
.legal-cita { margin-left: 0; padding: 0.25rem 0 0.25rem 1.5rem; max-width: 40rem; border-left: 2px solid var(--salvia); font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--petroleo); }
.legal em { display: inline; padding: 0.05em 0.4em; background: #fbf5ea; font-style: normal; font-weight: 500; font-size: 0.92em; color: #7a531f; border-radius: 2px; }
.legal-final { font-size: 0.98rem; color: var(--suave); }
.legal-cuerpo .datos { margin-top: 1.5rem; }

/* ---------- Formulario de contacto (Web3Forms) ---------- */
.campo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formulario { max-width: 36rem; }
.formulario__campos { display: grid; gap: 24px; }
.campo label { display: block; margin-bottom: 0.45rem; font-weight: 500; color: var(--petroleo); }
.campo .opcional { font-weight: 400; color: var(--suave); }
.campo input, .campo textarea {
  width: 100%; padding: 0.85rem 1rem; font: inherit; color: var(--texto);
  background: #fff; border: 1px solid #b4c4cc; border-radius: 2px;
  transition: border-color 0.2s;
}
.campo input:hover, .campo textarea:hover { border-color: var(--suave); }
.campo input:focus, .campo textarea:focus { border-color: var(--petroleo); }
.campo textarea { min-height: 9.5rem; resize: vertical; }
.formulario__aviso { font-size: 0.95rem; color: var(--suave); }
.casilla { display: flex; align-items: flex-start; gap: 0.85rem; cursor: pointer; }
.casilla input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0.28rem 0 0; accent-color: var(--petroleo); }
.casilla a { text-decoration: underline; text-decoration-color: var(--salvia); text-underline-offset: 3px; }
.formulario .btn { justify-self: start; cursor: pointer; border: 0; font: inherit; }
.formulario .btn:disabled { opacity: 0.7; cursor: not-allowed; }
.formulario__estado { padding: 1.1rem 1.25rem; border-left: 3px solid var(--salvia); background: var(--niebla); color: var(--texto); }
.formulario__estado[hidden] { display: none; }
.formulario__estado--error { border-left-color: #9a4545; background: #f8eeee; }
.formulario--enviado .formulario__campos { display: none; }
@media (max-width: 899px) {
  .formulario { max-width: none; }
}
@media (max-width: 519px) {
  .formulario .btn { width: 100%; }
}