/* ==========================================================================
   Mirna & José Miguel — wedding site

   Palette replaced (2026-09-02) with Mirna's own corrected colors — the
   original terracotta/sienna/sage/bone/ink from the brief is gone.
   Variable NAMES kept as-is so nothing else in this file needed to
   change, but they now hold:
     --color-terracotta -> Coral rosado  #E2727A (hero, arcos)
     --color-sienna      -> Naranja tostado #D9720F (acento, flores —
                             used here for hover/active, the deeper/
                             richer shift down from coral)
     --color-sage         -> Oliva fresca #A6A94F (vestido, follaje)
     --color-bone          -> Marfil #F5EDE0 (base/fondo)
     --color-ink            -> Vino profundo #4A1F2B (sombra, texto, noche)
   ========================================================================== */

:root {
  --color-terracotta: #E2727A;
  --color-sienna:     #D9720F;
  --color-sage:       #A6A94F;
  --color-bone:       #F5EDE0;
  --color-ink:        #4A1F2B;

  --color-white: #FFFFFF;

  /* Two-font system, per client decision: Fraunces (the original brief's
     display serif, back after a round of trying handwriting fonts for
     titles) for titles/headings, Hubballi for body/logistics text. Body
     sized up from a typical 16px baseline (20px) since Hubballi's
     handwriting-style letterforms read smaller than a plain sans at the
     same pixel size. */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Hubballi', cursive;
  --font-script: 'Hubballi', cursive;

  --nav-height: 64px;
  --section-pad-y: clamp(40px, 6vh, 72px);
  --section-pad-x: clamp(20px, 6vw, 64px);

  --max-content-width: 720px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bone);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  margin: 0;
}

a {
  color: var(--color-terracotta);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--color-sienna);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--color-ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

/*
  Nav-click landing spot: previously stacked scroll-padding-top (on html)
  AND scroll-margin-top (on .section) on top of the section's own
  --section-pad-y (up to 120px), so a jump could land ~200px+ below the
  header before any heading was visible — read as "starts from the
  middle of the screen". Cancel most of that padding out of the anchor
  offset so the heading sits right under the sticky header instead.
*/
.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  scroll-margin-top: calc(var(--nav-height) - var(--section-pad-y));
}

.section-inner {
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.section-title {
  font-size: clamp(30px, 5.5vw, 44px);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}

.tbd {
  outline: 2px dashed var(--color-sage);
  outline-offset: 4px;
  background: rgba(138, 143, 110, 0.12);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   Header / anchor nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--color-bone);
  border-bottom: 1px solid rgba(33, 30, 27, 0.08);
}

@media (min-width: 480px) {
  .site-header {
    padding: 0 var(--section-pad-x);
  }
}

.site-header__mark {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-toggle {
  position: fixed;
  top: calc(var(--nav-height) + 10px);
  right: 16px;
  z-index: 98;
  background: var(--color-bone);
  border: 1px solid rgba(33, 30, 27, 0.2);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}

@media (min-width: 480px) {
  .lang-toggle {
    right: var(--section-pad-x);
  }
}

.lang-toggle span {
  opacity: 0.4;
}

.lang-toggle span.is-active {
  opacity: 1;
  color: var(--color-terracotta);
}

.lang-toggle__sep {
  opacity: 0.3;
  margin: 0 2px;
}

.nav-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
}

.site-nav {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background: var(--color-bone);
  transform: translateY(-110%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  z-index: 99;
}

.site-nav.is-open {
  transform: translateY(0);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 24px var(--section-pad-x) 40px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-nav__list a {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(33, 30, 27, 0.08);
}

.site-nav__list a.is-rsvp {
  color: var(--color-terracotta);
}

.site-nav__list a:hover {
  color: var(--color-sienna);
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    inset: auto;
    transform: none;
    background: none;
    overflow: visible;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 20px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .site-nav__list a {
    padding: 8px 2px;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: none;
    font-family: var(--font-body);
    font-weight: 600;
  }
}

/* ==========================================================================
   Cover
   ========================================================================== */

#cover {
  background: var(--color-bone);
  display: flex;
  justify-content: center;
}

/*
  No cropping, no forced aspect ratio — client was explicit ("no
  deformes la imagen", "tal cual como la encuentras en la carpeta"):
  natural height, whole image always visible. Contained and centered.
  max-width 1000px (~ the source image's native width) means mobile
  is unaffected (viewport is already narrower than that — this is the
  size the client said looked "perfecto" on her phone) while desktop
  scales up to use the available space instead of sitting tiny in the
  middle of the screen.
*/
.cover__art {
  width: 100%;
  max-width: 800px;
}

.cover__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Names banner — same look as the og-image thumbnail, as its own section
   right below Cover (client's request, kept separate from Cover itself)
   ========================================================================== */

/* Tighter than the default .section padding — client said this section
   had too much dead space, wants it pulled closer to Cover above it, and
   more room below it so the next section doesn't peek into view. */
#names-banner {
  padding-top: 0;
  padding-bottom: clamp(48px, 10vh, 96px);
}

.names-banner .section-inner {
  text-align: center;
}

/* Larger on mobile per client request (was clamp(32px,...) — 32px read
   small on her phone); desktop unaffected since 6vw already exceeds 44px
   past ~730px wide. */
.names-banner__names {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 56px);
  color: var(--color-ink);
  margin: 0;
}

/* Forces "José Miguel" onto its own line only where it was wrapping
   awkwardly (mobile); desktop has room so the break is disabled there. */
.names-banner__break {
  display: inline;
}

@media (min-width: 600px) {
  .names-banner__break {
    display: none;
  }
}

.names-banner__divider {
  width: 60px;
  height: 2px;
  background: var(--color-terracotta);
  margin: 20px auto;
}

.names-banner__meta {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin: 0;
}

.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;
}

/* ==========================================================================
   Generic stub sections (placeholder until content lands)
   ========================================================================== */

.section--stub {
  border-top: 1px solid rgba(33, 30, 27, 0.08);
}

.section--stub .section-title {
  color: var(--color-ink);
}

.stub-note {
  font-size: 15px;
  color: var(--color-sienna);
}

/* Letters section content is designed entirely in Canva by the couple —
   see index.html §5 comment. It renders as a plain .section--stub until
   the finished images are dropped in. */

/* ==========================================================================
   Advice / "Consejo para el matrimonio" — envelope art (client's Canva
   illustration) + submission form, side by side on wide screens, stacked
   on mobile.
   ========================================================================== */

.advice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

@media (min-width: 720px) {
  .advice__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 56px;
  }
}

.advice__art {
  flex: 0 0 auto;
  width: min(380px, 85vw);
}

.advice__art img {
  width: 100%;
  height: auto;
}

.advice__panel {
  width: 100%;
  max-width: 480px;
}

.advice__panel .section-title {
  font-size: clamp(22px, 3.5vw, 28px);
}

.advice__question {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-terracotta);
  margin: 16px 0 0;
}

.advice__prompt {
  font-size: 17px;
  line-height: 1.5;
  margin: 12px 0 28px;
}

.advice__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advice__textarea,
.advice__signature {
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(33, 30, 27, 0.25);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
  resize: vertical;
}

.advice__textarea:focus,
.advice__signature:focus {
  outline: none;
  border-color: var(--color-terracotta);
}

.advice__anon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}

.advice__anon input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}

.advice__submit {
  align-self: flex-start;
  background: var(--color-terracotta);
  color: var(--color-white);
  padding: 12px 32px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
}

.advice__submit:hover {
  background: var(--color-sienna);
}

.advice__thanks {
  font-size: 18px;
  color: var(--color-sienna);
}

@media (min-width: 720px) {
  .advice__form {
    align-items: flex-start;
  }
}

/* ==========================================================================
   RSVP — search-first flow (§4/§8)
   ========================================================================== */

.rsvp__inner {
  text-align: center;
}

.rsvp__banner {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
}

.rsvp__banner img {
  width: 100%;
  height: auto;
  display: block;
}

.rsvp__prompt {
  font-size: 16px;
  margin: 8px 0 20px;
}

.rsvp__search {
  max-width: 480px;
  margin: 0 auto 32px;
}

.rsvp__search-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 480px) {
  .rsvp__search-row {
    flex-direction: row;
  }
}

#rsvpSearchInput {
  flex: 1;
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(33, 30, 27, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-ink);
}

#rsvpSearchInput:focus {
  outline: none;
  border-color: var(--color-terracotta);
}

#rsvpSearchBtn {
  background: var(--color-terracotta);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

#rsvpSearchBtn:hover {
  background: var(--color-sienna);
}

.rsvp__search-result {
  margin-top: 16px;
  font-size: 15px;
  color: var(--color-sienna);
}

.rsvp__search-result p {
  margin: 0 0 6px;
}

.rsvp__result-name {
  font-weight: 600;
  font-size: 17px;
}

.rsvp__match-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-white);
  border: 1px solid rgba(33, 30, 27, 0.2);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
}

.rsvp__match-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.rsvp__form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

.rsvp__field legend,
.rsvp__field > label:first-child {
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.rsvp__field {
  border: none;
  padding: 0;
  margin: 0;
}

.rsvp__field label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 6px;
  cursor: pointer;
}

.rsvp__field input[type="checkbox"],
.rsvp__field input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}

.rsvp__field select {
  width: 100%;
  background: var(--color-white);
  border: 1px solid rgba(33, 30, 27, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
}

.rsvp__submit {
  align-self: center;
  background: var(--color-terracotta);
  color: var(--color-white);
  padding: 12px 32px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
}

.rsvp__submit:hover {
  background: var(--color-sienna);
}

.rsvp__thanks {
  font-size: 18px;
  color: var(--color-sienna);
}

/* ==========================================================================
   Hotels — full-bleed photo strip + popup (name/phone/map) per hotel
   ========================================================================== */

.hotels__intro {
  font-size: 15px;
  color: var(--color-sienna);
  margin: 8px 0 24px;
}

.hotels__art {
  position: relative;
  margin: 24px auto 0;
}

/* Full width of the actual viewport on mobile ("que ocupe toda la
   pantalla del cel") — breaks out of .section-inner's max-width and
   .section's own side padding via the classic negative-margin trick.
   Desktop reverts to a normal, contained, centered size. */
@media (max-width: 719px) {
  .hotels__art {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

@media (min-width: 720px) {
  .hotels__art {
    width: 100%;
    max-width: 520px;
  }
}

.hotels__art img {
  width: 100%;
  height: auto;
  display: block;
}

/* Invisible click targets over each hotel photo — see the index.html
   comment above them for how top/height were derived. left/width are
   the same 0%/100% for every row so they're set once here instead of
   per button. No hover/focus highlight — client wants these invisible;
   the `title` attribute gives a native tooltip on desktop hover instead. */
.hotels__hotspot {
  position: absolute;
  left: 0;
  width: 100%;
}

/* ==========================================================================
   Hotel popup
   ========================================================================== */

.hotel-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(33, 30, 27, 0.5);
  z-index: 199;
}

.hotel-modal__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  background: var(--color-bone);
  border-radius: 4px;
  padding: 28px;
  width: min(90vw, 480px);
  max-height: 85vh;
  overflow-y: auto;
}

.hotel-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--color-ink);
  padding: 6px;
}

.hotel-modal__name {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 32px 4px 0;
}

.hotel-modal__time {
  font-size: 14px;
  color: var(--color-sienna);
  margin: 0 0 16px;
}

.hotel-modal__name a {
  color: var(--color-ink);
}

.hotel-modal__name a:hover {
  color: var(--color-terracotta);
}

.hotel-modal__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-terracotta);
  font-size: 16px;
  margin-bottom: 20px;
}

.hotel-modal__phone:hover {
  color: var(--color-sienna);
}

.hotel-modal__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
}

.hotel-modal__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   FAQ — native <details>/<summary> accordion, no JS needed
   ========================================================================== */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq__item {
  border-bottom: 1px solid rgba(33, 30, 27, 0.15);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-ink);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  flex-shrink: 0;
  color: var(--color-terracotta);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 4px 20px;
  color: rgba(33, 30, 27, 0.62);
  line-height: 1.6;
}

.faq__answer p {
  margin: 0 0 12px;
}

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

.faq__answer ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.faq__answer a {
  color: var(--color-terracotta);
}

.faq__answer strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ==========================================================================
   Dresscode
   ========================================================================== */

.dresscode__art {
  width: 100%;
  max-width: 640px;
  margin: 8px auto 32px;
}

.dresscode__art img {
  width: 100%;
  height: auto;
  display: block;
}

.dresscode__group {
  margin-bottom: 24px;
}

.dresscode__label {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-terracotta);
  margin: 0 0 6px;
}

.dresscode__group p {
  margin: 0;
  line-height: 1.6;
}

.dresscode__note {
  font-style: italic;
  color: rgba(33, 30, 27, 0.62);
  margin: 24px 0;
  padding-top: 20px;
  border-top: 1px solid rgba(33, 30, 27, 0.15);
}

.dresscode__moodboard {
  margin-top: 28px;
}

.dresscode__moodboard-q {
  font-weight: 600;
  margin: 0 0 8px;
}

.dresscode__moodboard p {
  line-height: 1.6;
}

.dresscode__pinterest {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-terracotta);
  font-weight: 600;
}

.dresscode__pinterest:hover {
  color: var(--color-sienna);
}

/* ==========================================================================
   Details — Ceremonia & Recepción
   ========================================================================== */

.details__inner {
  max-width: 900px;
}

.details__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}

/* Mobile: text always first, photo below — client's explicit request,
   regardless of which side the image sits on at desktop width. */
.details__art {
  order: 2;
}

.details__text {
  order: 1;
}

.details__art {
  width: 100%;
}

.details__art img {
  width: 100%;
  height: auto;
  display: block;
}

.details__text h3 {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 8px;
}

.details__datetime {
  color: var(--color-terracotta);
  font-weight: 600;
  margin: 0 0 12px;
}

.details__venue {
  line-height: 1.6;
  margin: 0 0 16px;
}

.details__desc {
  line-height: 1.6;
  color: rgba(33, 30, 27, 0.72);
  margin: 0;
}

@media (min-width: 720px) {
  .details__block {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .details__block .details__art,
  .details__block .details__text {
    flex: 1;
  }

  /* Ceremonia: image left, text right on desktop (only block that
     differs from the mobile order — Recepción's text-left already
     matches the mobile default, see .details__art/.details__text above). */
  .details__block--image-left .details__art {
    order: 1;
  }

  .details__block--image-left .details__text {
    order: 2;
  }
}