/* Portada: barra de arriba ordenada + ritmo visual entre secciones (2-oct-2026, noche).
 *
 * jimy: "aún siento que le falta visualmente mucho. En inicio la barra donde aparecen los títulos está mal
 * organizada, mal distribuida... donde dice acompañamiento faltan sus imágenes... de ahí el texto está plano,
 * faltan diseños". Diseño del director de arte (Gemini, con las fotos de la portada): barra con cinco enlaces
 * y un "Más", el rojo solo para el botón; fondos que se alternan; cifras en caja oscura con números dorados;
 * video enmarcado; test con cara de tarjeta. jimy eligió: Membresía a la vista, lo demás dentro de "Más".
 *
 * Apartado del diseño de Gemini: pedía antetítulos y rótulos de 12-13 px en mayúsculas. La casa pide letra
 * visible (nada chico ni espaciado fino), así que aquí van de 15 px o más. Ver DECISIONES.md, 2-oct (noche, 6.ª).
 * Los selectores van por el id de cada sección: no tocan nada fuera de la portada.
 */

/* ── 1 · La barra de arriba (computador) ───────────────────────────────────── */
#navbar .nav-desktop { gap: 1.6rem; font-size: 15.5px; }
/* nav-fix.css aprieta el menú a 0,5rem entre 1280 y 1439 px (era para 11 enlaces). Con 5 + "Más" cabe con aire:
   medido, a 1280 px el botón termina antes del borde. */
@media (min-width: 1280px) { #navbar nav.nav-desktop { gap: 1.35rem !important; } }
@media (min-width: 1440px) { #navbar nav.nav-desktop { gap: 1.7rem !important; } }
#navbar .nav-desktop .nav-link { color: #2a1808; font-weight: 500; }
#navbar .nav-desktop .nav-link.nav-fuerte { font-weight: 700; }
#navbar .nav-desktop .nav-lupa { color: #5a3a22; font-size: 17px; }
#navbar .nav-idioma { display: inline-flex; align-items: center; gap: .5rem; padding-left: 1.1rem;
  border-left: 1px solid #e6d6b4; font-size: 14px; }
#navbar .nav-idioma .activo { color: #c8201f; font-weight: 700; }
#navbar .nav-desktop .btn-rojo { min-height: 48px; display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: 0 1.4rem; box-shadow: 0 4px 12px rgba(200, 32, 31, .25); }

/* "Más": se abre al pasar el ratón o al tocarlo (sin programa: :hover y :focus-within) */
.nav-mas { position: relative; }
.nav-mas-boton { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: #2a1808; font-weight: 500; padding: .5rem 0; }
.nav-mas-boton i { font-size: .7em; transition: transform .2s ease; }
.nav-mas-lista { position: absolute; top: 100%; right: -1rem; min-width: 250px; margin: 0; padding: .6rem;
  list-style: none; background: #fdfaf3; border: 1px solid #e6d6b4; border-radius: 14px;
  box-shadow: 0 16px 36px rgba(42, 24, 8, .14); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.nav-mas:hover .nav-mas-lista, .nav-mas:focus-within .nav-mas-lista,
.nav-mas.abierto .nav-mas-lista { opacity: 1; visibility: visible; transform: none; }
.nav-mas:hover .nav-mas-boton i, .nav-mas:focus-within .nav-mas-boton i,
.nav-mas.abierto .nav-mas-boton i { transform: rotate(180deg); }
.nav-mas-boton:focus-visible { outline: 3px solid #6b1f2e; outline-offset: 4px; border-radius: 6px; }
/* "abierto" lo pone nav-mas.js al tocar (pantallas táctiles): Escape o tocar fuera lo cierra */
.nav-mas-lista a { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: 0 .9rem; border-radius: 10px;
  color: #2a1808; font-size: 16px; font-weight: 500; text-decoration: none; }
.nav-mas-lista a i { width: 1.2rem; text-align: center; color: #6b5018; }
.nav-mas-lista a:hover, .nav-mas-lista a:focus-visible { background: #f7f1e3; }
.nav-mas-lista a:focus-visible { outline: 3px solid #6b1f2e; outline-offset: 1px; }

/* ── 1b · El menú del celular (3-oct; orden de las IA): botón arriba, cinco principales, tres grupos que se abren ── */
.menu-cel { display: flex; flex-direction: column; min-height: 100%; padding: 1.1rem 1.25rem 2rem; color: #2a1808; }
.menu-cel-agendar { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px;
  margin-bottom: .9rem; border-radius: 14px; background: #c8201f; color: #fff; font-size: 18px; font-weight: 700;
  text-decoration: none; box-shadow: 0 6px 16px rgba(200, 32, 31, .25); }
.menu-cel-agendar i { font-size: 22px; }
.menu-cel-item, .menu-cel-grupo > summary { display: flex; align-items: center; gap: 1rem; min-height: 56px;
  padding: 0 .35rem; border-bottom: 1px solid #ecdfc4; color: #2a1808; font-size: 18.5px; font-weight: 600;
  text-decoration: none; }
.menu-cel-item i, .menu-cel-grupo > summary > i:first-child { width: 1.6rem; text-align: center; color: #6b5018;
  font-size: 19px; }
.menu-cel-grupo > summary { cursor: pointer; list-style: none; }
.menu-cel-grupo > summary::-webkit-details-marker { display: none; }
.menu-cel-flecha { margin-left: auto; font-size: 15px; color: #6b5018; transition: transform .2s ease; }
.menu-cel-grupo[open] > summary .menu-cel-flecha { transform: rotate(180deg); }
.menu-cel-grupo[open] > summary { color: #6b1f2e; }
.menu-cel-grupo { border-bottom: 0; }
.menu-cel-sub { display: flex; align-items: center; min-height: 50px; padding: 0 .5rem 0 3rem;
  border-bottom: 1px solid #f1e7d2; background: #fbf6ea; color: #3a2414; font-size: 17.5px; font-weight: 500;
  text-decoration: none; }
.menu-cel-item:focus-visible, .menu-cel-sub:focus-visible, .menu-cel-grupo > summary:focus-visible,
.menu-cel-agendar:focus-visible, .menu-cel-pie-enlace:focus-visible { outline: 3px solid #6b1f2e; outline-offset: -3px; }
.menu-cel-pie { display: flex; gap: .75rem; margin-top: auto; padding-top: 1.4rem; }
.menu-cel-pie-enlace { flex: 1; display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px;
  border: 1.5px solid #e2d2ae; border-radius: 12px; color: #2a1808; font-size: 17px; font-weight: 600; text-decoration: none; }
.menu-cel-pie-enlace i { color: #6b5018; }

/* ── 2 · Las dos tarjetas que no son un tema (acompañamiento y asesoría): foto y borde de oro ── */
.qp-opcion.qp-opcion--extra { border: 1.5px solid #c9a96a; background: #fdfaf3; }

/* ── 3 · Ritmo de fondos: crema y arena se alternan ─────────────────────────── */
#calendario-espacios { background: #f7f1e3; }
#daniela { background: #fdfaf3; }
#asi-trabaja-daniela { background: #f7f1e3; }
#helber { background: #fdfaf3; }
#primer-paso { background: #f7f1e3; }

/* ── 4 · Daniela y Helber: cita destacada, herramientas en tarjeta blanca, rótulos que se leen ── */
#daniela blockquote.quote-mark, #helber blockquote.quote-mark {
  background: rgba(247, 241, 227, .75); border-left: 3px solid #c9a96a; border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem; color: #2a1808; }
#daniela .herramienta-helber, #helber .herramienta-helber {
  background: #fff; border: 1px solid #efe3c8; border-radius: 12px; box-shadow: 0 2px 8px rgba(42, 24, 8, .04); }
#daniela .bg-marron.text-crema > div:last-child,
#helber .bg-marron.text-crema > div:last-child { font-size: 13px; letter-spacing: .14em; font-weight: 600; }
/* Las descripciones de las herramientas medían 12-13 px: letra visible */
#daniela .herramienta-helber p, #helber .herramienta-helber p { font-size: 15px; line-height: 1.5; color: #5a3a22; }
#helber [class*="text-[10.5px]"] { font-size: 13.5px; letter-spacing: .16em; color: #5a3a22; }
#helber .area-pill { background: #fff; border: 1px solid #efe3c8; color: #5a3a22; font-size: 15px;
  border-radius: 8px; box-shadow: 0 1px 4px rgba(42, 24, 8, .04); }

/* ── 5 · El video, enmarcado ─────────────────────────────────────────────────── */
#video-asi-trabaja { border: 4px solid #fff; border-radius: 20px; box-shadow: 0 16px 36px rgba(42, 24, 8, .14); }

/* ── 6 · Cifras: NO se tocan. Gemini propuso caja oscura con números dorados; se construyó y jimy, al verla
   (3-oct): "lo de las 200 constelaciones déjalo así, prefiero el estilo que está". Vuelven a su estilo de siempre. */

/* ── 7 · El test: tarjeta blanca con filo rojo arriba y respuestas que piden ser tocadas ── */
#pp-card { background: #fff; border-left: 0; border-top: 6px solid #c8201f; border-radius: 20px;
  box-shadow: 0 14px 40px rgba(42, 24, 8, .08); }
#pp-card .pp-opcion { background: #fdfaf3; border: 1.5px solid #efe3c8; border-radius: 12px; min-height: 56px;
  font-size: 17.5px; color: #2a1808; }
/* La letra de cada respuesta salía aplastada en un óvalo (ya pasaba antes): círculo de 32 px que no se encoge */
#pp-card .pp-opcion > span:first-child { width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-family: Lora, Georgia, serif;
  font-size: 15px; background: #f7f1e3; color: #6b1f2e; border: 1.5px solid #c9a96a; }
#pp-card .pp-opcion:hover, #pp-card .pp-opcion:focus-visible { background: #c8201f; color: #fdfaf3; border-color: #c8201f; }