/* ==========================================================================
   Andrea Riera Guerrero · Psicóloga — estilos propios
   Los colores viven aquí como canales RGB y Tailwind los lee desde
   tailwind.config (index.html), así hay una única fuente de verdad.
   ========================================================================== */

:root {
  /* Paleta (canales RGB para poder usar opacidad: rgb(var(--sage) / .4)) */
  --sage: 138 154 134;        /* #8A9A86 verde salvia */
  --sage-light: 227 232 225;  /* #E3E8E1 salvia claro */
  --sage-dark: 85 105 79;     /* #55694F salvia profundo (texto/botones, AA sobre marfil) */
  --sand: 244 241 234;        /* #F4F1EA arena */
  --sand-deep: 217 210 201;   /* #D9D2C9 arena oscura */
  --ivory: 250 250 247;       /* #FAFAF7 marfil */
  --ink: 44 62 53;            /* #2C3E35 pizarra */
  --ink-soft: 74 91 82;       /* #4A5B52 texto secundario */
  --danger: 156 59 51;        /* #9C3B33 errores de formulario */
  --gold: 215 180 97;         /* #D7B461 dorado del logo (árbol de la vida) */
  --gold-light: 253 215 118;  /* #FDD776 dorado claro del logo (escorpión) */
  --gold-deep: 156 119 32;    /* #9C7720 dorado oscuro para texto grande (contraste >= 3:1 sobre marfil y arena) */

  --radius-organic: 62% 38% 55% 45% / 48% 58% 42% 52%;
  /* Curvas de movimiento (criterios de Emil Kowalski): ease-out fuerte para entrar y responder,
     ease-in-out para lo que se mueve por la pantalla, curva de cajón para desplegar. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: var(--ease-out);
  --header-h: 4.5rem;
}

/* Resultado global y contacto revelado: espacio reservado, sin saltos de layout. */
.selftest-score { margin-top: 2rem; text-align: center; padding: 1.75rem 1.25rem 1.5rem; border-radius: 1.5rem; background: radial-gradient(120% 90% at 50% 0%, rgb(var(--ivory) / .7), rgb(var(--sage-light) / .65) 70%); }
.selftest-score-label { font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: rgb(var(--sage-dark)); }
.selftest-score-ring { position: relative; width: clamp(10rem, 46vw, 12.5rem); aspect-ratio: 1; margin: 1rem auto .75rem; }
.selftest-score-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.selftest-ring-stop-a { stop-color: rgb(var(--sage)); }
.selftest-ring-stop-b { stop-color: rgb(var(--sage-dark)); }
.selftest-ring-disc { fill: rgb(var(--ivory)); filter: drop-shadow(0 6px 14px rgb(var(--ink) / .12)); }
.selftest-ring-track { fill: none; stroke: rgb(var(--sand-deep) / .55); stroke-width: 8; }
.selftest-ring-arc { fill: none; stroke: url(#selftestRingGrad); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--ring-offset, 100); filter: drop-shadow(0 0 3px rgb(var(--sage) / .55)); animation: selftest-ring-fill 1200ms var(--ease-soft) 150ms both; }
.selftest-score-number { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; font-family: 'Playfair Display', Georgia, serif; line-height: 1; color: rgb(var(--sage-dark)); animation: selftest-score-pop 800ms var(--ease-soft) 250ms both; }
.selftest-score-value { font-size: clamp(2.6rem, 12vw, 3.5rem); font-weight: 600; letter-spacing: -.01em; }
.selftest-score-max { margin-top: .35rem; font-family: Inter, system-ui, sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: .06em; color: rgb(var(--ink-soft)); }
@keyframes selftest-ring-fill { from { stroke-dashoffset: 100; } }
@keyframes selftest-score-pop { from { opacity: 0; transform: scale(.9); } }

.selftest-contact-slot { margin-top: 1.25rem; }
.selftest-contact { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; padding: 1.75rem 1.5rem; border-radius: 1.75rem; background: radial-gradient(90% 120% at 100% 0%, rgb(var(--sage) / .38), transparent 60%), linear-gradient(135deg, rgb(var(--sage-dark)) 0%, rgb(var(--ink)) 100%); color: rgb(var(--ivory)); box-shadow: 0 22px 44px -22px rgb(var(--ink) / .6), inset 0 1px 0 rgb(var(--ivory) / .12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px) scale(.96); filter: blur(8px); }
.selftest-contact.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none; transition: opacity 1100ms var(--ease-soft), transform 1100ms var(--ease-soft), filter 1100ms var(--ease-soft); }
.selftest-contact:focus-visible { border-radius: 1.75rem; outline-offset: 4px; }

/* Blobs difuminados, hojas y contenido: ocultos hasta el revelado y entran escalonados. */
.selftest-contact-blob { position: absolute; z-index: -1; border-radius: var(--radius-organic); filter: blur(26px); opacity: 0; transform: scale(.6); pointer-events: none; }
.selftest-contact-blob--a { width: 13rem; height: 11rem; right: -3rem; top: -4rem; background: rgb(var(--sage) / .5); }
.selftest-contact-blob--b { width: 11rem; height: 9rem; left: -3rem; bottom: -4.5rem; background: rgb(var(--sage-light) / .22); }
.selftest-contact-leaves { position: absolute; z-index: -1; right: -1.5rem; bottom: -1rem; width: auto; max-width: none; height: 135%; object-fit: contain; object-position: bottom right; opacity: 0; transform-origin: 80% 100%; transform: translateY(1.75rem) scale(.82) rotate(-5deg); pointer-events: none; }
.selftest-contact-title { position: relative; max-width: 22rem; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 5.6vw, 2rem); line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; opacity: 0; transform: translateY(14px); }
.selftest-contact-cta { position: relative; display: inline-flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem 1.4rem; border-radius: 999px; background: rgb(var(--ivory)); color: rgb(var(--sage-dark)); font-size: 1rem; font-weight: 600; box-shadow: 0 10px 26px -10px rgb(0 0 0 / .45), 0 0 0 6px rgb(var(--ivory) / .08), 0 0 34px rgb(var(--gold) / .4); }
.selftest-contact-cta-arrow { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgb(var(--sage-dark)); color: rgb(var(--ivory)); transition: transform 350ms var(--ease-soft); }
.selftest-contact-cta-arrow .icon { width: 1.1rem; height: 1.1rem; }

.selftest-contact.is-visible .selftest-contact-blob { opacity: 1; transform: none; transition: opacity 1600ms var(--ease-soft) 150ms, transform 1800ms var(--ease-soft) 150ms; animation: selftest-blob-drift 16s ease-in-out 2s infinite alternate; }
.selftest-contact.is-visible .selftest-contact-blob--b { animation-duration: 20s; animation-direction: alternate-reverse; }
.selftest-contact.is-visible .selftest-contact-leaves { opacity: .26; transform: none; transition: opacity 1400ms var(--ease-soft) 250ms, transform 1800ms var(--ease-soft) 250ms; }
.selftest-contact.is-visible .selftest-contact-title { opacity: 1; transform: none; transition: opacity 900ms var(--ease-soft) 400ms, transform 900ms var(--ease-soft) 400ms; }
.selftest-contact.is-visible .selftest-contact-cta { animation: selftest-cta-in 800ms var(--ease-out) 750ms backwards, selftest-cta-beat 4.2s ease-in-out 2.6s infinite; transition: transform 200ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.selftest-contact.is-visible:active .selftest-contact-cta { transform: scale(0.97); transition-duration: 100ms; }
@keyframes selftest-cta-in { from { opacity: 0; transform: translateY(14px); } }

@media (hover: hover) {
  .selftest-contact.is-visible:hover .selftest-contact-cta { transform: translateY(-2px); transition-delay: 0s; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .5), 0 0 0 8px rgb(var(--ivory) / .12), 0 0 44px rgb(var(--gold) / .5); }
  .selftest-contact.is-visible:hover .selftest-contact-cta-arrow { transform: translateX(3px); }
}
.selftest-contact:focus-visible .selftest-contact-cta { box-shadow: 0 0 0 3px rgb(var(--gold-light)), 0 0 34px rgb(var(--gold) / .45); }

@media (min-width: 640px) {
  .selftest-contact { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.25rem 2.5rem; }
  .selftest-contact-title { font-size: clamp(1.75rem, 3.4vw, 2.1rem); }
  .selftest-contact-cta { flex-shrink: 0; }
  .selftest-contact-leaves { right: 6rem; }
}

@keyframes selftest-blob-drift { from { translate: 0 0; } to { translate: 1.25rem -.9rem; } }
@keyframes selftest-cta-beat { 0%, 70%, 100% { scale: 1; } 82% { scale: 1.025; } }

@media (prefers-reduced-motion: reduce) {
  .selftest-ring-arc, .selftest-score-number { animation: none; }
  .selftest-contact { transform: none; filter: none; }
  .selftest-contact.is-visible { transition: opacity 200ms linear; }
  .selftest-contact-blob, .selftest-contact-leaves, .selftest-contact-title, .selftest-contact-cta { transform: none; }
  .selftest-contact.is-visible .selftest-contact-blob,
  .selftest-contact.is-visible .selftest-contact-leaves,
  .selftest-contact.is-visible .selftest-contact-title,
  .selftest-contact.is-visible .selftest-contact-cta { transition: none; animation: none; }
  .selftest-contact-cta-arrow { transition: none; }
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: rgb(var(--ivory));
  color: rgb(var(--ink));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

/* Las animaciones de entrada (AOS) empiezan fuera de pantalla: se recortan aquí
   para que no aparezca scroll horizontal. */
main { overflow-x: clip; }

::selection { background: rgb(var(--sage) / 0.35); }

[x-cloak] { display: none !important; }

:focus-visible {
  outline: 2px solid rgb(var(--sage-dark));
  outline-offset: 3px;
  border-radius: 0.375rem;
}

/* === RESERVA CON PAGO === */
.gate[hidden] { display: none; }
.gate-close[hidden] { display: none; }
.gate { position: fixed; inset: 0; z-index: 55; display: grid; place-items: end center; padding: 0; isolation: isolate; }
.gate-backdrop { position: absolute; inset: 0; background: rgb(var(--ink) / .6); opacity: 0; transition: opacity 220ms var(--ease-out); }
.gate-dialog { position: relative; z-index: 1; width: 100%; max-height: min(90vh, 44rem); overflow-y: auto; padding: 2rem 1.5rem; background: rgb(var(--ivory)); outline: none; opacity: 0; transform: translateY(1rem); transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out); }
.gate.is-open .gate-backdrop { opacity: 1; }
.gate.is-open .gate-dialog { opacity: 1; transform: translateY(0); }
.gate-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; color: rgb(var(--ink)); transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.gate-mark, .gate-ok { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; color: rgb(var(--sage-dark)); }
.gate-mark { background: rgb(var(--sage-light)); }
.gate-ok { background: rgb(var(--sage-dark)); color: rgb(var(--ivory)); }
.gate-warning { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; background: rgb(var(--gold-light)); color: rgb(var(--ink)); font-size: 1.75rem; font-weight: 700; }
.gate-steps { display: grid; gap: .85rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: rgb(var(--ink-soft)); }
.gate-steps li { display: flex; align-items: center; gap: .75rem; }
.gate-steps span { display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; place-items: center; border-radius: 999px; background: rgb(var(--sage-light)); color: rgb(var(--sage-dark)); font-size: .825rem; font-weight: 600; }
.gate-link { color: rgb(var(--sage-dark)); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.gate-dialog :focus-visible { transition-duration: 0s; }
@media (min-width: 640px) { .gate { place-items: center; padding: 1.5rem; } .gate-dialog { max-width: 34rem; padding: 2.5rem; } }
@media (hover: hover) and (pointer: fine) { .gate-close:hover { background: rgb(var(--sage-light)); color: rgb(var(--sage-dark)); } }
@media (prefers-reduced-motion: reduce) { .gate-dialog { transform: none; transition: opacity 200ms var(--ease-out); } .gate.is-open .gate-dialog { transform: none; } .gate-backdrop { transition: opacity 200ms var(--ease-out); } }
/* === /RESERVA CON PAGO === */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: rgb(var(--ink));
  color: rgb(var(--ivory));
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* El tamaño va en :where() (especificidad 0) para que las utilidades de tamaño de
   Tailwind (h-6, w-6...) lo puedan sobrescribir aunque este archivo se cargue
   después del CSS compilado. Ojo: no escribir «asterisco + barra» dentro de un comentario. */
:where(.icon) {
  width: 1.25em;
  height: 1.25em;
}
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Efectos de cristal (backdrop-blur) ---------- */
.glass {
  background: rgb(var(--ivory) / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.glass-strong {
  background: rgb(var(--ivory) / 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.glass-card {
  background: rgb(255 255 255 / 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.7);
}

/* ---------- Formas orgánicas y fondos ---------- */
.organic { border-radius: var(--radius-organic); }

.hero-bg {
  background:
    radial-gradient(58% 52% at 8% 6%, rgb(var(--sage) / 0.5), transparent 70%),
    radial-gradient(55% 55% at 94% 10%, rgb(var(--gold) / 0.42), transparent 68%),
    radial-gradient(62% 58% at 78% 96%, rgb(var(--gold-light) / 0.32), transparent 70%),
    radial-gradient(48% 48% at 4% 96%, rgb(var(--sage-dark) / 0.18), transparent 70%),
    rgb(var(--ivory));
}

.blob {
  position: absolute;
  border-radius: var(--radius-organic);
  filter: blur(46px);
  opacity: 0.55;
  /* Solo translate/rotate/scale: se anima en la GPU. Animar border-radius sobre un elemento
     con blur obligaba a repintarlo en cada fotograma. */
  animation: blob-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes blob-drift {
  from { translate: 0 0; rotate: 0deg; scale: 1; }
  to   { translate: 2.5rem -1.5rem; rotate: 14deg; scale: 1.1; }
}

.hero-shape {
  background: linear-gradient(155deg, rgb(var(--sage-light)) 0%, rgb(var(--sand)) 55%, rgb(var(--sand-deep) / 0.8) 100%);
  border-radius: var(--radius-organic);
  animation: shape-sway 28s ease-in-out infinite alternate;
}
@keyframes shape-sway {
  from { rotate: -2deg; scale: 1; }
  to   { rotate: 3deg; scale: 1.02; }
}

/* ---------- Botones ---------- */
/* Igual que .icon: `hidden` y `lg:inline-flex` de Tailwind deben poder ganar a este display. */
:where(.btn) { display: inline-flex; }
.btn {
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.2;
  cursor: pointer;
  /* Propiedades concretas (nunca «all») y respuesta rápida: el botón «escucha» en 160 ms. */
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 250ms var(--ease-out), color 200ms ease;
}
.btn-primary {
  background: rgb(var(--sage-dark));
  color: rgb(var(--ivory));
  box-shadow: 0 10px 30px -12px rgb(var(--sage-dark) / 0.7);
}
.btn-primary:disabled { opacity: 0.6; cursor: wait; transform: none; }
.btn-ghost {
  border: 1.5px solid rgb(var(--sage-dark) / 0.55);
  color: rgb(var(--ink));
  background: rgb(255 255 255 / 0.35);
}
/* El movimiento al pasar el ratón solo en dispositivos con ratón: en táctil el hover se «pega» al tocar. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: rgb(var(--ink)); transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgb(var(--ink) / 0.55), 0 0 0 3px rgb(var(--gold) / 0.35); }
  .btn-ghost:hover { background: rgb(var(--sage-light)); border-color: rgb(var(--sage-dark)); transform: translateY(-2px); }
}
/* Pulsación: va DESPUÉS de los :hover (mismo peso) para que también gane sobre ellos; antes el botón
   principal nunca se encogía porque su :hover la anulaba. */
.btn:active, .btn:hover:active { transform: scale(0.97); transition-duration: 100ms; }
.btn:disabled:active { transform: none; }
.btn-sm { padding: 0.65rem 1.25rem; font-size: 0.9rem; }

/* ---------- Especialidades: acordeón suave ---------- */
.reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-drawer);
}
.reveal[data-open="true"] { grid-template-rows: 1fr; }
/* El contenido aparece un poco después de que empiece a abrirse el hueco y se va antes al cerrar. */
.reveal > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 140ms var(--ease-out); }
.reveal[data-open="true"] > div { opacity: 1; transition: opacity 260ms var(--ease-out) 110ms; }

/* ---------- Test de autoevaluación ---------- */
.opt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.2rem;
  text-align: left;
  border-radius: 1rem;
  border: 1.5px solid rgb(var(--sand-deep));
  background: rgb(255 255 255 / 0.7);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: rgb(var(--sage-dark)); background: #fff; transform: translateX(3px); }
}
.opt:active, .opt:hover:active { transform: scale(0.985); transition-duration: 100ms; }
.opt-dot {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgb(var(--sage-dark) / 0.6);
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.opt[aria-pressed="true"] { border-color: rgb(var(--sage-dark)); background: rgb(var(--sage-light)); }
.opt[aria-pressed="true"] .opt-dot { background: rgb(var(--sage-dark)); box-shadow: inset 0 0 0 3px rgb(var(--sage-light)); animation: dot-pop 260ms var(--ease-out); }
@keyframes dot-pop { from { transform: scale(0.6); } 60% { transform: scale(1.12); } to { transform: scale(1); } }

/* ---------- Formulario ---------- */
.field {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border: 1.5px solid rgb(var(--sand-deep));
  background: rgb(255 255 255 / 0.8);
  color: rgb(var(--ink));
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field::placeholder { color: rgb(var(--ink-soft) / 0.6); }
.field:hover { border-color: rgb(var(--sage)); }
.field:focus {
  outline: none;
  border-color: rgb(var(--sage-dark));
  box-shadow: 0 0 0 4px rgb(var(--sage) / 0.28);
  background: #fff;
}
.field[aria-invalid="true"] { border-color: rgb(var(--danger)); background: rgb(var(--danger) / 0.04); }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgb(var(--danger) / 0.18); }
.field-valid { border-color: rgb(var(--sage-dark)); }

/* ---------- Carrusel ---------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Movimiento reducido ---------- */
@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;
  }
}

/* === LOGO === */
/* Logo de la clienta: yin-yang con el árbol de la vida y el escorpión en dorado. */
:where(.brand-mark) { display: block; width: 3.75rem; height: 3.75rem; }
.brand-mark {
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(var(--gold) / 0.75), 0 6px 18px -6px rgb(var(--gold) / 0.55);
  transition: box-shadow 300ms var(--ease-out), scale 300ms var(--ease-out);
}
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: 50%; transition: rotate 700ms var(--ease-in-out); }
.brand-mark-footer { width: 4.25rem; height: 4.25rem; }
@media (hover: hover) {
  a:hover > .brand-mark { scale: 1.06; box-shadow: 0 0 0 2px rgb(var(--gold)), 0 8px 26px -6px rgb(var(--gold-light) / 0.75); }
  a:hover > .brand-mark img { rotate: 180deg; }
}
/* === /LOGO === */

/* === DORADO (marca) === */
/* Tarjetas con borde dorado suave que crecen un poco al pasar el ratón. Usan las propiedades
   independientes translate y scale para no chocar con las transformaciones de AOS y GSAP. */
.gold-card {
  --grow: 1.02;
  border: 1px solid rgb(var(--gold) / 0.6);
  box-shadow: 0 12px 40px -14px rgb(var(--ink) / 0.2), 0 0 0 0 rgb(var(--gold) / 0);
  position: relative;
  isolation: isolate;
  /* Hover frecuente: 260 ms con ease-out fuerte (antes 550 ms). */
  transition: translate 260ms var(--ease-out), scale 260ms var(--ease-out), border-color 250ms ease, box-shadow 300ms var(--ease-out);
}
/* Foco de luz dorado que sigue al cursor (animations.js escribe --mx/--my con un suavizado tipo muelle). */
.gold-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--gold) / 0.17), transparent 62%);
  transition: opacity 300ms ease;
}
.gold-card-big { --grow: 1.01; }
@media (hover: hover) {
  .gold-card:hover {
    translate: 0 -4px;
    scale: var(--grow);
    border-color: rgb(var(--gold) / 0.95);
    box-shadow: 0 28px 60px -24px rgb(var(--ink) / 0.35), 0 0 0 1px rgb(var(--gold) / 0.5), 0 0 40px 2px rgb(var(--gold) / 0.3);
  }
  /* El formulario no se mueve mientras se escribe en él: solo brilla. */
  .gold-card-still:hover { translate: none; scale: none; }
  .gold-card:hover::before { opacity: 1; }
}
.gold-card:focus-within {
  border-color: rgb(var(--gold) / 0.95);
  box-shadow: 0 0 0 1px rgb(var(--gold) / 0.5), 0 0 34px 2px rgb(var(--gold) / 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .gold-card:hover, a:hover > .brand-mark { translate: none; scale: none; }
  a:hover > .brand-mark img { rotate: none; }
}
/* === /DORADO === */

/* === FOTO Y CRISTAL (sistema de superficies) === */
/* .photo-veil: una foto de fondo con velo oscuro translúcido y gradiente, para que el texto encima
   cumpla contraste. La foto va SIEMPRE detrás del texto, nunca sola. La imagen se pone en el propio
   elemento con style="background-image: url('assets/images/…')": una url() dentro de una variable CSS
   se resuelve desde el CSS y no desde el HTML, y así no carga. */
.photo-veil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-size: cover;
  background-position: center 38%;
}
.photo-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(24 34 29 / 0.12) 0%, rgb(24 34 29 / 0.55) 52%, rgb(24 34 29 / 0.9) 100%);
}
.photo-veil > * { position: relative; }

/* .ambient-photo: foto de ambiente de una sección entera. Va detrás del contenido (z -1 dentro de una
   sección con «isolate»). Lleva un velo translúcido para que el texto de color tinta siga siendo legible:
   la foto se intuye como textura, no compite con la lectura. Por defecto cubre la sección (test). */
.ambient-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 40%;
  pointer-events: none;
}
.ambient-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--sand) / 0.9) 0%, rgb(var(--sand) / 0.78) 50%, rgb(var(--sand) / 0.93) 100%);
}
/* Variante «fit» (áreas de intervención): se ve entera a lo ancho (el puente no se corta) y con menos velo.
   Nunca se repite. En móvil la sección es mucho más alta que la foto: en vez de estirarla o repetirla, la
   foto pasa a ser una caja con su propia proporción, pegada arriba, que se funde arriba y abajo. */
.ambient-photo--fit { background-size: 100% auto; background-position: center 62%; }
.ambient-photo--fit::after {
  background: linear-gradient(180deg, rgb(var(--sand) / 0.42) 0%, rgb(var(--sand) / 0.3) 50%, rgb(var(--sand) / 0.55) 100%);
}
@media (max-width: 767px) {
  .ambient-photo--fit {
    inset: 3rem 0 auto 0;
    height: auto;
    aspect-ratio: 1910 / 2048;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
  }
}

/* .glass-panel: cristal claro con desenfoque real y un borde de luz ambiental (reflejo superior). */
.glass-panel {
  background: rgb(255 255 255 / 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 18px 40px -22px rgb(var(--ink) / 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .glass-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / 0.92); }
}

/* === /FOTO Y CRISTAL === */

/* === SOBRE MÍ (retrato con aura, marco y trayectoria) === */
/* Halo orgánico que asoma tras el marco (sustituye al antiguo rectángulo plano de fondo). Antes había
   además dos manchas difuminadas más amplias (.about-aura-blob) que se veían como un exceso de fondo
   amarillo alrededor de la foto; se quitaron y solo queda este halo ajustado al marco. */
.about-ring {
  position: absolute;
  inset: -1.1rem;
  z-index: 0;
  border-radius: var(--radius-organic);
  background: linear-gradient(155deg, rgb(var(--gold-light) / 0.85) 0%, rgb(var(--gold) / 0.6) 55%, rgb(var(--gold-light) / 0.8) 100%);
  filter: blur(1px);
}
.about-frame { z-index: 1; }
/* Brillo diagonal fijo sobre la foto: una pincelada de luz, no una animación. */
.about-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, transparent 28%, transparent 72%, rgb(var(--ink) / 0.1) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.about-portrait { transition: scale 450ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .about-frame:hover .about-portrait { scale: 1.045; }
}
.about-badge { z-index: 2; }

/* Su trayectoria como una rama ilustrada que crece hacia abajo: un motivo de enredadera con hojas
   (dibujo propio, en los mismos tonos salvia/dorado de la marca) se repite verticalmente detrás de los
   hitos. Con JS y sin movimiento reducido crece en 5 tramos, uno por hito y a la vez que aparece su
   texto (--timeline-progress, animations.js: la rama se «descubre» con clip-path, sin estirar el
   dibujo); sin JS o con movimiento reducido se ve entera de entrada (valor por defecto: 1). */
.about-timeline { position: relative; }
.about-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='160' viewBox='0 0 60 160'%3E%3Cpath d='M30 0 C20 20 40 40 30 65 C20 85 40 105 30 130 C24 142 28 152 30 160' fill='none' stroke='%2355694F' stroke-opacity='.75' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%238A9A86' fill-opacity='.6' stroke='%23D7B461' stroke-opacity='.7' stroke-width='.6'%3E%3Cpath transform='translate(23 34) rotate(-35)' d='M0 0 C4 -3 6 -9 0 -16 C-6 -9 -4 -3 0 0 Z'/%3E%3Cpath transform='translate(37 95) rotate(45)' d='M0 0 C4 -3 6 -9 0 -16 C-6 -9 -4 -3 0 0 Z'/%3E%3Cpath transform='translate(25 149) rotate(-20)' d='M0 0 C4 -3 6 -9 0 -16 C-6 -9 -4 -3 0 0 Z'/%3E%3C/g%3E%3C/svg%3E") repeat-y top left / 2.75rem 7.33rem;
  clip-path: inset(0 0 calc((1 - var(--timeline-progress, 1)) * 100%) 0);
}
.about-timeline-item { position: relative; padding-left: 3.5rem; }
.about-timeline-item + .about-timeline-item { margin-top: 2rem; }
.about-timeline-text { color: rgb(var(--ink-soft)); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .about-frame:hover .about-portrait { scale: none; }
}
/* === /SOBRE MÍ === */

/* === MOVIMIENTO (criterios de Emil Kowalski) === */

/* Entrada al hacer scroll (sustituye a AOS). Solo se oculta si animations.js añade .js-reveal:
   sin JS el contenido siempre se ve. Sube 16 px con 4 px de desenfoque y escalona 70 ms entre
   hermanos (--i). Al terminar, .rv-done retira estos estilos para no pisar los hover propios. */
.js-reveal [data-reveal]:not(.rv-done),
.js-reveal [data-reveal-group]:not(.rv-done) > * {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), filter 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-reveal [data-reveal="left"]:not(.rv-done) { transform: translateX(-22px); }
.js-reveal [data-reveal="right"]:not(.rv-done) { transform: translateX(22px); }
.js-reveal [data-reveal].is-in:not(.rv-done),
.js-reveal [data-reveal-group].is-in:not(.rv-done) > * { opacity: 1; transform: none; filter: none; }

/* Titular del hero: cada palabra sube desde una máscara (animations.js). */
/* Relleno lateral generoso: la cursiva sobresale por los lados (el trazo final de la «r»). Al terminar la
   entrada, animations.js añade .is-split-done y la máscara deja de recortar. */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.2em 0.2em; margin: 0 -0.2em -0.2em; }
.is-split-done .split-word { overflow: visible; }
.split-word > span { display: inline-block; }

/* Destello dorado que cruza una sola vez las palabras clave de los títulos. */
@keyframes gold-gleam { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
.gleam {
  /* Con el texto transparente el fondo solo pinta dentro de la caja de la palabra; el trazo final de la «r»
     cursiva queda fuera y salía cortado. El relleno lateral amplía la caja (el margen negativo no mueve el texto). */
  padding-inline: 0.16em;
  margin-inline: -0.16em;
  color: rgb(var(--gold-deep));
  background:
    linear-gradient(100deg, transparent 38%, rgb(255 238 178 / 0.95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat,
    linear-gradient(rgb(var(--gold-deep)), rgb(var(--gold-deep)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-gleam 1500ms var(--ease-in-out) 500ms 1 both paused;
}
.gleam.is-in, .is-in .gleam { animation-play-state: running; }

/* Grano de papel: quita el aspecto plano de pantalla. Capa fija y estática (no se repinta al hacer scroll). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .24 0 0 0 0 .2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bordes ondulados entre secciones (máscara SVG: el color sale de --wave = fondo de la sección anterior). */
.wave-top {
  position: relative;
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V24C1180 62 960 10 720 30S250 56 0 20Z'/%3E%3C/svg%3E");
}
.wave-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: clamp(26px, 4.2vw, 60px);
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--wave, var(--ivory)));
  -webkit-mask: var(--wave-mask) 0 0 / 100% 100% no-repeat;
  mask: var(--wave-mask) 0 0 / 100% 100% no-repeat;
}

/* Navegación: subrayado dorado que entra por la izquierda y sale por la derecha; marca la sección visible. */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  border-radius: 1px;
  background: rgb(var(--gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-out);
}
.nav-link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* Insignias del hero: flotan con CSS (fuera del hilo principal; antes eran bucles de GSAP). */
@keyframes float-y { from { translate: 0 -7px; } to { translate: 0 9px; } }
[data-float] { animation: float-y var(--float-d, 6s) ease-in-out var(--float-delay, 1.8s) infinite alternate both; }

/* Árbol de la vida del logo en el hero: respira despacio; se «dibuja» al entrar (animations.js). */
.hero-tree { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-tree img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-organic);
  border: 3px solid rgb(255 255 255 / 0.9);
  transform-origin: 50% 92%;
  filter: drop-shadow(0 10px 22px rgb(var(--gold-deep) / 0.18));
  animation: tree-breathe 10s ease-in-out infinite alternate;
}
@keyframes tree-breathe { from { scale: 1; rotate: -0.4deg; } to { scale: 1.02; rotate: 0.5deg; } }

/* Escorpión del logo, muy tenue, en el pie. */
.footer-scorpion {
  position: absolute;
  right: clamp(1rem, 6vw, 5rem);
  bottom: 5.5rem;
  width: min(17rem, 44vw);
  opacity: 0.17;
  pointer-events: none;
  transform-origin: 30% 40%;
  animation: scorpion-sway 12s ease-in-out infinite alternate;
}
@keyframes scorpion-sway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }

/* Barras del test: recorte (clip-path) en lugar de animar el ancho (que provoca reflujo). */
.bar-fill {
  clip-path: inset(0 calc(100% - var(--v, 0) * 1%) 0 0 round 999px);
  transition: clip-path 700ms var(--ease-out);
}

/* Transiciones de Alpine: solo entrada (rápida, ease-out); la salida es más corta que la entrada. */
.step-enter { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), filter 260ms var(--ease-out); }
.step-enter-start { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.step-enter-end { opacity: 1; transform: none; filter: blur(0); }
.fade-enter { transition: opacity 200ms var(--ease-out); }
.fade-enter-start { opacity: 0; }
.fade-enter-end { opacity: 1; }
.menu-enter { transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out); }
.menu-enter-start { opacity: 0; transform: translateY(-8px); }
.menu-enter-end { opacity: 1; transform: none; }
.menu-leave { transition: opacity 140ms var(--ease-out); }
.menu-leave-start { opacity: 1; }
.menu-leave-end { opacity: 0; }
.dialog-enter { transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.dialog-enter-start { opacity: 0; transform: translateY(12px) scale(0.97); }
.dialog-enter-end { opacity: 1; transform: none; }
.dialog-leave { transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.dialog-leave-start { opacity: 1; transform: none; }
.dialog-leave-end { opacity: 0; transform: translateY(6px) scale(0.98); }

/* Hero vivo: aurora de luz dorada y salvia (4 manchas en 2 capas que reaccionan al cursor con paralaje) y una
   corona dorada que gira despacio detrás del árbol. Todo se anima con translate/rotate/scale (GPU). */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(to bottom, transparent, rgb(var(--ivory))); }
.aurora-layer { position: absolute; inset: 0; }
.blob-gold { right: -8%; top: -10%; width: min(54vw, 40rem); height: min(40vw, 30rem); background: rgb(var(--gold)); opacity: 0.5; filter: blur(64px); }
.blob-sage { left: -10%; top: -12%; width: min(50vw, 36rem); height: min(38vw, 28rem); background: rgb(var(--sage)); opacity: 0.55; filter: blur(64px); animation-duration: 32s; animation-delay: -6s; }
.blob-champagne { right: 4%; bottom: -12%; width: min(46vw, 34rem); height: min(32vw, 24rem); background: rgb(var(--gold-light)); opacity: 0.42; filter: blur(64px); animation-duration: 28s; animation-direction: alternate-reverse; }
.blob-deep { left: -8%; bottom: -16%; width: min(42vw, 30rem); height: min(30vw, 22rem); background: rgb(var(--sage-dark)); opacity: 0.2; filter: blur(64px); animation-duration: 36s; animation-delay: -12s; }

.hero-halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: conic-gradient(rgb(var(--gold) / 0) 0deg, rgb(var(--gold) / 0.55) 70deg, rgb(var(--gold-light) / 0.35) 130deg, rgb(var(--gold) / 0) 200deg, rgb(var(--sage) / 0.35) 260deg, rgb(var(--gold) / 0) 330deg);
  filter: blur(40px);
  opacity: 0.85;
  animation: halo-spin 60s linear infinite; /* movimiento constante: linear */
  will-change: transform;
}
@keyframes halo-spin { to { rotate: 360deg; } }

/* Movimiento reducido: menos y más suave, no cero. Se conserva el fundido (aclara qué cambia) y se quita el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal]:not(.rv-done),
  .js-reveal [data-reveal-group]:not(.rv-done) > * { transform: none; filter: none; transition: opacity 200ms linear !important; transition-delay: 0s !important; }
  .gleam { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .hero-tree img, .footer-scorpion, [data-float], .blob, .hero-shape { animation: none; }
  .hero-halo { animation: none; }
  .step-enter-start, .menu-enter-start, .dialog-enter-start { transform: none; filter: none; }
  .nav-link::after { transition: none; }
}
/* === /MOVIMIENTO === */

/* ===== PREGUNTAS FRECUENTES ===== */
.faq-item { padding: 0; overflow: hidden; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; color: rgb(var(--ink));
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: ""; flex: none; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid rgb(var(--gold-deep)); border-bottom: 2px solid rgb(var(--gold-deep));
  transform: rotate(45deg);
}
.faq-item[open] .faq-q::after { transform: rotate(225deg); }
@media (prefers-reduced-motion: no-preference) { .faq-q::after { transition: transform 200ms var(--ease-out); } }
.faq-a { padding: 0 1.4rem 1.3rem; line-height: 1.7; }
.faq-q:focus-visible { outline: 2px solid rgb(var(--gold-deep)); outline-offset: -2px; border-radius: 1rem; }