/* ═══════════════════════════════════════════════
   TEMA GRANATE · fondo granate, detalles en champán
   Se carga el último: sobrescribe los colores de index.html
   ═══════════════════════════════════════════════ */
:root {
  --bg:         #461523;               /* fondo base */
  --bg-deep:    #310E19;
  --glass:      rgba(255, 244, 230, 0.055);   /* tarjetas */
  --glass-2:    rgba(255, 244, 230, 0.09);
  --champagne:  #F3E9E2;               /* acento claro */
  --champagne-2:#D9CBC3;
  --ivory:      #F8EEE8;

  --garnet:       var(--champagne);    /* los textos/acentos que eran granate pasan a champán */
  --garnet-mid:   var(--champagne-2);
  --garnet-light: rgba(243, 233, 226, 0.12);
  --amber:        #E8D8CC;
  --amber-light:  rgba(243, 233, 226, 0.12);
  --cream:        #361019;             /* fondo de inputs */
  --text:         var(--ivory);
  --text-soft:    rgba(248, 238, 232, 0.68);
  --border:       rgba(243, 233, 226, 0.24);
}

html { background-color: var(--bg-deep); color-scheme: dark; }
body { background-color: var(--bg); color: var(--text); }
body::before {
  background:
    url('../bg-travel-light.png') repeat 0 0 / 420px auto,
    radial-gradient(ellipse at 50% 20%, #5A2032 0%, #461523 55%, #310E19 100%);
}

/* NAV */
nav { background: rgba(49, 14, 25, 0.92); }
nav a { color: var(--ivory); }
nav a:hover, nav a.active { color: var(--champagne); }
nav a.active { border-bottom-color: var(--champagne); }

/* PORTADA */
.monogram-badge {
  background: radial-gradient(circle at 50% 35%, #5F2639, #401320); /* opaco: no deja ver el fondo */
  border: 1px solid rgba(243,233,226,0.55);
  box-shadow: 0 6px 34px rgba(0,0,0,0.35), inset 0 0 30px rgba(0,0,0,0.18);
}
.monogram-badge::after { border: 0.5px solid rgba(243,233,226,0.3); }
.hero-names, .hero-date {
  background: var(--glass); border-color: rgba(243,233,226,0.35);
  box-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
.hero-names { color: var(--ivory); }
.hero-date  { color: var(--champagne); }
.countdown-box {
  background: var(--glass); border-color: rgba(243,233,226,0.32);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
}
.countdown-num { color: var(--champagne); }

/* SECCIONES */
.section-eyebrow { color: var(--champagne-2); }
.section-title { color: var(--ivory); }
.section-divider { background: var(--champagne); }

/* TARJETAS */
.info-card, .rsvp-card, .acc-card, .hotel-card, .address-card, .bus-option-card {
  background: var(--glass); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.info-card, .rsvp-card, .acc-card, .address-card { box-shadow: 0 6px 26px rgba(0,0,0,0.22); }
.info-icon { border: 0.5px solid rgba(243,233,226,0.3); }
.acc-card.open { border-color: var(--champagne); }
.acc-card:hover, .guest-item:hover { border-color: var(--champagne-2); }
.guest-list { background: rgba(0,0,0,0.12); }
.bus-section { border-color: rgba(243,233,226,0.28); }
.bus-option input:checked + .bus-option-card { border-color: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); }
.bus-check { background: transparent; border-color: rgba(243,233,226,0.5); }
.bus-option input:checked + .bus-option-card .bus-check { background: var(--champagne); border-color: var(--champagne); }
.bus-check svg { stroke: #461523; }

/* FORMULARIOS */
.search-box input, .rsvp-card input[type=text], .rsvp-card input[type=email],
.rsvp-card select, .rsvp-card textarea { background: var(--cream); color: var(--ivory); }
.rsvp-card ::placeholder, .search-box input::placeholder { color: rgba(248,238,232,0.4); }
.field-error { border-color: #FF8F80 !important; }
.field-error-msg { color: #FF9D90; }

/* BOTONES */
.btn-submit, .acc-btn, .address-btn { background: var(--champagne); color: #461523; font-weight: 400; }
.btn-submit:hover, .acc-btn:hover, .address-btn:hover { background: #FBF6F2; }
.address-btn svg, .acc-btn svg { stroke: #461523; }
.btn-otra:hover { color: var(--champagne); }

/* BADGES / AVISOS */
.friend-badge { background: var(--amber-light); color: #EDE2DA; }
.acc-friend-note { background: var(--amber-light); color: #EDE2DA; }
.acc-friend-note svg { stroke: var(--amber); }
.acc-highlights span, .acc-dist, .confirmed-badge { color: var(--champagne); }

/* MAPA (iframe de Google) */
.address-map iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.9) contrast(0.95); }

/* ANIMACIÓN DE ENVÍO */
.send-overlay { background: rgba(42, 11, 20, 0.96); }
.send-env-svg { filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45)); }

/* PIE */
footer { border-top-color: rgba(243,233,226,0.22); }

/* ═══ INTRO ═══ */
.env-overlay { background: radial-gradient(ellipse at 50% 35%, #5A2032 0%, #461523 55%, #310E19 100%); }
.env-overlay::before {            /* solo las figuras */
  background: url('../bg-travel-light.png') repeat 0 0 / 420px auto;
  transition: opacity 1.2s ease;
}
.env-wrap { filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.env-tap-hint { color: rgba(243,233,226,0.8); }
.env-tap-hint svg { fill: rgba(243,233,226,0.8); }

.env-card { background: var(--bg); box-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.env-card::before {               /* la carta lleva los mismos dibujos que el fondo */
  background:
    url('../bg-travel-light.png') repeat 0 0 / 420px auto,
    radial-gradient(ellipse at 50% 35%, #5A2032 0%, #461523 60%, #310E19 100%);
}
.card-frame { border-color: rgba(243,233,226,0.45); }
.card-frame::after { border-color: rgba(243,233,226,0.25); }
.card-content { color: var(--champagne); }
.card-eyebrow { color: var(--champagne-2); }
.card-mono {
  background: radial-gradient(circle at 50% 35%, #5F2639, #401320); /* opaco: no deja ver el fondo */
  border-color: rgba(243,233,226,0.55);
  box-shadow: 0 6px 34px rgba(0,0,0,0.35), inset 0 0 30px rgba(0,0,0,0.18);
}
.card-names { color: var(--ivory); }
.card-date { color: var(--champagne); }

/* ═══ ALOJARSE EN BÉJAR ═══ */
.bejar-card {
  margin-top: 2.5rem; padding: 2rem 1.8rem; text-align: center;
  background: var(--glass); border: 0.5px solid var(--border); border-radius: 20px;
  box-shadow: 0 6px 26px rgba(0,0,0,0.22);
}
.bejar-eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champagne-2); margin-bottom: 0.4rem; }
.bejar-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(24px, 4vw, 32px); color: var(--ivory); margin-bottom: 0.7rem; }
.bejar-card p { font-size: 14px; color: var(--text-soft); max-width: 520px; margin: 0 auto 1.2rem; line-height: 1.6; }
.bejar-card p strong { color: var(--ivory); font-weight: 400; }
.bejar-card .acc-friend-note { text-align: left; max-width: 520px; margin: 0 auto 1.4rem; align-items: center; }
.bejar-card .acc-friend-note strong { font-weight: 400; color: #FBF6F2; }

/* Tarjetas sin foto: el texto no queda pegado al borde superior */
.acc-body > .acc-info { padding-top: 1.2rem; }
.acc-body > .acc-img-wrap + .acc-info { padding-top: 0; }

/* ═══ PESTAÑA INFORMACIÓN (sin tarjetas, tipografía sobre el fondo) ═══ */
.info-flow { max-width: 760px; text-align: center; }
.flow-lead { font-size: 13px; letter-spacing: 0.1em; color: var(--text-soft); margin: -1.5rem 0 3rem; }

.contact-cols { display: grid; grid-template-columns: 1fr 1fr; }
.contact-col { padding: 0 1.2rem; }
.contact-col + .contact-col { border-left: 0.5px solid var(--border); }
.contact-group { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne-2); margin-bottom: 1.6rem; }
.cp { margin-bottom: 1.6rem; }
.cp-name { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: clamp(19px, 3.2vw, 24px); line-height: 1.2; color: var(--ivory); margin-bottom: 0.25rem; }
.cp-phone { font-size: 15px; letter-spacing: 0.14em; color: var(--champagne); text-decoration: none; border-bottom: 0.5px solid transparent; transition: border-color 0.2s; }
.cp-phone:hover { border-bottom-color: var(--champagne); }

.info-flow .ornament { margin: 3.5rem 0; }
.flow-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(28px, 5vw, 38px); color: var(--ivory); margin-bottom: 1.6rem; }
.flow-map { border-radius: 16px; overflow: hidden; border: 0.5px solid var(--border); margin-bottom: 1.6rem; }
.flow-map iframe { width: 100%; height: 320px; border: 0; display: block; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.9) contrast(0.95); }
.flow-place { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--ivory); }
.flow-place-sub { font-size: 13px; letter-spacing: 0.08em; color: var(--text-soft); margin-bottom: 1.4rem; }
.flow-btn { align-self: auto; }

.flow-gift { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(17px, 3.2vw, 20px); line-height: 1.45; color: var(--text-soft); max-width: 460px; margin: 0 auto 0.5rem; }
.flow-gift-sub { font-size: 12px; line-height: 1.7; color: var(--text-soft); opacity: 0.8; max-width: 400px; margin: 0 auto 1rem; }
.flow-iban { font-size: 12px; letter-spacing: 0.16em; color: var(--text-soft); word-break: break-word; }

@media (max-width: 600px) {
  .contact-cols { grid-template-columns: 1fr; }
  .contact-col { padding: 0; }
  .contact-col + .contact-col { border-left: none; border-top: 0.5px solid var(--border); margin-top: 1rem; padding-top: 2rem; }
  .flow-map iframe { height: 240px; }
}

/* Contador: tipografía más limpia */
.countdown-num { font-family: 'Jost', sans-serif; font-weight: 300; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em; font-size: 38px; }
@media (max-width: 600px) { .countdown-num { font-size: 28px; } }

/* ═══ INFORMACIÓN: fecha, horario, contacto ═══ */
.flow-big { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(24px, 5vw, 34px); color: var(--champagne); letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 1rem; margin-bottom: 2.2rem; border-bottom: 0.5px solid var(--border); }
.contact-pair .cp { margin-bottom: 0.6rem; padding: 0 1rem; }
.contact-cols-families .cp:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .contact-pair { grid-template-columns: 1fr; padding-bottom: 0.6rem; margin-bottom: 1.8rem; }
  .contact-pair .cp { padding: 0; margin-bottom: 1.6rem; }
}

/* ═══ NOMBRES (escritura a mano) y FECHA ═══ */
.hero-names {
  font-family: 'Parisienne', 'Snell Roundhand', cursive;
  font-style: normal; font-weight: 400; letter-spacing: 0.01em;
  font-size: clamp(36px, 7.4vw, 56px); line-height: 1.2; padding: 0.2rem 2rem 0.3rem;
}
.card-names {
  font-family: 'Parisienne', 'Snell Roundhand', cursive;
  font-style: normal; font-weight: 400; letter-spacing: 0.01em; font-size: 10.5cqmin; line-height: 1.2;
}
.hero-date {
  font-family: 'Cormorant Garamond', serif; font-style: normal; font-weight: 400;
  text-transform: none; letter-spacing: 0.04em; font-size: clamp(16px, 3.4vw, 20px); padding: 0.4rem 1.6rem;
}

/* Confirmar: tarjeta opaca (no deja ver los dibujos del fondo) */
.rsvp-card { background: #4F1B2D; border: 0.5px solid var(--border); box-shadow: 0 6px 26px rgba(0,0,0,0.28); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ═══ LUGAR (Información) ═══ */
.venue { position: relative; margin-top: 2rem; padding: 3.2rem 1.6rem 2.6rem; text-align: center; }
.venue-frame { position: absolute; inset: 0; border: 0.5px solid rgba(243,233,226,0.4); border-radius: 22px; pointer-events: none; }
.venue-frame::after { content: ''; position: absolute; inset: 7px; border: 0.5px solid rgba(243,233,226,0.22); border-radius: 16px; }
.venue-pin { width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0.5px solid rgba(243,233,226,0.5); background: var(--garnet-light); }
.venue-pin svg { width: 24px; height: 24px; fill: none; stroke: var(--champagne); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.venue-label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--champagne-2); margin-bottom: 0.5rem; }
.venue-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(32px, 6vw, 46px); line-height: 1.1; color: var(--ivory); }
.venue-addr { font-size: 13px; letter-spacing: 0.08em; color: var(--text-soft); margin: 0.5rem 0 2rem; }
.venue-note { font-size: 14px; color: var(--text-soft); max-width: 440px; margin: 0 auto 1.6rem; line-height: 1.6; }
.venue-steps { list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 0.6rem 0; margin: 0 auto 2.2rem; max-width: 560px; }
.venue-steps li { position: relative; flex: 1 1 110px; font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--champagne); padding-top: 22px; }
.venue-steps li::before { content: ''; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--champagne); }
.venue-steps li::after { content: ''; position: absolute; top: 8px; left: calc(50% + 10px); right: calc(-50% + 10px); height: 0.5px; background: rgba(243,233,226,0.45); }
.venue-steps li:last-child::after { display: none; }
.venue-btn { align-self: auto; }
@media (max-width: 600px) {
  .venue { padding: 2.6rem 1.1rem 2.2rem; }
  .venue-steps li { flex-basis: 50%; }
  .venue-steps li:nth-child(2)::after { display: none; }
}

/* ═══════════════════════════════════════════════
   TARJETAS · mismo estilo y translucidez en todo el sitio
   (cambia --card-bg para ajustar la opacidad de todas a la vez)
   ═══════════════════════════════════════════════ */
:root {
  --card-bg: rgba(96, 37, 56, 0.55);
  --card-border: rgba(243, 233, 226, 0.30);
  --card-shadow: 0 6px 26px rgba(0, 0, 0, 0.24);
  --card-blur: blur(2px);
  --text-soft: rgba(248, 238, 232, 0.80);   /* textos secundarios más legibles */
}
.info-card, .rsvp-card, .acc-card, .hotel-card, .address-card, .bus-option-card,
.countdown-box, .hero-names, .hero-date, .bejar-card, .venue {
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--card-blur);
          backdrop-filter: var(--card-blur);
}
.venue { border-radius: 22px; }
.venue-addr, .venue-note { color: rgba(248, 238, 232, 0.88); }
.venue-label { color: var(--champagne); }

/* Línea de momentos del día: siempre en una sola fila, también en móvil */
.venue-steps { flex-wrap: nowrap; gap: 0; max-width: 560px; }
.venue-steps li { flex: 1 1 0; min-width: 0; font-size: clamp(13px, 4vw, 20px); padding-inline: 1px; }
@media (max-width: 600px) {
  .venue-steps li { flex: 1 1 0; }
  .venue-steps li:nth-child(2)::after { display: block; }
  .venue { padding-inline: 0.7rem; }
}

/* Frase del complejo: más margen a los lados en móvil */
.venue-note { padding-inline: 1rem; }
@media (max-width: 600px) {
  .venue-note { padding-inline: 2rem; }
}

/* Botones de los pueblos de alrededor */
.town-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.town-links .acc-btn { margin: 0; }
@media (max-width: 600px) { .town-links .acc-btn { flex: 1 1 100%; text-align: center; } }

/* ═══ PREBODA: aviso de confirmación ═══ */
.preboda-confirm { margin-top: 2.5rem; text-align: center; }
.preboda-confirm p { font-size: 14px; color: var(--text-soft); margin-bottom: 1rem; }

/* ═══ RESTAURANTES ═══ */
.rest-lead { text-align: center; font-size: 14px; color: var(--text-soft); margin: -1.5rem auto 2.4rem; max-width: 520px; }
.rest-list { display: flex; flex-direction: column; gap: 1rem; }
.rest-card { padding: 1.5rem; border-radius: 16px; background: var(--card-bg); border: 0.5px solid var(--card-border); box-shadow: var(--card-shadow); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur); }
.rest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.rest-head > div { min-width: 0; }
.rest-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0.3em 0 0; color: var(--ivory); }
.rest-head .acc-dist { text-align: right; white-space: normal; }
.rest-facts { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.rest-fact { font-size: 13.5px; color: var(--ivory); line-height: 1.5; }
.rest-fact span { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne-2); margin-bottom: 1px; }
.rest-desc { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-bottom: 1.2rem; }
.rest-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.rest-btns .acc-btn { margin: 0; }
.rest-btn-alt { background: transparent; color: var(--champagne); border: 0.5px solid var(--card-border); }
.rest-btn-alt:hover { background: var(--garnet-light); }
@media (max-width: 600px) {
  .rest-head { flex-direction: column; gap: 0.6rem; }
  .rest-head .acc-dist { align-self: flex-start; text-align: left; }
  .rest-btns .acc-btn { flex: 1 1 100%; text-align: center; }
}