/* ==========================================================
   COMPONENTES — las piezas que se repiten en varias secciones.
   Sistema cerrado el 2026-09-25: píldoras, rótulos en mono,
   botones que se encienden. Sin desplazamiento: la luz alcanza.
   ========================================================== */

/* ---------- Píldora de sección ("● EL PROBLEMA") ---------- */
.pildora {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(178, 109, 58, .38);
  border-radius: var(--radio-pildora);
  background: rgba(178, 109, 58, .14);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--bronce-pildora);
}
.pildora::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bronce-web); flex-shrink: 0;
}

/* ---------- Rótulo en mono (encabezados chicos) ---------- */
.rotulo {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-rotulo);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px;
  border-radius: var(--radio-pildora);
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  text-decoration: none; text-align: center; line-height: 1.25;
}

/* Principal: bronce apagado que se aviva y se enciende */
.boton--principal {
  background: var(--boton); color: #FFFFFF;
  box-shadow: 0 0 0 rgba(208, 120, 58, 0);
  transition: background-color var(--t-luz), box-shadow var(--t-resplandor);
}
.boton--principal:hover,
.boton--principal:focus-visible {
  background: var(--boton-hover); color: #FFFFFF; outline: none;
  box-shadow: 0 0 0 1px rgba(232, 146, 84, .55),
              0 8px 34px rgba(208, 120, 58, .45),
              0 0 70px rgba(208, 120, 58, .22);
}

/* Secundario: transparente, borde y letras viran a bronce */
.boton--secundario {
  padding: 0 26px; font-weight: 600;
  color: var(--crema); border: 1px solid var(--borde-boton);
  transition: border-color var(--t-luz), color var(--t-luz);
}
.boton--secundario:hover,
.boton--secundario:focus-visible {
  border-color: var(--bronce-web); color: var(--bronce-web); outline: none;
}

/* ---------- Link con halo (menú, pie) ---------- */
.link-halo {
  color: var(--texto-menu); text-decoration: none;
  transition: color var(--t-luz), text-shadow var(--t-resplandor);
}
.link-halo:hover,
.link-halo:focus-visible {
  color: var(--crema); outline: none;
  text-shadow: 0 0 1px rgba(249, 245, 236, .45), 0 0 16px rgba(226, 154, 88, .65);
}

/* ---------- Link subrayado en bronce (la salida por WhatsApp) ---------- */
.link-subrayado {
  color: var(--bronce-pildora); text-decoration: none;
  border-bottom: 1px solid rgba(226, 154, 88, .4);
  transition: color var(--t-luz), border-color var(--t-luz), text-shadow var(--t-resplandor);
}
.link-subrayado:hover,
.link-subrayado:focus-visible {
  color: var(--crema); border-color: var(--bronce-web); outline: none;
  text-shadow: 0 0 1px rgba(249, 245, 236, .45), 0 0 16px rgba(226, 154, 88, .65);
}

/* ---------- Botón redondo de red social ---------- */
.red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--borde); border-radius: var(--radio-pildora);
  color: var(--texto-menu);
  transition: border-color var(--t-luz), color var(--t-luz), box-shadow var(--t-resplandor);
}
.red svg { width: 19px; height: 19px; }
.red:hover,
.red:focus-visible {
  border-color: var(--bronce-web); color: var(--bronce-web); outline: none;
  box-shadow: 0 0 22px rgba(226, 154, 88, .28);
}

/* ---------- Tarjeta ---------- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  transition: border-color var(--t-tarjeta), background-color var(--t-tarjeta), box-shadow var(--t-tarjeta);
}
.tarjeta:hover {
  border-color: var(--borde-hover);
  background-color: var(--tarjeta-hover);
  box-shadow: 0 14px 46px -16px rgba(226, 154, 88, .30);
}

/* Marco de ícono dentro de una tarjeta: se calienta junto con ella */
.marco {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--borde-marco); border-radius: 10px;
  color: var(--bronce-web);
  transition: border-color var(--t-tarjeta);
}
.marco svg { width: 19px; height: 19px; }
.tarjeta:hover .marco { border-color: var(--borde-hover); }

/* ---------- Numeral en mono (01, 02…) ---------- */
.numeral {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; color: var(--bronce-web);
}

/* ---------- Píldora de dato ("20 minutos · sin costo") ----------
   Más discreta que la de sección: informa, no rotula */
.dato {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--borde-dato); border-radius: var(--radio-pildora);
  font-size: 13px; line-height: 1.4; color: var(--texto-menu);
}
/* El precio: la única vez que un número recibe acento en la página */
.dato--precio {
  border-color: var(--borde-hover);
  background: rgba(226, 154, 88, .09);
  font-weight: 700; color: #E8B184;
}

/* ---------- Frase de cierre de sección, con filete bronce ---------- */
.cierre {
  max-width: 820px; padding-left: 22px;
  border-left: 3px solid var(--bronce);
  font-size: clamp(21px, 1vw + 12px, 25px); line-height: 1.45; font-weight: 600;
  color: var(--crema);
}

/* ---------- Menú flotante ---------- */
.menu {
  position: fixed; z-index: 100;           /* por encima del hero: si no, no recibe el cursor */
  top: 26px; left: 50%; transform: translateX(-50%);
  width: min(var(--ancho), calc(100% - 2 * var(--gutter)));   /* mismos bordes que el contenido */
  display: flex; align-items: center; gap: 34px;
  padding: 11px 14px 11px 26px;
  background: rgba(23, 32, 43, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--borde-menu);
  border-radius: var(--radio-pildora);
}
.menu__logo { display: flex; flex-shrink: 0; }
.menu__logo img { height: 38px; width: auto; }
.menu__links {
  flex-grow: 1; display: flex; justify-content: center; gap: 30px;
  margin: 0; padding: 0; list-style: none;
}
.menu__links a { font-size: 16px; }
.menu__cta { flex-shrink: 0; min-height: 44px; padding: 0 22px; font-size: 16px; }

/* Hamburguesa — oculta en escritorio, se muestra en responsive.css bajo 900px.
   Chica y sin marco a propósito: es utilitaria, menor jerarquía que el logo y el CTA. */
.menu__hamburguesa {
  display: none; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: none;
  cursor: pointer;
}
.menu__hamburguesa span {
  display: block; width: 14px; height: 2px; background: var(--crema); opacity: .75; border-radius: 2px;
  transition: transform var(--t-luz), opacity var(--t-luz);
}
.menu--abierto .menu__hamburguesa span { opacity: 1; }
.menu--abierto .menu__hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu--abierto .menu__hamburguesa span:nth-child(2) { opacity: 0; }
.menu--abierto .menu__hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Aparición al scrollear ----------
   Solo opacidad, lenta. Si el JS no carga, todo se ve igual:
   el estado oculto existe únicamente cuando <html> tiene .js */
.js .aparece { opacity: 0; transition: opacity 1.1s ease; }
.js .aparece.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; }
}