/* ==========================================================================
   Karina Lizeth Ortiz Trigos · Psicóloga
   Hoja de estilos única del sitio
   --------------------------------------------------------------------------
   Índice
   1.  Tokens (colores, tipografía, espaciado) — paleta salvia + arena
   2.  Reset y base
   3.  Tipografía y ritmo vertical
   4.  Utilidades de layout
   5.  Botones y enlaces de acción
   6.  Encabezado y navegación
   7.  Hero
   8.  Sobre mí
   9.  Enfoque (TCC)
   10. Áreas de atención
   11. ¿Para quién?
   12. Cómo funciona
   13. Agenda (Calendly)
   14. Preguntas frecuentes (acordeón)
   15. Contacto y formulario
   16. Nota de emergencias
   17. Footer
   18. Blog (listado y artículo)
   19. Páginas de texto legal
   20. Animaciones y accesibilidad
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Paleta tomada de la plantilla de referencia (img/Template_page.jpg):
     crema/arena como base, verde salvia como color principal y un tono
     arena/tostado como acento secundario. Los dos colores del logotipo
     son --salvia-500 y --marron-300.
     Los tonos "fuertes" (-700 y -800) son los únicos que se usan para
     texto: todos cumplen contraste AA sobre los fondos claros del sitio.
     Los tonos claros (-100 a -500) son decorativos: fondos, bordes,
     íconos y detalles. */

  /* Crema / arena (fondos) */
  --arena-50:      #FAF8F4;  /* fondo base */
  --arena-100:     #F3EFE8;  /* secciones alternas */
  --arena-200:     #E6DFD3;  /* bordes suaves */
  --arena-300:     #D5CBBB;

  /* Arena tostada (acento secundario, decorativo) */
  --marron-100:    #EFE6DA;
  --marron-300:    #D6C7B0;  /* arena del logotipo */
  --marron-500:    #B9A386;

  /* Verde salvia (color principal) */
  --salvia-100:    #E4ECE6;  /* bandas y fondos suaves */
  --salvia-300:    #BFD1C4;  /* formas decorativas */
  --salvia-500:    #7C9A85;  /* verde del logotipo, subrayados, manchas */
  --salvia-600:    #5F7F69;  /* botones */
  --salvia-700:    #56715F;  /* texto de acento (AA sobre claros) */
  --salvia-800:    #3F5346;

  /* Gris verdoso oscuro para el texto (nunca negro puro) */
  --cafe-900:      #2E3733;  /* texto principal */
  --cafe-700:      #4A5550;
  --cafe-500:      #6B7570;  /* texto secundario */

  --blanco:        #FFFFFF;

  /* Roles semánticos */
  --color-fondo: var(--arena-50);
  --color-fondo-alt: var(--arena-100);
  --color-superficie: var(--blanco);
  --color-texto: var(--cafe-900);
  --color-texto-suave: var(--cafe-500);
  --color-borde: var(--arena-200);
  --color-acento: var(--salvia-700);
  --color-foco: var(--salvia-700);

  /* Tipografía */
  --fuente-titulo: "Fraunces", "Georgia", "Times New Roman", serif;
  --fuente-cuerpo: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --fuente-firma: "Caveat", "Segoe Script", "Brush Script MT", cursive;

  /* Escala tipográfica fluida (mobile-first, crece con el viewport) */
  --paso--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --paso-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --paso-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.42rem);
  --paso-2:  clamp(1.44rem, 1.32rem + 0.58vw, 1.80rem);
  --paso-3:  clamp(1.73rem, 1.53rem + 0.95vw, 2.27rem);
  --paso-4:  clamp(2.07rem, 1.76rem + 1.50vw, 2.87rem);
  --paso-5:  clamp(2.49rem, 2.00rem + 2.30vw, 3.62rem);

  /* Espaciado (ritmo vertical basado en 8px) */
  --esp-3xs: 0.25rem;
  --esp-2xs: 0.5rem;
  --esp-xs:  0.75rem;
  --esp-s:   1rem;
  --esp-m:   1.5rem;
  --esp-l:   2rem;
  --esp-xl:  3rem;
  --esp-2xl: 4rem;
  --esp-3xl: 6rem;

  --seccion-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --ancho-max: 72rem;      /* 1152px */
  --ancho-texto: 38rem;    /* medida cómoda de lectura */

  /* Formas y sombras */
  --radio-s: 0.5rem;
  --radio-m: 0.875rem;
  --radio-l: 1.25rem;
  --radio-xl: 2rem;
  --radio-full: 999px;

  --sombra-s: 0 1px 2px rgba(59, 46, 34, 0.05),
              0 2px 6px rgba(59, 46, 34, 0.04);
  --sombra-m: 0 2px 4px rgba(59, 46, 34, 0.04),
              0 8px 24px rgba(59, 46, 34, 0.07);
  --sombra-l: 0 4px 8px rgba(59, 46, 34, 0.05),
              0 18px 48px rgba(59, 46, 34, 0.10);

  --transicion: 200ms cubic-bezier(0.32, 0.72, 0.35, 1);
  --transicion-lenta: 420ms cubic-bezier(0.32, 0.72, 0.35, 1);
}

/* ==========================================================================
   2. Reset y base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el encabezado fijo al saltar con anclas */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* El atributo hidden siempre gana, aunque el elemento tenga display propio */
[hidden] {
  display: none !important;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* Sólo para navegadores sin :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--marron-100);
  color: var(--cafe-900);
}

/* ==========================================================================
   3. Tipografía y ritmo vertical
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cafe-900);
  margin: 0 0 var(--esp-s);
  text-wrap: balance;
}

h1 { font-size: var(--paso-5); }
h2 { font-size: var(--paso-4); }
h3 { font-size: var(--paso-2); }
h4 { font-size: var(--paso-1); }

p {
  margin: 0 0 var(--esp-s);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transicion);
}

a:hover {
  color: var(--salvia-800);
}

strong {
  font-weight: 700;
  color: var(--cafe-900);
}

small {
  font-size: var(--paso--1);
}

ul,
ol {
  padding-left: 1.25em;
  margin: 0 0 var(--esp-s);
}

li + li {
  margin-top: var(--esp-2xs);
}

blockquote {
  margin: var(--esp-l) 0;
  padding: var(--esp-m) var(--esp-m) var(--esp-m) var(--esp-l);
  border-left: 3px solid var(--marron-300);
  background-color: var(--arena-100);
  border-radius: 0 var(--radio-m) var(--radio-m) 0;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-1);
  line-height: 1.5;
  color: var(--cafe-700);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-borde);
  margin: var(--esp-xl) 0;
}

/* ==========================================================================
   4. Utilidades de layout
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--esp-m);
}

.contenedor--angosto {
  max-width: 46rem;
}

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

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

.seccion--pistache {
  background-color: var(--salvia-100);
}

.seccion__intro {
  max-width: var(--ancho-texto);
  margin-bottom: var(--esp-xl);
}

.seccion__intro--centrada {
  margin-inline: auto;
  text-align: center;
}

.antetitulo {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Tono más oscuro para que también cumpla contraste AA sobre el fondo
     verde pistache de la sección "¿Para quién?" */
  color: var(--salvia-800);
  margin-bottom: var(--esp-xs);
}

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

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

.centrado {
  text-align: center;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar-al-contenido {
  position: absolute;
  top: var(--esp-2xs);
  left: var(--esp-2xs);
  z-index: 200;
  transform: translateY(-150%);
  background-color: var(--cafe-900);
  color: var(--arena-50);
  padding: var(--esp-2xs) var(--esp-s);
  border-radius: var(--radio-s);
  text-decoration: none;
  transition: transform var(--transicion);
}

.saltar-al-contenido:focus {
  transform: translateY(0);
  color: var(--arena-50);
}

/* ==========================================================================
   5. Botones
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio-full);
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion),
    border-color var(--transicion), transform var(--transicion),
    box-shadow var(--transicion);
}

.boton:hover {
  transform: translateY(-2px);
}

.boton:active {
  transform: translateY(0);
}

.boton--primario {
  background-color: var(--salvia-600);
  border-color: var(--salvia-600);
  color: var(--blanco);
  box-shadow: var(--sombra-s);
}

.boton--primario:hover {
  background-color: var(--salvia-700);
  border-color: var(--salvia-700);
  color: var(--blanco);
  box-shadow: var(--sombra-m);
}

.boton--secundario {
  background-color: transparent;
  border-color: var(--salvia-600);
  color: var(--salvia-700);
}

.boton--secundario:hover {
  background-color: var(--salvia-600);
  border-color: var(--salvia-600);
  color: var(--blanco);
}

.boton--claro {
  background-color: var(--blanco);
  border-color: var(--blanco);
  color: var(--salvia-700);
  box-shadow: var(--sombra-s);
}

.boton--claro:hover {
  background-color: var(--arena-100);
  border-color: var(--arena-100);
  color: var(--salvia-800);
}

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

.boton__icono {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3xs);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--marron-300);
  padding-bottom: 2px;
  transition: gap var(--transicion), border-color var(--transicion);
}

.enlace-flecha:hover {
  gap: var(--esp-2xs);
  border-bottom-color: var(--salvia-700);
}

/* ==========================================================================
   6. Encabezado y navegación
   ========================================================================== */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 248, 244, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.encabezado.esta-desplazado {
  border-bottom-color: var(--color-borde);
  box-shadow: var(--sombra-s);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  min-height: 4.5rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  text-decoration: none;
  color: var(--cafe-900);
  line-height: 1.15;
}

.marca:hover {
  color: var(--cafe-900);
}

.marca__monograma {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.marca__monograma img,
.marca__monograma svg {
  width: 100%;
  height: 100%;
}

.marca__nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
}

.marca__rol {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.nav-alternador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  color: var(--cafe-900);
}

.nav-alternador__barras,
.nav-alternador__barras::before,
.nav-alternador__barras::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--transicion), opacity var(--transicion);
}

.nav-alternador__barras::before,
.nav-alternador__barras::after {
  content: "";
  position: absolute;
}

.nav-alternador__barras::before { transform: translateY(-6px); }
.nav-alternador__barras::after  { transform: translateY(6px); }

.nav-alternador[aria-expanded="true"] .nav-alternador__barras {
  background-color: transparent;
}

.nav-alternador[aria-expanded="true"] .nav-alternador__barras::before {
  transform: rotate(45deg);
}

.nav-alternador[aria-expanded="true"] .nav-alternador__barras::after {
  transform: rotate(-45deg);
}

.nav {
  position: fixed;
  inset: 4.5rem 0 auto 0;
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  background-color: var(--arena-50);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: var(--sombra-m);
  padding: var(--esp-s) var(--esp-m) var(--esp-l);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicion), transform var(--transicion),
    visibility var(--transicion);
}

.nav.esta-abierta {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
}

.nav__lista li + li {
  margin-top: 0;
}

.nav__enlace {
  display: block;
  padding: var(--esp-2xs) var(--esp-xs);
  border-radius: var(--radio-s);
  color: var(--cafe-700);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion);
}

.nav__enlace:hover {
  background-color: var(--arena-100);
  color: var(--cafe-900);
}

.nav__enlace[aria-current="page"],
.nav__enlace.esta-activo {
  color: var(--salvia-700);
}

.nav__cta {
  margin-top: var(--esp-s);
}

@media (min-width: 62rem) {
  .nav-alternador {
    display: none;
  }

  .nav {
    position: static;
    inset: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: var(--esp-m);
    background-color: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__lista {
    flex-direction: row;
    align-items: center;
    gap: var(--esp-2xs);
  }

  .nav__enlace {
    padding: var(--esp-3xs) var(--esp-2xs);
    font-size: 0.95rem;
    font-weight: 600;
    position: relative;
  }

  .nav__enlace::after {
    content: "";
    position: absolute;
    left: var(--esp-2xs);
    right: var(--esp-2xs);
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--salvia-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
  }

  .nav__enlace:hover::after,
  .nav__enlace.esta-activo::after,
  .nav__enlace[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav__enlace:hover {
    background-color: transparent;
  }

  .nav__cta {
    margin-top: 0;
  }

  .nav__cta .boton {
    min-height: 2.75rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--seccion-y);
  background-color: var(--arena-50);
}

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

.hero__eyebrow {
  font-size: var(--paso--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cafe-500);
  margin-bottom: var(--esp-m);
}

.hero__titulo {
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-m);
}

.hero__titulo em {
  font-style: normal;
  color: var(--salvia-700);
}

.hero__frase {
  font-size: var(--paso-0);
  line-height: 1.7;
  color: var(--cafe-700);
  max-width: 30rem;
  margin-bottom: var(--esp-l);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-xs);
  margin-bottom: var(--esp-m);
}

.hero__nota {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  font-size: var(--paso--1);
  color: var(--cafe-500);
  max-width: 30rem;
}

.hero__nota svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-s) var(--esp-l);
  margin-top: var(--esp-l);
  padding-top: var(--esp-l);
  border-top: 1px solid var(--arena-200);
  list-style: none;
  padding-left: 0;
}

.hero__datos li {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  font-size: var(--paso--1);
  font-weight: 600;
  color: var(--cafe-700);
}

.hero__datos svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Foto con mancha verde detrás (abajo a la izquierda) y una mancha arena
   pequeña arriba a la derecha, como en la plantilla. */
.hero__figura {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 28rem;
}

.hero__figura::before {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -5%;
  width: 72%;
  height: 58%;
  border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
  background-color: var(--salvia-300);
  z-index: 0;
}

.hero__figura::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -5%;
  width: 40%;
  height: 34%;
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  background-color: var(--marron-100);
  z-index: 0;
}

/* Boceto de perfil con "hilo de pensamientos" (decorativo) */
.hero__boceto {
  display: none;
  position: absolute;
  left: -30%;
  top: 6%;
  width: 46%;
  height: auto;
  z-index: 0;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.hero__imagen {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Recorte: del pecho hacia arriba, como en la plantilla */
  object-position: 50% 10%;
  border-radius: 46% 54% 48% 52% / 40% 40% 60% 60%;
  box-shadow: var(--sombra-l);
  background-color: var(--arena-200);
}

@media (min-width: 62rem) {
  .hero__interior {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-2xl);
  }

  .hero__figura {
    justify-self: end;
    max-width: 30rem;
  }

  .hero__boceto {
    display: block;
  }
}


/* ==========================================================================
   8. Sobre mí
   ========================================================================== */

.sobre-mi__interior {
  display: grid;
  gap: var(--esp-xl);
  align-items: start;
}

.sobre-mi__figura {
  margin: 0;
  position: relative;
  max-width: 24rem;
}

/* Contenedor del "medio": hoy una foto, más adelante un video de
   presentación. Al cambiar <img> por <video> el recorte y la forma se
   conservan (ver README, sección 4). */
.sobre-mi__medio {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12rem 12rem var(--radio-l) var(--radio-l);
  background-color: var(--arena-200);
  box-shadow: var(--sombra-m);
}

.sobre-mi__imagen,
.sobre-mi__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.sobre-mi__pie {
  margin-top: var(--esp-xs);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

.sobre-mi__firma {
  font-family: var(--fuente-firma);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--cafe-900);
  margin: var(--esp-l) 0 var(--esp-3xs);
}

.sobre-mi__cargo {
  font-size: var(--paso--1);
  color: var(--cafe-500);
  letter-spacing: 0.02em;
}

.sobre-mi__credenciales {
  list-style: none;
  padding: 0;
  margin: var(--esp-l) 0 0;
  display: grid;
  gap: var(--esp-xs);
}

.sobre-mi__credenciales li {
  display: flex;
  gap: var(--esp-2xs);
  align-items: flex-start;
  margin-top: 0;
  padding: var(--esp-xs) var(--esp-s);
  background-color: var(--arena-100);
  border-radius: var(--radio-m);
  font-size: var(--paso--1);
  color: var(--cafe-700);
}

.sobre-mi__credenciales svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 48rem) {
  .sobre-mi__credenciales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .sobre-mi__interior {
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--esp-3xl);
  }
}


/* ==========================================================================
   9. Enfoque (TCC)
   ========================================================================== */

.enfoque__interior {
  display: grid;
  gap: var(--esp-xl);
}

.enfoque__texto p {
  margin-bottom: var(--esp-m);
}

.ciclo {
  display: grid;
  gap: var(--esp-s);
  padding: var(--esp-m);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
}

.ciclo__titulo {
  font-size: var(--paso-0);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: 0;
}

.ciclo__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-xs);
}

.ciclo__item {
  display: flex;
  align-items: center;
  gap: var(--esp-s);
  margin-top: 0;
  padding: var(--esp-s);
  border-radius: var(--radio-m);
  background-color: var(--arena-100);
}

.ciclo__item svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ciclo__etiqueta {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-1);
  font-weight: 600;
  line-height: 1.2;
}

.ciclo__detalle {
  display: block;
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
  line-height: 1.5;
}

.ciclo__flecha {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: auto;
  stroke: var(--salvia-500);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 62rem) {
  .enfoque__interior {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--esp-3xl);
    align-items: center;
  }
}

/* ==========================================================================
   10. Áreas de atención
   ========================================================================== */

/* Lista de áreas con icono redondo, sin tarjetas (estilo de la plantilla) */
.rejilla-areas {
  display: grid;
  gap: var(--esp-l) var(--esp-xl);
  grid-template-columns: 1fr;
}

.tarjeta-area {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
}

.tarjeta-area__icono {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--esp-2xs);
  border-radius: var(--radio-full);
  background-color: var(--salvia-100);
  transition: background-color var(--transicion), transform var(--transicion);
}

.tarjeta-area:hover .tarjeta-area__icono {
  background-color: var(--salvia-300);
  transform: translateY(-3px);
}

.tarjeta-area__icono svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tarjeta-area__titulo {
  font-size: var(--paso-1);
  font-weight: 500;
  color: var(--salvia-800);
  margin-bottom: 0;
}

.tarjeta-area__texto {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
  max-width: 20rem;
}

@media (min-width: 34rem) {
  .rejilla-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .rejilla-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-xl) var(--esp-2xl);
  }
}


/* ==========================================================================
   11. ¿Para quién?
   ========================================================================== */

.rejilla-publico {
  display: grid;
  gap: var(--esp-m);
}

.bloque-publico {
  padding: var(--esp-l) var(--esp-m);
  background-color: var(--arena-50);
  border-radius: var(--radio-l);
  border: 1px solid var(--arena-200);
  position: relative;
  overflow: hidden;
}

.bloque-publico::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--salvia-500);
}

.bloque-publico:nth-child(2)::before { background-color: var(--salvia-500); }
.bloque-publico:nth-child(3)::before { background-color: var(--marron-300); }

.bloque-publico__edad {
  display: inline-block;
  font-size: var(--paso--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: var(--esp-2xs);
}

.bloque-publico__titulo {
  font-size: var(--paso-2);
  margin-bottom: var(--esp-2xs);
}

.bloque-publico p {
  color: var(--cafe-700);
  font-size: 0.98rem;
}

@media (min-width: 48rem) {
  .rejilla-publico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   12. Cómo funciona
   ========================================================================== */

.pasos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-m);
  counter-reset: paso;
}

.paso {
  position: relative;
  margin-top: 0;
  padding: var(--esp-l) var(--esp-m) var(--esp-m);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
}

.paso__numero {
  position: absolute;
  top: calc(-1 * var(--esp-s));
  left: var(--esp-m);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-full);
  background-color: var(--salvia-700);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: var(--paso-1);
  font-weight: 600;
  box-shadow: var(--sombra-s);
}

.paso__titulo {
  margin-top: var(--esp-s);
  margin-bottom: var(--esp-2xs);
  font-size: var(--paso-1);
}

.paso p {
  color: var(--cafe-700);
  font-size: 0.98rem;
}

.paso__detalle {
  margin-top: var(--esp-s);
  padding: var(--esp-xs) var(--esp-s);
  border-radius: var(--radio-m);
  background-color: var(--arena-100);
  font-size: var(--paso--1);
  color: var(--cafe-700);
}

.pasos-cta {
  margin-top: var(--esp-xl);
  text-align: center;
}

@media (min-width: 48rem) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-l);
  }
}


/* Tarifas (dentro de "Cómo funciona") */
.tarifas {
  display: grid;
  gap: var(--esp-l);
  align-items: center;
  margin-top: var(--esp-2xl);
  padding-top: var(--esp-xl);
  border-top: 1px solid var(--color-borde);
}

.tarifas__intro h3 {
  font-size: var(--paso-3);
}

.tarifas__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-s);
}

.tarifa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3xs);
  margin: 0;
  padding: var(--esp-m);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
}

.tarifa--destacada {
  border-color: var(--salvia-500);
  background-color: var(--salvia-100);
}

.tarifa__etiqueta {
  position: absolute;
  top: -0.8rem;
  left: var(--esp-m);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radio-full);
  background-color: var(--salvia-600);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tarifa__nombre {
  font-weight: 700;
  color: var(--cafe-700);
}

.tarifa__precio {
  font-family: var(--fuente-titulo);
  font-size: var(--paso-4);
  line-height: 1.1;
  color: var(--cafe-900);
}

.tarifa__precio small {
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso--1);
  font-weight: 600;
  color: var(--cafe-500);
}

.tarifa__detalle {
  font-size: var(--paso--1);
  color: var(--cafe-500);
}

@media (min-width: 48rem) {
  .tarifas__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .tarifas {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--esp-3xl);
  }
}

/* ==========================================================================
   13. Agenda (Calendly)
   ========================================================================== */

.agenda {
  background:
    radial-gradient(48rem 32rem at 50% 0%, var(--marron-100) 0%, transparent 65%),
    var(--arena-100);
}

.agenda__caja {
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-m);
  padding: var(--esp-s);
  overflow: hidden;
}

/* Contenedor del calendario de Calendly (sin la clase calendly-inline-widget
   a propósito: widget.js la inicializa solo y se duplicaría).
   La altura se define aquí para evitar saltos de layout (CLS). */
.agenda__calendario {
  min-width: 100%;
  width: 100%;
  height: 680px;
  border-radius: var(--radio-m);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .agenda__caja {
    padding: var(--esp-m);
  }

  .agenda__calendario {
    height: 760px;
  }
}

/* Aviso visible mientras CALENDLY_URL siga pendiente */
.agenda__pendiente {
  display: grid;
  place-items: center;
  gap: var(--esp-s);
  text-align: center;
  min-height: 20rem;
  padding: var(--esp-xl) var(--esp-m);
  border: 2px dashed var(--marron-300);
  border-radius: var(--radio-m);
  background-color: var(--arena-50);
}

.agenda__pendiente h3 {
  margin-bottom: 0;
}

.agenda__alternativa {
  margin-top: var(--esp-m);
  text-align: center;
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

/* ==========================================================================
   14. Preguntas frecuentes (acordeón)
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--esp-xs);
}

.faq__item {
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.faq__item:has(.faq__boton[aria-expanded="true"]) {
  border-color: var(--marron-300);
  box-shadow: var(--sombra-s);
}

.faq__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-s);
  width: 100%;
  padding: var(--esp-s) var(--esp-m);
  background-color: transparent;
  border: 0;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cafe-900);
  transition: background-color var(--transicion), color var(--transicion);
}

.faq__boton:hover {
  background-color: var(--arena-100);
  color: var(--salvia-700);
}

.faq__boton:focus-visible {
  outline-offset: -3px;
}

.faq__signo {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radio-full);
  background-color: var(--arena-100);
  transition: background-color var(--transicion), transform var(--transicion);
}

.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--salvia-700);
  transform: translate(-50%, -50%);
  transition: transform var(--transicion), opacity var(--transicion);
}

.faq__signo::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__boton[aria-expanded="true"] .faq__signo {
  background-color: var(--marron-100);
}

.faq__boton[aria-expanded="true"] .faq__signo::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion-lenta);
}

.faq__panel[data-abierto="true"] {
  grid-template-rows: 1fr;
}

.faq__panel > div {
  overflow: hidden;
}

.faq__contenido {
  padding: 0 var(--esp-m) var(--esp-m);
  color: var(--cafe-700);
  font-size: 0.98rem;
}

.faq__contenido p + p {
  margin-top: var(--esp-2xs);
}

/* ==========================================================================
   15. Contacto y formulario
   ========================================================================== */

.contacto__interior {
  display: grid;
  gap: var(--esp-xl);
  align-items: start;
}

.contacto__medios {
  display: grid;
  gap: var(--esp-s);
  margin: var(--esp-l) 0 0;
  padding: 0;
  list-style: none;
}

.contacto__medios li {
  margin-top: 0;
}

.medio {
  display: flex;
  align-items: center;
  gap: var(--esp-s);
  padding: var(--esp-s) var(--esp-m);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  text-decoration: none;
  color: var(--cafe-900);
  box-shadow: var(--sombra-s);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.medio:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-m);
  border-color: var(--marron-300);
  color: var(--cafe-900);
}

.medio__icono {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radio-full);
  background-color: var(--salvia-100);
}

.medio__icono svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medio__etiqueta {
  display: block;
  font-size: var(--paso--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.medio__valor {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--paso-0);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
}

@media (min-width: 26rem) {
  .medio__valor {
    font-size: var(--paso-1);
  }
}

/* Formulario */
.formulario {
  padding: var(--esp-m);
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-m);
}

.campo {
  margin-bottom: var(--esp-s);
}

.campo__etiqueta {
  display: block;
  margin-bottom: var(--esp-3xs);
  font-size: var(--paso--1);
  font-weight: 700;
  color: var(--cafe-700);
}

.campo__requerido {
  color: var(--salvia-700);
}

.campo__control {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background-color: var(--arena-50);
  border: 1px solid var(--arena-300);
  border-radius: var(--radio-m);
  font-size: var(--paso-0);
  color: var(--cafe-900);
  transition: border-color var(--transicion), background-color var(--transicion),
    box-shadow var(--transicion);
}

.campo__control::placeholder {
  color: #7C6A55;
}

.campo__control:hover {
  border-color: var(--marron-300);
}

.campo__control:focus {
  background-color: var(--blanco);
  border-color: var(--salvia-700);
  outline: none;
  box-shadow: 0 0 0 3px var(--marron-100);
}

.campo__control:focus-visible {
  outline: 2px solid var(--salvia-700);
  outline-offset: 1px;
}

textarea.campo__control {
  min-height: 8rem;
  resize: vertical;
}

.campo__ayuda {
  display: block;
  margin-top: var(--esp-3xs);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

.formulario__pie {
  margin-top: var(--esp-m);
}

.formulario__nota {
  margin-top: var(--esp-s);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
  text-align: center;
}

.formulario__estado {
  margin-top: var(--esp-s);
  padding: var(--esp-xs) var(--esp-s);
  border-radius: var(--radio-m);
  font-size: var(--paso--1);
  background-color: var(--salvia-100);
  color: var(--salvia-700);
  border: 1px solid var(--salvia-300);
}

.formulario__estado[hidden] {
  display: none;
}

/* Trampa antispam: invisible para personas, disponible para bots */
.trampa-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 62rem) {
  .contacto__interior {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--esp-3xl);
  }
}

/* ==========================================================================
   16. Nota de emergencias
   ========================================================================== */

.aviso-urgencias {
  display: flex;
  gap: var(--esp-s);
  align-items: flex-start;
  margin-top: var(--esp-xl);
  padding: var(--esp-m);
  background-color: var(--arena-100);
  border: 1px solid var(--arena-300);
  border-left: 4px solid var(--salvia-500);
  border-radius: var(--radio-m);
  font-size: 0.95rem;
  color: var(--cafe-700);
  line-height: 1.65;
}

.aviso-urgencias svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aviso-urgencias strong {
  display: block;
  margin-bottom: var(--esp-3xs);
  font-family: var(--fuente-titulo);
  font-size: var(--paso-0);
}

.aviso-urgencias a {
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.pie {
  background-color: var(--cafe-900);
  color: var(--arena-100);
  padding-block: var(--esp-2xl) var(--esp-l);
}

.pie a {
  color: var(--arena-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 236, 223, 0.3);
  transition: border-color var(--transicion), color var(--transicion);
}

.pie a:hover {
  color: var(--blanco);
  border-bottom-color: var(--marron-300);
}

.pie__rejilla {
  display: grid;
  gap: var(--esp-l);
}

.pie__marca .marca__nombre {
  color: var(--arena-50);
  font-size: var(--paso-1);
}

.pie__marca .marca__rol {
  color: var(--arena-300);
}

.pie__descripcion {
  margin-top: var(--esp-s);
  max-width: 26rem;
  color: var(--arena-200);
  font-size: 0.95rem;
}

.pie__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: var(--paso--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arena-300);
  margin-bottom: var(--esp-xs);
}

.pie__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-2xs);
  font-size: 0.95rem;
}

.pie__lista li {
  margin-top: 0;
}

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

.pie__redes li {
  margin-top: 0;
}

.pie__red {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(244, 236, 223, 0.25);
  border-radius: var(--radio-full);
  transition: background-color var(--transicion), border-color var(--transicion);
}

.pie__red:hover {
  background-color: rgba(244, 236, 223, 0.1);
  border-color: var(--marron-300);
}

.pie__red svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--arena-100);
}

.pie__urgencias {
  margin-top: var(--esp-xl);
  padding: var(--esp-m);
  border: 1px solid rgba(244, 236, 223, 0.2);
  border-radius: var(--radio-m);
  background-color: rgba(244, 236, 223, 0.06);
  font-size: 0.92rem;
  color: var(--arena-200);
  line-height: 1.65;
}

.pie__urgencias strong {
  color: var(--arena-50);
}

.pie__legal {
  margin-top: var(--esp-l);
  padding-top: var(--esp-m);
  border-top: 1px solid rgba(244, 236, 223, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-m);
  align-items: center;
  justify-content: space-between;
  font-size: var(--paso--1);
  color: var(--arena-300);
}

.pie__cedula {
  color: var(--arena-200);
}

@media (min-width: 48rem) {
  .pie__rejilla {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--esp-xl);
  }
}

/* ==========================================================================
   18. Blog
   ========================================================================== */

.encabezado-pagina {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--esp-l);
  background:
    radial-gradient(46rem 26rem at 20% 0%, var(--salvia-100) 0%, transparent 60%),
    var(--arena-50);
}

.encabezado-pagina__titulo {
  max-width: 22ch;
}

.encabezado-pagina p {
  max-width: var(--ancho-texto);
  font-size: var(--paso-1);
  color: var(--cafe-700);
}

.migas {
  margin-bottom: var(--esp-s);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.migas li {
  margin-top: 0;
}

.migas li + li::before {
  content: "/";
  margin-right: var(--esp-3xs);
  color: var(--arena-300);
}

.rejilla-articulos {
  display: grid;
  gap: var(--esp-m);
}

.tarjeta-articulo {
  display: flex;
  flex-direction: column;
  background-color: var(--blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra-s);
  transition: transform var(--transicion), box-shadow var(--transicion),
    border-color var(--transicion);
}

.tarjeta-articulo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
  border-color: var(--marron-300);
}

.tarjeta-articulo__imagen {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--arena-200);
}

.tarjeta-articulo__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--esp-2xs);
  padding: var(--esp-m);
}

.tarjeta-articulo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2xs);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

.etiqueta {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radio-full);
  background-color: var(--salvia-100);
  color: var(--salvia-700);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tarjeta-articulo__titulo {
  font-size: var(--paso-2);
  margin-bottom: 0;
}

.tarjeta-articulo__titulo a {
  color: var(--cafe-900);
  text-decoration: none;
}

.tarjeta-articulo__titulo a:hover {
  color: var(--salvia-700);
}

/* El enlace del título cubre toda la tarjeta sin romper la semántica */
.tarjeta-articulo__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tarjeta-articulo {
  position: relative;
}

.tarjeta-articulo__resumen {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

.tarjeta-articulo__pie {
  margin-top: auto;
  padding-top: var(--esp-s);
  font-size: var(--paso--1);
  font-weight: 700;
  color: var(--salvia-700);
}

@media (min-width: 42rem) {
  .rejilla-articulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .rejilla-articulos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Artículo individual */
.articulo {
  padding-block: var(--esp-xl) var(--seccion-y);
}

.articulo__portada {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-m);
  background-color: var(--arena-200);
  margin-bottom: var(--esp-xl);
}

.articulo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2xs) var(--esp-s);
  margin-bottom: var(--esp-m);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

.articulo__cuerpo {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.8;
}

.articulo__cuerpo > * + * {
  margin-top: var(--esp-s);
}

.articulo__cuerpo h2 {
  font-size: var(--paso-3);
  margin-top: var(--esp-xl);
  margin-bottom: var(--esp-2xs);
}

.articulo__cuerpo h3 {
  font-size: var(--paso-1);
  margin-top: var(--esp-l);
  margin-bottom: var(--esp-2xs);
}

.articulo__cuerpo ul,
.articulo__cuerpo ol {
  padding-left: 1.4em;
}

.articulo__cuerpo img {
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-s);
}

.articulo__cuerpo figcaption {
  margin-top: var(--esp-2xs);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
  text-align: center;
}

.cta-articulo {
  max-width: var(--ancho-texto);
  margin: var(--esp-2xl) auto 0;
  padding: var(--esp-l) var(--esp-m);
  text-align: center;
  background-color: var(--arena-100);
  border: 1px solid var(--arena-200);
  border-radius: var(--radio-l);
}

.cta-articulo h2 {
  font-size: var(--paso-2);
}

.cta-articulo p {
  max-width: 32rem;
  margin-inline: auto;
  margin-bottom: var(--esp-m);
  color: var(--cafe-700);
}

/* Banda de cierre reutilizable */
.banda-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--salvia-100);
  text-align: center;
}

.banda-cta__interior {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}

.banda-cta__icono {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto var(--esp-s);
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banda-cta h2 {
  font-weight: 400;
}

.banda-cta p {
  font-size: var(--paso-0);
  color: var(--cafe-700);
  max-width: 30rem;
  margin-inline: auto;
  margin-bottom: var(--esp-l);
}

.banda-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-xs);
  justify-content: center;
}

.banda-cta__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-s) var(--esp-l);
  margin: var(--esp-l) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--paso--1);
  color: var(--cafe-700);
}

.banda-cta__contacto li {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  margin: 0;
}

.banda-cta__contacto svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  fill: var(--salvia-700);
}

.banda-cta__contacto a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--salvia-300);
}

.banda-cta__contacto a:hover {
  color: var(--salvia-800);
  border-bottom-color: var(--salvia-700);
}

/* Decoración: rama a la izquierda y letra psi a la derecha */
.banda-cta__hoja {
  position: absolute;
  left: -1.5rem;
  bottom: -1rem;
  width: clamp(7rem, 16vw, 15rem);
  height: auto;
  z-index: 0;
  stroke: var(--salvia-700);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  pointer-events: none;
}

.banda-cta__psi {
  display: none;
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(8rem, 18vw, 15rem);
  line-height: 1;
  color: var(--salvia-300);
  user-select: none;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .banda-cta__psi {
    display: block;
  }
}


/* Formas de fondo, como en la plantilla: manchas orgánicas muy suaves */
.hero::before {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 46vw;
  height: 46vw;
  max-width: 44rem;
  max-height: 44rem;
  border-radius: 48% 52% 42% 58% / 55% 40% 60% 45%;
  background-color: var(--salvia-100);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.hero__interior {
  position: relative;
  z-index: 1;
}

.hero__boceto {
  left: -40%;
  top: -2%;
  width: 56%;
  opacity: 0.85;
}

.banda-cta::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -45%;
  width: 40%;
  height: 120%;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background-color: var(--salvia-300);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.banda-cta::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -55%;
  width: 34%;
  height: 110%;
  border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
  background-color: var(--marron-100);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}


/* Ajustes del boceto y de la banda final: los dibujos van por encima de
   las manchas de fondo, nunca debajo. */
.hero__boceto {
  left: -48%;
  top: -6%;
  width: 60%;
  z-index: 1;
  stroke-width: 1.2;
  opacity: 0.8;
}

.hero__imagen {
  aspect-ratio: 7 / 8;
  object-position: 50% 20%;
  border-radius: 42% 58% 46% 54% / 44% 36% 64% 56%;
}

.sobre-mi__imagen,
.sobre-mi__video {
  object-position: 50% 22%;
}

.banda-cta__hoja {
  left: -1rem;
  bottom: -0.5rem;
  width: clamp(8rem, 17vw, 16rem);
  z-index: 1;
  stroke-width: 1.2;
  opacity: 0.75;
}

.banda-cta__psi {
  z-index: 1;
  color: var(--salvia-500);
  opacity: 0.55;
}

/* ==========================================================================
   19. Páginas de texto legal
   ========================================================================== */

.legal {
  padding-block: var(--esp-xl) var(--seccion-y);
}

.legal__cuerpo {
  max-width: 44rem;
  margin-inline: auto;
}

.legal__cuerpo h2 {
  font-size: var(--paso-2);
  margin-top: var(--esp-xl);
  margin-bottom: var(--esp-2xs);
  padding-top: var(--esp-s);
  border-top: 1px solid var(--color-borde);
}

.legal__cuerpo h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--esp-l);
}

.legal__cuerpo h3 {
  font-size: var(--paso-1);
  margin-top: var(--esp-l);
}

.legal__actualizacion {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radio-full);
  background-color: var(--arena-100);
  border: 1px solid var(--arena-200);
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

/* ==========================================================================
   20. Animaciones y accesibilidad
   ========================================================================== */

/* Aparición suave al hacer scroll; el JS agrega .es-visible */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.32, 0.72, 0.35, 1);
  will-change: opacity, transform;
}

.revelar.es-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Si el JS no corre, el contenido nunca queda invisible */
.sin-js .revelar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }

  .boton:hover,
  .tarjeta-area:hover,
  .tarjeta-articulo:hover,
  .medio:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-texto-suave: var(--cafe-700);
    --color-borde: var(--arena-300);
  }
}

/* Impresión: sin fondos oscuros ni elementos interactivos */
@media print {
  .encabezado,
  .nav,
  .agenda,
  .banda-cta,
  .formulario,
  .pie__redes {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}

/* Boceto del hero: pegado a la foto, sin invadir la columna de texto */
@media (min-width: 62rem) {
  .hero__boceto {
    left: -32%;
    top: 0;
    width: 52%;
  }
}

/* Psi como trazo suave (SVG), como en la plantilla */
.banda-cta__psi {
  width: clamp(7rem, 16vw, 13rem);
  height: auto;
  fill: none;
  stroke: var(--salvia-500);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.banda-cta__hoja {
  width: clamp(9rem, 20vw, 18rem);
  left: -2rem;
  bottom: -1.5rem;
}

/* Foto de "Sobre mí": rectángulo con esquinas suaves, un poco más alto */
.sobre-mi__figura {
  max-width: 26rem;
}

.sobre-mi__medio {
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-l);
}

.sobre-mi__imagen,
.sobre-mi__video {
  object-position: 50% 30%;
}


/* El boceto completo (cabeza + rama) queda a la izquierda de la foto */
@media (min-width: 62rem) {
  .hero__boceto {
    left: -44%;
    top: -2%;
    width: 54%;
  }
}

/* Trazos un poco más marcados para que los dibujos se lean bien */
.hero__boceto {
  stroke-width: 1.7;
  opacity: 0.9;
}

.banda-cta__hoja {
  width: clamp(10rem, 22vw, 20rem);
  bottom: -1rem;
  stroke-width: 1.6;
  opacity: 0.85;
}

/* ==========================================================================
   Bocetos como imagen (img/brain_sketch.png, img/leaf_sketch.png)
   ========================================================================== */

.hero__boceto {
  display: none;
  position: absolute;
  z-index: 1;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}

.hero__boceto--cerebro {
  left: -46%;
  top: -6%;
  width: 50%;
}

.hero__boceto--hoja {
  left: -50%;
  bottom: -2%;
  width: 56%;
}

@media (min-width: 62rem) {
  .hero__boceto {
    display: block;
  }
}

.banda-cta__hoja {
  position: absolute;
  left: -1rem;
  bottom: -0.5rem;
  width: clamp(11rem, 26vw, 22rem);
  height: auto;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}

.banda-cta__psi {
  width: clamp(7rem, 15vw, 12rem);
  stroke-width: 3.6;
  opacity: 0.65;
}

/* La hoja va abajo (anula el "top" heredado de reglas anteriores) */
.hero__boceto--hoja {
  top: auto;
  bottom: -3%;
}

.banda-cta__psi {
  width: clamp(8rem, 17vw, 14rem);
  stroke-width: 3.2;
}

/* Ajuste final de los bocetos: cerebro pegado a la foto (lejos del texto)
   y rama grande, como en la plantilla */
@media (min-width: 62rem) {
  .hero__boceto--cerebro {
    left: -26%;
    top: -5%;
    width: 38%;
  }

  .hero__boceto--hoja {
    left: -62%;
    top: auto;
    bottom: -8%;
    width: 84%;
  }
}

/* Rama completa a la izquierda de la foto, debajo del texto */
@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -76%;
    bottom: -10%;
    width: 74%;
  }
}

@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -72%;
    bottom: 2%;
    width: 70%;
  }
}

/* Rama del hero entre el texto y la foto, debajo del cerebro */
@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -46%;
    top: 34%;
    bottom: auto;
    width: 48%;
  }
}

/* Banda final: rama grande a la izquierda y psi de trazo suave */
.banda-cta__hoja {
  left: 1vw;
  bottom: -1.5rem;
  width: clamp(16rem, 30vw, 34rem);
}

.banda-cta__psi {
  width: clamp(8rem, 16vw, 14rem);
  stroke-width: 3;
}

@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -56%;
    top: 30%;
    width: 58%;
  }
}

.banda-cta__hoja {
  left: 0;
  bottom: -0.5rem;
  width: clamp(18rem, 36vw, 40rem);
}

/* Rama del hero un 50 % más grande (parte queda detrás de la foto) */
@media (min-width: 62rem) {
  .hero__boceto--hoja {
    width: 87%;
  }
}

/* Banda final: rama un 20 % más grande y algo más a la izquierda; psi como
   imagen verde */
.banda-cta__hoja {
  left: -2vw;
  width: clamp(22rem, 43vw, 48rem);
}

.banda-cta__psi {
  display: none;
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(8rem, 15vw, 13rem);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

@media (min-width: 48rem) {
  .banda-cta__psi {
    display: block;
  }
}

/* Escalado de la rama del hero manteniendo su centro (parte queda tras la foto) */
@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -70%;
    top: 21%;
    width: 87%;
  }
}

/* ==========================================================================
   Ajustes: psi más suave, ramas más nítidas y a la izquierda, datos del hero
   en una línea, credenciales de "Sobre mí" en una fila
   ========================================================================== */

.banda-cta__psi {
  opacity: 0.55;
}

/* Las ramas ya traen fondo transparente: sin mezcla ni opacidad extra */
.banda-cta__hoja {
  left: -7vw;
  mix-blend-mode: normal;
  opacity: 0.75;
}

@media (min-width: 62rem) {
  .hero__boceto--hoja {
    left: -84%;
    mix-blend-mode: normal;
    opacity: 0.8;
  }

  /* Los tres datos en una sola línea, no más ancha que el titular */
  .hero__datos {
    flex-wrap: nowrap;
    gap: 0.75rem;
    max-width: 29.5rem;
    font-size: 0.78rem;
  }

  .hero__datos li {
    white-space: nowrap;
    font-size: inherit;
  }
}

.sobre-mi__credenciales {
  margin-top: var(--esp-xl);
}

@media (min-width: 62rem) {
  .sobre-mi__credenciales {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--esp-s);
  }
}

/* Mientras el calendario llega, el hueco no se ve vacío. El iframe de
   Calendly, al pintarse, tapa este texto. */
.agenda__calendario {
  position: relative;
}

.agenda__calendario::before {
  content: "Cargando el calendario…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--paso--1);
  color: var(--color-texto-suave);
}

/* El iframe de Calendly es transparente: la tarjeta blanca del calendario se
   dibuja encima y el resto deja ver el color de esta caja. Por eso la caja va
   en verde suave: así la tarjeta crema del calendario se distingue. El color
   de la tarjeta se controla aparte, con el parámetro background_color en
   js/main.js (hoy f3efe8, el mismo crema de las secciones alternas). */
.agenda__caja {
  background-color: var(--salvia-100);
  border-color: var(--salvia-300);
}

.agenda__calendario.esta-cargado::before {
  content: none;
}

/* ==========================================================================
   Móvil: los dibujos decorativos también aparecen en pantallas pequeñas
   --------------------------------------------------------------------------
   En la versión de escritorio el cerebro y la rama van en el hueco entre el
   texto y la foto. En móvil ese hueco no existe (todo va en una columna), así
   que se colocan en las esquinas de la foto, más pequeños y suaves, sin
   taparla ni estorbar la lectura.
   ========================================================================== */

@media (max-width: 61.99rem) {
  .hero__boceto {
    display: block;
    opacity: 0.5;
  }

  .hero__boceto--cerebro {
    left: auto;
    right: -5%;
    top: -7%;
    bottom: auto;
    width: 38%;
  }

  .hero__boceto--hoja {
    left: -13%;
    right: auto;
    top: auto;
    bottom: -7%;
    width: 50%;
  }
}

/* La letra psi también en móvil (antes sólo aparecía desde 768 px) */
.banda-cta__psi {
  display: block;
}

@media (max-width: 47.99rem) {
  .banda-cta__psi {
    right: -1.5rem;
    top: 18%;
    transform: none;
    width: 6.5rem;
    opacity: 0.45;
  }

  /* La rama, más pequeña y en la esquina, para no cruzarse con los botones */
  .banda-cta__hoja {
    left: -2.5rem;
    bottom: -1.5rem;
    width: 11rem;
    opacity: 0.5;
  }

  /* Un poco más de aire arriba para que la psi no toque el título */
  .banda-cta__interior {
    padding-top: var(--esp-s);
  }

  /* El calendario aprovecha mejor el ancho del teléfono */
  .agenda__caja {
    padding: var(--esp-2xs);
  }
}

@media (max-width: 61.99rem) {
  /* La rama se ve mejor un poco más grande y asomando bajo la foto */
  .hero__boceto--hoja {
    left: -16%;
    bottom: -11%;
    width: 62%;
  }
}

@media (max-width: 47.99rem) {
  /* La psi baja para no rozar el título */
  .banda-cta__psi {
    top: auto;
    bottom: 12%;
    right: -1rem;
    width: 6rem;
    opacity: 0.4;
  }
}

/* Encuadre de la foto nueva de portada (formato 2:3, más alta): un poco más
   de aire sobre la cabeza. Si cambias la foto y sale cortada, ajusta sólo el
   segundo número. */
.hero__imagen {
  object-position: 50% 14%;
}

/* "Mi enfoque" dentro de Sobre mí (separado con una línea suave) */
.sobre-mi__enfoque {
  margin-top: var(--esp-2xl);
  padding-top: var(--esp-xl);
  border-top: 1px solid var(--color-borde);
  align-items: center;
}

.sobre-mi__enfoque-titulo {
  font-size: var(--paso-3);
}

/* Firma y cargo debajo de la foto de "Sobre mí" (antes iban al final del
   texto y dejaban un hueco bajo la imagen) */
.sobre-mi__pie {
  margin-top: var(--esp-m);
}

.sobre-mi__pie .sobre-mi__firma {
  display: block;
  margin: 0 0 var(--esp-3xs);
}

.sobre-mi__pie .sobre-mi__cargo {
  display: block;
  line-height: 1.5;
}

/* "Sobre mí" en escritorio: la foto baja un poco y la firma toma más aire,
   para que la columna de la foto termine a la altura del texto */
@media (min-width: 62rem) {
  .sobre-mi__figura {
    margin-top: var(--esp-m);
  }

  .sobre-mi__pie {
    margin-top: var(--esp-l);
  }
}