/* ═══════════════════════════════════════════════════════════════
   MODO BÁSICO — css/basico.css (se enlaza AL FINAL, después de rsvp.css)
   Lo activa la clase «basico» en <html> (script en línea de <head> en
   src/pagina.html): navegador que no puede con la experiencia completa,
   archivos que no llegaron a tiempo, o ?basico en la dirección.
   Página estática y legible: sin sobre, sin nada oculto, con fondo
   propio en cada sección. Si js/main.js logra cargar, añade la clase
   «funcional» (calendario, copiar y formulario activos).
   REGLA DE ESTE ARCHIVO: solo CSS viejo. Nada de inset, gap, clamp(),
   min(), max(), aspect-ratio, svh/lvh ni var(): medidas en px y
   colores escritos con su número (paleta v2: marfil #F6F2EA, tinta
   #2B2B28, olivo #6B7042 / #4E5330 / #A3A67E / #D9DBC7, dorado tenue
   #CDBF9E, noche #26261F). El menú trae su propio bloque en menu.css.
   ═══════════════════════════════════════════════════════════════ */

/* Contenido que solo existe en modo básico o sin JavaScript */
.solo-basico { display: none; }
html:not(.js) .solo-basico { display: block; }

/* ── Página ── */
html.basico { scroll-behavior: auto; }
.basico body {
  height: auto;
  overflow-y: visible;
  overflow-x: hidden;
  background: #F6F2EA;
  color: #2B2B28;
  font-size: 18px;
}
.basico #sobre,
.basico #ambiente,
.basico .petalos-lienzo { display: none !important; }
.basico main { overflow: hidden; }

/* Nada espera a un revelado */
.basico [data-revelar],
.basico [data-letras] .palabra {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/* ── Estructura ── */
.basico .seccion { padding: 72px 22px; }
.basico .contenedor { max-width: 640px; }
.basico .portada {
  display: block;
  min-height: 0;
  padding-top: 56px;
  padding-bottom: 40px;
  text-align: center;
}
.basico .portada__contenido { display: block; }
.basico .historia { padding-top: 72px; }
.basico .cierre { padding-bottom: 70px; }

/* Secciones nocturnas: fondo propio, tinta marfil */
.basico .seccion--noche { background: #26261F; color: #F6F2EA; }
.basico .seccion--noche .t-sobretitulo,
.basico .seccion--noche .t-titulo { color: #D9DBC7; }
.basico .seccion--noche .t-script { color: #F6F2EA; }
.basico .seccion--noche .t-nombres { color: #D9DBC7; }
.basico .seccion--noche .boton--linea { color: #F6F2EA; }
/* Las tarjetas de papel siempre son claras con tinta oscura */
.basico .papel,
.basico .seccion--noche .papel { background: #FBF9F4; color: #2B2B28; padding: 26px; }
.basico .papel .t-sobretitulo,
.basico .seccion--noche .papel .t-sobretitulo { color: #4E5330; }
.basico .papel .t-script,
.basico .papel .t-titulo,
.basico .seccion--noche .papel .t-script,
.basico .seccion--noche .papel .t-titulo { color: #2B2B28; }
.basico .seccion--noche .papel .boton--linea { color: #4E5330; }
.basico .papel::after { top: 9px; right: 9px; bottom: 9px; left: 9px; }

/* ── Tipografía en px ── */
.basico .t-script { font-size: 42px; }
.basico .t-script--chica { font-size: 30px; }
.basico .t-titulo { font-size: 28px; }
.basico .t-sobretitulo { font-size: 13px; }
.basico .t-nombres { font-size: 30px; color: #4E5330; }
.basico .t-lugar { font-size: 14px; }
.basico .t-cuerpo { font-size: 18px; }
.basico .t-nota { font-size: 15px; opacity: 1; }
.basico .t-dato { font-size: 14px; }
.basico .boton { font-size: 14px; padding: 17px 24px; }
.basico .boton::after { display: none; }
.basico .ornamento { margin: 22px auto; }
.basico .ornamento::before,
.basico .ornamento::after { width: 48px; }
.basico .ornamento i { margin: 0 14px; }

/* ── Adornos: tamaño fijo o fuera ── */
.basico .portada__rama,
.basico .historia__cielo,
.basico .historia__hojas,
.basico .historia__vuelo,
.basico .boda__ramita,
.basico .recom__rama,
.basico .recom__hojas,
.basico .prog-cielo,
.basico .prog-remate__halo,
.basico .regalos__chispas,
.basico .rsvp__chispas,
.basico .rsvp__halo { display: none; }
.basico [data-parallax] { -webkit-transform: none; transform: none; }

/* ── 1 · Portada ── */
.basico .portada__monograma { width: 220px; margin: 0 auto; }
.basico .portada__fecha { font-size: 30px; }
.basico .portada__padres { display: block; }
.basico .portada__divisor { display: none; }
.basico .portada__familia ~ .portada__familia { margin-top: 22px; }
.basico .portada__reloj,
.basico .portada__lema { display: none; }
.basico .portada__calendario { margin-top: 30px; -webkit-animation: none; animation: none; opacity: 1; }
.basico .portada__opciones { font-size: 16px; }
.basico .portada__separador { color: #A3A67E; }

/* ── 2 · Historia ── */
.basico .historia__cuadro { margin: 26px auto 0; }
.basico .historia__carrusel { padding: 0; }
.basico .historia__fotos { display: block; text-align: center; overflow: visible; padding: 0; }
.basico .historia__fotos::before, .basico .historia__fotos::after { display: none; }
.basico .carrusel__flecha { display: none; }
.basico .polaroid { display: inline-block; vertical-align: top; margin: 10px; }
.basico .polaroid__cara { -webkit-transform: none; transform: none; }

/* ── 3 · La boda y vestimenta ── */
.basico .boda__lugares { display: block; }
.basico .lugar + .lugar { margin-top: 56px; }
.basico .lugar__arte { width: 240px; margin-left: auto; margin-right: auto; }
.basico .vestimenta__datos { display: block; }
.basico .vestimenta__datos > * + * { margin-top: 18px; }
.basico .dato__principal { font-size: 28px; }
.basico .dato__muestras { display: block; text-align: center; }
.basico .muestra { display: inline-block; margin: 0 6px; }

/* ── 4 · Atardecer: una estampa quieta ── */
.basico .atardecer {
  height: auto;
  color: #F6F2EA;
  background: #6E5C4A;
  background: -webkit-linear-gradient(top, #3C3A30 0%, #6E5C4A 34%, #B08A68 66%, #DCC3A2 100%);
  background: linear-gradient(180deg, #3C3A30 0%, #6E5C4A 34%, #B08A68 66%, #DCC3A2 100%);
}
.basico .atardecer__escena { position: relative; top: auto; height: 660px; overflow: hidden; }
.basico .atardecer__sol,
.basico .atardecer__frase,
.basico .atardecer__capa,
.basico .atardecer__velo {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: none;
  transform: none;
}
.basico .atardecer__sol {
  top: 300px;
  left: 50%;
  width: 160px;
  height: 160px;
  margin-left: -80px;
  opacity: .8;
}
.basico .atardecer__frase { top: 56px; left: 0; right: 0; padding: 0 22px; opacity: 1; }
.basico .atardecer__frase .t-sobretitulo { color: #ECE6D9; }
.basico .atardecer__frase .t-script {
  color: #F6F2EA;
  font-size: 34px;
  text-shadow: 0 1px 3px rgba(38, 38, 31, .6), 0 2px 30px rgba(38, 38, 31, .5);
}
.basico .atardecer__velo { opacity: 1; }
.basico .atardecer__suelo { display: none; }

/* ── 5 · Itinerario ── */
.basico .prog-cabecera { margin-bottom: 64px; }
.basico .prog-titulo { margin-top: 12px; font-family: 'La Belle Aurore', 'Dancing Script', cursive; font-weight: 400; font-size: 44px; }
.basico .prog-entrada { font-size: 18px; color: #ECE6D9; }
.basico .prog-linea { padding: 26px 0 64px; }
.basico .prog-chispa { display: none; }
.basico .prog-hilo__guia { display: none; }
.basico .prog-hilo__oro { background: #CDBF9E; -webkit-transform: none; transform: none; }
.basico .prog-hito { display: block; padding-left: 48px; }
.basico .prog-hito + .prog-hito { margin-top: 56px; }
.basico .prog-texto { display: block; }
.basico .prog-hora { font-size: 48px; color: #F6F2EA; }
.basico .prog-hora__periodo { color: #A3A67E; }
.basico .prog-nombre { font-size: 14px; color: #F6F2EA; }
.basico .prog-nombre__y { color: #A3A67E; }
.basico .prog-detalle { font-size: 18px; color: #ECE6D9; }
.basico .prog-icono { width: 64px; height: 64px; margin-top: 14px; color: #A3A67E; }
.basico .prog-icono::before { display: none; }
.basico .prog-nodo { top: 24px; left: 12px; }
.basico .prog-nodo::before,
.basico .prog-nodo::after { opacity: 1; }
.basico .prog-nodo::before { background: #CDBF9E; box-shadow: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.basico .prog-nodo::after { display: none; }
.basico .prog-fin i { opacity: 1; background: #CDBF9E; }
.basico .prog-ramita { width: 58px; height: 24px; }
.basico .prog-remate { margin-top: 30px; }
.basico .prog-remate__cielo { width: 260px; color: #CDBF9E; }
.basico .prog-anillos,
.basico .prog-anillos__par,
.basico .prog-anillo__brillo { -webkit-animation: none; animation: none; }

/* ── 7 · Regalos ── */
.basico .regalos__titulo { font-size: 36px; margin-top: 14px; }
.basico .regalos__texto { color: #F1EDE2; }
.basico .regalos__lista { display: block; max-width: 440px; margin: 52px auto 0; }
.basico .regalos__celda { display: block; margin: 0; }
.basico .regalos__celda + .regalos__celda { margin-top: 30px; }
.basico .regalo { display: block; text-align: center; padding: 34px 24px 30px; }
.basico .regalo__icono { margin: 0 auto; }
.basico .regalo__tienda { display: block; min-height: 0; font-size: 25px; }
.basico .regalo__filete i { margin: 0 10px; }
.basico .regalo__valor { display: block; font-size: 25px; }
.basico .regalo__valor--largo { font-size: 21px; }
.basico .regalo__grupo { margin: 0 .2em; }
.basico .regalo__acciones > * { margin: 5px 6px; }
.basico .regalos__nota { margin-top: 40px; font-size: 18px; color: #D9DBC7; }
.basico .copiar__icono svg { top: 0; left: 0; }

/* ── 8 · Confirmación ── */
.basico .rsvp__titulo { margin-top: 12px; }
.basico .rsvp__limite { margin-top: 14px; color: #F1EDE2; }
.basico .rsvp__marco { width: auto; max-width: 500px; margin: 34px auto 0; }
.basico .rsvp__tarjeta {
  border-radius: 140px 140px 3px 3px;
  padding: 72px 26px 40px;
  text-align: center;
}
.basico .rsvp__tarjeta.papel::after { border-radius: 131px 131px 2px 2px; }
.basico .rsvp__tarjeta::before {
  top: 14px; right: 14px; bottom: 14px; left: 14px;
  border-radius: 126px 126px 1px 1px;
}
.basico .rsvp__rama { margin: 0 8px; }
.basico .rsvp__monograma { font-size: 40px; color: #4E5330; }
.basico .rsvp__monograma em { color: #4E5330; }
.basico .rsvp__fecha { opacity: 1; color: #3A3A35; }
.basico .rsvp__filete i { margin: 0 10px; }
.basico .rsvp__formulario { display: block; margin-top: 22px; }
.basico .rsvp__formulario[hidden] { display: none; }
.basico .rsvp__formulario > * + * { margin-top: 26px; }
.basico .rsvp-opciones__par { display: block; margin-top: 14px; }
.basico .rsvp-opcion + .rsvp-opcion { margin-top: 12px; }
.basico .rsvp-opcion__radio { top: 0; left: 0; }
/* El relleno oscuro de la opción elegida: sin él, el texto claro no se lee */
.basico .rsvp-opcion__cara::before { top: 0; right: 0; bottom: 0; left: 0; }
.basico .rsvp-opcion__marca { margin-right: 10px; }
.basico .rsvp-personas > * + * { margin-top: 14px; }
.basico .rsvp-contador__boton { margin: 0 2px; }
.basico .rsvp__gracias { margin-top: 26px; }
.basico .rsvp__gracias-acciones { display: block; margin-top: 26px; }
.basico .rsvp__gracias-acciones > * + * { margin-top: 10px; }
/* Mientras js/rsvp.js no esté activo se ve el enlace directo (css/rsvp.css) */
.basico .rsvp__directo { margin-top: 24px; }
.basico .rsvp__directo .boton { display: block; margin-top: 16px; }

/* ── 9 · Recomendaciones: los tres apartados apilados ── */
.basico .recom__pestanas { display: none; }
.basico .recom__apartado { margin-top: 44px; }
.basico .recom__apartado + .recom__apartado { padding-top: 44px; border-top: 1px solid #5A5A4A; }
.basico .recom__rejilla { display: block; max-width: 520px; margin: 26px auto 0; }
.basico .recom__celda { display: block; }
.basico .recom__celda + .recom__celda { margin-top: 20px; }
.basico .recom-tarjeta { display: block; padding: 22px 20px; }
.basico .recom-tarjeta__icono,
.basico .recom__icono-apartado,
.basico .recom__subtitulo-icono,
.basico .recom-tarjeta__boton-icono { width: 22px; height: 22px; vertical-align: middle; margin-right: 10px; }
.basico .recom-tarjeta__pie { margin-top: 16px; }
.basico .recom-tarjeta__pie .boton { display: inline-block; margin: 6px 12px 0 0; }
.basico .recom__lista-lugares { display: block; text-align: center; }
.basico .recom__lista-lugares li { display: inline-block; margin: 5px; padding: 9px 16px; border: 1px solid #A3A67E; border-radius: 999px; }
.basico .recom-tarjeta__texto { margin-bottom: 0; }
.basico .recom-tarjeta__pie .boton { display: inline-block; white-space: nowrap; }
.basico .recom-tarjeta__boton-icono { display: inline-block; }
.basico .recom-tarjeta--compacta { padding: 16px 20px 12px; }
.basico .visitar__ramita { width: 200px; margin: 18px auto 14px; }

/* ── 10 · Cierre ── */
.basico .cierre__nota { margin-top: 12px; }
.basico .planner { margin: 30px auto 0; }
.basico .planner__nombre { font-size: 28px; color: #2B2B28; }
.basico .planner__medios { display: block; }
.basico .planner__medios .boton { margin: 6px; }
.basico .cierre__despedida { margin-top: 90px; }
.basico .cierre__medallon { width: 240px; margin: 0 auto 26px; }
.basico .cierre__sello { height: 240px; background: #FBF9F4; }
.basico .cierre__nutrias { top: 45px; left: 11%; width: 78%; height: auto; -webkit-transform: none; transform: none; }
.basico .cierre__frase { color: #F6F2EA; }
.basico .cierre__nombres { margin-top: 14px; color: #D9DBC7; }
.basico .cierre__lugar { margin-top: 18px; font-size: 12px; color: #F6F2EA; opacity: 1; }

/* ── Pantallas anchas ── */
@media (min-width: 400px) {
  .basico .portada__fecha { font-size: 40px; }
}
@media (min-width: 700px) {
  .basico .seccion { padding: 96px 40px; }
  .basico .t-script { font-size: 60px; }
  .basico .portada__fecha { font-size: 56px; }
  .basico .t-nombres { font-size: 44px; }
  .basico .t-cuerpo { font-size: 20px; }
  .basico .atardecer__escena { height: 720px; }
  .basico .atardecer__frase .t-script { font-size: 50px; }
}
