@charset "UTF-8";
:root {
  --fondo: #f2f3f0; --superficie: #e4e8e3; --blanco: #fbfcf9;
  --tinta: #19211e; --suave: #4f5d57; --verde: #29483d;
  --verde-vivo: #41695a; --verde-hondo: #182a24; --liquen: #cbd7b8; --borde: #b9c2bc;
  /* --borde queda para filetes decorativos; los controles usan --borde-fuerte (3:1). */
  --borde-fuerte: #7e8d86;
  /* Escala de texto claro sobre fondo oscuro: tres peldanos en lugar de los seis
     valores casi identicos que se habian ido acumulando regla por regla. */
  --claro-alto: #eef2ec; --claro-medio: #dbe3dd; --claro-bajo: #c3ccc6;
  /* Acentos puntuales que vivian sueltos dentro de las reglas. */
  --motivos-fondo: #eef1ee; --foto-fondo: #0f1d18; --error: #8c3b22;
  --liquen-claro: #dde7ce; --trazo-eco: #91a198; --trazo-principal: #60786d;
  --estado-fuera: #637169;
  --fuente: "Libre Franklin", Arial, sans-serif; --titular: "Source Serif 4", Georgia, serif;
  --contenedor: 1180px; --seccion: clamp(3rem, 5.5vw, 5.5rem); --rapido: 160ms; --lento: 480ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-family: var(--titular); font-weight: 500; line-height: .98; letter-spacing: -.03em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
/* Jerarquia en tres niveles. Antes los diez h2 median lo mismo que el h1: cuando todo
   grita nada destaca y cada seccion costaba una pantalla. --mayor se reserva para las
   tres secciones que deben dominar (Motivos, Honorarios, Contacto). */
.cabecera-seccion--mayor h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
h3 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0 0 1rem; max-width: 68ch; text-wrap: pretty; }
a { color: inherit; }
button, input, textarea { font: inherit; }
[id] { scroll-margin-top: 72px; }
.salto { position: absolute; z-index: 30; left: 1rem; top: -6rem; padding: .8rem 1.1rem; border-radius: 999px; background: var(--verde); color: var(--blanco); font-weight: 700; text-decoration: none; transition: top var(--rapido) ease; }
.salto:focus { top: 1rem; }
.contenedor { width: min(100% - 2.5rem, var(--contenedor)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.indice { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.35rem; color: var(--verde); font-family: var(--titular); font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.indice::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .72; }
.indice--claro { color: var(--liquen); }

.nav { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--borde); contain: paint; transform: translateZ(0); }
.nav__inner { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.nav__marca { display: flex; align-items: center; margin-right: auto; }
.nav__marca img { width: auto; height: 58px; }
/* Movil: las anclas se ocultan. Quedan marca + CTA en una sola fila de ~58px.
   Reaparecen a 1040px (ver media query del final). */
.nav__links { display: none; order: 3; flex-basis: 100%; align-items: center; gap: .15rem; margin-inline: -1.25rem; padding: 0 1.25rem .4rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a { padding: .45rem .7rem; border-radius: 999px; color: var(--suave); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--rapido) ease, color var(--rapido) ease; }
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="true"] { background: var(--verde); color: var(--blanco); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .88rem 1.4rem; border: 0; border-radius: 999px; background: var(--verde); color: var(--blanco); font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--rapido) ease, transform var(--rapido) ease; }
.cta::after { content: "↗"; margin-left: .65rem; font-size: .9em; }
.cta:hover { background: var(--verde-hondo); transform: translateY(-2px); }
.cta:focus-visible, .nav a:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 4px; }
.cta--nav { min-height: 44px; padding: .68rem .9rem; font-size: .82rem; }
.cta--claro { background: var(--liquen); color: var(--verde-hondo); }
.cta--claro:hover { background: var(--liquen-claro); }

.hero { position: relative; min-height: clamp(540px, 70svh, 680px); display: grid; align-items: end; overflow: hidden; background: var(--verde-hondo); color: var(--blanco); }
.hero__imagen { position: absolute; inset: 0; background: url("../assets/img/hero-luz-natural.jpg") center/cover no-repeat; }
/* El hero es fondo CSS, no <img>: la negociacion de formato se hace con image-set.
   El url() de arriba queda como respaldo para navegadores sin soporte. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .hero__imagen { background-image: image-set(url("../assets/img/hero-luz-natural-1536.webp") type("image/webp"), url("../assets/img/hero-luz-natural.jpg") type("image/jpeg")); }
  @media (max-width: 760px) {
    .hero__imagen { background-image: image-set(url("../assets/img/hero-luz-natural-768.webp") type("image/webp"), url("../assets/img/hero-luz-natural.jpg") type("image/jpeg")); }
  }
}
/* La fotografia ya reserva sombra para el texto: el velo verde conserva la luz
   de la derecha y refuerza el contraste de los datos al pie. */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(24,42,36,.46) 0%, rgba(24,42,36,.3) 46%, rgba(24,42,36,.04) 76%), linear-gradient(0deg, rgba(24,42,36,.58), transparent 65%); }
@media (min-width: 431px) and (max-width: 1279px) {
  .hero::after { background: linear-gradient(90deg, rgba(24,42,36,.52), rgba(24,42,36,.45)), linear-gradient(0deg, rgba(24,42,36,.62), transparent 75%); }
}
.hero__contenido { position: relative; z-index: 1; padding-block: clamp(3.75rem, 8vh, 6rem); }
.hero__contexto { margin-bottom: 1.4rem; color: var(--liquen); font-size: .82rem; font-weight: 700; letter-spacing: .035em; }
.hero h1 { max-width: 20ch; }
.hero__sub { max-width: 46ch; margin-top: 1.5rem; color: var(--claro-alto); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; }
/* Informacion de modalidad: se lee despues del parrafo, nunca compite con el H1.
   Mismo tamano y color apagado que el pie de los botones para que lean como un solo nivel. */
.hero__modalidad { max-width: 46ch; margin-top: .85rem; color: var(--claro-medio); font-size: .95rem; font-weight: 500; line-height: 1.5; letter-spacing: .01em; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2rem; }
.hero__honorarios { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanco); font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; transition: color var(--rapido) ease; }
.hero__honorarios:hover { color: var(--liquen); }
.hero__honorarios:focus-visible { outline: 2px solid var(--liquen); outline-offset: 4px; }
.hero__acciones span { flex-basis: 100%; color: var(--claro-medio); font-size: .95rem; line-height: 1.5; }

.cabecera-seccion .indice { display: flex; justify-content: center; }
.cabecera-seccion .indice::after { content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: .72; }
.reconocimiento__contraste { position: relative; display: grid; gap: 1.75rem; }
.estado { position: relative; z-index: 1; width: 100%; text-align: center; }
.estado > span { display: block; margin-bottom: .8rem; color: var(--verde); font-size: .82rem; font-weight: 700; }
.estado p { margin: 0 auto; font-family: var(--titular); font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -.025em; }
.estado--fuera { color: var(--estado-fuera); }
.estado--dentro { color: var(--tinta); }
.reconocimiento__puente { display: none; align-self: center; color: var(--verde); }
.reconocimiento__puente svg { display: block; width: 100%; overflow: visible; }
.reconocimiento__puente .trazo { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.reconocimiento__puente .trazo--eco { stroke: var(--trazo-eco); stroke-width: 1; opacity: .42; }
.reconocimiento__puente .trazo--principal { stroke: var(--trazo-principal); stroke-width: 1.65; }
.reconocimiento__puente .trazo__inicio { fill: var(--trazo-eco); }
.reconocimiento__puente .trazo__final { fill: var(--verde); }

.motivos { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 5vw, 5rem); background: var(--motivos-fondo); }
.motivos__composicion { display: block; }
.cabecera-seccion { margin: 0 0 clamp(2rem, 3vw, 2.75rem); text-align: center; }
.cabecera-seccion h2 { max-width: 30ch; margin-inline: auto; }
.cabecera-seccion p { max-width: 78ch; margin: 1.15rem auto 0; color: var(--suave); font-size: 1.05rem; }
.motivos-selector { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.motivos-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge-motivo { padding: .6rem 1rem; border: 1px solid var(--borde-fuerte); border-radius: 999px; background: transparent; color: var(--suave); font-size: .95rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color var(--rapido) ease, border-color var(--rapido) ease, color var(--rapido) ease; }
.badge-motivo:hover { border-color: var(--verde); color: var(--verde); }
.badge-motivo.activo { border-color: var(--verde); background: var(--verde); color: var(--blanco); font-weight: 700; }
.badge-motivo:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.motivos-selector__cuerpo { display: grid; gap: 1.5rem; align-items: start; }
.motivos-selector__galeria { position: relative; min-height: 300px; overflow: hidden; border-radius: 16px 16px 16px 4px; background: var(--verde-hondo); }
.motivos-selector__galeria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.015); transition: opacity 360ms ease, transform 520ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.motivos-selector__galeria img.activo { opacity: 1; transform: scale(1); }
.galeria-texto { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); opacity: 0; transition: opacity 360ms ease; pointer-events: none; }
.galeria-texto.activo { opacity: 1; }
.galeria-texto p { max-width: 19ch; margin: 0; color: var(--liquen); font-family: var(--titular); font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 500; line-height: 1.14; letter-spacing: -.025em; text-align: center; }
.ficha-motivo h3 { color: var(--tinta); font-family: var(--titular); font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 500; line-height: 1.1; }
.ficha-motivo__intro { max-width: 46ch; margin: .8rem 0 0; color: var(--suave); font-size: 1rem; }
.ficha-motivo__preguntas { margin: 1.5rem 0 0; border-top: 1px solid var(--borde); }
.ficha-motivo__preguntas dt { padding-top: 1rem; color: var(--tinta); font-size: .95rem; font-weight: 700; }
.ficha-motivo__preguntas dd { max-width: 52ch; margin: .35rem 0 0; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); color: var(--suave); font-size: .95rem; line-height: 1.55; }
.ficha-motivo__mas { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.1rem; border-bottom: 1px solid currentColor; color: var(--verde); font-size: .95rem; font-weight: 700; text-decoration: none; transition: color var(--rapido) ease; }
.ficha-motivo__mas::after { content: "\2192"; margin-left: .5rem; }
.ficha-motivo__mas:hover { color: var(--verde-vivo); }
.ficha-motivo__mas:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }


.presentacion { padding-block: var(--seccion); background: var(--superficie); }
.presentacion__grid { display: grid; gap: 3rem; align-items: center; }
.presentacion__foto { position: relative; width: min(100%, 360px, calc(75svh - 135px)); justify-self: center; padding: .5rem; background: var(--verde); box-shadow: 0 8px 8px rgba(24,42,36,.14); }
.presentacion__foto picture { display: block; }
.presentacion__foto img { position: relative; z-index: 1; width: 100%; height: auto; }
.presentacion__contenido h2 { margin-bottom: 1.4rem; }
.presentacion__contenido > p { color: var(--suave); }
.presentacion__intro { color: var(--tinta) !important; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
.presentacion__garantia { position: relative; margin: 1.4rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--verde); color: var(--tinta) !important; font-size: 1rem; font-weight: 500; }
.presentacion__transicion { margin: 1.5rem 0 .65rem; color: var(--tinta) !important; font-weight: 600; }
.presentacion__continuar { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; color: var(--verde); font-size: .95rem; font-weight: 700; text-decoration: none; transition: color var(--rapido) ease, border-color var(--rapido) ease; }
.presentacion__continuar::after { content: "→"; margin-left: .6rem; }
.presentacion__continuar:hover { color: var(--verde-vivo); }
.presentacion__continuar:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 4px; }
.credenciales { margin: 2rem 0; border-top: 1px solid var(--tinta); }
/* Invitar a verificar el registro es una senal de confianza, no un adorno: se marca
   como nota sobria bajo las credenciales, sin competir con la tabla que la precede. */
.verificacion { max-width: 62ch; margin: 0 0 2rem; padding: 1.1rem 1.3rem; background: var(--superficie); color: var(--suave); font-size: .95rem; line-height: 1.6; }
.verificacion strong { color: var(--tinta); }
.credenciales div { padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.credenciales dt { color: var(--verde); font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.credenciales dd { margin: .25rem 0 0; }

.aranceles { background: var(--superficie); }
.encuadre { display: grid; margin: 0; border-top: 1px solid var(--tinta); }
.encuadre > div { display: grid; gap: .2rem; padding: .85rem 0; border-bottom: 1px solid var(--borde); }
.encuadre dt { color: var(--verde); font-size: .82rem; font-weight: 700; }
.encuadre dd { max-width: 46ch; margin: 0; color: var(--tinta); font-size: .95rem; line-height: 1.5; }

.reembolso { padding: clamp(1.35rem,2.5vw,1.75rem); border-radius: 18px; background: var(--blanco); }
.reembolso h3 { margin-bottom: .8rem; color: var(--tinta); font-family: var(--titular); font-weight: 600; }
.reembolso p { max-width: 58ch; font-size: .95rem; color: var(--suave); }
.reembolso p:last-of-type { margin-bottom: 0; }
.reembolso strong { color: var(--tinta); }
.reembolso__aviso { color: var(--verde) !important; font-weight: 700; }
.aranceles__cierre { margin-top: clamp(1.75rem,3vw,2.5rem); }



.preguntas { background: var(--blanco); }
.preguntas__grid { display: grid; gap: 3rem; align-items: start; }
.preguntas__cabecera h2 { max-width: 24ch; }
.preguntas__nota { max-width: 34ch; margin: 1.5rem 0 1.25rem; color: var(--suave); font-size: .95rem; }
.preguntas__enlace { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; color: var(--verde); font-size: .95rem; font-weight: 700; text-decoration: none; transition: color var(--rapido) ease; }
.preguntas__enlace::after { content: "\2192"; margin-left: .5rem; }
.preguntas__enlace:hover { color: var(--verde-vivo); }
.preguntas__enlace:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }
.faq { border-top: 1px solid var(--tinta); }
.faq__item { border-bottom: 1px solid var(--borde); }

/* ==========================================================================
   CONTACTO
   Antes esta seccion era un bloque verde oscuro con campos translucidos: el
   unico lugar del sitio con ese tratamiento, y se leia como otra pagina.
   Ahora usa la misma paleta que Informacion practica —fondo --superficie y el
   formulario en tarjeta blanca— y el verde queda solo en el boton y los acentos.
   ========================================================================== */
.contacto { padding-block: clamp(3rem,5vw,4.5rem); background: var(--verde); color: var(--blanco); -webkit-font-smoothing: auto; }
.contacto__grid { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.contacto__intro h2 { max-width: 22ch; color: var(--blanco); font-size: clamp(1.9rem,3.2vw,2.8rem); line-height: 1.06; }
.contacto__intro > p { max-width: 46ch; margin-top: 1.1rem; color: var(--claro-alto); }
.contacto__whatsapp { display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem; padding: .65rem .85rem; border-bottom: 1px solid currentColor; color: var(--verde); font-size: .95rem; font-weight: 700; text-decoration: none; transition: color var(--rapido) ease; }
.contacto__whatsapp::after { content: "↗"; margin-left: .55rem; }
.contacto__whatsapp:hover { color: var(--verde-vivo); }
/* Sobre fondo verde (cierre de las paginas de motivo) el enlace se aclara. */
.contacto .indice { color: var(--liquen); }
.contacto .pasos-contacto { border-top-color: rgba(203,215,184,.34); }
.contacto .pasos-contacto li { border-bottom-color: rgba(203,215,184,.34); color: var(--claro-medio); }
.contacto .pasos-contacto li::before { color: var(--liquen); }
.contacto .pasos-contacto strong { color: var(--blanco); }
.tema-cierre .contacto__whatsapp, .contacto__intro .contacto__whatsapp { color: var(--blanco); border-bottom-color: var(--liquen); }
.tema-cierre .contacto__whatsapp:hover, .contacto__intro .contacto__whatsapp:hover { color: var(--liquen); border-bottom-color: var(--blanco); }
/* El aviso de urgencias pasa a bloque, para que no se lea como un pie de nota. */
.contacto__legal { margin: 0; color: var(--suave); font-size: .9rem; }
.contacto__legal a { color: var(--verde); font-weight: 700; }
.contacto__form { display: grid; gap: .85rem; align-content: start; padding: clamp(1.25rem,2.4vw,1.75rem); border-radius: 18px; background: var(--blanco); }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contacto__fila { display: grid; gap: .85rem; }
.campo { display: grid; gap: .35rem; }
.campo label { color: var(--tinta); font-size: .9rem; font-weight: 700; }
.campo label span { font-weight: 400; color: var(--suave); }
.campo small { color: var(--suave); font-size: .86rem; line-height: 1.45; }
.campo input, .campo textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--borde-fuerte); border-radius: 18px; background: var(--fondo); color: var(--tinta); outline: none; }
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo textarea::placeholder { color: var(--borde-fuerte); opacity: 1; }
.campo input:focus, .campo textarea:focus { border-color: var(--verde); background: var(--blanco); box-shadow: 0 0 0 3px rgba(41,72,61,.12); }
.contacto__consentimiento { display: flex; gap: .65rem; align-items: flex-start; color: var(--suave); font-size: .9rem; line-height: 1.5; cursor: pointer; }
.contacto__consentimiento input { margin-top: .2rem; accent-color: var(--verde); }
.contacto__form .cta { min-height: 46px; justify-self: start; padding-block: .72rem; }
.contacto__form .cta:disabled { cursor: wait; opacity: .72; transform: none; }
.contacto__estado { min-height: 1.5em; margin: 0; color: var(--verde); font-size: .92rem; font-weight: 600; }
.contacto__estado[data-estado="error"] { color: var(--error); }

.whatsapp-flotante { position: fixed; right: clamp(1rem,2vw,1.5rem); bottom: clamp(1rem,2vw,1.5rem); z-index: 15; display: inline-flex; width: 54px; min-height: 54px; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--verde-vivo); box-shadow: 0 4px 10px rgba(9,18,15,.24); color: var(--blanco); text-decoration: none; transition: background-color var(--rapido) ease, transform var(--rapido) ease; }
.whatsapp-flotante svg { width: 1.72rem; height: 1.72rem; fill: currentColor; }
.whatsapp-flotante:hover { background: var(--verde); transform: translate3d(0,-2px,0); }
.whatsapp-flotante:focus-visible, .contacto__whatsapp:focus-visible { outline: 2px solid var(--liquen); outline-offset: 4px; }

.footer { padding-block: 2.5rem; background: var(--verde-hondo); color: var(--claro-medio); font-size: 1rem; }
.footer__grid { display: grid; gap: 2rem; }
.footer__bloque p { margin: 0 0 .7rem; }
.footer__bloque p:last-child { margin-bottom: 0; }
.footer__titulo { margin: 0 0 .85rem !important; color: var(--blanco); font-family: var(--titular); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.footer a { color: var(--liquen); font-weight: 600; }

/* Urgencias: primero el numero, despues a quien corresponde. Quien busca esto
   no esta para leer una frase y extraer el digito. */
.footer__lineas { display: grid; gap: .3rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.footer__lineas a { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; color: var(--claro-medio); font-weight: 400; text-decoration: none; transition: color var(--rapido) ease; }
.footer__lineas a:hover b { color: var(--blanco); }
.footer__lineas a:hover span { color: var(--blanco); }
.footer__lineas b { color: var(--liquen); font-family: var(--titular); font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.footer__lineas span { font-size: .92rem; line-height: 1.35; }

/* Contacto: el numero en digitos, por si alguien no ve el boton flotante. */
.footer__telefono { font-family: var(--titular); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.footer__telefono a { color: var(--blanco); text-decoration: none; border-bottom: 1px solid rgba(203,215,184,.5); }
.footer__telefono a:hover { color: var(--liquen); border-bottom-color: var(--liquen); }
.footer__telefono-nota { color: var(--claro-bajo); font-size: .9rem; }
.footer__redes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .9rem; padding: 0; list-style: none; }
.footer__redes a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .95rem .5rem .8rem; border-radius: 999px; background: rgba(203,215,184,.13); color: var(--blanco); font-size: .93rem; font-weight: 600; text-decoration: none; transition: background-color var(--rapido) ease, color var(--rapido) ease; }
.footer__redes a:hover { background: var(--liquen); color: var(--verde-hondo); }
.footer__redes svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }
.footer__respuesta { color: var(--claro-bajo); font-size: .9rem; line-height: 1.5; }
.footer__lineas a:focus-visible, .footer__redes a:focus-visible, .footer__telefono a:focus-visible { outline: 2px solid var(--liquen); outline-offset: 3px; }

/* Paginas legales: mismo sistema, sin hero fotografico (regla de coherencia entre paginas). */
.legal { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--fondo); }
.legal__cabecera { padding-bottom: 1.75rem; border-bottom: 1px solid var(--tinta); }
.legal__cabecera h1 { max-width: 20ch; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; }
.legal__fecha { margin: 1.15rem 0 0; color: var(--suave); font-size: .95rem; }
.legal__cuerpo { display: grid; gap: clamp(2rem, 3.5vw, 2.75rem); width: min(100%, 68ch); margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.legal__cuerpo section { display: grid; gap: .85rem; }
.legal__cuerpo h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; }
.legal__cuerpo p, .legal__cuerpo li { margin: 0; color: var(--suave); }
.legal__cuerpo strong { color: var(--tinta); }
.legal__cuerpo ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.25rem; }
.legal__cuerpo a { color: var(--verde); font-weight: 600; }
.legal__cuerpo a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.legal__destacado { padding: 1.3rem 1.5rem; background: var(--superficie); }
.legal__destacado p { color: var(--tinta); }
.legal__volver { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5rem; border-bottom: 1px solid currentColor; color: var(--verde); font-size: .95rem; font-weight: 700; text-decoration: none; }
.legal__volver::before { content: "←"; margin-right: .5rem; }

.revelar { opacity: 1; transform: none; }
.revelar.animar { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 360ms cubic-bezier(.22,1,.36,1), transform 360ms cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.revelar.animar.visible { opacity: 1; transform: translate3d(0, 0, 0); }

@media (min-width: 760px) {
  .reconocimiento__contraste { grid-template-columns: minmax(0,1fr) minmax(100px,.24fr) minmax(0,1fr); align-items: start; }
  .reconocimiento__puente { display: block; }
  .motivos .cabecera-seccion { width: min(100%, 980px); margin-inline: auto; }
  .motivos-badges { justify-content: center; }
  .motivos-selector__cuerpo { grid-template-columns: minmax(320px,1fr) minmax(400px,1.05fr); gap: clamp(2rem,4vw,3.25rem); }
  .motivos-selector__galeria { min-height: 460px; height: 100%; }
  /* Alto fijo del bloque de fichas: sin esto la seccion salta 109px al cambiar de badge. */
  .motivos-fichas { min-height: 500px; }
  .contacto__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(3rem,6vw,6rem); }
  .contacto__fila { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(2rem,4vw,3.5rem); }
}
@media (min-width: 1040px) {
  .nav__inner { min-height: 76px; gap: 1.5rem; }
  .nav__marca img { height: 70px; }
  .nav__links { display: flex; order: 0; flex-basis: auto; gap: clamp(.25rem,.75vw,.75rem); margin-inline: 0; padding: 0; overflow: visible; }
  .nav__links a { padding: .58rem .5rem; font-size: clamp(.78rem,.85vw,.84rem); }
  [id] { scroll-margin-top: 84px; }
  /* Sobre mi y Preguntas pasan a dos columnas recien aca. A 800px la columna de texto
     llegaba a 1265px contra una foto de 395px: ninguna de las dos tenia ancho real. */
  .presentacion__grid { grid-template-columns: minmax(0,1fr) minmax(240px,360px); gap: clamp(2rem,4vw,4rem); align-items: center; }
  .presentacion__contenido { grid-column: 1; grid-row: 1; }
  .presentacion__foto { grid-column: 2; grid-row: 1; }
  /* Dos columnas: seis filas de credenciales dejaban la columna de texto 500px mas
     alta que la foto. Los nombres de universidad necesitan este ancho para no romperse. */
  .credenciales { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 2.5rem; }
  .preguntas__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(3rem,6vw,6rem); }
  /* El titulo acompana la lectura del FAQ en vez de dejar la columna vacia. */
  .preguntas__cabecera { position: sticky; top: 110px; }
}
@media (min-width: 1100px) {
  .preguntas__grid { grid-template-columns: minmax(0,.62fr) minmax(0,1.38fr); }
  .faq { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(2rem,3vw,2.75rem); align-content: start; }
  .faq__cierre { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .contenedor { width: min(100% - 2rem, var(--contenedor)); }
  .nav__inner { gap: .5rem .65rem; }
  .cta--nav { font-size: .75rem; padding-inline: .72rem; } .cta--nav::after { display: none; }
  .hero { min-height: clamp(590px, calc(100svh - 98px), 700px); }
  .hero::after { background: linear-gradient(90deg, rgba(24,42,36,.52), rgba(24,42,36,.28)), linear-gradient(0deg, rgba(24,42,36,.62), transparent 75%); }
  .hero__imagen { background-position: 40% center; }
  .whatsapp-flotante { width: 52px; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .revelar { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESUMEN PRACTICO DE LAS PAGINAS DE SERVICIO
   La portada enlaza a Honorarios; las paginas de servicio conservan este resumen.
   ========================================================================== */
.resumen-practico { display: grid; gap: .55rem 1.5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(203,215,184,.32); }
.resumen-practico > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.resumen-practico dt { color: var(--liquen); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.resumen-practico dd { margin: 0; color: var(--claro-alto); font-size: .95rem; font-weight: 600; line-height: 1.4; }
.resumen-practico dd b { color: var(--blanco); font-family: var(--titular); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 620px) { .resumen-practico { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) {
  .resumen-practico { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .4rem 1.75rem; }
  .resumen-practico > div { flex-direction: column; gap: .25rem; }
}

/* ==========================================================================
   SELLO DE SERVICIO (evaluacion de TDAH)
   Deliberadamente NO es una insignia circular ni un timbre: eso se leeria como
   acreditacion de un tercero, y nadie acredito este servicio. Es una ficha de
   servicio, con el mismo vocabulario visual del resto del sitio.
   ========================================================================== */
.sello { background: var(--fondo); }
.sello__ficha { position: relative; display: grid; gap: clamp(1.25rem,2.5vw,2rem); padding: clamp(1.5rem,3vw,2.25rem); padding-left: clamp(1.75rem,3.2vw,2.5rem); border: 1px solid var(--borde-fuerte); border-radius: 4px 18px 18px 4px; background: var(--superficie); }
.sello__ficha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--verde); }
.sello__ficha h2 { max-width: 24ch; }
.sello__intro { max-width: 58ch; margin: .9rem 0 0; color: var(--suave); }
.sello__lista { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.sello__lista li { position: relative; padding-left: 1.2rem; color: var(--tinta); font-size: .95rem; line-height: 1.55; }
.sello__lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 2px; background: var(--verde); }
.sello__limite { margin: 1.25rem 0 0; padding: 1rem 1.2rem; background: var(--blanco); color: var(--tinta); font-size: .95rem; font-weight: 600; line-height: 1.55; }
.sello__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.4rem; }
@media (min-width: 760px) { .sello__ficha { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: start; } }

/* ==========================================================================
   MOTIVOS EN LA HOME
   La home reconoce y enlaza; la pagina de motivo explica. Por eso la ficha ya no
   lleva preguntas: se fueron a su pagina, donde no compiten con la portada.
   ========================================================================== */
/* Va sobre los badges, no bajo las fichas: explica que cada badge lleva a una pagina
   propia antes de que la persona interactue con ellos. Bajo 760px los badges se ocultan
   y queda encabezando la lista de enlaces, donde dice lo mismo. */
.motivos__aviso { max-width: 62ch; margin: 0 auto clamp(.9rem,2vw,1.25rem); color: var(--suave); font-size: .95rem; text-align: center; }
/* Movil: sin pestanas ni galeria. Las siete fichas quedan como lista de enlaces,
   visibles sin JS y sin costo de interaccion para alguien que esta mal. */
@media (max-width: 759px) {
  .motivos-badges, .motivos-selector__galeria { display: none; }
  .motivos__aviso { margin-inline: 0; text-align: left; }
  .motivos-fichas { display: grid; gap: 0; border-top: 1px solid var(--tinta); }
  .ficha-motivo { display: grid !important; gap: .3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--borde); }
  .ficha-motivo h3 { font-size: 1.2rem; }
  .ficha-motivo__intro { margin: 0; font-size: .92rem; }
  .ficha-motivo__mas { min-height: 0; margin-top: .45rem; border-bottom: 0; font-size: .88rem; }
}

/* ==========================================================================
   FAQ NATIVA
   details/summary en lugar de button + aria-expanded: funciona sin JS y los
   extractores de IA la leen como texto plano, no como panel colapsado por script.
   ========================================================================== */
.faq__item > summary { position: relative; padding: 1rem 2.5rem 1rem 0; color: var(--tinta); font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: ""; position: absolute; right: .35rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; background: linear-gradient(var(--verde),var(--verde)) center/100% 1px no-repeat, linear-gradient(var(--verde),var(--verde)) center/1px 100% no-repeat; transition: transform var(--rapido) ease; }
.faq__item[open] > summary::after { transform: rotate(45deg); background: linear-gradient(var(--verde),var(--verde)) center/100% 1px no-repeat; }
.faq__item > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.faq__respuesta { padding: 0 2rem 1.1rem 0; }
.faq__respuesta p { margin: 0 0 .8rem; color: var(--suave); }
.faq__respuesta p:last-child { margin-bottom: 0; }
/* Cierra la lista y devuelve al formulario. No es un CTA: el unico de la seccion
   sigue siendo "Consultar disponibilidad", arriba en la cabecera. */
.faq__cierre { margin: 1.5rem 0 0; color: var(--suave); font-size: .95rem; line-height: 1.6; }
.faq__cierre a { color: var(--verde); font-weight: 700; }

/* ==========================================================================
   MIGA DE PAN
   ========================================================================== */
.miga { padding-block: .85rem; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.miga ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.miga li { display: flex; align-items: center; gap: .5rem; color: var(--suave); }
.miga li + li::before { content: "/"; color: var(--borde-fuerte); }
.miga a { color: var(--verde); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.miga a:hover { border-bottom-color: currentColor; }
.miga a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.miga [aria-current="page"] { color: var(--suave); font-weight: 600; }

/* ==========================================================================
   PAGINA DE MOTIVO / SERVICIO
   ========================================================================== */
.tema-hero { position: relative; padding-block: clamp(2.5rem,5vw,4rem); background: var(--verde-hondo); color: var(--blanco); overflow: hidden; }
.tema-hero::after { content: ""; position: absolute; width: min(38vw,30rem); aspect-ratio: 1; right: -14vw; bottom: -20vw; border: 1px solid rgba(203,215,184,.2); border-radius: 50%; pointer-events: none; }
.tema-hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem,3.5vw,3rem); align-items: center; }
.tema-hero h1 { max-width: 24ch; }
.tema-hero__entrada { max-width: 56ch; margin: 1.35rem 0 0; color: var(--claro-alto); font-size: clamp(1.02rem,1.7vw,1.2rem); line-height: 1.6; }
.tema-hero__foto { position: relative; border-radius: 16px 16px 16px 4px; overflow: hidden; background: var(--foto-fondo); }
.tema-hero__foto img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; }
.tema-hero .resumen-practico { border-top-color: rgba(203,215,184,.3); }
@media (min-width: 900px) { .tema-hero__grid { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); } .tema-hero__foto img { max-height: 400px; } }

.tema { padding-block: clamp(2.5rem,5vw,4.5rem); background: var(--fondo); }
.tema__grid { display: grid; gap: clamp(2.5rem,5vw,4rem); align-items: start; }
.tema__cuerpo { display: grid; gap: clamp(1.75rem,3vw,2.5rem); width: min(100%,68ch); }
.tema__cuerpo section { display: grid; gap: .85rem; }
.tema__cuerpo h2 { font-size: clamp(1.5rem,2.6vw,2.05rem); line-height: 1.12; }
.tema__cuerpo h3 { color: var(--verde); font-family: var(--fuente); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.tema__cuerpo p, .tema__cuerpo li { margin: 0; color: var(--suave); }
.tema__cuerpo strong { color: var(--tinta); }
.tema__cuerpo ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tema__cuerpo ul li { position: relative; padding-left: 1.2rem; }
.tema__cuerpo ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 2px; background: var(--verde); }
/* Respuesta autocontenida bajo un encabezado en forma de pregunta: es el formato
   que los buscadores con resumen de IA citan, y de paso responde antes de exigir
   leer la seccion completa. */
/* Sistema de cuadros aclaratorios: sin borde, radio amplio con esquina de anclaje
   y sombra teñida de verde en dos capas. Un solo lenguaje para todo el sitio.
   El filete verde de 3px se retiro: el verde es color de accion y no debe aparecer
   en algo que no se puede tocar. */
.tema__clave, .legal__destacado, .sello__limite, .derivacion__lineas, .verificacion {
  border: 0; border-radius: 4px 18px 18px 18px;
  box-shadow: 0 1px 2px rgba(24,42,36,.05), 0 10px 26px -12px rgba(41,72,61,.28);
}
.tema__clave { padding: 1.1rem 1.3rem; background: var(--superficie); }
.tema__clave p { color: var(--tinta); font-weight: 500; }

/* Aviso de derivacion: va en el cuerpo, no en el footer. Estas paginas atraen
   trafico en peor estado que el visitante promedio de la portada. */
.derivacion { padding: clamp(1.25rem,2.5vw,1.75rem); border: 2px solid var(--verde); border-radius: 4px 16px 16px 4px; background: var(--blanco); }
.derivacion h2 { margin-bottom: .65rem; font-size: clamp(1.35rem,2.2vw,1.7rem); }
.derivacion p, .derivacion li { color: var(--suave); }
.derivacion strong { color: var(--tinta); }
.derivacion__lineas { margin: 1rem 0 0; padding: 1rem 1.2rem; background: var(--superficie); color: var(--tinta) !important; font-size: .95rem; font-weight: 600; line-height: 1.6; }

.tema__lateral { display: grid; gap: 1.5rem; align-content: start; }
.tema__tarjeta { padding: clamp(1.25rem,2.2vw,1.6rem); border-radius: 18px; background: var(--superficie); }
.tema__tarjeta h2, .tema__tarjeta h3 { margin-bottom: .9rem; font-family: var(--titular); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.tema__tarjeta .encuadre, .tema__tarjeta .credenciales { margin: 0; }
.tema__tarjeta .encuadre > div:last-child, .tema__tarjeta .credenciales div:last-child { border-bottom: 0; padding-bottom: 0; }
.tema__tarjeta .cta { margin-top: 1.1rem; width: 100%; }
.tema__firma { display: flex; gap: .9rem; align-items: center; margin-bottom: .9rem; }
.tema__firma img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; }
.tema__firma p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--suave); }
.tema__firma strong { display: block; color: var(--tinta); font-size: .98rem; }
@media (min-width: 1040px) { .tema__grid { grid-template-columns: minmax(0,1fr) minmax(300px,.46fr); gap: clamp(3rem,5vw,5rem); } .tema__lateral { position: sticky; top: 104px; } }

/* Enlaces entre motivos: solo cuando ayudan a la lectura, no como bloque de relleno. */
.relacionados { padding-block: clamp(2.25rem,4vw,3.25rem); background: var(--superficie); border-top: 1px solid var(--borde); }
.relacionados h2 { margin-bottom: 1.4rem; font-size: clamp(1.35rem,2.2vw,1.75rem); }
.relacionados ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tinta); }
.relacionados li { border-bottom: 1px solid var(--borde); }
.relacionados a { display: grid; gap: .25rem; padding: 1rem 0; color: var(--tinta); text-decoration: none; }
.relacionados a span { color: var(--verde); font-size: .95rem; font-weight: 700; }
.relacionados a span::after { content: "\2192"; margin-left: .45rem; }
.relacionados a small { color: var(--suave); font-size: .92rem; line-height: 1.5; }
.relacionados a:hover span { color: var(--verde-vivo); }
.relacionados a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
@media (min-width: 760px) { .relacionados ul { grid-template-columns: repeat(2,1fr); column-gap: 3rem; } }

/* Cierre de pagina de motivo: un unico objetivo de conversion, al formulario de la portada. */
.tema-cierre { padding-block: clamp(2.5rem,5vw,4rem); background: var(--verde); color: var(--blanco); text-align: center; }
.tema-cierre h2 { max-width: 30ch; margin-inline: auto; color: var(--blanco); font-size: clamp(1.7rem,3vw,2.6rem); }
.tema-cierre p { max-width: 58ch; margin: 1.1rem auto 0; color: var(--claro-alto); }
.tema-cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.tema-cierre__acciones .contacto__whatsapp { margin-top: 0; }

/* ==========================================================================
   DENSIDAD EN MOVIL
   Los detalles largos de formacion viven en sobre-cristian-valencia.html.
   La home conserva lo que sostiene el precio y enlaza al resto.
   ========================================================================== */
.credenciales--breve { margin: 1.5rem 0; }
.credenciales--breve div { padding: .7rem 0; }
.credenciales--breve dd { font-size: .95rem; line-height: 1.45; }
@media (max-width: 759px) {
  /* El retrato ocupaba ~520px de alto en una pantalla de 844px. */
  .presentacion__foto { width: min(100%, 270px, calc(54svh - 36px)); }
  .presentacion { padding-block: clamp(2.25rem, 5vw, 3rem); }
  .ficha-motivo { padding: .85rem 0; }
  .ficha-motivo h3 { font-size: 1.1rem; }
  .ficha-motivo__intro { font-size: .88rem; }
  /* Las seis filas de encuadre ya estan en el lateral de cada pagina de motivo. */
  .encuadre dd { font-size: .92rem; }
}

/* A 320x568 el CTA del hero caia en y=758: fuera de pantalla. El bloque se
   aprieta para que titular, precio y accion entren en la primera pantalla. */
@media (max-width: 430px) {
  .hero { min-height: 0; }
  .hero__contenido { padding-block: 1.35rem 2rem; }
  .hero__contexto { margin-bottom: .9rem; font-size: .76rem; }
  .hero h1 { font-size: clamp(1.95rem, 9vw, 2.3rem); max-width: 100%; }
  .hero__sub { margin-top: .85rem; font-size: .95rem; line-height: 1.4; }
  .hero__modalidad { margin-top: .6rem; font-size: .86rem; line-height: 1.4; }
  .resumen-practico { margin-top: .95rem; padding-top: .75rem; gap: .3rem; }
  .resumen-practico dd { font-size: .9rem; }
  .resumen-practico dd b { font-size: 1.05rem; }
  .hero__acciones { margin-top: 1.1rem; gap: .7rem 1rem; }
  .hero__acciones span { font-size: .86rem; }
}

/* Autoestima todavia no tiene fotografia propia. En vez de un placeholder, panel
   tipografico: el mismo recurso que ya usa la galeria de la portada. */
.tema-hero__foto--texto { display: grid; place-items: center; min-height: 260px; padding: clamp(1.5rem,4vw,2.5rem); background: var(--foto-fondo); }
.tema-hero__foto--texto p { max-width: 20ch; margin: 0; color: var(--liquen); font-family: var(--titular); font-size: clamp(1.4rem,3vw,2rem); font-weight: 500; line-height: 1.16; letter-spacing: -.025em; text-align: center; }
@media (min-width: 900px) { .tema-hero__foto--texto { min-height: 340px; } }

/* ==========================================================================
   FUSIONES
   Tres secciones de la portada se disolvieron dentro de otras:
   - "Cómo trabajaremos" (enfoque)  -> Sobre mí, como .proceso-breve
   - "Qué pasa después"  (despues)  -> Contacto, como .pasos-contacto
   - "Reconocimiento"               -> Motivos, reutilizando .estado sin cambios
   Los cuatro pasos genéricos ya están explicados en profundidad en las 8 páginas
   internas, así que en la portada solo necesitan enunciarse.
   ========================================================================== */

/* Proceso en cuatro pasos, versión compacta sobre fondo claro.
   La versión anterior (.enfoque__pasos) estaba pintada para fondo verde oscuro. */
.proceso-breve { margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: pb; border-top: 1px solid var(--tinta); }
.proceso-breve li { counter-increment: pb; position: relative; padding: .8rem 0 .8rem 2.2rem; border-bottom: 1px solid var(--borde); }
.proceso-breve li::before { content: "0" counter(pb); position: absolute; left: 0; top: .85rem; color: var(--verde); font-family: var(--titular); font-size: 1.05rem; font-weight: 600; line-height: 1; }
.proceso-breve strong { color: var(--tinta); font-size: .95rem; }
.proceso-breve span { display: block; margin-top: .15rem; color: var(--suave); font-size: .92rem; line-height: 1.5; }
.proceso-breve__titulo { margin: 1.9rem 0 0; color: var(--tinta) !important; font-weight: 700; }

/* Qué pasa después de escribir, dentro de Contacto y sobre fondo verde. */
.pasos-contacto { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: pc; border-top: 1px solid var(--borde); }
.pasos-contacto li { counter-increment: pc; position: relative; padding: .65rem 0 .65rem 2rem; border-bottom: 1px solid var(--borde); color: var(--suave); font-size: .93rem; line-height: 1.5; }
.pasos-contacto li::before { content: counter(pc); position: absolute; left: 0; top: .65rem; color: var(--verde); font-family: var(--titular); font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.pasos-contacto strong { color: var(--tinta); font-weight: 700; }

/* El contraste "por fuera / por dentro" pasa a encabezar Motivos. Mantiene sus
   clases .estado, que ya eran independientes de la sección que lo contenía. */
.motivos__contraste { margin-bottom: clamp(1.75rem,3.5vw,2.5rem); }

/* ==========================================================================
   PESTANAS DE "SOBRE MI"
   "Sobre mi" y "Como trabajaremos" comparten el mismo espacio y se alternan con
   badges, igual que los motivos de consulta. Antes eran dos bloques apilados y
   la columna de texto quedaba ~540px mas alta que la foto.
   Los botones usan .badge-motivo a proposito: es el mismo gesto en el sitio.
   ========================================================================== */
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.35rem; }
/* Sin JavaScript los dos paneles son bloques normales, uno tras otro: se leen
   ambos y no se pierde contenido.
   Con JavaScript (clase .js, que agrega el controlador) los dos ocupan la MISMA
   celda de grid, de modo que el contenedor siempre mide lo del panel mas alto y
   cambiar de pestana no desplaza nada. Es lo que evita numeros magicos por
   breakpoint: el panel oculto sigue aportando su alto. */
.pestanas__cuerpo.js { display: grid; }
.pestanas__cuerpo.js > .panel { grid-area: 1 / 1; }
.pestanas__cuerpo.js > .panel[hidden] { display: block; visibility: hidden; }
.panel > :first-child { margin-top: 0; }
.panel .proceso-breve { margin-top: 1.35rem; }
.panel .credenciales--breve { margin-bottom: 1.35rem; }

@media (min-width: 1040px) {
  /* Composicion de una pantalla en escritorio: el retrato conserva su proporcion
     y no hereda la altura del panel mas largo. El contenido puede crecer con zoom. */
  .presentacion { padding-block: clamp(1.5rem,4svh,2.5rem); }
  .presentacion__contenido .indice { margin-bottom: 1rem; }
  .presentacion__contenido h2 { margin-bottom: 0; font-size: clamp(2rem,2.7vw,2.4rem); line-height: 1.05; }
  .presentacion .pestanas { margin-block: 1rem; }
  .presentacion__intro { margin-bottom: 0; font-size: 1.125rem; line-height: 1.5; }
  .presentacion__garantia { margin-top: 1rem; line-height: 1.5; }
  .presentacion .credenciales--breve { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-block: 1rem; }
  .presentacion .credenciales--breve div { padding-block: .75rem; }
  .presentacion .credenciales--breve dd { font-size: .9375rem; }
  .presentacion .proceso-breve { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1.5rem; margin-top: 1rem; }
  .presentacion .proceso-breve li { padding-block: .75rem; }
  .presentacion .proceso-breve li::before { top: .8rem; }
}
@media (min-width: 1040px) and (max-height: 740px) {
  .presentacion { padding-block: 1rem; }
}

/* El retrato es 3:4. En la caja horizontal de .tema-hero__foto se recortaban 212px
   del original por arriba y la cabeza quedaba cortada. Aca conserva su proporcion
   natural: no se recorta nada y el sujeto queda centrado por construccion. */
.tema-hero__foto--retrato { background: none; border-radius: 16px 16px 16px 4px; }
.tema-hero__foto--retrato img { max-height: none; height: auto; aspect-ratio: 1086 / 1448; object-fit: cover; object-position: center top; }
@media (min-width: 900px) {
  .tema-hero__foto--retrato img { max-height: none; }
  .tema-hero--perfil .tema-hero__grid { align-items: center; }
}

/* ==========================================================================
   RESUMEN DE MOTIVO EN LA PORTADA
   Definicion pragmatica + senales concretas. Ocupa el alto que antes quedaba
   vacio junto a la fotografia (337px muertos a 1366px).
   Registro distinto al de la pagina de motivo: aca se define, alla se desarrolla.
   ========================================================================== */
.ficha-motivo__resumen { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); }
.ficha-motivo__resumen p { max-width: 54ch; margin: 0 0 .9rem; color: var(--suave); font-size: .95rem; line-height: 1.6; }
.ficha-motivo__resumen strong { color: var(--tinta); }
.ficha-motivo__rotulo { margin-bottom: .6rem !important; color: var(--verde) !important; font-size: .78rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ficha-motivo__resumen ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.ficha-motivo__resumen li { position: relative; max-width: 54ch; padding-left: 1.15rem; color: var(--suave); font-size: .93rem; line-height: 1.5; }
.ficha-motivo__resumen li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 2px; background: var(--verde); }
@media (max-width: 759px) {
  /* En movil la portada solo reconoce y enlaza: el resumen vive en la pagina. */
  .ficha-motivo__resumen { display: none; }
}

/* ==========================================================================
   INFORMACION PRACTICA, REORGANIZADA
   Fila de precios en tarjetas de igual altura, despues dos columnas
   equilibradas, al final la accion. Los montos comparten linea base porque
   cada tarjeta reserva el mismo alto para el rotulo y para el monto.
   ========================================================================== */
.aranceles__precios { display: grid; gap: 1rem; margin: 0 0 clamp(1rem,2vw,1.5rem); }
.aranceles__precios > div { display: grid; grid-template-rows: auto auto 1fr; gap: .3rem; padding: clamp(1.25rem,2.2vw,1.6rem); border-radius: 18px; background: var(--blanco); }
.aranceles__precios dt { color: var(--verde); font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.aranceles__monto { margin: 0; font-family: var(--titular); font-size: clamp(2.1rem,3.4vw,2.7rem); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.aranceles__precios .aranceles__descripcion { max-width: 46ch; margin: .35rem 0 0; color: var(--suave); font-size: .95rem; line-height: 1.55; }

.aranceles__detalle { display: grid; gap: 1rem; }
.aranceles__bloque { padding: clamp(1.25rem,2.2vw,1.6rem); border-radius: 18px; background: var(--blanco); }
.aranceles__bloque h3 { margin-bottom: 1rem; color: var(--tinta); font-family: var(--titular); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.aranceles__bloque .encuadre { margin: 0; border-top: 0; }
.aranceles__bloque .encuadre > div:first-child { padding-top: 0; }
.aranceles__bloque .encuadre > div:last-child { padding-bottom: 0; border-bottom: 0; }
.aranceles__bloque p { max-width: 52ch; font-size: .95rem; color: var(--suave); }
.aranceles__bloque p:last-of-type { margin-bottom: 0; }

@media (min-width: 620px) { .aranceles__precios { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; } }
@media (min-width: 900px) { .aranceles__detalle { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; } }