/* Esencia y Psique: sistema visual sacado de los posts de Instagram.
   Fondo rosa plano, tarjeta blanca de esquinas rectas con sombra desplazada, foto circular
   que muerde el borde de la tarjeta, títulos en arco y destellos blancos.
   La parte mágica: al bajar, el rosa se vuelve un cielo de noche con estrellas y oro. */

:root {
  --rosa: #eeb9a2;
  --rosa-claro: #f9ede8;
  --rosa-medio: #f4d3c4;
  --blanco: #ffffff;
  --oro: #b27a22;
  --oro-oscuro: #8a5c12;
  --oro-claro: #f6dcae;
  --oro-brillo: #ffe9bd;
  --cafe: #84553a;
  --cafe-oscuro: #6a3f27;
  --crema: #fff6ee;
  --noche: #2f1c2e;
  --noche-media: #4a2b3b;
  --sombra-tarjeta: 12px 16px 26px rgba(122, 72, 44, 0.3);
  --sombra-foto: 8px 12px 18px rgba(122, 72, 44, 0.32);
  --fuente-titulo: "Almendra", Georgia, serif;
  --fuente-arco: "Italiana", "Times New Roman", serif;
  --fuente-firma: "Allura", cursive;
  --fuente-texto: "Raleway", "Segoe UI", sans-serif;
  --ancho: 1120px;
  --lado: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

/* Paso suave de una página a otra; los círculos de cada terapia se transforman entre sí */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}

.portal--constelaciones {
  view-transition-name: portal-constelaciones;
}

.portal--biomagnetismo {
  view-transition-name: portal-biomagnetismo;
}

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

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

body {
  margin: 0;
  background: var(--rosa);
  color: var(--cafe);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.2;
  color: var(--oro);
  margin: 0;
  text-wrap: balance;
}

/* Almendra trae una ligadura "st" muy antigua que los posts no usan */
h1,
h2,
h3,
summary,
blockquote,
figcaption,
.marca,
.lista-oro,
.portada__pregunta,
.servicio-portada__pregunta,
.pestanas__boton {
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
}

p {
  margin: 0 0 1em;
}

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

a {
  color: var(--oro-oscuro);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--cafe-oscuro);
  outline-offset: 3px;
}

.noche :focus-visible {
  outline-color: var(--oro-brillo);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--blanco);
  padding: 10px 16px;
}

.saltar:focus {
  top: 12px;
}

.contenedor {
  width: min(100% - 2 * var(--lado), var(--ancho));
  margin-inline: auto;
}

.seccion {
  position: relative;
  padding-block: clamp(52px, 7vw, 88px);
}

.seccion--clara {
  background: var(--rosa-claro);
}

/* Secciones con lienzo o destellos: el contenido siempre por encima */
.con-magia {
  position: relative;
  overflow: hidden;
}

.con-magia > .contenedor {
  position: relative;
  z-index: 1;
}

.polvo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Aparecer al llegar: solo si hay JavaScript, para que sin él se vea todo */
.js [data-aparece] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0s);
}

.js [data-aparece].visible {
  opacity: 1;
  transform: none;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249, 237, 232, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(122, 72, 44, 0.14);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cafe-oscuro);
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  margin-right: auto;
}

.marca img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 2px 3px 8px rgba(122, 72, 44, 0.3);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.marca:hover img {
  transform: rotate(-8deg) scale(1.06);
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav a {
  color: var(--cafe-oscuro);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.975rem;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--oro-oscuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.menu-boton {
  display: none;
  background: none;
  border: 1px solid var(--cafe);
  color: var(--cafe-oscuro);
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-boton {
    display: block;
  }

  .marca span {
    display: none;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--rosa-claro);
    box-shadow: 0 10px 18px rgba(122, 72, 44, 0.2);
    display: none;
  }

  .nav.abierto {
    display: flex;
  }

  .nav a {
    padding: 14px var(--lado);
    border-top: 1px solid var(--rosa-medio);
  }
}

/* ---------- Botones ---------- */

.boton {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Un brillo que cruza el botón al pasar por encima */
.boton--principal::after,
.boton--oro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
  pointer-events: none;
}

.boton--principal:hover::after,
.boton--oro:hover::after {
  transform: translateX(120%);
}

.boton--principal {
  background: var(--oro-oscuro);
  color: var(--blanco);
  box-shadow: 4px 6px 14px rgba(122, 72, 44, 0.35);
}

.boton--principal:hover {
  background: #755010;
  transform: translateY(-2px);
}

.boton--suave {
  background: transparent;
  border-color: var(--oro-oscuro);
  color: var(--oro-oscuro);
}

.boton--suave:hover {
  background: var(--rosa-claro);
}

.boton--blanco {
  background: var(--blanco);
  color: var(--cafe-oscuro);
  box-shadow: 4px 6px 14px rgba(122, 72, 44, 0.3);
}

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

.boton--oro {
  background: linear-gradient(135deg, #fbe7b5, #eebf63 55%, #dba544);
  color: #47290f;
  box-shadow: 0 6px 22px rgba(238, 191, 99, 0.32);
}

.boton--oro:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(238, 191, 99, 0.5);
}

.boton--cristal {
  background: rgba(255, 246, 238, 0.1);
  border-color: rgba(246, 220, 174, 0.65);
  color: var(--crema);
}

.boton--cristal:hover {
  background: rgba(255, 246, 238, 0.2);
  transform: translateY(-2px);
}

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Destellos ---------- */

.destellos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.destello {
  position: absolute;
  width: var(--t, 60px);
  height: var(--t, 60px);
  fill: var(--blanco);
  animation: titilar 5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform-origin: center;
}

@keyframes titilar {
  0%,
  100% {
    opacity: 0.95;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.76) rotate(12deg);
  }
}

.titila {
  animation: titilar-suave var(--t, 4s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes titilar-suave {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.2;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 860px) {
  [data-destellos="portada"] .destello:nth-child(2),
  [data-destellos="portada"] .destello:nth-child(3),
  [data-destellos="portada"] .destello:nth-child(4),
  [data-destellos="portada"] .destello:nth-child(6) {
    display: none;
  }
}

/* ---------- Constelación de estrellas ---------- */

.cielo__linea {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-opacity: 0.8;
  stroke-linecap: round;
}

.cielo__nodo {
  fill: #fff;
}

.portada__constelacion {
  position: absolute;
  left: 37%;
  top: 2%;
  width: clamp(120px, 14vw, 190px);
  opacity: 0.75;
  pointer-events: none;
}

.portada__constelacion .cielo__linea {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s ease-in-out 0.5s;
}

.portada__constelacion.visible .cielo__linea {
  stroke-dashoffset: 0;
}

/* ---------- Portada ---------- */

.portada {
  padding-top: clamp(16px, 2.4vw, 32px);
}

.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: end;
}

.portada__texto {
  padding-block: clamp(28px, 5vw, 72px);
  align-self: center;
}

.portada__entrada {
  font-family: var(--fuente-firma);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--cafe-oscuro);
  margin-bottom: 8px;
}

.portada__titulo {
  color: var(--cafe-oscuro);
  font-size: clamp(2.7rem, 5.8vw, 4.4rem);
  line-height: 1.05;
  margin-bottom: 6px;
  padding-bottom: 0.16em;
}

/* Un destello dorado cruza el nombre de vez en cuando */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .portada__titulo {
    background: linear-gradient(105deg, var(--cafe-oscuro) 42%, #d29a3d 50%, var(--cafe-oscuro) 58%) 100% 0 / 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brillo-titulo 11s ease-in-out infinite;
  }

  @keyframes brillo-titulo {
    0%,
    62% {
      background-position: 100% 0;
    }
    88%,
    100% {
      background-position: 0 0;
    }
  }
}

.rotador {
  display: grid;
}

.rotador > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

html:not(.js) .rotador > :first-child,
.rotador > .activa {
  opacity: 1;
  transform: none;
}

.portada__pregunta {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.28;
  color: var(--cafe-oscuro);
  max-width: 21em;
  margin-bottom: 14px;
}

.portada__lugar {
  color: var(--cafe-oscuro);
  font-weight: 500;
  max-width: 34em;
  margin-bottom: 24px;
}

.composicion {
  width: 100%;
  height: auto;
  overflow: visible;
}

.composicion__arco {
  font-family: var(--fuente-arco);
  font-size: 176px;
  fill: var(--blanco);
  letter-spacing: 3px;
  filter: drop-shadow(2px 3px 2px rgba(122, 72, 44, 0.38));
}

.letra {
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--i) * 60ms + 0.15s);
}

.visible .letra {
  opacity: 1;
}

html:not(.js) .letra {
  opacity: 1;
}

.composicion__halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: latir 7s ease-in-out infinite;
}

@keyframes latir {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.composicion__orbita {
  transform-origin: 720px 756px;
  animation: girar 70s linear infinite;
}

.composicion__logo {
  transform-box: fill-box;
  transform-origin: center;
  animation: respirar 7s ease-in-out infinite;
  filter: drop-shadow(12px 18px 16px rgba(122, 72, 44, 0.34));
}

@keyframes respirar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 860px) {
  .portada__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada__composicion {
    order: 1;
    width: min(100%, 440px);
    justify-self: center;
  }

  .portada__texto {
    order: 2;
    padding-block: 4px 40px;
    text-align: center;
  }

  .portada__pregunta,
  .portada__lugar {
    margin-inline: auto;
  }

  .portada__texto .botones {
    justify-content: center;
  }

  .portada__constelacion {
    display: none;
  }
}

/* ---------- Noche: el rosa se oscurece al bajar y vuelve a aclararse al salir ---------- */

.noche {
  color: var(--crema);
  padding-block: 128px 176px;
  background:
    linear-gradient(180deg, var(--rosa) 0, #dfa997 44px, #b67c76 96px, #7c4c59 150px, #4f2f40 210px, rgba(79, 47, 64, 0) 270px) top / 100% 270px no-repeat,
    linear-gradient(0deg, var(--rosa-claro) 0, #e6bfb0 40px, #b67c76 88px, #7c4c59 136px, #4f2f40 190px, rgba(79, 47, 64, 0) 250px) bottom / 100% 250px no-repeat,
    radial-gradient(80% 50% at 50% 42%, #4f2e41 0, rgba(79, 46, 65, 0) 75%),
    var(--noche);
}

.noche--hacia-rosa {
  padding-bottom: 150px;
  background:
    linear-gradient(180deg, var(--rosa) 0, #dfa997 44px, #b67c76 96px, #7c4c59 150px, #4f2f40 210px, rgba(79, 47, 64, 0) 270px) top / 100% 270px no-repeat,
    linear-gradient(0deg, var(--rosa) 0, #dfa997 40px, #b67c76 88px, #7c4c59 136px, #4f2f40 190px, rgba(79, 47, 64, 0) 250px) bottom / 100% 250px no-repeat,
    radial-gradient(80% 50% at 50% 42%, #4f2e41 0, rgba(79, 46, 65, 0) 75%),
    var(--noche);
}

.noche h2,
.noche h3 {
  color: var(--oro-brillo);
}

.titulo-arco {
  display: block;
  width: min(100%, 600px);
  margin: 0 auto -6px;
  overflow: visible;
}

.titulo-arco text {
  font-family: var(--fuente-arco);
  font-size: 84px;
  fill: var(--blanco);
  letter-spacing: 2px;
  filter: drop-shadow(1px 2px 3px rgba(40, 18, 30, 0.55));
}

/* ---------- Detalles de cada terapia ---------- */

/* Raíces o líneas de campo en el paso de la noche al día */
.noche__pie {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
}

.noche__pie[data-detalle="raices"] path {
  fill: none;
  stroke: #e2b866;
  stroke-opacity: 0.62;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s ease-out;
  transition-delay: var(--d, 0s);
}

.noche__pie.visible[data-detalle="raices"] path {
  stroke-dashoffset: 0;
}

.detalle-campo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.detalle-campo__base path {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.3;
  stroke-width: 1.2;
}

.detalle-campo__flujo path {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.85;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.035 0.965;
  animation: recorrer 9s linear infinite;
}

.detalle-estrellas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .detalle-estrellas {
    display: none;
  }
}

/* ---------- Portales: círculos vivos de cada terapia ---------- */

.servicios {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  max-width: 980px;
  margin: 26px auto 0;
}

.servicios__hilo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.servicios__hilo-base {
  fill: none;
  stroke: #ffd98e;
  stroke-opacity: 0.6;
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

@media (max-width: 720px) {
  .servicios__hilo {
    display: none;
  }
}

.servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.servicio__extra {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--oro-claro);
  margin: 0 0 14px;
}

.servicio__extra::before {
  content: "✦ ";
}

.portal-marco {
  position: relative;
  width: min(76%, 310px);
  aspect-ratio: 1;
}

/* Anillo punteado que gira alrededor, con una estrella que lo recorre */
.portal-marco::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px dashed rgba(246, 220, 174, 0.55);
  animation: girar 50s linear infinite;
}

.portal-marco__estrella {
  position: absolute;
  inset: -13px;
  animation: girar 22s linear infinite;
  pointer-events: none;
}

.portal-marco__estrella svg {
  position: absolute;
  top: -11px;
  left: calc(50% - 11px);
  width: 22px;
  height: 22px;
  fill: var(--oro-brillo);
}

.portal {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--noche);
  box-shadow: 0 0 0 1px rgba(246, 220, 174, 0.55), 0 0 54px rgba(255, 214, 150, 0.26), 0 22px 40px rgba(20, 8, 20, 0.45);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s ease;
}

a.portal:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 1px rgba(246, 220, 174, 0.9), 0 0 80px rgba(255, 214, 150, 0.5), 0 22px 40px rgba(20, 8, 20, 0.45);
}

.portal svg {
  width: 100%;
  height: 100%;
}

/* Las figuras son de madera; el contorno punteado solo se ve en quien quedó fuera */
.peg__fantasma {
  opacity: 0;
}

.portal__flujo path {
  stroke-dasharray: 0.07 0.93;
  animation: recorrer 3.4s linear infinite;
}

@keyframes recorrer {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Luz que viaja por un hilo o una línea de campo; el trazo debe llevar pathLength="1" */
.pulso {
  fill: none;
  stroke: #fff6d8;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 0.09 0.91;
  stroke-dashoffset: 1;
  animation: recorrer 2.4s linear infinite;
  animation-delay: var(--d, 0s);
}

.portal__ondas circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: onda-iman 3.2s ease-out infinite;
}

@keyframes onda-iman {
  from {
    transform: scale(1);
    opacity: 0.8;
    stroke-width: 1.6;
  }
  to {
    transform: scale(3);
    opacity: 0;
    stroke-width: 0.4;
  }
}

.portal__iman {
  animation: flotar-iman 4.8s ease-in-out infinite;
}

@keyframes flotar-iman {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.portal__aura {
  transform-box: fill-box;
  transform-origin: center;
  animation: latir 6s ease-in-out infinite;
}

.servicio__etiqueta {
  position: relative;
  z-index: 2;
  background: var(--blanco);
  box-shadow: 8px 10px 18px rgba(20, 8, 20, 0.34);
  color: var(--cafe);
  font-size: clamp(1.4rem, 2.5vw, 1.72rem);
  text-align: center;
  padding: 9px 20px;
  margin-top: -40px;
  width: min(100%, 330px);
}

.noche .servicio__etiqueta {
  color: var(--cafe);
}

.servicio__texto {
  max-width: 25em;
  margin: 18px auto 6px;
}

.servicio .botones {
  justify-content: center;
}

.tambien {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: clamp(36px, 5vw, 56px);
}

.tambien__item {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
}

.tambien__item img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(246, 220, 174, 0.5);
}

.tambien__nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--oro-brillo);
}

.tambien__nota {
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--crema);
}

.tambien__nota a {
  color: var(--oro-claro);
}

@media (max-width: 720px) {
  .servicios {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }
}

/* ---------- Tarjeta del post: blanca, recta, con foto que muerde el borde ---------- */

.tarjeta {
  position: relative;
  background: var(--blanco);
  box-shadow: var(--sombra-tarjeta);
  padding: clamp(26px, 4vw, 48px);
}

.tarjeta--foto {
  margin-top: 96px;
  padding-top: 118px;
}

.tarjeta--centro {
  text-align: center;
}

.tarjeta__foto {
  position: absolute;
  top: -92px;
  left: 50%;
  width: 196px;
  height: 196px;
  margin-left: -98px;
  border-radius: 50%;
  box-shadow: var(--sombra-foto);
}

.tarjeta__titulo {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 16px;
}

.tarjeta__subtitulo {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 14px;
}

.tarjeta--estrecha {
  max-width: 800px;
  margin-inline: auto;
}

.lista-oro {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  color: var(--oro-oscuro);
  line-height: 1.35;
}

.lista-oro li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  text-align: left;
}

.lista-oro li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oro);
}

.lista-centro {
  width: fit-content;
  margin-inline: auto;
}

.encabezado {
  text-align: center;
  max-width: 44em;
  margin: 0 auto clamp(22px, 3vw, 36px);
}

.encabezado h2 {
  color: var(--cafe-oscuro);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-bottom: 10px;
}

.encabezado p {
  color: var(--cafe-oscuro);
}

.noche .encabezado h2 {
  color: var(--oro-brillo);
}

.noche .encabezado p {
  color: var(--crema);
}

/* ---------- Sobre mí ---------- */

.sobre-mi {
  max-width: 920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}

.sobre-mi__foto {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: clamp(-70px, -4vw, -30px);
  box-shadow: var(--sombra-foto);
}

.sobre-mi__entrada {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2px;
}

.firma {
  font-family: var(--fuente-firma);
  color: var(--cafe);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 10px;
}

.pildoras {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pildoras li {
  background: var(--rosa-claro);
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--cafe-oscuro);
}

.leer-mas summary {
  cursor: pointer;
  color: var(--oro-oscuro);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.leer-mas summary::-webkit-details-marker {
  display: none;
}

.leer-mas summary::before {
  content: "✦";
  transition: transform 0.4s ease;
}

.leer-mas[open] summary::before {
  transform: rotate(135deg);
}

@media (max-width: 720px) {
  .sobre-mi {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    margin-top: 70px;
    padding-top: 118px;
  }

  .sobre-mi__foto {
    position: absolute;
    top: -80px;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-left: -90px;
  }

  .pildoras {
    justify-content: center;
  }

  .leer-mas summary {
    justify-content: center;
  }
}

/* ---------- Cómo empezamos: tres pasos unidos por un hilo de oro ---------- */

.camino {
  list-style: none;
  counter-reset: paso;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  position: relative;
}

.camino::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 26px;
  border-top: 2px dotted var(--oro-oscuro);
  opacity: 0.55;
}

/* Una estrellita recorre el hilo de un paso al siguiente */
.camino::after {
  content: "✦";
  position: absolute;
  top: 11px;
  left: 16.6%;
  color: var(--oro-oscuro);
  font-size: 1.25rem;
  line-height: 1;
  animation: caminar 7.5s ease-in-out infinite;
}

@keyframes caminar {
  0% {
    left: 16.6%;
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    left: 82%;
    opacity: 0;
  }
}

.camino li {
  counter-increment: paso;
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 66px;
  color: var(--cafe-oscuro);
}

.camino li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: 3px 5px 12px rgba(122, 72, 44, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  color: var(--oro-oscuro);
}

.camino h3 {
  color: var(--cafe-oscuro);
  font-size: 1.32rem;
  margin-bottom: 4px;
}

.camino p {
  font-size: 0.975rem;
  line-height: 1.45;
  max-width: 19em;
  margin-inline: auto;
}

@media (max-width: 680px) {
  .camino {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
  }

  .camino::before {
    left: 50%;
    right: auto;
    top: 26px;
    bottom: 60px;
    border-top: 0;
    border-left: 2px dotted var(--oro-oscuro);
  }

  .camino::after {
    display: none;
  }

  .camino li p {
    background: var(--rosa);
    position: relative;
  }

  .camino h3 {
    background: var(--rosa);
    position: relative;
  }
}

.llamada {
  text-align: center;
}

.llamada__pregunta {
  color: var(--cafe-oscuro);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: clamp(32px, 5vw, 52px) 0 8px;
}

.llamada__texto {
  color: var(--cafe-oscuro);
  max-width: 36em;
  margin-inline: auto;
  margin-bottom: 20px;
}

.llamada .botones {
  justify-content: center;
}

/* ---------- Frase ---------- */

.frase {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.frase blockquote {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--cafe-oscuro);
}

.frase figcaption {
  font-family: var(--fuente-titulo);
  color: var(--cafe-oscuro);
  font-size: 1.15rem;
}

/* ---------- Página de cada terapia ---------- */

.servicio-portada {
  padding-block: clamp(22px, 3.5vw, 40px) clamp(8px, 2vw, 20px);
}

.servicio-portada__fila {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  max-width: 980px;
}

.servicio-portada .portal-marco {
  width: min(70%, 220px);
}

.servicio-portada .portal-marco::before,
.servicio-portada .portal-marco__estrella {
  inset: -10px;
}

.servicio-portada .servicio__etiqueta {
  margin-top: -28px;
  font-size: clamp(1.3rem, 2.3vw, 1.55rem);
  box-shadow: 8px 10px 18px rgba(122, 72, 44, 0.3);
}

.servicio-portada__pregunta {
  font-family: var(--fuente-titulo);
  color: var(--cafe-oscuro);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.22;
  margin-bottom: 10px;
}

.servicio-portada__texto p:not(.servicio-portada__pregunta) {
  color: var(--cafe-oscuro);
}

@media (max-width: 760px) {
  .servicio-portada__fila {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .servicio-portada__texto .botones {
    justify-content: center;
  }
}

/* Sala: interactiva y vídeo, uno al lado del otro */
.sala {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 40px);
  align-items: start;
}

.sala__lado {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.esencial h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.esencial ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.esencial li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  line-height: 1.45;
}

.esencial li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  color: var(--oro-brillo);
}

@media (max-width: 900px) {
  .sala {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ---------- Reproductor 16:9 ---------- */

.video {
  margin: 0;
}

.video__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--noche);
  border: 1px solid rgba(246, 220, 174, 0.45);
  box-shadow: 0 18px 44px rgba(20, 8, 20, 0.5);
}

.video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(47, 28, 46, 0.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, background-color 0.35s ease;
}

.video__play:hover {
  background: rgba(47, 28, 46, 0.02);
}

.video__icono {
  position: relative;
  width: clamp(64px, 9vw, 86px);
  height: clamp(64px, 9vw, 86px);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff8ea, #fbe3b0);
  box-shadow: 0 8px 28px rgba(20, 8, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.video__play:hover .video__icono {
  transform: scale(1.1);
}

.video__icono::before,
.video__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 233, 189, 0.85);
  animation: anillo-play 2.6s ease-out infinite;
}

.video__icono::after {
  animation-delay: -1.3s;
}

@keyframes anillo-play {
  from {
    transform: scale(1);
    opacity: 0.85;
  }
  to {
    transform: scale(1.75);
    opacity: 0;
  }
}

.video__icono svg {
  width: 46%;
  height: 46%;
  fill: var(--oro-oscuro);
  margin-left: 4%;
}

.video__marco.reproduciendo .video__play {
  opacity: 0;
  pointer-events: none;
}

.video figcaption {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--oro-claro);
  text-align: center;
}

/* ---------- Pestañas de información ---------- */

.pestanas {
  max-width: 820px;
  margin-inline: auto;
}

.pestanas__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.pestanas__boton {
  background: var(--blanco);
  border: 1px solid var(--rosa-medio);
  border-radius: 999px;
  color: var(--cafe);
  font-family: var(--fuente-titulo);
  font-size: 1.12rem;
  min-height: 44px;
  padding: 6px 18px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.pestanas__boton[aria-selected="true"] {
  background: var(--oro-oscuro);
  border-color: var(--oro-oscuro);
  color: var(--blanco);
}

.pestanas__panel {
  animation: panel-entra 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pestanas__panel[hidden] {
  display: none;
}

@keyframes panel-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.pestanas .tarjeta {
  min-height: 300px;
}

.pestanas .tarjeta__texto {
  max-width: 38em;
  margin-inline: auto;
}

.pregunta {
  border-top: 1px solid var(--rosa-medio);
  padding-block: 12px;
}

.pregunta:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.pregunta h4 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--oro-oscuro);
  margin: 0 0 4px;
  font-variant-ligatures: no-common-ligatures no-discretionary-ligatures;
}

.sesion-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
  text-align: left;
}

.sesion-pasos li {
  counter-increment: etapa;
  position: relative;
  padding-left: 42px;
  margin-bottom: 12px;
  line-height: 1.45;
}

.sesion-pasos li::before {
  content: counter(etapa);
  position: absolute;
  left: 0;
  top: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rosa-claro);
  color: var(--oro-oscuro);
  font-family: var(--fuente-titulo);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Selector de terapia en la página Aprende */
.aprende-selector {
  justify-content: center;
  margin-bottom: 24px;
}

.noche .pestanas__boton {
  background: rgba(255, 246, 238, 0.1);
  border-color: rgba(246, 220, 174, 0.55);
  color: var(--crema);
}

.noche .pestanas__boton[aria-selected="true"] {
  background: linear-gradient(135deg, #fbe7b5, #eebf63 55%, #dba544);
  border-color: transparent;
  color: #47290f;
}

/* ---------- Pie ---------- */

.pie {
  background: var(--rosa-claro);
  padding-block: 36px 28px;
  font-size: 0.95rem;
}

.pie__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px 36px;
  align-items: start;
}

.pie__logo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  box-shadow: 3px 5px 12px rgba(122, 72, 44, 0.28);
}

.pie h2 {
  font-size: 1.2rem;
  color: var(--cafe-oscuro);
  margin-bottom: 6px;
}

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

.pie li {
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .pie__fila {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
}

/* ---------- Reserva ---------- */

.reserva {
  width: min(100% - 24px, 640px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: var(--blanco);
  color: var(--cafe);
  box-shadow: 16px 22px 44px rgba(90, 50, 28, 0.42);
  overflow: hidden;
}

.reserva[open] {
  display: flex;
  flex-direction: column;
  animation: reserva-entra 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes reserva-entra {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}

.reserva::backdrop {
  background: rgba(47, 28, 46, 0.62);
}

.reserva__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--rosa-claro);
  flex: none;
}

.reserva__cabecera img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.reserva__cabecera h2 {
  font-size: 1.45rem;
  flex: 1;
  color: var(--cafe-oscuro);
}

.reserva__cerrar {
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cafe-oscuro);
  cursor: pointer;
}

.reserva__cuerpo {
  padding: 18px clamp(16px, 4vw, 28px) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.aviso-beta {
  background: var(--rosa-claro);
  border-left: 3px solid var(--oro-oscuro);
  padding: 10px 14px;
  font-size: 0.925rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

.campo {
  margin-bottom: 16px;
  border: 0;
  padding: 0;
  min-width: 0;
}

.campo > label,
.campo > legend {
  display: block;
  padding: 0;
  font-weight: 600;
  color: var(--cafe-oscuro);
  margin-bottom: 6px;
  line-height: 1.35;
}

.campo__ayuda {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: -2px 0 8px;
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #c79f8a;
  background: var(--blanco);
  color: var(--cafe-oscuro);
  font: inherit;
  font-size: 1rem;
  border-radius: 0;
}

.campo textarea {
  min-height: 96px;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--oro-oscuro);
  outline-offset: 0;
  border-color: var(--oro-oscuro);
}

.opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px 14px;
}

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 32px;
  line-height: 1.35;
  cursor: pointer;
}

.campo > label.opcion {
  display: flex;
  font-weight: 400;
  color: inherit;
  margin-bottom: 0;
}

.opcion input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--oro-oscuro);
}

.campo--error input[type="text"],
.campo--error input[type="tel"],
.campo--error input[type="date"],
.campo--error select,
.campo--error textarea {
  border-color: #a3341f;
}

.campo__error {
  color: #a3341f;
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: 500;
}

.signo {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--oro-oscuro);
  font-weight: 600;
  min-height: 1.4em;
}

.reserva__seccion {
  font-size: 1.3rem;
  margin: 22px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rosa-medio);
}

.reserva__enviar {
  width: 100%;
  margin-top: 4px;
}

.gracias {
  text-align: center;
}

.gracias h3 {
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.gracias h3::before,
.gracias h3::after {
  content: "✦";
  display: inline-block;
  margin-inline: 0.35em;
  font-size: 0.7em;
  animation: titilar 3s ease-in-out infinite;
}

.gracias h3::after {
  animation-delay: -1.4s;
}

.gracias__mensaje {
  white-space: pre-wrap;
  text-align: left;
  background: var(--rosa-claro);
  padding: 14px 16px;
  font-size: 0.925rem;
  line-height: 1.5;
  margin: 14px 0 18px;
  color: var(--cafe-oscuro);
  font-family: var(--fuente-texto);
  overflow-wrap: anywhere;
}

.gracias .botones {
  justify-content: center;
}

/* Quien prefiere menos movimiento ve todo quieto; las interactivas siguen funcionando */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}