/* Tema "brat" — se carga DESPUÉS de estilos.css y solo cambia el aspecto.
   Verde ácido, negro, Arial en minúsculas, un punto borroso y "mal hecho" a propósito. */

:root {
  --fondo: #8ACE00;
  --tinta: #000000;
  --acento: #000000;
  --seleccion: #000000;
  --verde: #000000;
  --serif: 'Arimo', Arial, Helvetica, sans-serif;
  --sans: 'Arimo', Arial, Helvetica, sans-serif;
  --borroso: blur(1.1px);
}

body { background: var(--fondo); }
::selection { background: #000; color: var(--fondo); }
:focus-visible { outline-color: #000; }

/* Todo en minúsculas, sin espaciados de revista */
.etiqueta, .etiqueta-campo, .nav-marca, .btn-borde, .btn-solido, .btn-texto,
.splash-hint, .pie, .rasca-pista, .titulo-seccion, .hero-titulo, .rsvp-titulo,
.cinta-frase, .dato, .gracias h2 {
  text-transform: lowercase;
  letter-spacing: -0.01em;
}
.etiqueta, .etiqueta-campo, .btn-texto, .splash-hint, .rasca-pista { font-size: 13px; }
.nav-marca, .pie { font-size: 14px; }
.etiqueta, .fila .etiqueta { opacity: .75; letter-spacing: -0.01em; }

/* Titulares: Arial gorda, apretada y borrosa */
.hero-titulo {
  font-weight: 400; letter-spacing: -0.06em; line-height: 0.8;
  font-size: clamp(64px, 19vw, 300px);
  filter: var(--borroso);
  transform: scaleY(1.08);
}
.hero-titulo em { font-style: normal; }
.titulo-seccion, .rsvp-titulo, .gracias h2 {
  font-weight: 400; letter-spacing: -0.05em; filter: blur(0.7px);
}
.dato { font-weight: 400; letter-spacing: -0.03em; }

/* Cintas: misma ola, pero en arial y en minúsculas */
.cinta-frase { font-weight: 400; letter-spacing: -0.04em; filter: blur(0.5px); }

/* Botones: bloques negros con texto verde, sin adornos */
.btn-solido { background: #000; color: var(--fondo); letter-spacing: 0; font-size: 18px; }
.btn-solido:hover { background: #fff; color: #000; }
.btn-borde { letter-spacing: 0; font-size: 14px; }
.btn-cta { font-size: clamp(22px, 3vw, 34px); padding: 26px clamp(28px, 5vw, 64px); filter: blur(0.3px); }

/* Splash: el logo sobre verde */
.splash { background: var(--fondo); }

/* Formularios: campos blancos crudos */
.campo input[type=text], .campo input[type=email], .campo select { border-bottom-width: 2px; }
.campo textarea { background: rgba(255,255,255,.55); border-width: 2px; }
.opcion { border-width: 2px; background: rgba(255,255,255,.35); }
.opcion:has(input:checked) { background: #000; color: var(--fondo); }
.opcion input { accent-color: #000; }
.campo ::placeholder { color: rgba(0,0,0,.45); }
.nota-mail { color: #000; opacity: .75; }

/* Aviso del hotel: recuadro blanco */
.nota-hotel { background: #fff; border-width: 2px; }
.codigo { background: var(--fondo); }

/* Rasca: ¡premio! en negro/verde */
.rasca-premio { font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; }

/* Mapa y spotify sin redondeos */
.mapa { border-width: 2px; }
.spotify iframe { border-radius: 0; }

/* Galería: fotos con borde negro grueso */
.carrusel-grupo img { border-width: 3px; }

/* Pie en negro, letras verdes */
.pie { background: #000; color: var(--fondo); border-top: 0; }
.pie .acento { color: var(--fondo); }