/* ==========================================================================
   Danzastral — Astrología con enfoque terapéutico
   Hoja de estilos principal (mobile-first)
   Paleta pastel: beige, damasco, verde salvia y azul claro, con detalles
   dorados, estrellas e ilustraciones botánicas.
   --------------------------------------------------------------------------
   0. Fuentes            6. Hero                 12. Talleres y giftcard
   1. Tokens             7. Sobre Mari           13. FAQ, CTA final, footer
   2. Base               8. Sesiones             14. Páginas internas
   3. Tipografía         9. Testimonios          15. Sobre mí
   4. Layout y adornos  10. Cómo funciona        16. Utilidades y movimiento
   5. Header y botones  11. Qué incluye          17. Breakpoints
   ========================================================================== */

/* 0. Fuentes (auto-alojadas, licencia SIL OFL) ------------------------------ */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/cormorant-garamond-italic-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-latin.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/hanken-grotesk-latin-variable.woff2") format("woff2"); }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* beige */
  --papel: #f6f0e8;          /* fondo general */
  --crema: #fcf9f4;          /* tarjetas */
  --lino: #e9ded1;           /* bordes suaves */
  /* damasco */
  --damasco: #e7b193;
  --damasco-suave: #f7e3d6;
  --damasco-osc: #a65f3d;    /* títulos en cursiva (solo tamaños grandes) */
  /* verde salvia */
  --salvia: #a9b99a;
  --salvia-suave: #e3eadb;
  --salvia-osc: #56684d;     /* botones y etiquetas */
  /* azul claro */
  --cielo: #c8dbe6;
  --cielo-suave: #e8f0f4;
  /* detalles */
  --oro: #c6a36a;
  --oro-osc: #9c7a43;
  /* texto */
  --tinta: #463d36;
  --tinta-suave: #6b6058;

  --f-display: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --f-caps: "Marcellus", "Palatino Linotype", Georgia, serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --t-xl: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  --t-2xl: clamp(2.9rem, 2rem + 4.2vw, 5.2rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 72rem;
  --arco: 999px 999px 1.25rem 1.25rem;
  --radius: 1.1rem;
  --sombra: 0 22px 44px -30px rgba(120, 88, 60, 0.45);
  --header-h: 4.5rem;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--papel) url("../img/ornamentos/papel.webp");
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--damasco-osc); }
:focus-visible { outline: 2px solid var(--salvia-osc); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--damasco-suave); color: var(--tinta); }

/* 3. Tipografía ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
strong { font-weight: 600; }
.lead { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.4; color: var(--tinta-suave); }

/* Etiqueta en versalitas espaciadas con destellos, como en la referencia */
.label {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-caps); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--salvia-osc); margin: 0 0 1rem;
}
.label::before, .label::after {
  content: ""; width: 0.75rem; height: 0.75rem; flex: none;
  background: url("../img/ornamentos/estrella.svg") center / contain no-repeat;
}
.center .label, .label--center { justify-content: center; }

/* Título doble: línea en versalitas + cursiva grande en damasco */
.titulo-doble { margin-bottom: 0.4em; }
.titulo-doble__pre {
  display: block; font-family: var(--f-caps); font-weight: 400;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--salvia-osc); margin-bottom: 0.35em;
}
.titulo-doble__main { display: block; font-style: italic; font-weight: 500; color: var(--damasco-osc); }

/* 4. Layout y adornos ------------------------------------------------------ */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.container--narrow { max-width: 50rem; }
.section { position: relative; padding-block: clamp(4rem, 9vw, 7rem); overflow: hidden; }
.section--crema { background: var(--crema); }
.section--cielo { background: var(--cielo-suave); }
.section--salvia { background: var(--salvia-suave); }
.section--damasco { background: var(--damasco-suave); }
.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head p { color: var(--tinta-suave); }
.section-head.center p { margin-inline: auto; }
.center { text-align: center; }

/* Adornos: acuarelas, ramas y estrellas */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deco--acuarela { width: clamp(12rem, 34vw, 26rem); opacity: 0.85; }
.deco--rama { width: clamp(7rem, 16vw, 12rem); }
.section > .container, .hero > .container { z-index: 1; }

.divisor { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1.5rem auto; color: var(--oro); max-width: 18rem; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--oro); opacity: 0.6; }
.divisor svg { width: 0.9rem; height: 0.9rem; }

/* Marco dorado doble (cupón de la referencia) */
.marco {
  background: var(--crema);
  border: 1px solid var(--oro);
  border-radius: 1.4rem;
  box-shadow: inset 0 0 0 7px var(--crema), inset 0 0 0 8px rgba(198, 163, 106, 0.55), var(--sombra);
}

/* 5. Header y botones ------------------------------------------------------ */
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--salvia-osc); color: #fff; padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 100; }
.skip-link:focus { top: 1rem; color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 240, 232, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--lino); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 3.1rem; width: auto; }

.nav { display: none; }
.nav ul { list-style: none; display: flex; gap: clamp(0.9rem, 1.5vw, 1.5rem); margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: var(--t-sm); padding: 0.35rem 0; border-bottom: 1px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: var(--damasco); }
.site-header .header-cta { display: none; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--lino); border-radius: 999px;
  padding: 0.5rem 0.95rem; font: inherit; font-size: var(--t-sm); color: var(--tinta); cursor: pointer;
}
.menu-toggle__icon { width: 1.1rem; height: 0.7rem; position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.25s; }
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--papel); padding: 1.25rem var(--gutter) 6rem; overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--lino); }
.mobile-menu li a { display: block; padding: 0.9rem 0; text-decoration: none; font-family: var(--f-display); font-size: 1.7rem; line-height: 1.2; }
.mobile-menu .btn { width: 100%; min-height: 3.25rem; }
.mobile-menu small { display: block; font-family: var(--f-body); font-size: var(--t-sm); color: var(--tinta-suave); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.6rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 var(--t-md)/1.2 var(--f-body); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.btn--primary { background: var(--salvia-osc); color: #fff; }
.btn--primary:hover { background: #45553d; color: #fff; }
.btn--ghost { border-color: var(--oro); color: var(--tinta); background: transparent; }
.btn--ghost:hover { background: var(--crema); color: var(--tinta); }
.btn--damasco { background: var(--damasco); color: #3d2a1f; }
.btn--damasco:hover { background: #dc9e7d; color: #3d2a1f; }
.btn--sm { min-height: 2.6rem; padding: 0.55rem 1.2rem; font-size: var(--t-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.center .btn-row { justify-content: center; }
.link-more { font-weight: 500; text-decoration: underline; text-decoration-color: var(--damasco); }

/* Barra fija de agendar en móvil */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(252, 249, 244, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--lino);
  display: flex; gap: 0.6rem; align-items: center;
  transform: translateY(110%); transition: transform 0.35s ease;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; }
.sticky-cta .sticky-cta__wa { flex: none; width: 3rem; padding: 0; }

/* 6. Hero ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: 2.75rem; align-items: center; }
.hero h1 { margin-bottom: 0.3em; }
.hero__sub { font-family: var(--f-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.3; color: var(--tinta); margin-bottom: 0.9rem; }
.hero__text { color: var(--tinta-suave); margin-bottom: 1.9rem; }
.hero__facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--t-sm); color: var(--tinta-suave); }
.hero__facts li { display: flex; gap: 0.6rem; align-items: flex-start; }
.hero__facts svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.25rem; color: var(--salvia-osc); }

.hero__art { position: relative; width: min(100%, 25rem); margin-inline: auto; aspect-ratio: 1 / 1.08; }
.hero__art .deco--acuarela { width: 62%; right: -8%; top: -4%; }
.hero__art .deco--cielo { width: 34%; left: -6%; bottom: 6%; opacity: 0.9; }
.hero__constelacion { position: absolute; inset: 2% 6%; z-index: 1; opacity: 0.9; animation: girar 220s linear infinite; }
.hero__photo {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 60%; aspect-ratio: 4 / 5;
  transform: translate(-50%, -48%); border-radius: var(--arco); overflow: hidden; box-shadow: var(--sombra);
  border: 6px solid var(--crema);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__art .deco--rama { z-index: 3; width: 38%; left: 2%; bottom: -2%; transform: rotate(-12deg); }
.hero__badge {
  position: absolute; z-index: 4; right: 0; bottom: 10%;
  background: var(--crema); border: 1px solid var(--lino); border-radius: 1rem; padding: 0.65rem 0.9rem; box-shadow: var(--sombra);
  font-size: var(--t-xs); line-height: 1.35; text-decoration: none;
}
.hero__badge strong { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--tinta); }
.hero__badge .stars { margin-bottom: 0.15rem; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Franja de confianza */
.trust { background: var(--crema); border-block: 1px solid var(--lino); position: relative; z-index: 1; }
.trust ul { list-style: none; margin: 0; padding: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.25rem; font-size: var(--t-sm); }
.trust li { display: flex; gap: 0.55rem; align-items: center; }
.trust a { text-decoration: none; }
.trust svg { width: 1.2rem; height: 1.2rem; color: var(--salvia-osc); flex: none; }
.trust .stars svg { width: 0.85rem; height: 0.85rem; color: var(--oro); }

/* 7. Sobre Mari ------------------------------------------------------------ */
.about { display: grid; gap: 3rem; align-items: center; }
.about__photos { position: relative; max-width: 25rem; width: 100%; margin-inline: auto; }
.about__photos .about__main img { border-radius: var(--arco); width: 82%; border: 6px solid var(--crema); box-shadow: var(--sombra); }
.about__photos .about__second img {
  position: absolute; right: 0; bottom: -1.5rem; width: 44%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; border: 6px solid var(--crema); box-shadow: var(--sombra);
}
.about__photos .deco--rama { left: -10%; top: -6%; width: 40%; z-index: 2; transform: scaleX(-1) rotate(-20deg); }
.about__photos .deco--acuarela { width: 70%; right: -14%; top: 10%; z-index: -1; }
.about__pregunta { font-family: var(--f-display); font-style: italic; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); line-height: 1.3; color: var(--damasco-osc); margin-bottom: 1.1rem; }
.about__destacado { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.3; margin: 1.4rem 0 0.6rem; }

/* 8. Sesiones -------------------------------------------------------------- */
.services { display: grid; gap: 1.5rem; }
.service {
  background: var(--crema); border: 1px solid var(--lino); border-radius: 1.5rem;
  padding: 0.75rem 0.75rem 1.6rem; display: flex; flex-direction: column;
}
.service__img { display: block; border-radius: 999px 999px 1rem 1rem; overflow: hidden; aspect-ratio: 5 / 4; }
.service__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service:hover .service__img img { transform: scale(1.03); }
.service__body { padding: 1.35rem 0.85rem 0; display: flex; flex-direction: column; flex: 1; }
.service h3 { font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.2rem); margin-bottom: 0.35em; }
.service h3 a { text-decoration: none; }
.service__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.service__meta li { font-size: var(--t-xs); border: 1px solid var(--lino); border-radius: 999px; padding: 0.25rem 0.75rem; background: var(--papel); }
.service__ideal { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--tinta-suave); }
.service .btn-row { margin-top: auto; padding-top: 0.5rem; }
.requisito { margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--salvia-suave); display: flex; gap: 0.9rem; align-items: flex-start; font-size: var(--t-sm); }
.requisito img { width: 1rem; margin-top: 0.3rem; flex: none; }
.requisito p { margin: 0; max-width: none; }

/* 9. Testimonios ----------------------------------------------------------- */
.stars { display: inline-flex; gap: 0.15rem; color: var(--oro); }
.stars svg { width: 1rem; height: 1rem; }
.rating { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; font-size: var(--t-sm); color: var(--tinta-suave); }
.rating strong { font-family: var(--f-display); font-size: 1.6rem; color: var(--tinta); font-weight: 600; }

.t-featured { max-width: 46rem; margin: 0 auto 2.75rem; padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem); text-align: center; }
.t-featured blockquote { margin: 0.75rem 0 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); line-height: 1.4; }
.t-featured blockquote p { margin: 0 auto; max-width: none; }
.t-featured figcaption { margin-top: 1rem; font-family: var(--f-caps); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; color: var(--salvia-osc); }

.t-nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 1rem; }
.t-nav button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--oro); background: var(--crema); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.t-nav button:hover { background: #fff; }
.t-nav svg { width: 1.1rem; height: 1.1rem; }
.t-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.25rem var(--gutter) 1.25rem; margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin; scrollbar-color: var(--oro) transparent;
}
.t-card {
  scroll-snap-align: center; margin: 0;
  background: var(--crema); border: 1px solid var(--lino); border-radius: 1.25rem;
  padding: 1.4rem 1.35rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.t-card blockquote { margin: 0; flex: 1; }
.t-card blockquote p { margin: 0; }
.t-card--clamp blockquote p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.t-card figcaption { font-size: var(--t-sm); color: var(--tinta-suave); line-height: 1.45; }
.t-card figcaption b { display: block; color: var(--tinta); font-weight: 600; }
.t-card .t-leer { font-size: var(--t-sm); }
.t-actions { margin-top: 2rem; justify-content: center; }

/* Página de testimonios */
.t-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0 0 2rem; }
.t-filtros button {
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--lino); background: var(--crema); color: var(--tinta);
}
.t-filtros button[aria-pressed="true"] { background: var(--salvia-osc); border-color: var(--salvia-osc); color: #fff; }
.t-filtros span { opacity: 0.75; margin-left: 0.25rem; }
.t-wall { columns: 1; column-gap: 1.25rem; }
.t-wall .t-card { break-inside: avoid; margin: 0 0 1.25rem; }
.t-wall .t-card[hidden] { display: none; }
.t-wall .t-card--destacado { background: var(--damasco-suave); border-color: var(--damasco-suave); }
.t-fuente { font-size: var(--t-xs); color: var(--tinta-suave); text-align: center; margin-top: 1rem; }

/* 10. Cómo funciona -------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: paso; }
.steps li { position: relative; padding-left: 3.6rem; counter-increment: paso; }
.steps li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -0.15rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--damasco-suave); border: 1px solid var(--damasco);
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--damasco-osc);
}
.steps h3 { font-size: 1.45rem; margin-bottom: 0.25em; }
.steps p { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }

/* 11. Qué incluye ---------------------------------------------------------- */
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.includes li { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--crema); border: 1px solid var(--lino); border-radius: var(--radius); padding: 1.15rem 1.2rem; }
.includes svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--salvia-osc); margin-top: 0.15rem; }
.includes strong { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.includes span { font-size: var(--t-sm); color: var(--tinta-suave); }

/* 12. Talleres y giftcard -------------------------------------------------- */
.talleres { display: grid; gap: 2.5rem; align-items: center; }
.talleres__img { border-radius: var(--arco); overflow: hidden; max-width: 24rem; width: 100%; margin-inline: auto; border: 6px solid var(--crema); box-shadow: var(--sombra); aspect-ratio: 4 / 5; }
.talleres__img img { width: 100%; height: 100%; object-fit: cover; }
.talleres__lista { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.6rem; }
.talleres__lista li { display: flex; gap: 0.7rem; align-items: flex-start; }
.talleres__lista img { width: 0.85rem; margin-top: 0.45rem; flex: none; }

.giftcard { max-width: 40rem; margin-inline: auto; padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3.25rem); text-align: center; position: relative; z-index: 1; }
.giftcard__icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; color: var(--oro); }
.giftcard h2 { margin-bottom: 0.1em; }
.giftcard .titulo-doble__main { font-size: clamp(3rem, 2.2rem + 4vw, 4.8rem); line-height: 1; }
.giftcard__para { font-family: var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.85rem; color: var(--salvia-osc); margin: 0 auto 1.25rem; }
.giftcard__banda {
  position: relative; margin: 0 -0.5rem 1.4rem; padding: 0.7rem 1rem;
  background: var(--salvia-osc); color: #fff;
  font-family: var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem);
}
.giftcard__banda::before, .giftcard__banda::after {
  content: ""; position: absolute; top: 50%; width: 0.9rem; height: 0.9rem; background: var(--crema); border-radius: 50%; transform: translateY(-50%);
}
.giftcard__banda::before { left: -0.45rem; }
.giftcard__banda::after { right: -0.45rem; }
.giftcard p { margin-inline: auto; color: var(--tinta-suave); }
.giftcard__pasos { list-style: none; margin: 1.5rem auto 1.75rem; padding: 0; display: grid; gap: 0.55rem; max-width: 26rem; text-align: left; font-size: var(--t-sm); }
.giftcard__pasos li { display: flex; gap: 0.7rem; align-items: flex-start; }
.giftcard__pasos b { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--damasco-suave); color: var(--damasco-osc); font-family: var(--f-display); font-size: 1.05rem; }
.giftcard__nota { font-family: var(--f-caps); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 1.4rem; }

/* 13. FAQ, CTA final y footer ---------------------------------------------- */
.faq { border-top: 1px solid var(--lino); }
.faq details { border-bottom: 1px solid var(--lino); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: var(--f-display); font-size: 1.4rem; font-weight: 500; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.65rem; height: 0.65rem;
  border-right: 1.5px solid var(--oro-osc); border-bottom: 1.5px solid var(--oro-osc);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.25s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq__a { padding: 0 0 1.25rem; color: var(--tinta-suave); }
.faq .faq__a p:last-child { margin-bottom: 0; }

.cta-final { text-align: center; }
.cta-final .container { display: flex; flex-direction: column; align-items: center; }
.cta-final p { margin-inline: auto; }
.cta-final__note { font-size: var(--t-sm); color: var(--tinta-suave); margin-top: 1.25rem; }

.site-footer { background: var(--crema); border-top: 1px solid var(--lino); color: var(--tinta-suave); padding-block: 3.5rem 2rem; font-size: var(--t-sm); position: relative; overflow: hidden; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--damasco-osc); }
.footer__grid { display: grid; gap: 2rem; position: relative; z-index: 1; }
.footer__logo img { height: 4.5rem; width: auto; margin-bottom: 1rem; }
.footer__title { font-family: var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.78rem; color: var(--salvia-osc); margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lino); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: var(--t-xs); position: relative; z-index: 1; }
.social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.social a { width: 2.75rem; height: 2.75rem; border: 1px solid var(--oro); border-radius: 50%; display: grid; place-items: center; color: var(--tinta); }
.social svg { width: 1.2rem; height: 1.2rem; }
.site-footer .deco--rama { right: -2rem; bottom: -1rem; width: 10rem; opacity: 0.7; transform: rotate(160deg); }
.site-footer { padding-bottom: calc(2rem + 4.75rem + env(safe-area-inset-bottom)); }

/* 14. Páginas internas ----------------------------------------------------- */
.breadcrumbs { font-size: var(--t-xs); color: var(--tinta-suave); padding-top: 1.25rem; position: relative; z-index: 2; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--oro); }
.breadcrumbs a { text-decoration: none; }

.page-hero { position: relative; overflow: hidden; padding-block: clamp(1.5rem, 5vw, 3rem) clamp(3.5rem, 8vw, 5.5rem); }
.page-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.page-hero h1 { font-size: clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem); }
.page-hero__img { position: relative; max-width: 23rem; width: 100%; margin-inline: auto; }
.page-hero__img picture img { border-radius: var(--arco); aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border: 6px solid var(--crema); box-shadow: var(--sombra); }
.page-hero__img .deco--acuarela { width: 75%; right: -18%; top: -8%; z-index: -1; }
.page-hero__img .deco--rama { width: 42%; left: -12%; bottom: -6%; z-index: 2; transform: rotate(-10deg); }
.price-tag { font-family: var(--f-display); font-size: 1.6rem; font-weight: 600; margin-bottom: 1.25rem; }
.price-tag small { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 400; color: var(--tinta-suave); }

.two-col { display: grid; gap: 2.5rem; }
.prose h2 { margin-top: 0; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.42rem; width: 0.95rem; height: 0.95rem; background: url("../img/ornamentos/estrella.svg") center / contain no-repeat; }

.options { display: grid; gap: 1.25rem; }
.option { padding: 2rem 1.6rem; display: flex; flex-direction: column; text-align: center; }
.option--simple { background: var(--crema); border: 1px solid var(--lino); border-radius: 1.4rem; }
.option h3 { margin-bottom: 0.2em; }
.option__price { font-family: var(--f-display); font-size: 2.4rem; font-weight: 600; line-height: 1.1; margin: 0.25rem 0 0.75rem; }
.option__price small { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 400; color: var(--tinta-suave); }
.option p { font-size: var(--t-sm); color: var(--tinta-suave); flex: 1; margin-inline: auto; }
.option .btn { margin-top: 0.5rem; align-self: center; }

.callout { background: var(--crema); border: 1px solid var(--lino); border-radius: 1.4rem; padding: 1.6rem 1.5rem; }
.callout h3 { font-size: 1.55rem; }

.related { display: grid; gap: 1rem; }
.related a { display: flex; gap: 1rem; align-items: center; text-decoration: none; background: var(--crema); border-radius: 1rem; padding: 0.75rem; border: 1px solid var(--lino); }
.related a:hover { border-color: var(--oro); color: var(--tinta); }
.related img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 999px 999px 0.6rem 0.6rem; flex: none; }
.related strong { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; display: block; line-height: 1.2; }
.related span { font-size: var(--t-sm); color: var(--tinta-suave); }

.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* 15. Sobre mí ------------------------------------------------------------- */
.historia p:first-of-type::first-letter { font-family: var(--f-display); font-size: 3.4em; float: left; line-height: 0.85; padding: 0.08em 0.1em 0 0; color: var(--damasco-osc); }
.pendiente { border: 1px dashed var(--damasco); background: var(--damasco-suave); border-radius: 0.75rem; padding: 0.9rem 1.1rem; font-size: var(--t-sm); }
.certificados { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.certificado { margin: 0; padding: 0.9rem; text-align: center; }
.certificado__img { aspect-ratio: 4 / 3; border-radius: 0.75rem; overflow: hidden; background: var(--papel); display: grid; place-items: center; border: 1px dashed var(--oro); color: var(--tinta-suave); font-size: var(--t-sm); padding: 1rem; }
.certificado__img img { width: 100%; height: 100%; object-fit: cover; }
.certificado figcaption { margin-top: 0.8rem; font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.certificado figcaption small { display: block; font-family: var(--f-body); font-size: var(--t-xs); font-weight: 400; color: var(--tinta-suave); }
.valores { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.valores li { background: var(--crema); border: 1px solid var(--lino); border-radius: 1.25rem; padding: 1.4rem; }
.valores strong { display: block; font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-bottom: 0.3rem; }
.valores span { color: var(--tinta-suave); font-size: var(--t-sm); }

/* 16. Utilidades y movimiento --------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-2 { margin-top: 2rem; }

.hero__photo, .hero__copy > * { animation: aparecer 0.9s cubic-bezier(.2,.7,.2,1) both; }
.hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.hero__copy > :nth-child(5) { animation-delay: 0.32s; }
.hero__photo { animation-name: aparecer-foto; animation-duration: 1.2s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-foto { from { opacity: 0; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -48%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__constelacion, .hero__photo, .hero__copy > * { animation: none; }
  .service__img img, .sticky-cta { transition: none; }
}

/* 17. Breakpoints ---------------------------------------------------------- */
@media (min-width: 40rem) {
  .t-track { grid-auto-columns: 46%; }
  .trust ul { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .includes { grid-template-columns: 1fr 1fr; }
  .t-wall { columns: 2; }
  .options { grid-template-columns: 1fr 1fr; }
  .related { grid-template-columns: 1fr 1fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .valores { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 62rem) {
  .nav { display: block; }
  .site-header .header-cta { display: inline-flex; }
  .menu-toggle, .mobile-menu, .sticky-cta { display: none !important; }
  .site-footer { padding-bottom: 2rem; }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .hero__art { width: 100%; max-width: 31rem; }
  .about { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; }
  .services { gap: 2rem; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps li { padding-left: 0; padding-top: 3.6rem; }
  .includes { grid-template-columns: repeat(4, 1fr); }
  .includes li { flex-direction: column; }
  .t-track { grid-auto-columns: calc((100% - 2rem) / 3); margin-inline: 0; padding-inline: 0; }
  .t-wall { columns: 3; }
  .page-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
  .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; }
  .talleres { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* Ajustes finos ------------------------------------------------------------ */
.giftcard .giftcard__banda { color: #fff; max-width: none; }
.logo img { height: 3.5rem; }
.rating { flex-direction: column; gap: 0.25rem; }
.rating > span:first-child + strong { margin-top: -0.1rem; }
@media (max-width: 61.99rem) {
  .solo-desktop { display: none !important; }
  .cta-final .deco--acuarela { width: 12rem !important; opacity: 0.55; }
  .section .deco[src*="constelacion"] { width: 8rem !important; opacity: 0.5; }
  .about__photos .deco--acuarela { opacity: 0.6; }
}
@media (min-width: 40rem) {
  .rating { flex-direction: row; gap: 0.6rem; }
}
@media (min-width: 62rem) {
  .logo img { height: 3.9rem; }
}
.option .option__price { font-size: 2.4rem; color: var(--tinta); flex: none; }
.rating__txt { display: inline; }

/* Historia (Sobre mí) ------------------------------------------------------ */
.historia { text-align: center; }
.historia .historia__frase {
  font-style: italic; font-weight: 500; color: var(--damasco-osc);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); line-height: 1.25; max-width: 40rem; margin-inline: auto;
}
.historia__texto { text-align: left; max-width: 40rem; margin: 2rem auto 0; }
.historia__texto p { max-width: none; }
.historia__texto p:first-child::first-letter { font-family: var(--f-display); font-size: 3.4em; float: left; line-height: 0.85; padding: 0.08em 0.1em 0 0; color: var(--damasco-osc); }
.historia__texto .historia__cierre { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.4; color: var(--tinta); text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lino); }
.historia > .label::first-letter { all: unset; }

/* Certificados ------------------------------------------------------------- */
.certificados { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.certificados > li { flex: 1 1 100%; max-width: 22rem; }
.certificado { margin: 0; height: 100%; display: flex; flex-direction: column; background: var(--crema); border: 1px solid var(--lino); border-radius: 1.25rem; padding: 0.75rem; text-align: left; }
.certificado .certificado__img { display: block; aspect-ratio: auto; border: 0; padding: 0; border-radius: 0.75rem; overflow: hidden; background: var(--papel); cursor: zoom-in; }
.certificado .certificado__img img { width: 100%; height: auto; object-fit: initial; transition: transform 0.4s ease; }
.certificado .certificado__img:hover img { transform: scale(1.03); }
.certificado figcaption { margin: 0.9rem 0.35rem 0.25rem; font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.certificado figcaption small { display: block; margin-top: 0.3rem; font-family: var(--f-body); font-size: var(--t-xs); font-weight: 400; color: var(--tinta-suave); line-height: 1.45; }
.certificado__anio { display: inline-block; margin-bottom: 0.4rem; padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--damasco-suave); color: var(--damasco-osc); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; margin-right: 100%; }
@media (min-width: 40rem) { .certificados > li { flex-basis: calc(50% - 0.65rem); } }
@media (min-width: 62rem) { .certificados > li { flex-basis: calc(33.333% - 0.85rem); } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(70, 61, 54, 0.82); }
.lightbox img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 0.75rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); background: var(--crema); }
.lightbox form { margin: 0; }
.lightbox__cerrar { position: absolute; top: -0.9rem; right: -0.9rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--oro); background: var(--crema); color: var(--tinta); font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 1; }

/* Encuentro de Luna Nueva (video) ----------------------------------------- */
.video { max-width: 52rem; margin-inline: auto; padding: 0.6rem; position: relative; z-index: 1; }
.video__facade, .video iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.9rem; overflow: hidden; border: 0; background: var(--papel); }
.video__facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.video__facade:hover img { transform: scale(1.02); }
.video__play { position: absolute; left: 50%; top: 50%; width: clamp(3.75rem, 10vw, 5.25rem); transform: translate(-50%, -50%); filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); transition: transform 0.25s; }
.video__facade:hover .video__play, .video__facade:focus-visible .video__play { transform: translate(-50%, -50%) scale(1.07); }
.video__dur { position: absolute; right: 0.75rem; bottom: 0.75rem; background: rgba(70, 61, 54, 0.85); color: #fff; font-size: var(--t-xs); padding: 0.2rem 0.55rem; border-radius: 0.4rem; }
.video__titulo { text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--tinta-suave); margin: 1rem auto 1.5rem; }

/* Página Talleres: grilla de videos --------------------------------------- */
.vgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; position: relative; z-index: 1; }
.vcard { background: var(--crema); border: 1px solid var(--lino); border-radius: 1.25rem; padding: 0.6rem; display: flex; flex-direction: column; }
.vcard .vcard__video .video__facade, .vcard .vcard__video iframe { border-radius: 0.85rem; }
.vcard .video__play { width: clamp(3.25rem, 9vw, 4rem); }
.vcard__body { padding: 1rem 0.65rem 0.65rem; }
.vcard__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; font-size: var(--t-xs); color: var(--tinta-suave); margin: 0 0 0.5rem; }
.vcard__tipo { background: var(--salvia-suave); color: var(--salvia-osc); border-radius: 999px; padding: 0.15rem 0.65rem; font-weight: 600; }
.vcard h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.4rem; }
.vcard p { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }
@media (min-width: 40rem) { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .vgrid { grid-template-columns: repeat(3, 1fr); } }

/* Opción Giftcard en las páginas de servicio ------------------------------ */
.option--gift { background: var(--crema); border: 1px dashed var(--damasco); border-radius: 1.4rem; }
.option__icon { display: block; width: 2.6rem; height: 2.6rem; margin: 0 auto 0.6rem; color: var(--oro); }
.option .option__price--txt { font-size: 1.9rem; font-style: italic; color: var(--damasco-osc); }
.option .option__price--txt small { display: block; font-style: normal; margin-top: 0.15rem; }
@media (min-width: 62rem) { .options--3 { grid-template-columns: repeat(3, 1fr); } }