/* ==========================================================================
   EBEN PATRIMONIAL — LIBRERIA DE COMPONENTES
   Todo lo reutilizable vive aqui. Las landings por propiedad importan
   tokens.css + base.css + components.css y ya tienen el sistema completo.
   ========================================================================== */

/* ==========================================================================
   01 · BOTONES
   Variantes: --primary (oro), --secondary (contorno), --ghost, --inverse
   Todos cumplen area tactil minima de 44px (--tap-min).
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);

  min-height: var(--btn-h);
  min-width: var(--tap-min);
  padding: var(--sp-3) var(--btn-px);

  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--hairline) solid var(--btn-bd);
  border-radius: var(--radius-xs);

  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* --- Primario: relleno oro, texto onyx (7.75 AAA) --- */
.btn--primary {
  --btn-bg: var(--brand-oro);
  --btn-fg: var(--text-on-accent);
  --btn-bd: var(--brand-oro);
}
.btn--primary:hover {
  --btn-bg: var(--brand-oro-claro);
  --btn-bd: var(--brand-oro-claro);
}

/* --- Secundario sobre claro: contorno onyx --- */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bd: var(--border-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--brand-navy);
  --btn-fg: var(--brand-marfil);
  --btn-bd: var(--brand-navy);
}

/* --- Secundario sobre oscuro: contorno oro --- */
.btn--inverse {
  --btn-bg: transparent;
  --btn-fg: var(--brand-oro);
  --btn-bd: var(--brand-oro-a40);
}
.btn--inverse:hover {
  --btn-bg: var(--brand-oro);
  --btn-fg: var(--text-on-accent);
  --btn-bd: var(--brand-oro);
}

/* --- Fantasma: solo texto con subrayado que crece --- */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bd: transparent;
  padding-inline: var(--sp-2);
  min-height: var(--tap-min);
}
.btn--ghost:hover { --btn-fg: var(--brand-oro-oscuro); }

/* --- Tamaño chico --- */
.btn--sm {
  min-height: var(--btn-h-sm);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xs);
}

/* --- Ancho completo (movil) --- */
.btn--block { width: 100%; }

@media (min-width: 640px) {
  .btn--block\@sm { width: auto; }
}

/* --- Estado de carga (envio de formulario) --- */
.btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-circle);
  color: var(--text-on-accent);
  animation: btn-spin 700ms linear infinite;
}
.btn--primary.is-loading::after { border-color: var(--brand-navy); border-top-color: transparent; }

@keyframes btn-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   02 · NAVEGACION
   Transparente sobre el hero, con fondo al hacer scroll.
   Menu de pantalla completa en movil.
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: var(--hairline) solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}

.nav.is-scrolled {
  background-color: var(--brand-navy-a88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--brand-oro-a24);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.nav__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: var(--tap-min);
}
.nav__brand img,
.nav__brand svg { height: clamp(30px, 28px + 0.8vw, 40px); width: auto; }

.nav__menu {
  display: none;
  align-items: center;
  gap: var(--sp-8);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--brand-marfil);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: var(--brand-oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--brand-oro); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions { display: none; }

/* Boton hamburguesa */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc(var(--sp-3) * -1);
  color: var(--brand-marfil);
}
.nav__toggle-bars {
  position: relative;
  width: 22px;
  height: 12px;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-base) var(--ease-out);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after  { top: 10px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { top: 5px; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .nav__menu   { display: flex; }
  .nav__actions{ display: flex; }
  .nav__toggle { display: none; }
}

/* Menu movil de pantalla completa */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--nav-h) var(--gutter) var(--sp-12);
  background-color: var(--brand-navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base) linear;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: var(--sp-2);
  border-bottom: var(--hairline) solid var(--brand-navy-700);
  color: var(--brand-marfil);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
}
.nav-drawer__link:hover { color: var(--brand-oro); }

.nav-drawer__footer {
  margin-top: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

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


/* ==========================================================================
   03 · TARJETA DE PROPIEDAD
   El componente mas importante del sitio. Se usa igual en el grid del
   corporativo y en los bloques "otras propiedades" de cada landing.
   ========================================================================== */

.card-prop {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.card-prop:hover,
.card-prop:focus-within {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Media — proporcion fija para que el grid nunca salte (evita CLS) */
.card-prop__media {
  position: relative;
  aspect-ratio: var(--card-media-ratio);
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.card-prop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.card-prop:hover .card-prop__media img { transform: scale(1.04); }

/* Estado de la propiedad */
.card-prop__status {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--brand-navy-a88);
  color: var(--brand-oro);
  border-radius: var(--radius-xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1;
}
.card-prop__status--reservada { color: var(--brand-oro-claro); }
.card-prop__status--vendida   { color: var(--brand-azul-claro); }

.card-prop__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.card-prop__zone {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.card-prop__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

/* Desde que el grid tiene mas de una columna, se reservan dos lineas para el
   nombre: asi los precios de una misma fila quedan alineados aunque un nombre
   ocupe dos renglones y el otro uno. En movil (una columna) no aplica, porque
   ahi solo agregaria un hueco sin ganancia. */
@media (min-width: 640px) {
  .card-prop__name { min-height: calc(2 * var(--fs-xl) * var(--lh-snug)); }
}

.card-prop__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.card-prop__price small {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Especificaciones — rejilla de datos duros */
.card-prop__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--border-hairline);
}

.card-prop__spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card-prop__spec dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.card-prop__spec dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.card-prop__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Enlace que cubre toda la tarjeta sin romper accesibilidad */
.card-prop__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}
.card-prop__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
}
.card-prop { position: relative; }
.card-prop__link span {
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.card-prop:hover .card-prop__link span { border-color: var(--brand-oro-oscuro); }

.card-prop__arrow {
  width: 1em; height: 1em;
  fill: var(--brand-oro-oscuro);
  transition: transform var(--dur-base) var(--ease-out);
}
.card-prop:hover .card-prop__arrow { transform: translateX(4px); }


/* ==========================================================================
   04 · TARJETA DE VALOR / DIFERENCIAL (con icono)
   ========================================================================== */

.card-value {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card-value:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm);
}

.card-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: var(--hairline) solid var(--border-accent);
  border-radius: var(--radius-circle);
  color: var(--brand-oro-oscuro);
  flex: 0 0 auto;
}
.card-value__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.25; }

.card-value__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.card-value__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Version sobre fondo oscuro */
.section--inverse .card-value {
  background-color: var(--surface-inverse-alt);
  border-color: var(--border-on-inverse);
}
.section--inverse .card-value:hover { border-color: var(--border-accent-inverse); }
.section--inverse .card-value__icon { color: var(--brand-oro); border-color: var(--brand-oro-a40); }
.section--inverse .card-value__title { color: var(--text-on-inverse); }
.section--inverse .card-value__text  { color: var(--text-on-inverse-muted); }


/* ==========================================================================
   05 · PROCESO (Como trabajamos) — pasos numerados
   ========================================================================== */

.process { counter-reset: step; }

.process__item {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) 0 var(--sp-8) var(--sp-16);
  border-bottom: var(--hairline) solid var(--border-hairline);
}
.process__item:last-child { border-bottom: 0; padding-bottom: 0; }

.process__item::before {
  content: "0" counter(step);
  position: absolute;
  left: 0; top: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--brand-oro-oscuro);
  font-variant-numeric: tabular-nums;
}

.process__title {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.process__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}

@media (min-width: 768px) {
  .process__item { padding-left: var(--sp-20); }
  .process__item::before { font-size: var(--fs-3xl); }
}

.section--inverse .process__item { border-bottom-color: var(--border-on-inverse); }
.section--inverse .process__item::before { color: var(--brand-oro); }
.section--inverse .process__title { color: var(--text-on-inverse); }
.section--inverse .process__text  { color: var(--text-on-inverse-muted); }


/* ==========================================================================
   06 · FORMULARIO
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__label .req { color: var(--state-error); }

.field__control {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--surface-raised);
  color: var(--text-primary);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}

.field__control::placeholder { color: var(--text-muted); opacity: 1; }

.field__control:hover { border-color: var(--brand-navy-a16); }

.field__control:focus-visible {
  border-color: var(--brand-oro-oscuro);
  box-shadow: 0 0 0 3px var(--brand-oro-a24);
  outline: none;
}

textarea.field__control { min-height: 132px; resize: vertical; }

select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237E672F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.field__hint {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.field__error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--state-error);
}

.field.has-error .field__control { border-color: var(--state-error); }
.field.has-error .field__error   { display: block; }

/* Casilla de consentimiento */
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}
.field--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-oro-oscuro);
  cursor: pointer;
}
.field--check label {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  cursor: pointer;
}

/* Rejilla de formulario */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px) {
  .form__grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Mensajes de resultado */
.form__result {
  display: none;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.form__result.is-visible { display: flex; }

.form__result--success {
  background-color: #EDF5F0;
  border: var(--hairline) solid var(--state-success);
  color: #1F4A37;
}
.form__result--error {
  background-color: #FBEFEF;
  border: var(--hairline) solid var(--state-error);
  color: #7A2020;
}

/* Trampa anti-spam — invisible para humanos, no usa display:none */
.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   07 · BOTON FLOTANTE DE WHATSAPP
   Fijo, siempre accesible, con etiqueta que aparece en desktop.
   ========================================================================== */

.wa-float {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: var(--z-float);

  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);

  height: 56px;
  padding: 0 var(--sp-4);

  background-color: var(--brand-navy);
  color: var(--brand-oro);
  border: var(--hairline) solid var(--brand-oro-a40);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);

  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;

  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) linear;
}

/* Aparece en cuanto el usuario empieza a bajar. En el hero estorba: ahi ya hay
   dos botones de accion y el boton flotante se monta encima de la barra de
   credenciales. Con JS desactivado se muestra siempre (la clase la quita
   main.js), asi que nunca queda inaccesible. */
.js .wa-float:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.wa-float:hover {
  background-color: var(--brand-oro);
  color: var(--text-on-accent);
  border-color: var(--brand-oro);
  transform: translateY(-2px);
}

.wa-float__icon {
  width: 26px; height: 26px;
  fill: currentColor;
  flex: 0 0 auto;
}

.wa-float__label { display: none; }

@media (min-width: 768px) {
  .wa-float { right: var(--sp-8); bottom: var(--sp-8); padding-right: var(--sp-6); }
  .wa-float__label { display: inline; }
}

/* En movil es circular para no tapar contenido */
@media (max-width: 767px) {
  .wa-float { width: 56px; padding: 0; justify-content: center; }
}


/* ==========================================================================
   08 · PIE DE PAGINA
   ========================================================================== */

.footer {
  background-color: var(--brand-navy);
  color: var(--text-on-inverse);
  padding-block: var(--sp-16) var(--sp-8);
  border-top: var(--hairline) solid var(--brand-oro-a24);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: var(--hairline) solid var(--brand-navy-700);
}

@media (min-width: 768px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-10); }
}

/* El lockup del pie se dimensiona solo (.brand--footer en site.css).
   Aqui solo se le da el aire que lo separa de la cita. */
.footer__brand .brand--footer { margin-bottom: var(--sp-5); }

.footer__scripture {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-on-inverse-muted);
}

.footer__title {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-oro);
  margin-bottom: var(--sp-5);
}

.footer__list { display: flex; flex-direction: column; gap: var(--sp-1); }

.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-sm);
  color: var(--text-on-inverse-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__list a:hover { color: var(--brand-oro); }

.footer__address {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-inverse-muted);
  max-width: 28ch;
}

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border: var(--hairline) solid var(--brand-navy-700);
  border-radius: var(--radius-circle);
  color: var(--text-on-inverse-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover { color: var(--brand-oro); border-color: var(--brand-oro-a40); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__legal {
  font-size: var(--fs-xs);
  color: var(--text-on-inverse-muted);
  line-height: var(--lh-relaxed);
}

.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--fs-xs);
  color: var(--text-on-inverse-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__legal-links a:hover { color: var(--brand-oro); }


/* ==========================================================================
   09 · BLOQUE DE CITA EDITORIAL
   ========================================================================== */

.pullquote {
  position: relative;
  max-width: 64ch;
  margin-inline: auto;
  padding-top: var(--sp-10);
  text-align: center;
}
.pullquote::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 56px; height: 1px;
  margin-left: -28px;
  background: var(--brand-oro);
}
.pullquote__attribution {
  margin-top: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--inverse .pullquote__attribution { color: var(--brand-oro); }


/* ==========================================================================
   09b · BANNER DE CONSENTIMIENTO DE COOKIES
   Exigido por la revision legal. Mientras el visitante no decide, no se carga
   ninguna herramienta de medicion (ver /js/main.js, seccion 00).
   ========================================================================== */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-modal);

  background-color: var(--brand-navy);
  border-top: var(--hairline) solid var(--brand-oro-a40);
  box-shadow: 0 -8px 32px rgba(26, 26, 26, 0.28);

  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.cookies.is-visible { transform: translateY(0); }

.cookies__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-5) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .cookies__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-10);
    padding-block: var(--sp-4);
  }
}

.cookies__texto { max-width: 68ch; }

.cookies__titulo {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-oro);
  margin-bottom: var(--sp-2);
}

.cookies__texto p:last-child {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-inverse);
}

.cookies__texto a {
  color: var(--brand-oro);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cookies__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

@media (min-width: 560px) {
  .cookies__acciones { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Los dos botones de decision son DELIBERADAMENTE identicos en tamaño, peso y
   color. Un "aceptar" llamativo junto a un "rechazar" discreto vicia el
   consentimiento, y es lo primero que se revisa en un procedimiento.
   No convertir ninguno en btn--primary. */
.btn--consent {
  --btn-bg: transparent;
  --btn-fg: var(--brand-marfil);
  --btn-bd: var(--brand-oro-a40);
  min-height: var(--btn-h-sm);
  padding-inline: var(--sp-5);
  font-size: var(--fs-xs);
  white-space: normal;
  text-align: center;
}
.btn--consent:hover {
  --btn-bg: var(--brand-oro);
  --btn-fg: var(--text-on-accent);
  --btn-bd: var(--brand-oro);
}

.btn--consent-terciario {
  --btn-bg: transparent;
  --btn-fg: var(--brand-azul-claro);
  --btn-bd: transparent;
  min-height: var(--btn-h-sm);
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
}
.btn--consent-terciario:hover { --btn-fg: var(--brand-oro); }

/* Con el banner abierto, el boton flotante sube para no quedar tapado */
body.con-banner-cookies .wa-float { bottom: 150px; }

@media (min-width: 1024px) {
  body.con-banner-cookies .wa-float { bottom: 110px; }
}


/* ==========================================================================
   10 · MARCADOR DE PENDIENTE
   Señala en la propia pagina lo que falta (fotos, IDs, textos por confirmar),
   para revisarlo viendo el sitio en lugar de leyendo una lista aparte.

   SOLO se muestra si <body> lleva la clase "revision", que el build agrega
   por defecto. Para generar la version publica sin marcadores:
       npm run build:prod
   ========================================================================== */

body.revision [data-todo] {
  position: relative;
  outline: 1px dashed var(--state-error);
  outline-offset: 2px;
}

body.revision [data-todo]::after {
  content: "PENDIENTE: " attr(data-todo);
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-sticky);
  /* Se limita al ancho del contenedor: un texto largo aqui no debe empujar
     la pagina a lo ancho. */
  max-width: 100%;
  padding: 2px 6px;
  background: var(--state-error);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  pointer-events: none;
}