/* =====================================================================
   Tamara Lynch — estilos
   Concepto: el hilo rojo del destino. Íntimo, cálido, luz de velas.
   ===================================================================== */

:root {
  /* Paleta */
  --vino: #2B0B16;
  --vino-alto: #3A1120;
  --vino-hondo: #1E0710;
  --cera: #F7E8E5;
  --cera-alta: #FFF7F4;
  --cera-borde: #EAD2CD;
  --rojo: #C21F3A;
  --rosa: #E7A3A9;
  --oro: #EDB75A;
  --wa: #25D366;
  --wa-hover: #3BE27A;
  --wa-tinta: #07261A;

  /* Textos */
  --tinta: #2B0B16;          /* sobre cera */
  --tinta-suave: #5E2F3B;    /* sobre cera */
  --claro: #F7E8E5;          /* sobre vino */
  --claro-suave: #DCC4C4;    /* sobre vino */

  /* Tipografías */
  --f-titulo: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-firma: "Mrs Saint Delafield", cursive;

  --margen: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--vino);
  color: var(--claro);
  font: 400 1.0625rem/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
p { margin: 0 0 1em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 8.8vw, 3.6rem); line-height: 1.07; }
h2 { font-size: clamp(1.85rem, 7.4vw, 2.7rem); line-height: 1.1; margin-bottom: .55em; }
h1 em, h2 em { font-style: italic; color: var(--rosa); }

.antetitulo {
  margin: 0 0 12px;
  font: 700 .78rem/1.3 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rojo);
}

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; }
.seccion--vino {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(237, 183, 90, .09), rgba(237, 183, 90, 0) 70%),
    var(--vino);
  color: var(--claro);
}
.seccion--vino .antetitulo { color: var(--rosa); }
.seccion--cera { background: var(--cera); color: var(--tinta); }

/* El contenido va por encima del hilo; los fondos, por debajo. */
.envoltura {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* ---------- El hilo rojo ---------- */
.hilo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.hilo path {
  fill: none;
  stroke: var(--rojo);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hilo-trazo { stroke-width: 1.7; }
.hilo-brillo { stroke-width: 6; opacity: .14; }
.hilo-nudo { transition: stroke-dashoffset 1.6s cubic-bezier(.3, .6, .3, 1); }

/* ---------- Botón de WhatsApp ---------- */
.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--wa);
  color: var(--wa-tinta);
  font: 700 1.0625rem/1.2 var(--f-texto);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .6);
  -webkit-tap-highlight-color: transparent;
}
.btn-wa svg { width: 23px; height: 23px; flex: none; fill: currentColor; }
.btn-wa:hover { background: var(--wa-hover); }
.btn-wa:focus-visible,
summary:focus-visible,
button:focus-visible,
.wa-flotante:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.seccion--cera .btn-wa:focus-visible,
.seccion--cera summary:focus-visible,
.seccion--cera button:focus-visible { outline-color: var(--rojo); }

.nota { margin: 12px 0 0; font-size: .92rem; color: var(--claro-suave); }

/* ---------- 1. Portada ---------- */
.portada { padding: 52px 0 64px; }
.portada h1 { margin-bottom: 30px; }

.identidad { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.retrato {
  flex: none;
  width: 88px;
  height: 88px;
  margin: 8px 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vino-alto);
}
.identidad p { margin: 0; }
.identidad-nombre { font: 500 1.6rem/1.1 var(--f-titulo); color: var(--claro); }
.identidad-dato { margin-top: 4px !important; font-size: .98rem; line-height: 1.35; color: var(--rosa); }

.portada-texto { max-width: 36ch; color: var(--claro); }

.gratis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 14px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--oro);
}
.gratis svg { width: 15px; height: 21px; fill: var(--oro); flex: none; }

/* ---------- 2. Identificación ---------- */
.situaciones { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.situacion {
  position: relative;
  padding: 18px 20px 18px 24px;
  border: 1px solid var(--cera-borde);
  border-radius: 16px;
  background: var(--cera-alta);
}
.situacion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rojo);
}
.situacion strong {
  display: block;
  margin-bottom: 4px;
  font: 600 1.25rem/1.2 var(--f-titulo);
  color: var(--tinta);
}
.situacion p { margin: 0; color: var(--tinta-suave); }

.desconfianza {
  margin-top: 28px;
  padding: 26px 22px;
  border-radius: 20px;
  background: var(--vino);
  color: var(--claro);
}
.desconfianza h3 {
  margin-bottom: 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  font-style: italic;
  color: var(--rosa);
}
.desconfianza p { margin: 0; }

/* ---------- 3. Trabajos ---------- */
.precio {
  display: inline-block;
  margin: 4px 0 0;
  padding: 6px 16px;
  border: 1px solid var(--oro);
  border-radius: 999px;
  color: var(--oro);
}
.precio strong { font-weight: 700; }

.grupo-titulo {
  margin: 34px 0 12px;
  font: 700 .78rem/1.3 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}

.trabajo {
  margin-bottom: 12px;
  border: 1px solid rgba(231, 163, 169, .2);
  border-radius: 18px;
  background: var(--vino-alto);
}
.trabajo--destacado {
  border-color: rgba(237, 183, 90, .45);
  background:
    linear-gradient(180deg, rgba(237, 183, 90, .09), rgba(237, 183, 90, 0) 70%),
    var(--vino-alto);
}
.trabajo summary {
  position: relative;
  display: block;
  padding: 20px 64px 20px 20px;
  cursor: pointer;
  list-style: none;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.trabajo summary::-webkit-details-marker,
.pregunta summary::-webkit-details-marker,
.terminos summary::-webkit-details-marker { display: none; }
.trabajo-titulo { display: block; font: 500 1.45rem/1.15 var(--f-titulo); color: var(--claro); }
.trabajo--destacado .trabajo-titulo { font-size: 1.7rem; }
.trabajo-bajada { display: block; margin-top: 5px; font-size: .98rem; line-height: 1.45; color: var(--claro-suave); }
.trabajo-cuerpo { padding: 0 20px 22px; }
.trabajo-cuerpo .btn-wa { margin-top: 18px; }

/* Signo + / − de los desplegables */
.signo {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border: 1px solid rgba(231, 163, 169, .55);
  border-radius: 50%;
}
.signo::before, .signo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  background: var(--rosa);
}
.signo::after { transform: rotate(90deg); }
details[open] > summary .signo::after { display: none; }
.trabajo[open] > summary .signo { top: 38px; }

/* ---------- 4. Sobre mí ---------- */
.sobre-foto {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 10px auto 30px;
  object-fit: cover;
  border-radius: 200px 200px 20px 20px;
  box-shadow: 0 24px 48px -24px rgba(43, 11, 22, .55);
  background: var(--cera-borde);
}
.sobre-texto p { color: var(--tinta); }
.firma {
  margin: 4px 0 0;
  font: 400 3.4rem/1 var(--f-firma);
  color: var(--rojo);
}

.video { margin-top: 36px; }
.video-play, .video video {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--vino);
  cursor: pointer;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .75; display: block; }
.video-boton {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(247, 232, 229, .92);
}
.video-boton::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 23px;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--vino);
}
.video-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  font: 700 1.05rem var(--f-texto);
  color: var(--claro);
  text-align: center;
}

/* ---------- 5. Proceso ---------- */
.pasos { list-style: none; margin: 26px 0 30px; padding: 0; }
.paso {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid rgba(231, 163, 169, .18);
}
.paso:last-child { border-bottom: 1px solid rgba(231, 163, 169, .18); }
.paso-num { font: italic 500 2.5rem/1 var(--f-titulo); color: var(--oro); }
.paso h3 { margin: 2px 0 6px; font-size: 1.35rem; line-height: 1.2; }
.paso p { margin: 0; color: var(--claro-suave); }

/* ---------- 6. Testimonios ---------- */
.carrusel { position: relative; z-index: 2; margin-top: 26px; }
.pista {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 6px var(--margen) 22px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.pista::-webkit-scrollbar { display: none; }
.pista--manual { scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen); }
.pista--manual .testimonio { scroll-snap-align: start; }
.testimonio {
  flex: 0 0 min(80vw, 330px);
  margin: 0;
  padding: 14px;
  border: 1px solid var(--cera-borde);
  border-radius: 20px;
  background: var(--cera-alta);
  box-shadow: 0 16px 30px -22px rgba(43, 11, 22, .45);
}
.testimonio-cita {
  margin: 6px 6px 14px;
  font: italic 500 1.3rem/1.25 var(--f-titulo);
  color: var(--tinta);
}
.testimonio-captura {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #111;
  cursor: zoom-in;
}
.testimonio-captura img { display: block; width: 100%; height: auto; }

/* ---------- 7. Garantía ---------- */
.garantia {
  padding: 32px 22px;
  border: 1px solid rgba(237, 183, 90, .55);
  border-radius: 24px;
  box-shadow: inset 0 0 0 5px var(--vino), inset 0 0 0 6px rgba(237, 183, 90, .22);
  background: rgba(0, 0, 0, .12);
}
.garantia h2 { color: var(--claro); }
.garantia-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.garantia-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.garantia-lista svg { width: 24px; height: 24px; margin-top: 1px; color: var(--oro); }

/* ---------- 8. Preguntas ---------- */
.preguntas { margin-top: 20px; border-top: 1px solid var(--cera-borde); }
.pregunta { border-bottom: 1px solid var(--cera-borde); }
.pregunta summary {
  position: relative;
  display: block;
  padding: 18px 52px 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
.pregunta .signo { right: 0; border-color: rgba(194, 31, 58, .45); }
.pregunta .signo::before, .pregunta .signo::after { background: var(--rojo); }
.pregunta p { margin: 0 0 20px; color: var(--tinta-suave); }

/* ---------- 9. Cierre ---------- */
.cierre { padding-bottom: 84px; text-align: center; }
.cierre h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.cierre p { max-width: 34ch; margin-left: auto; margin-right: auto; color: var(--claro); }
.cierre .nota { color: var(--claro-suave); }
.nudo-ancla { height: 136px; }
.cierre .btn-wa { width: fit-content; min-width: 272px; margin: 0 auto; }

/* ---------- 10. Pie ---------- */
.pie {
  padding: 36px 0 112px;
  background: var(--vino-hondo);
  color: var(--claro-suave);
  font-size: .9rem;
  line-height: 1.55;
}
.pie p { margin: 0 0 14px; }
.pie-marca { font: 500 1.05rem var(--f-titulo); color: var(--claro); }
.terminos { margin-bottom: 16px; }
.terminos summary {
  display: inline-block;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.terminos ul { margin: 8px 0 0; padding-left: 18px; }
.terminos li { margin-bottom: 8px; }
.pie-copy { font-size: .82rem; opacity: .8; }

/* ---------- Botón flotante ---------- */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--wa-tinta);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55), 0 0 0 5px rgba(37, 211, 102, .16);
  animation: latido 2.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.wa-flotante svg { width: 31px; height: 31px; fill: currentColor; }
.wa-flotante:hover { background: var(--wa-hover); }

@keyframes latido {
  0%, 36%, 100% { transform: scale(1); }
  9% { transform: scale(1.08); }
  18% { transform: scale(1); }
  26% { transform: scale(1.05); }
}

/* ---------- Visor de capturas ---------- */
.visor {
  width: min(94vw, 560px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  overflow: auto;
  background: transparent;
}
.visor::backdrop { background: rgba(20, 4, 10, .88); }
.visor img { display: block; width: 100%; height: auto; border-radius: 14px; }
.visor-cerrar {
  position: sticky;
  top: 8px;
  float: right;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin: 8px 8px -52px 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 232, 229, .95);
  color: var(--vino);
  font: 400 1.8rem/1 var(--f-texto);
  cursor: pointer;
}

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 720px) {
  :root { --margen: 32px; }
  body { font-size: 1.125rem; }
  .seccion { padding: 104px 0; }
  .portada { padding: 88px 0 96px; }
  .retrato { width: 104px; height: 104px; }
  .identidad-nombre { font-size: 1.9rem; }
  .situaciones { grid-template-columns: 1fr 1fr; }
  .garantia { padding: 44px 40px; }
  .hilo-trazo { stroke-width: 1.9; }
  .pista { padding-left: max(var(--margen), calc((100vw - 720px) / 2 + var(--margen))); }
}

/* ---------- Sin animaciones para quien las desactivó ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.con-movimiento) .wa-flotante { animation: none; }
  html:not(.con-movimiento) .hilo-nudo { transition: none; }
}