/* ==================================================================
   ESTILOS — Invitacion Ariel y Luisa

   Orden del archivo:
     1. Variables y fondo         (paleta medida del arte original)
     2. Marco floral              (anclado al contenido, no al viewport)
     3. Estructura y tapa         (#scene, #left-panel, #right-panel)
     4. Secciones y tipografia
     5. Selector de idioma
     6. Modal de confirmacion     (overrides de SweetAlert2)
     7. Mobile                    (@media max-width 768px)

   Los cremas salen de :root y estan medidos pixel a pixel sobre
   ElemGraf.png; no los cambies a ojo o el marco deja de empalmar
   con el fondo.
   ================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --crema: #fff8f0;         /* centro del arte */
  --crema-calido: #faf2e3;  /* borde exterior del arte */
  --crema-panel: #f9f1e4;   /* bloques sutiles sobre el crema */

  /* Tamano de la esquina floral. Es EL dial del marco:
     todo lo demas (grosor de los lados, aire del contenido)
     se calcula a partir de aca. */
  --marco: clamp(70px, 18vw, 240px);
}

html, body {
  background-color: var(--crema);
  font-family: Georgia, serif;
  color: #5c3d1e;
  overflow-x: hidden;
}

html {
  /* Saca el flash gris/azul que pintan los navegadores moviles
     sobre cualquier elemento clickeable al tocarlo. */
  -webkit-tap-highlight-color: transparent;
}

#flap-front,
#marco,
.cta-btn,
.seal-mark,
.divider {
  -webkit-user-select: none;
  user-select: none;
}

/* Con la tapa puesta no hay nada para seleccionar en ningun lado. */
html.cerrado, html.cerrado body {
  -webkit-user-select: none;
  user-select: none;
}

/* Halo calido del borde, anclado al viewport.
   Va como capa fija propia y NO con background-attachment:fixed,
   porque en iOS Safari esa propiedad repinta en cada frame de
   scroll y es una de las causas del tironeo. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%,
      rgba(250, 242, 227, 0) 0%,
      rgba(250, 242, 227, 0) 55%,
      var(--crema-calido) 100%);
}

html.cerrado {
  /* Solo con la tapa puesta: evita que el tiron hacia abajo
     dispare el refresh cuando todavia no hay nada que scrollear. */
  overscroll-behavior-y: none;
}

html.cerrado,
html.cerrado body {
  overflow: hidden;
  height: 100%;
  touch-action: none;   /* bloquea el arrastre; el tap sigue andando */
}

#marco {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* nunca bloquea clicks ni scroll */
}

#marco > div { position: absolute; }

.m-esq {
  width: var(--marco);
  height: var(--marco);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.m-si { top: 0;    left: 0;  background-image: url('../marco/esq-si.webp'); }
.m-sd { top: 0;    right: 0; background-image: url('../marco/esq-sd.webp'); }
.m-ii { bottom: 0; left: 0;  background-image: url('../marco/esq-ii.webp'); }
.m-id { bottom: 0; right: 0; background-image: url('../marco/esq-id.webp'); }

/* Los factores 0.8611 y 0.7222 son la proporcion real de las
   piezas exportadas (310/360 y 260/360). Mantienen el grosor
   del borde exactamente alineado con el de las esquinas. */
.m-lado-h {
  left: var(--marco);
  right: var(--marco);
  height: calc(var(--marco) * 0.8611);
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.m-sup { top: 0;    background-image: url('../marco/borde-sup.webp'); }
.m-inf { bottom: 0; background-image: url('../marco/borde-inf.webp'); }

.m-lado-v {
  top: var(--marco);
  bottom: var(--marco);
  width: calc(var(--marco) * 0.7222);
  background-repeat: repeat-y;
  background-size: 100% auto;
}
.m-izq { left: 0;  background-image: url('../marco/borde-izq.webp'); }
.m-der { right: 0; background-image: url('../marco/borde-der.webp'); }

#scene {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;

  /* OJO si volves a activar esto: #right-panel ya NO es hijo de
     #scene (lo sacamos para que la tapa cubra tambien el marco),
     asi que el perspective de aca ya no lo alcanza y el pliegue
     seguiria siendo plano. Para recuperar el efecto 3D hay que
     envolver #right-panel en un contenedor fijo propio y ponerle
     el perspective ahi. Avisame y lo armo. */
  /* perspective: 2000px; */
}

#stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  transform-style: preserve-3d;
}

/* Panel principal: contiene todo el contenido de la landing */
#left-panel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  /* Transparente a proposito: deja ver el halo fijo del body */
  background: transparent;
  z-index: 10;
  /* Aire para que el texto no pase por debajo de las flores.
     Medido: la flor entra 244/360 del alto de esquina arriba y
     201/360 a los costados; estos valores dejan margen encima.
     El env() suma el notch / barra de gestos cuando la landing
     corre a pantalla completa; en desktop vale 0. */
  padding: calc(var(--marco) * 0.8 + env(safe-area-inset-top, 0px))
           calc(var(--marco) * 0.68 + env(safe-area-inset-right, 0px))
           calc(var(--marco) * 0.8 + env(safe-area-inset-bottom, 0px))
           calc(var(--marco) * 0.68 + env(safe-area-inset-left, 0px));
}

/* Panel/solapa que se pliega para revelar el contenido */
#right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  /* dvh y no svh: la tapa tiene que cubrir la pantalla
     completa en todo momento, con barra o sin barra. */
  height: 100vh;
  height: 100dvh;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 100;
}

.panel-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid #e0d0b8;
  overflow: hidden;
}

#flap-front {
  /* Opaco: es la tapa, tiene que ocultar el contenido */
  background: var(--crema);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-left: none;
  cursor: pointer;
  /* La tapa ya no tiene flores encima (el marco quedo debajo,
     dentro del contenido), asi que no hay nada que esquivar:
     alcanza con aire parejo para que el logo respire. */
  padding: 2rem;
}

#flap-logo {
  width: 200px;
  max-height: 30vh;
  margin-bottom: 1.2rem;
}

#flap-front h2 {
  font-size: 1.3rem;
  color: #5c3d1e;
  letter-spacing: 0.05em;
  font-weight: normal;
  margin-bottom: 0.4rem;
  animation: fadeIn 0.8s ease-in forwards;
  opacity: 0;
}

#flap-front p {
  font-size: 0.9rem;
  color: #8b6b4a;
  font-style: italic;
  animation: fadeIn 1s ease-in forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.section {
  padding: 3rem 4rem;
  border-bottom: 1px solid #e8dcc8;
  max-width: 1100px;
  margin: 0 auto;
}

.section:last-child { border-bottom: none; }

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8b6b4a;
  margin-bottom: 0.6rem;
}

.section.hero h1 {
  font-family: "Parisienne", serif;
  font-size: 2.1rem;
  letter-spacing: 1px;
}

.confirmation {
  display: flex;
  justify-content: center;
}

.details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.detail-block {
  text-align: center;
  padding: 1rem;
  background: var(--crema-panel);
  border-radius: 4px;
  border: 1px solid #e0d0b8;
}

.detail-block .label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8b6b4a;
  margin-bottom: 0.3rem;
}

.detail-block .value {
  font-size: 1rem;
  color: #3d2006;
}

.section-title {
  font-size: 1.4rem;
  color: #3d2006;
  font-weight: normal;
  margin-bottom: 1.2rem;
  text-align: center;
}

.eyebrow-inline {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b6b4a;
  margin-bottom: 0.4rem;
}

.description {
  font-size: 0.98rem;
  line-height: 1.8;
  text-align: center;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
}

/* Lista de "A tener en cuenta".
   Alineada a la izquierda a proposito: en una lista, el ojo vuelve
   siempre al mismo punto al bajar de item. Centrada obliga a buscar
   donde arranca cada renglon. */
.info-list {
  list-style: none;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.info-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.95rem;
  font-size: 0.98rem;
  line-height: 1.7;
}

.info-list li:last-child { margin-bottom: 0; }

/* La viñeta es el mismo ✦ que ya usa la pagina en los separadores,
   en vez del punto negro del navegador que rompe el tono. */
.info-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #c8a882;
  font-size: 0.85rem;
}

.program-list {
  max-width: 460px;
  margin: 0 auto;
}

.program-row {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px dashed #e0d0b8;
  font-size: 0.92rem;
}

.program-row:last-child { border-bottom: none; }

.program-row .time {
  color: #8b6b4a;
  font-weight: normal;
  min-width: 70px;
}

.cta-btn {
  display: block;
  width: 260px;
  padding: 0.9rem;
  background: #8b5e3c;
  color: var(--crema);
  border: none;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: center;
}

/* ============================================
  SELECTOR DE IDIOMA
  Discreto por diseno: es utilidad, no contenido.
  Va en el flujo del documento (no flotante) para
  no pelearse con el marco floral ni con el scroll.
  ============================================ */
.lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  max-width: 1100px;
  margin: 0 auto;
  /* Sube pegado al borde superior del contenido, sin
     empujar al hero hacia abajo. */
  margin-bottom: -1.5rem;
  position: relative;
  z-index: 2;
}

.lang-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.15rem;
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: #b09b7f;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}

.lang-btn:hover { color: #8b6b4a; }

.lang-btn.activo {
  color: #5c3d1e;
  border-bottom: 1px solid #c8a882;
}

.lang-sep {
  color: #d8c6ac;
  font-size: 0.7rem;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================
  MODAL DE CONFIRMACION (SweetAlert2)
  El plugin trae su look propio, bastante ajeno al
  resto. Se lo pisa con la paleta de la invitacion
  para que no parezca pegoteado de otra web.
  ============================================ */
.swal2-popup.swal-invitacion {
  background: var(--crema);
  border: 1px solid #e0d0b8;
  border-radius: 6px;
  font-family: Georgia, serif;
  color: #5c3d1e;
  padding: 2rem 1.75rem 1.75rem;
}

.swal-invitacion .swal2-title {
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
  font-weight: normal;
  color: #3d2006;
}

.swal-invitacion .swal2-html-container {
  font-size: 1rem;
  color: #6b4c2a;
  font-style: italic;
  margin-top: 0.35rem;
}

/* La bajada del modal ("Dejanos tu nombre..."). Vive dentro del html del
   formulario porque SweetAlert ignora la opcion `text` cuando se le pasa
   `html`. Los estilos van explicitos y no heredados del contenedor: asi
   se ve igual aunque el dia de mañana se toque el bloque de arriba. */
.swal-invitacion .conf-texto {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  color: #6b4c2a;
  line-height: 1.5;
}

/* El campo del nombre */
.swal-invitacion .swal2-input {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #3d2006;
  background: var(--crema-panel);
  border: 1px solid #e0d0b8;
  border-radius: 4px;
  box-shadow: none;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0 0;
  width: 100%;
}

.swal-invitacion .swal2-input:focus {
  border-color: #8b5e3c;
  box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.15);
}

.swal-invitacion .swal2-validation-message {
  background: transparent;
  color: #a04a3c;
  font-size: 0.85rem;
  font-style: italic;
  padding: 0.5rem 0 0;
}

/* ============================================
   DRESS CODE — selector de dos vistas
   Las dos imagenes estan siempre en el DOM y se
   alterna cual se ve. Cambiar de pestaña es
   instantaneo: no hay carga ni parpadeo.
   ============================================ */
.dc-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dc-tab {
  font-family: Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  padding: 0.55rem 1.4rem;
  border: 1px solid #e0d0b8;
  border-radius: 4px;
  background: transparent;
  color: #8b6b4a;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  -webkit-user-select: none;
  user-select: none;
}

.dc-tab:hover { color: #5c3d1e; border-color: #c8a882; }

/* Relleno macizo en el activo: a simple vista se entiende que hay dos
   opciones y cual estas viendo, sin necesidad de explicarlo. */
.dc-tab.activo {
  background: #8b5e3c;
  border-color: #8b5e3c;
  color: var(--crema);
}

.dc-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.22);
}

/* aspect-ratio fijo (el de las imagenes, 476x787): reserva el alto exacto
   antes de que carguen, asi no hay salto de layout ni al abrir ni al
   cambiar de pestaña. */
.dc-visor {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 476 / 787;
}

/* Los colores no permitidos, debajo del visor. Mismo ancho maximo que las
   guias para que las dos piezas queden alineadas y se lean como una sola
   cosa, con un respiro en el medio.

   No lleva position:absolute como .dc-img: esta afuera del visor y ocupa su
   propio alto en el flujo. El width/height del HTML reserva ese alto antes
   de que cargue, asi no empuja el contenido de abajo. */
.dc-colores {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 1.5rem auto 0;
}

.dc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dc-img.activa {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dc-img { transition: opacity 0.15s ease; transform: none !important; }
}

/* --- Pregunta de dieta: interruptor si/no ---------------------------
   El checkbox real sigue existiendo (visually-hidden, no display:none),
   asi que el interruptor se sigue manejando con teclado y lo anuncian
   los lectores de pantalla. Lo que se ve es el riel y la perilla.
   -------------------------------------------------------------------- */
.conf-dieta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #ece0cc;
  text-align: left;
}

.conf-dieta .preg {
  display: block;
  font-size: 0.9rem;
  color: #6b4c2a;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.conf-fila {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.conf-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

/* Visually-hidden: invisible pero presente para el navegador. */
.conf-switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.conf-riel {
  width: 48px;
  height: 27px;
  border-radius: 14px;
  background: #e3d4bd;
  border: 1px solid #d8c6ac;
  transition: background 0.22s ease, border-color 0.22s ease;
  display: block;
}

.conf-perilla {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--crema);
  box-shadow: 0 1px 3px rgba(61, 32, 6, 0.25);
  transition: transform 0.22s ease;
}

.conf-switch input:checked + .conf-riel {
  background: #8b5e3c;
  border-color: #8b5e3c;
}

.conf-switch input:checked ~ .conf-perilla {
  transform: translateX(21px);
}

.conf-switch input:focus-visible + .conf-riel {
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.22);
}

.conf-estado {
  font-size: 0.88rem;
  color: #8b6b4a;
  font-style: italic;
  -webkit-user-select: none;
  user-select: none;
}

/* El detalle aparece solo si contestan que si. max-height en vez de
   display para poder animarlo; el valor tiene que superar el alto real
   del input o lo recorta. */
.conf-detalle {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
}

.conf-detalle.abierta {
  max-height: 140px;
  opacity: 1;
}

.conf-detalle .swal2-input { margin-top: 0.9rem; }

.swal-invitacion .swal2-actions { margin-top: 1.5rem; gap: 0.6rem; }

.swal-invitacion .swal2-confirm,
.swal-invitacion .swal2-cancel {
  font-family: Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 0.75rem 1.6rem;
  box-shadow: none;
}

.swal-invitacion .swal2-confirm {
  background: #8b5e3c !important;
  color: var(--crema);
}

.swal-invitacion .swal2-cancel {
  background: transparent !important;
  color: #8b6b4a;
  border: 1px solid #e0d0b8;
}

/* El icono de exito por defecto es verde semaforo y desentona;
   se lo lleva a los marrones de la invitacion. */
.swal-invitacion .swal2-success-ring { border-color: rgba(139, 94, 60, 0.3) !important; }
.swal-invitacion .swal2-success-line-tip,
.swal-invitacion .swal2-success-line-long { background-color: #8b5e3c !important; }

.seal-mark {
  text-align: center;
  color: #c8a882;
  font-size: 1.4rem;
  letter-spacing: 0.5rem;
}

/* Tarjeta de contacto al final, para cierre y para mobile */
.contact-section {
  background: var(--crema-panel);
  text-align: center;
  padding: 3rem 2rem;
}

.contact-section .bc-label {
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b6b4a;
  margin-bottom: 0.8rem;
}

.contact-section p {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.divider {
  color: #c8a882;
  font-size: 1.2rem;
  letter-spacing: 0.5rem;
  margin: 1rem 0;
}

.section.gifts {
  text-align: center;
}

.second-intro-text {
  font-family: "Fraunces", serif;
  font-size: 18px;
  padding: 10px;
  margin-top: 10px;
}

.mp-texto {
  text-align: center;
}

#mp-imagen {
  width: 100%;
  margin-top: 10px;
  max-width: 450px;
}

/* El atributo hidden lo pone idiomas.js segun el idioma. El navegador ya le
   aplica display:none, pero cualquier regla con id (como la de arriba) le
   ganaria si algun dia se le agrega un display. Se refuerza aca para que
   ocultar no dependa de la especificidad del selector de al lado. */
[data-i18n-solo][hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  #right-panel {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    transform-origin: left center;
  }

  .section:nth-child(1){
    padding: 2.5rem 1.5rem;
  }

  .section:nth-child(6){
    padding: 2rem 1rem;
  }

  .section {
    padding: 2.5rem 1.5rem 2rem;
  }

  .details {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .cta-btn {
    width: 100%;
  }
}