:root {
  /* Los dos unicos tonos de marca (ver assets/HelenaCarles/logosHelenaCarles_llegenda.pdf) */
  --color-blue: #3b4f80;
  --color-cream: #edeae5;

  --color-bg: var(--color-cream);
  --color-card: #ffffff;
  --color-primary: var(--color-blue);
  --color-primary-dark: #2c395c;  /* azul de marca oscurecido, para hover/titulos */
  --color-text: #2c395c;
  --color-text-soft: #5a6482;     /* azul de marca aclarado, para texto secundario */
  --color-border: #cdced3;        /* mezcla azul + crema */
  --color-error: #a4433a;
  --color-success: #3c7a5a;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }

.lang-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.15rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.2rem;
  z-index: 50;
}

.lang-toggle button {
  background: transparent;
  color: var(--color-primary-dark);
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.lang-toggle button.active {
  background: var(--color-primary);
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0 0 0.5em;
}

a { color: var(--color-primary); }

/* --- Puerta de acceso (palabra magica) ---------------------------------- */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 40; /* por debajo de .lang-toggle (50) */
  background: var(--color-cream);
  display: flex;
  overflow-y: auto;
}
.auth-overlay[hidden] { display: none; }

/* El contenido se centra con `margin: auto` (en vez de `justify-content:
   center`) para que, si no cabe en pantalla, se pueda hacer scroll sin que se
   recorte la parte de arriba. */
.auth-overlay__inner {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

.auth-overlay .hero-emblem {
  width: min(420px, 80%);
  margin-bottom: 1.25rem;
}

.auth-overlay__ninotets {
  height: min(34vh, 280px);
  width: auto;
  margin-top: 1.5rem;
}

.auth-overlay__intro {
  max-width: 480px;
  color: var(--color-text-soft);
  margin: 0 0 0.5rem;
}

/* --- Hero ------------------------------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-bg) 100%);
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  border-bottom: 1px solid var(--color-border);
}

.hero-emblem {
  width: min(620px, 94%);
  height: auto;
  margin-bottom: 1.25rem;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  margin-bottom: 0.75rem;
}

.hero-names {
  font-size: clamp(2.5rem, 7vw, 4rem);
  margin: 0;
}

.hero-names .amp {
  color: var(--color-primary);
  font-style: italic;
  padding: 0 0.15em;
}

.hero-small { padding: 3rem 1.5rem 2rem; }
.hero-small .hero-names { font-size: clamp(1.8rem, 5vw, 2.6rem); }

/* --- Layout ------------------------------------------------------------ */

main { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }

.section {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.section:last-child { border-bottom: none; }
.section h2 { text-align: center; margin-bottom: 1.5rem; }

.placeholder-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  font-style: italic;
  margin-top: 0.75rem;
}

/* --- Carta de bienvenida ------------------------------------------------- */

.welcome-letter {
  max-width: 560px;
  margin: 0 auto;
}

.welcome-letter p {
  margin: 0 0 1.1em;
}

.welcome-letter p:last-child {
  margin-bottom: 0;
}

.welcome-letter .welcome-emphasis {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-primary);
  margin: 1.4em 0;
}

/* --- Ilustraciones sueltas (ciclistes, horario) --------------------------- */

.ciclistes-image {
  display: block;
  width: min(680px, 100%);
  margin: 0 auto;
}

.schedule-image {
  display: block;
  width: min(680px, 100%);
  margin: 0 auto;
  border-radius: var(--radius);
}

/* Ilustracion de la pareja: en pantallas anchas flota a la derecha del texto
   de bienvenida (en el margen); en pantallas estrechas se muestra centrada,
   en flujo, justo despues del texto de introduccion. */
.welcome-section {
  position: relative;
}

.couple-illustration {
  display: block;
  width: min(280px, 70%);
  height: auto;
  margin: 2rem auto 0;
}

@media (min-width: 1350px) {
  .couple-illustration {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 240px;
    margin: 0 0 0 2.5rem;
  }
}

/* Por debajo de esto `main` ya no tiene margen propio, solo su padding
   lateral (ver `main` mas arriba) -- así que aquí "a pantalla completa"
   significa salirse tambien de ese padding, no solo llenar la columna. */
@media (max-width: 720px) {
  .schedule-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
}

/* --- Countdown ----------------------------------------------------------- */

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 5vw, 3rem);
  flex-wrap: wrap;
}

.countdown-box {
  text-align: center;
  min-width: 64px;
}

.countdown-box span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 5.5rem);
  color: var(--color-primary);
  line-height: 1;
}

.countdown-box small {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* --- Info / venue --------------------------------------------------------- */

.info-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.info-place {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-primary-dark);
  margin: 0 0 0.25rem;
}

.map-embed {
  margin-top: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
}

/* --- Subtitulos de seccion ------------------------------------------------ */

.section-subtitle {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin: 2rem 0 1rem;
}

/* --- FAQ --------------------------------------------------------------------- */

/* Bloque de FAQ del segon dia, insertado por rsvp.js al final de la seccion
   de preguntas frecuentes (solo para invitados con alojamiento pagado). */
.second-day-faq { margin-top: 2.5rem; }

.faq-item { margin-bottom: 1.25rem; }
.faq-item:last-child { margin-bottom: 0; }
.faq-question {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.25rem;
}
.faq-answer { margin: 0; color: var(--color-text-soft); }

.contact-numbers {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  text-align: center;
}
.contact-numbers .contact-name {
  font-weight: 700;
  display: block;
}
.contact-numbers .contact-phone {
  color: var(--color-primary);
  font-family: var(--font-heading);
}

/* --- Cita final ---------------------------------------------------------------- */

.closing-quote {
  text-align: center;
  padding: 3rem 1.5rem;
}
.closing-quote blockquote {
  margin: 0 auto;
  max-width: 480px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-primary-dark);
  line-height: 1.5;
}
.closing-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* --- Formularios --------------------------------------------------------- */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

/* Bloque de informacion de alojamiento (segun el tipo de invitado).
   Texto plano sobre el fondo crema, sin caja. */
.stay-info {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  text-align: left;
}
.stay-info__line {
  margin: 0 0 0.5rem;
}

.stay-info__list {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.stay-info__list li {
  margin-bottom: 0.25rem;
}
.stay-info__line:last-child {
  margin-bottom: 0;
}
.stay-info__warning {
  margin: 0.75rem 0 0;
  font-style: italic;
}

label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; }

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
  margin-bottom: 1rem;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 79, 128, 0.15);
}

textarea { min-height: 80px; resize: vertical; }

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
fieldset legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }

.radio, .checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.radio input, .checkbox input { width: auto; margin: 0; }

.field-block { margin-bottom: 1.25rem; }

button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
button:hover { background: var(--color-primary-dark); }

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 320px;
  margin: 1.5rem auto 0;
}

.error-message {
  color: var(--color-error);
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.success-message {
  color: var(--color-success);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 1rem;
}

/* --- Autocompletado -------------------------------------------------------- */

.autocomplete { position: relative; }

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: -0.75rem 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  z-index: 10;
  max-height: 220px;
  overflow-y: auto;
}

.suggestions li {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
}
.suggestions li:hover { background: var(--color-cream); }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-style: italic;
}

/* --- Admin ------------------------------------------------------------------- */

/* El panel puede ser mucho mas ancho que la pagina de invitado: la tabla
   tiene muchas columnas y no debe cortarse si la pantalla da de si. Se deja
   crecer hasta 1700px (rellenando el ancho disponible en pantallas menores)
   y el padding de `main` conserva un margen minimo con los bordes. */
.admin-main {
  max-width: 1700px;
}

.stats-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.stat {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  text-align: center;
  min-width: 100px;
}
.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-primary);
}
.stat span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}

.admin-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.admin-controls input { flex: 1; min-width: 200px; margin-bottom: 0; }

.button-link {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.65rem 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}
.button-link:hover { background: var(--color-primary-dark); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}

table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Las respuestas que pueden ser largas (restricciones, acompanante,
   comentarios) envuelven en varias lineas dentro de su columna, en vez de
   estirar la tabla. */
th:nth-child(5), td:nth-child(5),
th:nth-child(6), td:nth-child(6),
th:nth-child(7), td:nth-child(7),
th:nth-child(9), td:nth-child(9) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 240px;
  overflow: visible;
  text-overflow: clip;
}
th {
  background: var(--color-cream);
  position: sticky;
  top: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:hover { background: #fbfaf7; }