/* ==========================================================================
   Celia G de Arriba · Psicóloga
   Hoja de estilos principal
   Paleta y tipografía según manual de marca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colores de marca */
  --arena:      #F1E0CB;
  --nude:       #CFA999;
  --terracota:  #9F5434;
  --hueso:      #F5F2EE;
  --crema:      #F6EEE8;
  --rosa:       #F0D8D8;

  /* Verde salvia: acompaña al terracota sin competir con él.
     Se usa solo en el botón de WhatsApp, para que se distinga de las
     llamadas a reserva. */
  --salvia:     #3F6B52;
  --salvia-osc: #33573F;

  /* Derivados */
  --terracota-osc: #7E4128;
  --terracota-10:  rgba(159, 84, 52, .10);
  --terracota-18:  rgba(159, 84, 52, .18);
  --tinta:         #3A2A24;
  --tinta-media:   #6B574F;
  --tinta-suave:   #8A7872;
  --blanco:        #FFFFFF;

  /* Tipografía */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Escala fluida */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h3:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-h2:   clamp(1.875rem, 1.5rem + 1.6vw, 2.9rem);
  --fs-h1:   clamp(2.4rem, 1.7rem + 3.1vw, 4.4rem);

  /* Medidas */
  --ancho:    1200px;
  --ancho-sm: 820px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --sec-y:    clamp(4.5rem, 9vw, 8.5rem);

  /* Radios y sombras */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 44px;
  --sombra-sm: 0 2px 10px rgba(93, 56, 38, .05);
  --sombra-md: 0 14px 40px -18px rgba(93, 56, 38, .28);
  --sombra-lg: 0 30px 70px -30px rgba(93, 56, 38, .35);

  --t: 420ms cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--fs-base);
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--terracota);
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

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

a { color: var(--terracota); text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--nude); color: var(--blanco); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 999;
  background: var(--terracota); color: var(--blanco);
  padding: .7rem 1.2rem; border-radius: var(--r-sm);
  transition: top 200ms;
}
.saltar:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--sm { max-width: var(--ancho-sm); }

.seccion { padding-block: var(--sec-y); position: relative; }
.seccion--hueso { background: var(--hueso); }
.seccion--rosa  { background: var(--rosa); }
.seccion--arena { background: var(--arena); }

.centrado { text-align: center; }

.cabecera-seccion {
  max-width: 44rem;
  margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
  text-align: center;
}
.cabecera-seccion p {
  font-size: var(--fs-lg);
  color: var(--tinta-media);
  margin-bottom: 0;
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 1.4rem;
}
.antetitulo::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
  opacity: .5;
}
.cabecera-seccion .antetitulo::after {
  content: "";
  width: 2.2rem; height: 1px;
  background: currentColor;
  opacity: .5;
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--texto);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  padding: 1.05rem 2.1rem;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}

.btn--principal {
  background: var(--terracota);
  color: var(--blanco);
  box-shadow: 0 10px 26px -12px rgba(159, 84, 52, .7);
}
.btn--principal:hover {
  background: var(--terracota-osc);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(159, 84, 52, .8);
}

.btn--contorno {
  border-color: var(--terracota-18);
  color: var(--terracota);
  background: transparent;
}
.btn--contorno:hover {
  border-color: var(--terracota);
  background: var(--terracota-10);
  transform: translateY(-2px);
}

.btn--claro {
  background: var(--blanco);
  color: var(--terracota);
  box-shadow: var(--sombra-md);
}
.btn--claro:hover { transform: translateY(-2px); }

.btn--peq { padding: .78rem 1.5rem; font-size: var(--fs-xs); }

.btn .flecha { transition: transform var(--t); }
.btn:hover .flecha { transform: translateX(4px); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--terracota);
}
.enlace-flecha::after {
  content: "→";
  transition: transform var(--t);
}
.enlace-flecha:hover::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Cabecera / navegación
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 238, 232, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.cabecera.esta-scrolleada {
  background: rgba(246, 238, 232, .94);
  border-bottom-color: var(--terracota-10);
  box-shadow: 0 4px 24px -16px rgba(93, 56, 38, .5);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.25rem;
}

.logo { display: block; flex-shrink: 0; }
.logo img { width: clamp(132px, 15vw, 172px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }

.nav__enlace {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--tinta);
  text-decoration: none;
  padding-block: .4rem;
  white-space: nowrap;
  transition: color var(--t);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t);
}
.nav__enlace:hover { color: var(--terracota); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__enlace[aria-current="page"] { color: var(--terracota); }

/* El botón de reserva que vive dentro del menú es solo para el menú móvil.
   En escritorio el que se ve es el de .cabecera__acciones. */
.nav > .btn { display: none; }

.cabecera__acciones { display: flex; align-items: center; gap: 1rem; }

.hamburguesa {
  display: none;
  width: 2.9rem; height: 2.9rem;
  background: none; border: 0;
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
}
.hamburguesa span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--tinta);
  position: relative;
  transition: background 200ms;
}
.hamburguesa span::before,
.hamburguesa span::after {
  content: "";
  position: absolute; left: 0;
  width: 22px; height: 1.5px;
  background: var(--tinta);
  transition: transform var(--t), top var(--t);
}
.hamburguesa span::before { top: -7px; }
.hamburguesa span::after  { top: 7px; }
.hamburguesa[aria-expanded="true"] span { background: transparent; }
.hamburguesa[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1040px) {
  .hamburguesa { display: flex; }
  .cabecera__acciones .btn { display: none; }

  .nav {
    position: fixed;
    inset: 5.25rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--crema);
    padding: 1.5rem var(--gutter) 2.75rem;
    border-bottom: 1px solid var(--terracota-10);
    box-shadow: var(--sombra-lg);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
    max-height: calc(100dvh - 5.25rem);
    overflow-y: auto;
  }
  .nav.esta-abierta { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__enlace {
    font-size: 1.15rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--terracota-10);
  }
  .nav__enlace::after { display: none; }
  .nav > .btn { display: inline-flex; margin-top: 1.75rem; width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -28%; right: -14%;
  width: 56rem; height: 56rem;
  background: radial-gradient(circle at 40% 40%, rgba(240, 216, 216, .85), rgba(240, 216, 216, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -32%; left: -20%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle at 50% 50%, rgba(241, 224, 203, .7), rgba(241, 224, 203, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.hero h1 { margin-bottom: .35em; }

.hero__lema {
  font-size: var(--fs-xl);
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 30ch;
  margin-bottom: 2.4rem;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--terracota-18);
}
.hero__dato {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
  color: var(--tinta-media);
}
.hero__dato svg { color: var(--terracota); flex-shrink: 0; }

/* Retrato con forma de arco */
.hero__figura { position: relative; }
.hero__foto {
  position: relative;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 42% 42% var(--r-xl) var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  aspect-ratio: 4 / 5;
  background: var(--nude);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }

.hero__marca {
  position: absolute;
  right: -1.5rem; bottom: -1.5rem;
  width: clamp(7rem, 12vw, 10.5rem);
  opacity: .22;
  z-index: -1;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__lema { margin-inline: auto; }
  .hero__acciones, .hero__datos { justify-content: center; }
  .hero__figura { order: -1; max-width: 22rem; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   7. Cabecera de página interior
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute;
  top: -55%; left: 50%;
  transform: translateX(-50%);
  width: 60rem; height: 60rem;
  background: radial-gradient(circle, rgba(240, 216, 216, .75), rgba(240, 216, 216, 0) 65%);
  pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }
.portada p {
  font-size: var(--fs-lg);
  color: var(--tinta-media);
  max-width: 42rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   8. Tarjetas de servicios
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}

.tarjeta {
  position: relative;
  background: var(--blanco);
  border: 1px solid rgba(159, 84, 52, .08);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-md);
  border-color: var(--terracota-18);
}

.tarjeta__icono {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crema);
  color: var(--terracota);
  margin-bottom: 1.4rem;
}
.tarjeta__icono svg { width: 26px; height: 26px; }

.tarjeta h3 { font-size: var(--fs-xl); margin-bottom: .5rem; }
.tarjeta p {
  font-size: var(--fs-sm);
  color: var(--tinta-media);
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.tarjeta .enlace-flecha { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. Bloques alternos (En qué puedo ayudarte)
   -------------------------------------------------------------------------- */
.bloque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bloque + .bloque { border-top: 1px solid var(--terracota-10); }
.bloque:nth-child(even) .bloque__visual { order: -1; }

.bloque h2 { font-size: var(--fs-h3); }
.bloque p { color: var(--tinta-media); margin-bottom: 0; }

.bloque__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 30%, rgba(240, 216, 216, .9), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(241, 224, 203, .9), transparent 60%),
    var(--hueso);
  border-radius: var(--r-lg);
}
.bloque__visual svg { width: 58%; height: auto; color: var(--terracota); }

@media (max-width: 820px) {
  .bloque { grid-template-columns: 1fr; }
  .bloque:nth-child(even) .bloque__visual { order: 0; }
  .bloque__visual { max-width: 20rem; aspect-ratio: 1; }
}

/* --------------------------------------------------------------------------
   10. Proceso / pasos
   -------------------------------------------------------------------------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: paso;
  position: relative;
}
.pasos::before {
  content: "";
  position: absolute;
  top: 1.6rem; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terracota-18) 12%, var(--terracota-18) 88%, transparent);
}
.paso { position: relative; text-align: center; }
.paso__num {
  position: relative;
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto 1.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1.15rem;
  box-shadow: 0 0 0 7px var(--crema);
}
.seccion--hueso .paso__num { box-shadow: 0 0 0 7px var(--hueso); }
.paso h3 { font-size: var(--fs-lg); margin-bottom: .45rem; }
.paso p { font-size: var(--fs-sm); color: var(--tinta-media); margin-bottom: 0; }

@media (max-width: 860px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .pasos::before { display: none; }
}
@media (max-width: 480px) { .pasos { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11. Tarifas
   -------------------------------------------------------------------------- */
.tarifa {
  position: relative;
  background: var(--blanco);
  border: 1px solid rgba(159, 84, 52, .1);
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 3vw, 2.5rem) clamp(1.4rem, 2.5vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t);
}
.tarifa:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }

.tarifa--destacada {
  background: var(--terracota);
  border-color: var(--terracota);
  box-shadow: var(--sombra-md);
}
.tarifa--destacada h3,
.tarifa--destacada .tarifa__precio,
.tarifa--destacada .tarifa__nota { color: var(--blanco); }
.tarifa--destacada .tarifa__detalle { color: rgba(255, 255, 255, .78); }
.tarifa--destacada .btn { background: var(--blanco); color: var(--terracota); }

.tarifa__etiqueta {
  position: absolute;
  top: -.75rem; left: 50%;
  transform: translateX(-50%);
  background: var(--arena);
  color: var(--terracota);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}

.tarifa h3 {
  font-size: var(--fs-lg);
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.tarifa__precio {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--terracota);
  margin-bottom: .4rem;
}
.tarifa__detalle {
  font-size: var(--fs-sm);
  color: var(--tinta-media);
  margin-bottom: 1.75rem;
}
.tarifa .btn { width: 100%; margin-top: auto; }
.tarifa__nota {
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  margin-top: 1rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   12. Franja CTA
   -------------------------------------------------------------------------- */
.franja {
  position: relative;
  background: var(--terracota);
  color: var(--blanco);
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.franja::before {
  content: "";
  position: absolute;
  top: -45%; left: 50%;
  transform: translateX(-50%);
  width: 48rem; height: 48rem;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 62%);
}
.franja > * { position: relative; z-index: 1; }
.franja h2 { color: var(--blanco); max-width: 20ch; margin-inline: auto; }
.franja p {
  color: rgba(255, 255, 255, .85);
  max-width: 44ch;
  margin: 0 auto 2.2rem;
  font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   13. Bloque "sobre mí" con foto
   -------------------------------------------------------------------------- */
.perfil {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.perfil__foto {
  position: relative;
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 50% / var(--r-xl) var(--r-xl) 42% 42%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--sombra-lg);
  background: var(--nude);
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__texto p { color: var(--tinta-media); }

.firma {
  font-family: var(--display);
  font-size: var(--fs-xl);
  color: var(--terracota);
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .perfil { grid-template-columns: 1fr; }
  .perfil__foto { max-width: 20rem; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   14. Cita destacada
   -------------------------------------------------------------------------- */
.cita {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  line-height: 1.5;
  color: var(--terracota);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   15. Requisitos (terapia online)
   -------------------------------------------------------------------------- */
.requisito {
  background: var(--blanco);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3vw, 2.3rem);
  text-align: center;
  border: 1px solid rgba(159, 84, 52, .08);
}
.requisito svg { margin: 0 auto 1.1rem; color: var(--terracota); }
.requisito p { font-size: var(--fs-sm); color: var(--tinta-media); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 48rem; margin-inline: auto; }

.faq__item {
  border-bottom: 1px solid var(--terracota-18);
}
.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  padding: 1.45rem 0;
  font-family: var(--display);
  font-size: var(--fs-lg);
  color: var(--terracota);
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}
.faq__icono {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  position: relative;
}
.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: var(--terracota);
  transform: translate(-50%, -50%);
  transition: transform var(--t), opacity var(--t);
}
.faq__icono::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__pregunta[aria-expanded="true"] .faq__icono::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t);
}
.faq__respuesta > div { overflow: hidden; }
.faq__item.esta-abierto .faq__respuesta { grid-template-rows: 1fr; }
.faq__respuesta p {
  padding-bottom: 1.5rem;
  color: var(--tinta-media);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   17. Blog
   -------------------------------------------------------------------------- */
.articulo-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid rgba(159, 84, 52, .08);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t), box-shadow var(--t);
  height: 100%;
}
.articulo-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-md); }

.articulo-tarjeta__imagen {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 30% 35%, rgba(240, 216, 216, .95), transparent 62%),
    radial-gradient(circle at 72% 68%, rgba(241, 224, 203, .95), transparent 62%),
    var(--hueso);
  display: grid; place-items: center;
}
.articulo-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.articulo-tarjeta__imagen svg { width: 40%; color: var(--nude); }

.articulo-tarjeta__cuerpo {
  padding: 1.6rem 1.7rem 1.9rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.articulo-tarjeta__meta {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .7rem;
}
.articulo-tarjeta h3 { font-size: var(--fs-lg); margin-bottom: .6rem; }
.articulo-tarjeta p {
  font-size: var(--fs-sm);
  color: var(--tinta-media);
  margin-bottom: 1.2rem;
}
.articulo-tarjeta .enlace-flecha { margin-top: auto; }

.vacio {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--blanco);
  border: 1px dashed var(--terracota-18);
  border-radius: var(--r-lg);
}
.vacio svg { margin: 0 auto 1.4rem; color: var(--nude); }
.vacio p { color: var(--tinta-media); }

/* Artículo individual */
.prosa { max-width: 44rem; margin-inline: auto; }
.prosa h2 { font-size: var(--fs-h3); margin-top: 2.5em; }
.prosa h3 { font-size: var(--fs-xl); margin-top: 2em; }
.prosa p, .prosa li { color: var(--tinta-media); font-size: var(--fs-lg); line-height: 1.85; }
.prosa ul { list-style: none; margin: 0 0 1.5em; padding: 0; }
.prosa ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6em;
}
.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nude);
}
.prosa blockquote {
  margin: 2.5em 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--nude);
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--terracota);
}
.prosa img { border-radius: var(--r-md); margin-block: 2.5em; }

/* Lista de pensamientos entrecomillados dentro de un artículo */
.prosa .pensamientos {
  list-style: none;
  margin: 0 0 2.25em;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.1rem);
  background: var(--hueso);
  border-left: 2px solid var(--nude);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: grid;
  gap: .85em;
}
.prosa .pensamientos li {
  padding-left: 0;
  margin-bottom: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--terracota);
}
.prosa .pensamientos li::before { display: none; }

/* Imagen de portada del artículo */
.articulo__portada {
  margin: clamp(.5rem, 2vw, 1.5rem) auto 0;
  max-width: 62rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-md);
}
.articulo__portada img { width: 100%; height: auto; }

.articulo__meta {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--tinta-suave);
  margin-bottom: 1.5rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   18. Contacto
   -------------------------------------------------------------------------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }

.via {
  display: flex;
  gap: 1.2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--terracota-10);
}
.via:last-child { border-bottom: 0; }
.via__icono {
  flex-shrink: 0;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crema);
  color: var(--terracota);
}
.seccion--hueso .via__icono { background: var(--blanco); }
.via__icono--wa { color: var(--salvia); }
.via h3 { font-size: var(--fs-lg); margin-bottom: .25rem; }
.via p { font-size: var(--fs-sm); color: var(--tinta-media); margin-bottom: 0; }
.via a { word-break: break-word; }

.aviso {
  display: flex;
  gap: 1rem;
  background: var(--arena);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  margin-top: 2.5rem;
}
.aviso svg { flex-shrink: 0; color: var(--terracota); margin-top: .2rem; }
.aviso p { font-size: var(--fs-sm); color: var(--tinta); margin-bottom: 0; }

.caja-reserva {
  background: var(--blanco);
  border: 1px solid rgba(159, 84, 52, .1);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 4vw, 2.8rem);
  text-align: center;
  box-shadow: var(--sombra-sm);
}
.caja-reserva h3 { font-size: var(--fs-h3); }
.caja-reserva p { color: var(--tinta-media); margin-bottom: 1.8rem; }
.caja-reserva .btn { width: 100%; }

/* --------------------------------------------------------------------------
   19. Pie
   -------------------------------------------------------------------------- */
.pie {
  background: var(--terracota);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.pie__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
@media (max-width: 760px) { .pie__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.pie__logo img { width: 190px; margin-bottom: 1.5rem; }
.pie__grid p { font-size: var(--fs-sm); line-height: 1.8; max-width: 32ch; }

.pie h4 {
  color: var(--blanco);
  font-family: var(--texto);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.pie__lista li { margin-bottom: .75rem; }
.pie__lista a {
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--t);
}
.pie__lista a:hover { color: var(--blanco); }

.redes { display: flex; gap: .75rem; margin-top: 1.5rem; }
.redes a {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: var(--blanco);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.redes a:hover {
  background: rgba(255, 255, 255, .15);
  border-color: var(--blanco);
  transform: translateY(-2px);
}

.pie__base {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-xs);
}
.pie__base nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__base a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pie__base a:hover { color: var(--blanco); text-decoration: underline; }

/* --------------------------------------------------------------------------
   19 bis. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.wa-flotante {
  position: fixed;
  z-index: 90;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 3.5rem;
  padding: 0 1.35rem 0 1.05rem;
  border-radius: 100px;
  background: var(--salvia);
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--texto);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(30, 60, 42, .5);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.wa-flotante:hover {
  background: var(--salvia-osc);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(30, 60, 42, .6);
}
.wa-flotante svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* En móvil, solo el icono: ocupa menos y no tapa contenido */
@media (max-width: 560px) {
  .wa-flotante {
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    justify-content: center;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .wa-flotante__texto { display: none; }
}

/* --------------------------------------------------------------------------
   20. Animaciones de entrada
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms cubic-bezier(.22, 1, .36, 1),
              transform 800ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--retardo, 0ms);
}
.revelar.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .cabecera, .pie, .franja, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}