/* Volver a mí · Club de pausas
   Diseño primero para celular (360–390 px). Paleta propuesta por Pri y Alejandro,
   contrastes verificados (WCAG AA). */
:root {
  --crema: #FCF5F1;
  --rosa: #F6E3E0;
  --verde: #F8ECE8;
  --boton: #6B1E36;
  --boton-hover: #561629;
  --texto: #4B2C35;
  --suave: #75606A;
  --verde-texto: #7A3346;
  --linea: #EDD9D6;
  --blanco: #FFFFFF;
  --aviso: #FFF1C9;
  --error: #9B2C2C;
  --rosa-fuerte: #D9A9AF; /* solo para trazos y bordes decorativos */
  --salvia: #D7B5B1;
  --titulos: "Fredoka", "Nunito", system-ui, sans-serif;
  --titulos-fino: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --manuscrita: "Caveat", "Segoe Print", cursive; /* solo detalles cortos y decorativos */
  --cuerpo: "Lato", "Helvetica Neue", Arial, sans-serif;
  --radio: 22px;
  --radio-chico: 14px;
  --sombra: 0 8px 30px rgba(107, 30, 54, 0.07);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--cuerpo);
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--titulos); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 9.5vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 6.5vw, 2.7rem); }
h3 { font-size: 1.4rem; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--boton); }
p { margin: 0; }
a { color: var(--boton); }
:focus-visible { outline: 3px solid var(--boton); outline-offset: 3px; border-radius: 8px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.seccion { padding-block: clamp(60px, 9vw, 104px); }
.seccion > .contenedor { display: grid; gap: 22px; }
.etiqueta {
  font: 700 0.78rem var(--cuerpo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--boton);
}
.bajada { color: var(--suave); max-width: 60ch; }
.fondo-rosa { background: var(--rosa); }
.fondo-verde { background: var(--verde); }

/* ---------- Aviso de demo y pendientes ---------- */
.banda-demo {
  background: var(--texto);
  color: var(--crema);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px 16px;
}
.banda-demo strong { color: var(--rosa); }
.pendiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aviso);
  color: #5C4A12;
  border: 1.5px dashed #C9A23A;
  border-radius: 999px;
  padding: 3px 12px;
  font: 600 0.8rem var(--cuerpo);
  width: fit-content;
}
.ejemplo-tag {
  display: inline-block;
  background: var(--verde);
  color: var(--verde-texto);
  border-radius: 999px;
  padding: 2px 10px;
  font: 700 0.72rem var(--cuerpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 0;
  background: var(--boton);
  color: var(--blanco);
  font: 600 1.05rem var(--cuerpo);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.boton:hover { background: var(--boton-hover); }
.boton:active { transform: scale(0.98); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; }
.boton.secundario { background: transparent; color: var(--boton); border: 2px solid var(--boton); }
.boton.secundario:hover { background: var(--rosa); }
.boton.chico { min-height: 44px; padding: 8px 18px; font-size: 0.95rem; }
.boton.ancho { width: 100%; }
.enlace-boton { background: none; border: 0; color: var(--boton); font: 600 0.95rem var(--cuerpo); cursor: pointer; padding: 10px 6px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 248, 245, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.marca-nombre { font: 600 1.15rem var(--titulos); line-height: 1.1; }
.marca-nombre small { display: block; font: 500 0.75rem var(--cuerpo); color: var(--suave); letter-spacing: 0.04em; }
.menu-lista { display: none; gap: 22px; list-style: none; margin: 0; padding: 0; }
.menu-lista a { color: var(--texto); text-decoration: none; font-weight: 500; }
.menu-lista a:hover { color: var(--boton); }
.menu-acciones { display: flex; align-items: center; gap: 8px; }
.boton-menu { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--rosa); color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.menu-movil { display: none; border-top: 1px solid var(--linea); padding: 8px 20px 16px; }
.menu-movil.abierto { display: grid; }
.menu-movil a { padding: 12px 4px; color: var(--texto); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--linea); }

/* ---------- Bienvenida ---------- */
.bienvenida { position: relative; overflow: hidden; padding-block: 40px 56px; }
.bienvenida .contenedor { display: grid; gap: 24px; }
.bienvenida-texto { display: grid; gap: 18px; position: relative; z-index: 1; }
.bienvenida-ilustracion { position: relative; min-height: 220px; border-radius: 40px 40px 120px 40px; background: var(--rosa); display: grid; place-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--verde); color: var(--verde-texto); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.9rem; }

/* ---------- Garabatos ---------- */
.garabato {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--boton);
  line-height: 0;
  border-radius: 50%;
}
.garabato svg { overflow: visible; }
.garabato .trazo { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.garabato .relleno { fill: var(--rosa); }
.garabato .relleno-verde { fill: var(--verde); }
@media (prefers-reduced-motion: no-preference) {
  .flor .tallo-flor { transform-origin: 50% 100%; transform-box: fill-box; }
  .flor.activo .tallo-flor { animation: inclinar 0.8s ease-in-out; }
  .sol.activo .ojo-guino { animation: guino 0.6s ease-in-out; transform-origin: center; transform-box: fill-box; }
  .sol.activo .rayos { animation: girar 0.8s ease-out; transform-origin: center; transform-box: fill-box; }
  .corazon.activo svg { animation: latido 0.7s ease-in-out; }
  @keyframes inclinar { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
  @keyframes guino { 0%,100% { transform: scaleY(1); } 45%,55% { transform: scaleY(0.1); } }
  @keyframes girar { from { transform: rotate(0); } to { transform: rotate(30deg); } }
  @keyframes latido { 0%,100% { transform: scale(1); } 25% { transform: scale(1.15); } 50% { transform: scale(0.96); } 70% { transform: scale(1.08); } }
}

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); display: grid; gap: 12px; align-content: start; min-width: 0; }
.grilla { display: grid; gap: 16px; }
.incluye-item { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.icono-redondo { width: 52px; height: 52px; border-radius: 50%; background: var(--rosa); display: grid; place-items: center; color: var(--boton); }
.icono-redondo.verde { background: var(--verde); color: var(--verde-texto); }

/* ---------- Reproductor ---------- */
.reproductor { background: var(--blanco); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); display: grid; gap: 14px; }
.reproductor-fila { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.boton-play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--boton); color: var(--blanco); cursor: pointer; display: grid; place-items: center; }
.boton-play:hover { background: var(--boton-hover); }
.barra { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--rosa); outline-offset: 6px; }
.barra::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--boton); cursor: pointer; }
.barra::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--boton); }
.tiempos { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--suave); font-variant-numeric: tabular-nums; }

/* ---------- Pri ---------- */
.pri { display: grid; gap: 22px; }
.foto-pri {
  aspect-ratio: 4 / 5;
  max-width: 340px;
  width: 100%;
  border-radius: 180px 180px 28px 28px;
  background: var(--verde);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 2px dashed #B9C6A4;
}
.foto-pri.con-foto { padding: 0; border: 0; overflow: hidden; background: var(--verde); }
.foto-pri.con-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.cita { font: italic 500 1.2rem/1.5 var(--titulos); border-left: 4px solid var(--boton); padding-left: 16px; }

/* ---------- Plan ---------- */
.plan { background: var(--blanco); border-radius: 28px; padding: 26px 22px; box-shadow: var(--sombra); display: grid; gap: 16px; border: 2px solid var(--rosa); }
.precio { font: 600 2.4rem var(--titulos); }
.precio small { font: 500 1rem var(--cuerpo); color: var(--suave); }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-check li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.lista-check li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%234E6B3F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.nota { font-size: 0.92rem; color: var(--suave); }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 10px; }
.preguntas details { background: var(--blanco); border-radius: var(--radio-chico); padding: 4px 18px; box-shadow: var(--sombra); }
.preguntas summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 48px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.preguntas summary::after { content: "+"; font: 600 1.4rem var(--titulos); color: var(--boton); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas details p { padding-bottom: 16px; color: var(--suave); }

/* ---------- Pie ---------- */
.pie { background: var(--texto); color: var(--crema); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pie a { color: var(--rosa); }
.pie .contenedor { display: grid; gap: 18px; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 0.95rem; }
.campo input, .campo textarea, .campo select {
  font: 400 1rem var(--cuerpo);
  color: var(--texto);
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--boton); outline: none; box-shadow: 0 0 0 3px var(--rosa); }
.mensaje { border-radius: var(--radio-chico); padding: 12px 14px; font-size: 0.95rem; }
.mensaje.error { background: #FBE4E4; color: var(--error); }
.mensaje.ok { background: var(--verde); color: var(--verde-texto); }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; background: var(--rosa); border-radius: 999px; padding: 4px; }
.pestanas button { border: 0; background: none; border-radius: 999px; min-height: 44px; font: 600 1rem var(--cuerpo); color: var(--texto); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--blanco); color: var(--boton); box-shadow: var(--sombra); }

.pagina-angosta { max-width: 460px; margin: 0 auto; padding: 32px 20px 64px; display: grid; gap: 20px; }
.vacio { max-width: 460px; margin: 0 auto; padding: 64px 20px; display: grid; gap: 16px; text-align: center; justify-items: center; }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 760px) {
  .menu-lista { display: flex; }
  .boton-menu { display: none; }
  .grilla.dos { grid-template-columns: 1fr 1fr; }
  .grilla.cuatro { grid-template-columns: repeat(2, 1fr); }
  .seccion { padding-block: 80px; }
}
@media (min-width: 980px) {
  .bienvenida .contenedor { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .bienvenida-ilustracion { min-height: 380px; }
  .pri { grid-template-columns: 340px 1fr; align-items: center; gap: 48px; }
  .grilla.cuatro { grid-template-columns: repeat(4, 1fr); }
  .dos-columnas { grid-template-columns: 1fr 1fr !important; align-items: start; }
}

/* Utilidades (sin estilos en línea: la política de seguridad los bloquea) */
.pila { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pila.centrada { justify-items: center; gap: 10px; }
.marca-pie { color: var(--crema); }
.nota-pie { color: var(--rosa); }
.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Encabezado compacto en celulares chicos (360 px) */
.marca-nombre, .menu-acciones .boton { white-space: nowrap; }
@media (max-width: 400px) {
  .marca svg { width: 30px; height: 30px; }
  .marca-nombre { font-size: 1.05rem; }
  .menu-acciones .boton.chico { padding: 8px 14px; font-size: 0.9rem; }
}
/* El atributo hidden también tiene que ocultar íconos SVG */
[hidden] { display: none !important; }

/* Enlace con flecha y letra manuscrita (detalles) */
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--boton); font: 600 1rem var(--cuerpo); text-decoration: none; cursor: pointer; }
.enlace-flecha:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .enlace-flecha svg { transition: transform 0.2s ease; }
  .enlace-flecha:hover svg { transform: translateX(3px); }
}
.manuscrita { font: 600 1.4rem/1 var(--manuscrita); color: var(--boton); }

/* Ebook en la página pública */
.ebook { display: grid; gap: 30px; align-items: center; }
.ebook-portada { position: relative; justify-self: center; width: min(250px, 72vw); }
.ebook-portada img { display: block; width: 100%; height: auto; border-radius: 10px 18px 18px 10px; box-shadow: 0 18px 40px rgba(69, 60, 69, 0.22); transform: rotate(-2deg); }
.ebook-corazon { position: absolute; right: -22px; top: -18px; }
ul.chips { list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) {
  .ebook { grid-template-columns: 300px 1fr; gap: 56px; }
  .ebook-portada { width: 270px; }
}
.ebook .chip { background: var(--blanco); }
@media (max-width: 759px) {
  .ebook-portada { width: min(220px, 58vw); }
  .ebook .fila .boton { width: 100%; }
}

/* ---------- Estilo orgánico y cercano (opción 2) ---------- */
.marca .loto { flex: 0 0 auto; }
.bienvenida { text-align: center; padding-block: 48px 120px; background: radial-gradient(120% 70% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%), var(--crema); }
.bienvenida::before { content: ""; position: absolute; left: 50%; top: 28px; width: min(760px, 92vw); height: 86%; transform: translateX(-50%); border-radius: 380px 380px 0 0; background: linear-gradient(180deg, rgba(246,227,224,.75), rgba(246,227,224,0)); pointer-events: none; }
.bienvenida .contenedor { justify-items: center; position: relative; z-index: 1; }
.bienvenida-texto { justify-items: center; max-width: 640px; }
.bienvenida-texto .bajada { margin-inline: auto; }
.bienvenida-texto .chips { justify-content: center; }
.bienvenida h1 { font-weight: 500; }
.bienvenida h1 em { display: block; font-size: 1.22em; line-height: 1; margin-top: 4px; }
.ornamento { display: flex; align-items: center; gap: 12px; color: var(--boton); }
.ornamento span { width: 56px; height: 1px; background: var(--rosa-fuerte); }
.cita-hero { font: italic 500 1.35rem/1.4 var(--titulos); color: var(--texto); margin-top: 6px; }
.bienvenida-ilustracion { min-height: 0; background: none; border-radius: 0; }
.bienvenida-ilustracion .garabato svg { width: 90px; height: 114px; }
.colinas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; pointer-events: none; }
.rama { position: absolute; top: 90px; display: none; pointer-events: none; }
.rama-izq { left: max(8px, calc(50% - 560px)); }
.rama-der { right: max(8px, calc(50% - 560px)); transform: scaleX(-1); }
@media (min-width: 900px) {
  .rama { display: block; }
  .bienvenida { padding-block: 72px 150px; }
  .bienvenida .contenedor { grid-template-columns: 1fr; }
  .bienvenida-ilustracion { position: absolute; right: max(24px, calc(50% - 540px)); bottom: -110px; }
}
.boton { letter-spacing: 0.02em; }

/* Ondas y flores finas en las secciones de color (decorativo, detrás del texto) */
.seccion.fondo-rosa, .seccion.fondo-verde { position: relative; isolation: isolate; overflow: hidden; }
.seccion.fondo-rosa::before, .seccion.fondo-verde::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 18px; right: -22px; width: 140px; height: 166px; background: url("/img/deco/flor-esquina.svg") no-repeat center / contain; opacity: .8; }
.seccion.fondo-rosa::after, .seccion.fondo-verde::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; bottom: 0; height: 90px; background: url("/img/deco/ondas.svg") no-repeat center bottom / 100% 100%; opacity: .8; }
@media (min-width: 900px) { .seccion.fondo-rosa::before, .seccion.fondo-verde::before { width: 190px; height: 225px; right: 24px; } .seccion.fondo-rosa::after, .seccion.fondo-verde::after { height: 130px; } }