/* ============================================================
   Botones y campos estilo "neon button"
   Port a CSS plano del componente de 21st.dev (@cybergaz/neon-button),
   con la paleta dorada del sitio en vez del azul original.

   Anatomía del original:
     · forma de píldora (rounded-full)
     · borde de 1px muy tenue del color de acento
     · fondo con un tinte del 5% que se desvanece al pasar el cursor
     · dos filetes de 1px en degradado (transparente → acento → transparente),
       al 75% del ancho y centrados: el de arriba aparece al hacer hover,
       el de abajo baja al 30%. Transición de 500ms.

   Los filetes se hacen con ::before/::after en lugar de <span>, para no
   tener que tocar el HTML de cada botón.

   DOS FORMAS DE USARLO
   1. Explícita: class="neon" (+ neon-solido / neon-peligro / neon-tenue).
      Se usa en index.html.
   2. Por ámbito: class="neon-scope" en el <body>. Alcanza a todos los
      <button> y <a class="boton"> de la página, incluidos los que crea
      el JavaScript. Se usa en enlaces.html y muro.html.

   CUIDADO CON LA ESPECIFICIDAD: la base usa un solo selector de clase
   (.neon) o clase+elemento (.neon-scope button). Las variantes suben
   exactamente un escalón para ganarle. Si la base se hiciera más
   específica, todos los botones se verían iguales.

   Se carga DESPUÉS de los estilos de cada página.
   ============================================================ */

:root {
  /* ---- Oro muestreado de img/virgen.png (el pan de oro de la imagen) ----
     Se tomó el matiz cálido por tramos de luminosidad:
       sombra p5-20  #674623      medio  p40-60  #937144
       luz    p80-95 #e8c778      brillo p95-99  #fbec96
     El botón sólido usa el tramo de LUZ con texto oscuro: así lee como oro
     de verdad. Antes usaba el tramo de sombra con texto claro y salía pardo. */
  --oro-brillo: #fbec96;
  --oro-luz:    #e8c778;
  --oro-vivo:   #cfa552;
  --oro-medio:  #c9a24b;

  /* Texto oscuro sobre oro: 5.9:1 contra el extremo más oscuro del degradado. */
  --neon-tinta: #3a2c14;
  /* Texto dorado sobre fondo claro: 4.81:1. Es el oro más vivo que aún
     cumple AA como texto; por eso los contornos no suben más de aquí. */
  --neon-acento: #8a6d1f;
  /* Decorativos: los filetes y bordes solo necesitan 3:1, así que pueden brillar. */
  --neon-filete: var(--oro-medio);
  --neon-borde: rgba(201,162,75,.55);
  --neon-borde-vivo: #b08d2f;
  --neon-tinte: rgba(201,162,75,.10);
  --neon-radio: 999px;
}

/* ---------- base ---------- */
.neon,
.neon-scope button:not(.tab-btn),
.neon-scope a.boton,
.neon-scope label.btn-subir {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--neon-radio);
  border: 1px solid var(--neon-borde);
  background-color: var(--neon-tinte);
  background-image: none;
  color: var(--neon-acento);
  text-decoration: none;
  cursor: pointer;
  font-family: "Cinzel", Georgia, serif;
  font-size: .88rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  /* El original usa py-1.5 (~33px de alto). Aquí se sube a 44px porque el
     panel y el muro se usan desde el teléfono. */
  min-height: 44px;
  padding: .7rem 1.75rem;
  line-height: 1;
  box-shadow: none;
  transform: none;
  transition: background-color .5s ease-in-out, border-color .5s ease-in-out, color .3s ease;
}

/* Los dos filetes luminosos */
.neon::before,
.neon::after,
.neon-scope button:not(.tab-btn)::before,
.neon-scope button:not(.tab-btn)::after,
.neon-scope a.boton::before,
.neon-scope a.boton::after,
.neon-scope label.btn-subir::before,
.neon-scope label.btn-subir::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 75%;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--neon-filete), transparent);
  transition: opacity .5s ease-in-out;
  pointer-events: none;
}
.neon::before,
.neon-scope button:not(.tab-btn)::before,
.neon-scope a.boton::before,
.neon-scope label.btn-subir::before { top: 0; opacity: 0; }

.neon::after,
.neon-scope button:not(.tab-btn)::after,
.neon-scope a.boton::after,
.neon-scope label.btn-subir::after { bottom: -1px; opacity: 1; }

.neon:hover,
.neon-scope button:not(.tab-btn):hover,
.neon-scope a.boton:hover,
.neon-scope label.btn-subir:hover {
  background-color: transparent;
  border-color: var(--neon-borde-vivo);
}
.neon:hover::before,
.neon-scope button:not(.tab-btn):hover::before,
.neon-scope a.boton:hover::before,
.neon-scope label.btn-subir:hover::before { opacity: 1; }

.neon:hover::after,
.neon-scope button:not(.tab-btn):hover::after,
.neon-scope a.boton:hover::after,
.neon-scope label.btn-subir:hover::after { opacity: .3; }

.neon:focus-visible,
.neon-scope button:not(.tab-btn):focus-visible,
.neon-scope a.boton:focus-visible,
.neon-scope label.btn-subir:has(input:focus-visible) {
  outline: 2px solid var(--neon-acento);
  outline-offset: 3px;
}

.neon:disabled,
.neon.deshabilitado,
.neon-scope button:disabled,
.neon-scope .deshabilitado {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- variante sólida: la acción principal ---------- */
.neon.neon-solido,
.neon-scope button.btn-accion,
.neon-scope a.boton.btn-accion,
.neon-scope label.btn-subir:not(.btn-galeria) {
  /* Oro de la Virgen (tramo de luz) con tinta oscura: 5.9:1 en el extremo
     más oscuro del degradado, mejor que el 4.8:1 del pardo anterior. */
  background-color: transparent;
  background-image: linear-gradient(160deg, #f2dc9a 0%, var(--oro-luz) 45%, var(--oro-vivo) 100%);
  border-color: #bf9440;
  color: var(--neon-tinta);
}
.neon.neon-solido::before,
.neon.neon-solido::after,
.neon-scope button.btn-accion::before,
.neon-scope button.btn-accion::after,
.neon-scope a.boton.btn-accion::before,
.neon-scope a.boton.btn-accion::after,
.neon-scope label.btn-subir:not(.btn-galeria)::before,
.neon-scope label.btn-subir:not(.btn-galeria)::after {
  background: linear-gradient(to right, transparent, var(--oro-brillo), transparent);
}
.neon.neon-solido:hover,
.neon-scope button.btn-accion:hover,
.neon-scope a.boton.btn-accion:hover,
.neon-scope label.btn-subir:not(.btn-galeria):hover {
  background-color: transparent;
  background-image: linear-gradient(160deg, var(--oro-luz) 0%, #c59a44 100%);
  border-color: #a8842e;
}
.neon.neon-solido:focus-visible,
.neon-scope button.btn-accion:focus-visible,
.neon-scope a.boton.btn-accion:focus-visible { outline-color: var(--neon-tinta); }

/* ---------- variante de peligro ---------- */
.neon.neon-peligro,
.neon-scope button.btn-peligro {
  color: #b02f2f;
  border-color: rgba(176,47,47,.4);
  background-color: rgba(176,47,47,.05);
  background-image: none;
}
.neon.neon-peligro::before,
.neon.neon-peligro::after,
.neon-scope button.btn-peligro::before,
.neon-scope button.btn-peligro::after {
  background: linear-gradient(to right, transparent, #b02f2f, transparent);
}
.neon.neon-peligro:hover,
.neon-scope button.btn-peligro:hover {
  border-color: #b02f2f;
  background-color: transparent;
  background-image: none;
}
.neon.neon-peligro:focus-visible,
.neon-scope button.btn-peligro:focus-visible { outline-color: #b02f2f; }

/* ---------- variante discreta: no compite con la principal ---------- */
.neon.neon-tenue,
.neon-scope button.btn-secundario {
  color: #7d6535;
  border-color: transparent;
  background-color: transparent;
  background-image: none;
}
.neon.neon-tenue::before,
.neon.neon-tenue::after,
.neon-scope button.btn-secundario::before,
.neon-scope button.btn-secundario::after {
  background: linear-gradient(to right, transparent, #a8842e, transparent);
}
.neon.neon-tenue::after,
.neon-scope button.btn-secundario::after { opacity: .45; }

.neon.neon-tenue:hover,
.neon-scope button.btn-secundario:hover {
  color: #4a3b22;
  border-color: rgba(176,141,47,.45);
  background-image: none;
}
.neon.neon-tenue:focus-visible,
.neon-scope button.btn-secundario:focus-visible { outline-color: #7d6535; }

/* ============================================================
   Campos, en el mismo estilo
   Un <input> no admite ::before/::after, así que el filete inferior se
   dibuja con background-image y se anima su ancho (background-size),
   que sí es interpolable — la opacidad de un degradado no lo es.
   ============================================================ */
.campo-neon,
.neon-scope input[type="text"],
.neon-scope input[type="tel"],
.neon-scope input[type="search"],
.neon-scope input[type="password"],
.neon-scope select,
.neon-scope textarea {
  border-radius: var(--neon-radio);
  border: 1px solid var(--neon-borde);
  background-color: #fffdf6;
  background-image: linear-gradient(to right, transparent, var(--neon-acento), transparent);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 0% 1px;
  color: #4a3b22;
  min-height: 44px;
  /* Altura fija, no `auto`: el alto intrínseco de un <select> cambia según el
     navegador (Safari lo calcula distinto que Chrome) y desalineaba la fila
     del formulario. El textarea la recupera más abajo. */
  height: 44px;
  padding: .6rem 1.25rem;
  line-height: 1.2;
  outline: none;
  box-shadow: none;
  transition: background-size .5s ease-in-out, border-color .5s ease-in-out, box-shadow .3s ease;
}

.campo-neon:hover,
.neon-scope input[type="text"]:hover,
.neon-scope input[type="tel"]:hover,
.neon-scope input[type="search"]:hover,
.neon-scope input[type="password"]:hover,
.neon-scope select:hover,
.neon-scope textarea:hover { border-color: var(--neon-borde-vivo); }

.campo-neon:focus,
.neon-scope input[type="text"]:focus,
.neon-scope input[type="tel"]:focus,
.neon-scope input[type="search"]:focus,
.neon-scope input[type="password"]:focus,
.neon-scope select:focus,
.neon-scope textarea:focus {
  border-color: var(--neon-borde-vivo);
  background-size: 75% 1px;
  box-shadow: 0 0 0 1px rgba(176,141,47,.35);
}

.campo-neon::placeholder,
.neon-scope input::placeholder,
.neon-scope textarea::placeholder { color: rgba(122,104,68,.7); }

/* El textarea con forma de píldora se ve roto: se le deja el radio grande. */
textarea.campo-neon,
.neon-scope textarea {
  border-radius: 22px;
  padding: .9rem 1.25rem;
  line-height: 1.6;
  /* El textarea sí crece con su contenido: recupera la altura automática
     que se fijó arriba para inputs y selects. */
  height: auto;
}

/* El select conserva su flecha nativa; solo se le da aire a la derecha. */
select.campo-neon,
.neon-scope select { padding-right: 2.2rem; }

/* ============================================================
   Selector de cupos de la invitación (1 · 2 · 3)
   Ya era circular, así que encaja con el lenguaje de píldora.
   ============================================================ */
.opcion-cupo {
  position: relative;
  isolation: isolate;
  border-radius: 50%;
  border: 1px solid var(--neon-borde);
  background-color: var(--neon-tinte);
  background-image: none;
  color: #4a3b22;
  box-shadow: none;
  transition: background-color .5s ease-in-out, border-color .5s ease-in-out, color .3s ease;
}
.opcion-cupo::before,
.opcion-cupo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 60%;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--neon-filete), transparent);
  transition: opacity .5s ease-in-out;
  pointer-events: none;
}
.opcion-cupo::before { top: 4px; opacity: 0; }
.opcion-cupo::after  { bottom: 4px; opacity: .8; }
.opcion-cupo:hover { background-color: transparent; border-color: var(--neon-borde-vivo); }
.opcion-cupo:hover::before { opacity: 1; }
.opcion-cupo:hover::after  { opacity: .3; }
.opcion-cupo:focus-visible { outline: 2px solid var(--neon-acento); outline-offset: 3px; }

.opcion-cupo.activa {
  background-image: linear-gradient(160deg, #f2dc9a 0%, var(--oro-luz) 45%, var(--oro-vivo) 100%);
  border-color: #bf9440;
  color: var(--neon-tinta);
  box-shadow: none;
}
.opcion-cupo.activa::before,
.opcion-cupo.activa::after {
  background: linear-gradient(to right, transparent, var(--oro-brillo), transparent);
}

/* ---------- respeta a quien pidió menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .neon,
  .neon::before,
  .neon::after,
  .neon-scope button,
  .neon-scope a.boton,
  .neon-scope input,
  .neon-scope select,
  .neon-scope textarea,
  .opcion-cupo,
  .opcion-cupo::before,
  .opcion-cupo::after { transition: none; }
}
