/* ==========================================================================
   Tlalli · Salón de Eventos
   1. Tokens · 2. Base · 3. Componentes · 4. Responsive

   La paleta sale del logo: verde profundo #105030, dorado #D0A030 y el
   verde claro #40A040 del arco, muestreados del archivo original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* El dorado manda. El verde de la marca entra en dosis chicas: el símbolo
     del logo, el día elegido y el punto de "disponible". */
  --dorado:       #c1912e;   /* dorado asentado, para trazos y bordes */
  --dorado-vivo:  #d0a030;   /* el del logo, para fondos y sobre foto */
  --dorado-ink:   #8a6718;   /* con contraste suficiente para texto */
  --dorado-soft:  #f4ecd9;
  --verde:        #105030;
  --verde-claro:  #40a040;

  /* Superficies y tinta */
  --bg:           #fbfaf7;
  --bg-alt:       #f4f1e8;
  --surface:      #ffffff;
  --surface-soft: #fdfcf9;
  --ink:          #1a1710;
  --ink-soft:     #56503f;
  --ink-mute:     #6d6656;   /* AA sobre blanco para los textos chicos */
  --line:         #e3ded0;
  --line-soft:    #ede9dd;

  /* Estados del calendario */
  --libre:        #2f7d4f;
  --apartado:     #a3524a;

  /* Piezas con color propio */
  --header-bg:    rgba(251, 250, 247, .9);
  --footer-bg:    #1a1710;
  --footer-ink:   #d9d5c7;
  --footer-strong:#ffffff;
  --footer-mute:  #8a8271;
  --footer-line:  rgba(255, 255, 255, .1);
  --day-past:     #c8c4b6;

  /* Hero sobre foto */
  --hero-ink:     #fdfcf7;
  --hero-dorado:  #e6c173;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 2px;
  --shadow: 0 1px 2px rgba(16, 38, 27, .05), 0 12px 32px -18px rgba(16, 38, 27, .3);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dorado:       #d0a44a;
    --dorado-vivo:  #d9ae4a;
    --dorado-ink:   #d9ae4a;
    --dorado-soft:  #322817;
    --verde:        #3e9a65;
    --verde-claro:  #5cb85c;

    --bg:           #16150f;
    --bg-alt:       #1d1b14;
    --surface:      #211f17;
    --surface-soft: #25231a;
    --ink:          #f2efe4;
    --ink-soft:     #b5ae9c;
    --ink-mute:     #857e6d;
    --line:         #36332a;
    --line-soft:    #2b2921;

    --libre:        #63b083;
    --apartado:     #d08a7f;

    --header-bg:    rgba(22, 21, 15, .9);
    --footer-bg:    #100f0a;
    --footer-ink:   #b5ae9c;
    --footer-strong:#f2efe4;
    --footer-mute:  #756f60;
    --footer-line:  rgba(255, 255, 255, .1);
    --day-past:     #4c483e;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -18px rgba(0, 0, 0, .75);

    color-scheme: dark;
  }
}

/* El interruptor de tema del visor manda sobre la preferencia del sistema */

:root[data-theme="light"] {
  --dorado: #c1912e; --dorado-vivo: #d0a030; --dorado-ink: #8a6718; --dorado-soft: #f4ecd9;
  --verde: #105030; --verde-claro: #40a040;
  --bg: #fbfaf7; --bg-alt: #f4f1e8; --surface: #ffffff; --surface-soft: #fdfcf9;
  --ink: #1a1710; --ink-soft: #56503f; --ink-mute: #6d6656;
  --line: #e3ded0; --line-soft: #ede9dd;
  --libre: #2f7d4f; --apartado: #a3524a;
  --header-bg: rgba(251, 250, 247, .9);
  --footer-bg: #1a1710; --footer-ink: #d9d5c7; --footer-strong: #ffffff;
  --footer-mute: #8a8271; --footer-line: rgba(255, 255, 255, .1);
  --day-past: #c8c4b6;
  --shadow: 0 1px 2px rgba(26, 23, 16, .05), 0 12px 32px -18px rgba(26, 23, 16, .3);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --dorado: #d0a44a; --dorado-vivo: #d9ae4a; --dorado-ink: #d9ae4a; --dorado-soft: #322817;
  --verde: #3e9a65; --verde-claro: #5cb85c;
  --bg: #16150f; --bg-alt: #1d1b14; --surface: #211f17; --surface-soft: #25231a;
  --ink: #f2efe4; --ink-soft: #b5ae9c; --ink-mute: #857e6d;
  --line: #36332a; --line-soft: #2b2921;
  --libre: #63b083; --apartado: #d08a7f;
  --header-bg: rgba(22, 21, 15, .9);
  --footer-bg: #100f0a; --footer-ink: #b5ae9c; --footer-strong: #f2efe4;
  --footer-mute: #756f60; --footer-line: rgba(255, 255, 255, .1);
  --day-past: #4c483e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -18px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* El sprite solo guarda los <symbol> que reutiliza <use>; nunca se dibuja. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; }

/* El atributo `hidden` es lo que usa app.js para esconder el recuadro del
   precio, el panel del día y el formulario ya enviado. El navegador lo
   traduce a display:none, pero cualquier regla de display escrita después
   —.quote, .form— le gana, y el elemento se queda a la vista aunque esté
   marcado como oculto. De ahí el !important. */
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado-ink);
  font-weight: 500;
  margin: 0 0 14px;
}

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Componentes
   -------------------------------------------------------------------------- */

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 24px;
}

.brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-symbol { width: 42px; height: 42px; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-mark {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand-sub {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 30px; }

.nav a {
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .18s ease;
}

.nav a:hover { color: var(--ink); }

.nav-cta {
  border: 1px solid var(--ink);
  padding: 10px 20px;
  color: var(--ink) !important;
}

.nav-cta:hover { background: var(--ink); color: var(--bg) !important; }

/* Hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76vh, 640px);
  padding: 96px 0 72px;
  isolation: isolate;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('fotos/hero.jpg');
  background-size: cover;
  background-position: 58% 62%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 30, 19, .58) 0%,
    rgba(8, 30, 19, .34) 42%,
    rgba(8, 30, 19, .82) 100%
  );
}

.hero-inner { max-width: 720px; }

.hero .eyebrow { color: var(--hero-dorado); }

.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 4.6rem);
  line-height: 1.07;
  margin-bottom: 22px;
  color: var(--hero-ink);
  text-shadow: 0 2px 24px rgba(6, 22, 14, .45);
}

.hero h1 em { font-style: italic; color: var(--hero-dorado); }

.lead {
  font-size: 1.06rem;
  color: rgba(253, 252, 247, .88);
  max-width: 50ch;
  margin: 0 0 34px;
  text-shadow: 0 1px 12px rgba(6, 22, 14, .5);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Botones */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 15px 34px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--dorado); border-color: var(--dorado); color: #1a1710; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-block { display: block; width: 100%; }

/* Sobre la foto del hero los botones cambian de terreno */
.hero .btn-primary { background: var(--dorado-vivo); border-color: var(--dorado-vivo); color: #221a06; }
.hero .btn-primary:hover { background: var(--hero-ink); border-color: var(--hero-ink); color: #1a1710; }
.hero .btn-ghost { color: var(--hero-ink); border-color: rgba(253, 252, 247, .55); }
.hero .btn-ghost:hover { background: rgba(253, 252, 247, .12); border-color: var(--hero-ink); color: var(--hero-ink); }

/* Secciones */

.section { padding: 100px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.section-head { max-width: 620px; margin-bottom: 48px; }

.section-head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-lead { color: var(--ink-soft); margin: 0; }

/* Galería */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--radius);
}

.gallery figcaption {
  margin-top: 12px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Más fotos en redes.

   Cierra "El espacio": la persona acaba de ver las fotos y este es el momento
   en que quiere más. Los enlaces llevan el nombre escrito a propósito —los
   logos solos, sin texto, se pasan de largo. */

.mas-fotos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 30px;
}

.mas-fotos p { margin: 0; color: var(--ink-soft); }

.redes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.redes-lista a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.redes-lista a:hover { color: var(--ink); border-color: var(--dorado); }

.redes-lista svg { flex: none; width: 16px; height: 16px; fill: currentColor; }

/* Lo que incluye */

.includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* El verde vive en la marca y en los botones. Aquí el texto es tinta, para
   que el color no cargue toda la página. */
.includes li {
  background: var(--bg);
  padding: 38px 24px;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}

.section-alt .includes li { background: var(--bg-alt); }

/* Disponibilidad */

.availability {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.calendar-card,
.day-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.calendar-title {
  font-size: 1.5rem;
  text-transform: capitalize;
  letter-spacing: .02em;
  color: var(--ink);
}

.cal-nav {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.cal-nav:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.weekdays,
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.weekdays {
  margin-bottom: 8px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

.day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--sans);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.day::after {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.day.is-empty { visibility: hidden; }

.day.is-free { border-color: var(--line-soft); background: var(--surface-soft); }
.day.is-free::after { background: var(--libre); }
.day.is-free:hover { border-color: var(--dorado); background: var(--dorado-soft); }

.day.is-full { color: var(--ink-mute); background: var(--bg-alt); cursor: not-allowed; }
.day.is-full::after { background: var(--apartado); }

.day.is-past { color: var(--day-past); cursor: not-allowed; }
.day.is-past::after { display: none; }

.day.is-selected,
.day.is-selected:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--bg);
}

.day.is-selected::after { background: var(--dorado-vivo); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  color: var(--ink-soft);
}

.legend li { display: flex; align-items: center; gap: 8px; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-free { background: var(--libre); }
.dot-full { background: var(--apartado); }

.calendar-note {
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--ink-mute);
}

/* Panel del día */

.panel-empty { color: var(--ink-mute); font-size: .92rem; margin: 0; }

.panel-date {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 22px;
  text-transform: capitalize;
  color: var(--ink);
}

.panel-note {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* Formulario */

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}

.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }

label {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}

.opt { text-transform: none; letter-spacing: 0; color: var(--ink-mute); }

input, select, textarea {
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(193, 145, 46, .18);
}

input[readonly] { background: var(--bg-alt); cursor: default; }

.hint { font-size: .78rem; color: var(--ink-mute); margin-top: 7px; }
.hint a { color: var(--dorado-ink); }

.error { font-size: .78rem; color: var(--apartado); margin-top: 7px; }

/* Campo trampa contra bots.

   Se saca del flujo en lugar de usar display:none o hidden: varios bots ya
   saben ignorar los campos ocultos de la forma obvia, pero rellenan los que
   el navegador considera visibles. Para una persona es invisible, y el
   tabindex="-1" del HTML impide que alguien navegando con el teclado caiga
   ahí sin darse cuenta.                                                    */

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Captcha */

.captcha-field { min-height: 70px; }
.captcha-field .error { margin-top: 4px; }

.field.invalid input,
.field.invalid select { border-color: var(--apartado); }

/* Precio calculado */

.quote {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 22px 24px;
  background: var(--dorado-soft);
  border: 1px solid var(--dorado);
  border-radius: var(--radius);
}

.quote-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 100%;
}

.quote-value {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--dorado-ink);
  font-variant-numeric: tabular-nums;
}

.quote.is-quote .quote-value { font-size: 1.6rem; }

.quote-detail { font-size: .88rem; color: var(--ink-soft); }
.quote-detail a { color: var(--dorado-ink); }

/* Desglose. Va con order:-1 para quedar arriba del total sin sacarlo de su
   lugar en el HTML, donde tiene más sentido leerlo después de la cifra.
   Solo aparece cuando el total suma algo más que la renta.                 */

.quote-lines {
  order: -1;
  width: 100%;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: .9rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--dorado);
}

.quote-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.quote-lines li span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quote-anticipo,
.quote-nota {
  width: 100%;
  margin: 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

/* Lo que dura la renta pesa menos que lo que cuesta: va al final y más tenue. */
.quote-nota { font-size: .82rem; color: var(--ink-mute); }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 28px;
}

.form-note { font-size: .82rem; color: var(--ink-mute); margin: 0; }

/* Confirmación */

.success {
  background: var(--surface);
  border: 1px solid var(--dorado);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px;
  text-align: center;
}

.success h3 { font-size: 2rem; margin-bottom: 14px; color: var(--ink); }
.success p { color: var(--ink-soft); max-width: 56ch; margin: 0 auto 28px; }

/* El folio se muestra grande y en monoespaciada porque el cliente lo va a
   dictar por teléfono cuando llame a preguntar por su solicitud.           */

.success-folio {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--dorado-ink) !important;
  margin-bottom: 22px !important;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Ubicación */

.ubicacion {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.mapa { margin: 0; }

/* height: auto es indispensable: el <img> lleva width/height en el HTML para
   reservar el espacio mientras carga, y sin esto el mapa sale estirado.      */
.mapa img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* La numeración sí es información: son los pasos del camino, en orden. */
.ruta {
  list-style: none;
  counter-reset: paso;
  margin: 0 0 32px;
  padding: 0;
}

.ruta li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 20px 48px;
  color: var(--ink-soft);
}

.ruta li:last-child { padding-bottom: 0; }

.ruta li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dorado);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--dorado-ink);
}

.direccion {
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0 0 26px;
}

/* Footer */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: 64px 0 28px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--footer-line);
}

.footer-brand-block { display: flex; align-items: center; gap: 14px; }
.footer-symbol { width: 52px; height: 52px; flex: none; }

.footer-brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--footer-strong);
  margin: 0;
}

.footer-sub {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--footer-mute);
  margin: 4px 0 0;
}

.footer-contact { text-align: right; font-size: .92rem; }
.footer-contact p { margin: 0 0 6px; }
.footer-contact a { text-decoration: none; transition: color .18s ease; }
.footer-contact a:hover { color: var(--footer-strong); }

/* Redes sociales. Cuadros de 40px: es el mínimo cómodo para un pulgar, y en
   el pie casi todo el tráfico llega desde el celular. */
.footer-social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--footer-ink);
  border: 1px solid var(--footer-line);
  border-radius: var(--radius);
  transition: color .18s ease, border-color .18s ease;
}

.footer-social a:hover {
  color: var(--footer-strong);
  border-color: var(--footer-mute);
}

.footer-social svg { display: block; width: 18px; height: 18px; fill: currentColor; }

.copyright {
  max-width: 1120px;
  margin: 24px auto 0;
  padding: 0 28px;
  font-size: .76rem;
  color: var(--footer-mute);
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .availability { grid-template-columns: 1fr; }
  /* A tres columnas las fotos quedan demasiado angostas; la tercera pasa a
     ocupar el ancho completo abajo. */
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:last-child { grid-column: 1 / -1; }
  .includes { grid-template-columns: repeat(2, 1fr); }
  .ubicacion { grid-template-columns: 1fr; gap: 34px; }
  .form { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .hero { min-height: 68vh; padding: 64px 0 52px; }
  .section { padding: 68px 0; }
  .nav { gap: 16px; }
  .nav a:not(.nav-cta) { display: none; }
  .brand-symbol { width: 36px; height: 36px; }
  .brand-mark { font-size: 1.35rem; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure:last-child { grid-column: auto; }
  .gallery img { height: 260px; }
  .includes { grid-template-columns: 1fr; }
  .includes li { padding: 24px 20px; font-size: 1.35rem; }
  .calendar-card, .day-panel { padding: 20px; }
  .day { font-size: .85rem; }
  .quote { padding: 18px 20px; }
  .footer-inner { flex-direction: column; }
  .footer-contact { text-align: left; }
  .footer-social { justify-content: flex-start; }
  .success { padding: 30px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}