/* ==========================================================================
   FORTY 125 — Sistema de diseño web
   Derivado del Manual de Identidad de la marca
   Ámbar sobre ónix · líneas geométricas finas · amplios espacios en blanco
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Paleta principal */
  --ambar: #f68721;
  --onix: #121212;
  --hueso: #f4f2ed;
  --blanco: #ffffff;

  /* Paleta secundaria */
  --grafito: #343132;
  --oliva: #7e7d59;
  --pizarra: #778b89;
  /* Campos: los secundarios no soportan texto encima a plena intensidad */
  --pizarra-campo: #e0e2dd;
  --oliva-campo: #ebe9e1;

  /* Derivados de trabajo */
  --onix-90: #1a1a1a;
  --onix-80: #232122;
  --grafito-alto: #3f3c3d;
  --hueso-hondo: #e9e5dc;
  --ambar-suave: rgba(246, 135, 33, 0.14);
  --ambar-linea: rgba(246, 135, 33, 0.32);

  /* Texto */
  --tinta: #1c1a19;
  --tinta-media: #55504c;
  --tinta-suave: #6b645e;
  --claro: #f1efec;
  --claro-media: rgba(241, 239, 236, 0.72);
  --claro-suave: rgba(241, 239, 236, 0.48);

  /* Líneas */
  --linea-clara: rgba(28, 26, 25, 0.14);
  --linea-oscura: rgba(241, 239, 236, 0.14);

  /* Tipografía — Apertura si está instalada, Jost como sustituto geométrico */
  --fuente: "Apertura", "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --fuente-datos: "Apertura", "Jost", "Arial", system-ui, sans-serif;

  /* Escala fluida */
  --t-display: clamp(2.75rem, 1.4rem + 6.2vw, 7rem);
  --t-h1: clamp(2.1rem, 1.2rem + 4vw, 4.4rem);
  --t-h2: clamp(1.75rem, 1.1rem + 2.7vw, 3.2rem);
  --t-h3: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  --t-h4: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --t-cuerpo: clamp(0.975rem, 0.93rem + 0.22vw, 1.075rem);
  --t-chico: 0.86rem;
  --t-micro: 0.72rem;

  /* Ritmo */
  /* Dos secciones vecinas sumaban 304 px de crema vacía entre el último
     contenido de una y el primero de la otra. */
  --seccion: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  /* El canal crecía hasta 80 px: el ancho útil se achicaba al agrandar la
     pantalla. Con 56 px de tope el contenido gana 48 px en escritorio. */
  --canal: clamp(1.25rem, 0.6rem + 3.5vw, 3.5rem);
  /* Acento ámbar legible sobre fondo claro: #f68721 da 2,4:1 como texto. */
  --ambar-tinta: #a1520a;

  /* Colores de texto según el fondo del contenedor. Se declaran para fondo
     claro y los bloques oscuros los redefinen más abajo, en un solo lugar.
     Antes cada corrección colgaba de .seccion--onix/.seccion--grafito y
     cualquier otro bloque oscuro quedaba afuera. */
  --texto-apoyo: var(--tinta-media);
  --texto-pleno: var(--tinta);
  --acento-texto: var(--ambar-tinta);
  --linea: var(--linea-clara);
  --ancho: 1440px;
  --ancho-texto: 62ch;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  /* Elevación */
  --sombra-baja: 0 1px 2px rgba(18, 18, 18, 0.06), 0 6px 20px rgba(18, 18, 18, 0.07);
  --sombra-alta: 0 2px 4px rgba(18, 18, 18, 0.08), 0 24px 60px rgba(18, 18, 18, 0.16);

  --nav-h: 78px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: var(--fuente);
  font-size: var(--t-cuerpo);
  font-weight: 300;
  line-height: 1.68;
  color: var(--tinta);
  background: var(--onix);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

::selection { background: var(--ambar); color: var(--onix); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. UTILIDADES DE ESTRUCTURA
   -------------------------------------------------------------------------- */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.seccion { padding-block: var(--seccion); position: relative; }
main > .seccion:last-child { padding-block-end: clamp(2.5rem, 1.8rem + 2vw, 4rem); }
/* Sin remate inferior: la sección termina en la banda oscura de la
   comparación, que llega hasta el borde. */
.seccion--tipos { padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0; }

.seccion--onix { background: var(--onix); color: var(--claro); }
.seccion--grafito { background: var(--grafito); color: var(--claro); }

/* Contenedores de fondo oscuro. Si mañana aparece otro, va en esta lista y
   con eso alcanza: no hay que perseguir regla por regla. */
.seccion--onix,
.seccion--grafito,
.portada-corta,
.comparar__cierre {
  --texto-apoyo: var(--claro-media);
  --texto-pleno: var(--claro);
  --acento-texto: var(--ambar);
  --linea: var(--linea-oscura);
}
/* La portada corta no descansa sobre un color plano sino sobre una foto: el
   texto de apoyo va un punto más firme para no depender de la toma. */
.portada-corta { --texto-apoyo: rgba(241, 239, 236, 0.86); }
.seccion--hueso { background: var(--hueso); color: var(--tinta); }

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

.saltar {
  position: absolute;
  top: -100%;
  left: var(--canal);
  z-index: 200;
  background: var(--ambar);
  color: var(--onix);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-chico);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.saltar:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA DE SECCIÓN
   -------------------------------------------------------------------------- */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.rotulo__num {
  display: grid;
  place-items: center;
  min-width: 2.15rem;
  height: 2.15rem;
  background: var(--ambar);
  color: var(--onix);
  font-size: var(--t-chico);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.rotulo__txt {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
}

.seccion--hueso .rotulo__txt { color: var(--tinta-media); }
.seccion--onix .rotulo__txt,
.seccion--grafito .rotulo__txt { color: var(--claro-media); }

.titulo { font-size: var(--t-h2); max-width: 22ch; }
.titulo--ancho { max-width: 30ch; }
.titulo em { font-style: normal; color: var(--acento-texto); }

.bajada {
  margin-top: 1.5rem;
  text-wrap: pretty;
  max-width: var(--ancho-texto);
  color: var(--texto-apoyo);
}

.sobretitulo {
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acento-texto);
  font-weight: 400;
}

/* Regla fina con el gesto de esquina abierta del logotipo */
.regla {
  position: relative;
  height: 1px;
  background: var(--linea-clara);
  margin-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.seccion--onix .regla,
.seccion--grafito .regla { background: var(--linea-oscura); }
.regla::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 64px;
  height: 1px;
  background: var(--ambar);
}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.85rem;
  font-size: var(--t-chico);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--curva), color 0.35s var(--curva),
              border-color 0.35s var(--curva), transform 0.35s var(--curva);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--ambar { background: var(--ambar); color: var(--onix); }
.btn--ambar:hover { background: #ff9631; }

/* Secundario sobre fondo claro: acompaña al ámbar sin competirle. */
.btn--linea {
  border: 1px solid var(--linea-clara);
  color: var(--tinta-media);
  background: transparent;
}
.btn--linea:hover,
.btn--linea:focus-visible { border-color: var(--ambar); color: var(--acento-texto); }

.btn--linea-clara { border-color: rgba(241, 239, 236, 0.42); color: var(--claro); }
.btn--linea-clara:hover { background: var(--claro); color: var(--onix); border-color: var(--claro); }

.btn--linea-oscura { border-color: rgba(28, 26, 25, 0.3); color: var(--tinta); }
.btn--linea-oscura:hover { background: var(--onix); color: var(--hueso); border-color: var(--onix); }

.btn--pleno { width: 100%; }

/* Enlace con subrayado animado */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-chico);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acento-texto);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ambar-linea);
  transition: border-color 0.35s var(--curva), gap 0.35s var(--curva);
}
.enlace:hover { border-color: var(--ambar); gap: 0.9rem; }
.enlace { padding-top: 0.5rem; }
.enlace svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   6. NAVEGACIÓN
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.45s var(--curva), box-shadow 0.45s var(--curva),
              height 0.45s var(--curva);
}
.nav::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--linea-oscura);
  opacity: 0;
  transition: opacity 0.45s var(--curva);
}
.nav.esta-fijo {
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  height: 66px;
}
.nav.esta-fijo::after { opacity: 1; }

.nav__caja {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 2vw, 3rem);
}

.nav__logo { color: var(--ambar); flex: none; }
.nav__logo svg { height: 46px; width: auto; transition: height 0.45s var(--curva); }
.nav.esta-fijo .nav__logo svg { height: 38px; }

/* En la portada del inicio el logotipo del encabezado se esconde: el grande
   ya está ahí. Aparece justo cuando el grande pasa por detrás de la barra,
   así el relevo entre los dos se lee como un solo movimiento.
   Se usa visibility para conservar el espacio y que el menú no se mueva. */
body[data-pagina="inicio"] .nav__logo {
  /* visibility es discreta: al mostrar cambia ya, al ocultar espera al fundido */
  transition: opacity 0.4s var(--curva), visibility 0s linear 0s;
}
body[data-pagina="inicio"] .nav:not(.muestra-logo) .nav__logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--curva), visibility 0s linear 0.4s;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.7vw, 2.35rem);
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
}

.nav__enlace {
  font-size: var(--t-micro);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--claro-media);
  position: relative;
  padding-block: 0.5rem;
  transition: color 0.3s var(--curva);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--ambar);
  transition: width 0.35s var(--curva);
}
.nav__enlace:hover,
.nav__enlace.esta-activo { color: var(--claro); }
.nav__enlace:hover::after,
.nav__enlace.esta-activo::after { width: 100%; }

/* Desplegable de departamentos */
.nav__grupo { position: relative; }
.nav__abrir { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav__caret {
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-block-start: 4px solid currentColor;
  transition: transform 0.3s var(--curva);
}
.nav__grupo.esta-abierto .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  inset-block-start: calc(100% + 0.65rem);
  inset-inline-start: -1.15rem;
  min-width: 272px;
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  background: var(--onix);
  border: 1px solid rgba(241, 239, 236, 0.14);
  box-shadow: var(--sombra-alta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.28s var(--curva), transform 0.28s var(--curva),
              visibility 0s linear 0.28s;
  z-index: 20;
}
.nav__grupo.esta-abierto .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s var(--curva), transform 0.28s var(--curva),
              visibility 0s linear 0s;
}

.nav__subenlace {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.72rem 1.15rem;
  color: var(--claro-suave);
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva);
}
.nav__subenlace:hover,
.nav__subenlace:focus-visible { background: rgba(246, 135, 33, 0.14); color: var(--claro); }
.nav__subnombre { font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none; }
.nav__subdato {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claro-media);
}
.nav__subenlace--todos {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 0.4rem;
  padding-block: 0.85rem;
  border-block-start: 1px solid rgba(241, 239, 236, 0.12);
  color: var(--ambar);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nav__subenlace--todos svg { width: 1em; height: 1em; }

.nav__acciones { display: flex; align-items: center; gap: 1rem; }

.idioma {
  display: flex;
  align-items: center;
  border: 1px solid rgba(241, 239, 236, 0.22);
}
/* Cuatro códigos en vez de dos: el relleno y el interletrado bajan para
   que el selector no le coma el lugar al menú. */
.idioma__btn {
  padding: 0.4rem 0.44rem;
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  color: var(--claro-suave);
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.idioma__btn.esta-activo { background: var(--ambar); color: var(--onix); }
.idioma__btn:not(.esta-activo):hover { color: var(--claro); }

.nav__cta { padding: 0.7rem 1.3rem; }

/* El CTA dentro del menú es solo para la vista móvil */
.nav__menu .cta-movil { display: none; }
/* El símbolo sólo existe dentro del panel del teléfono */
.nav__simbolo { display: none; }
/* En la cabecera de escritorio los iconos van más chicos que en el pie: la
   barra ya está poblada y no deben competir con el botón de reserva. */
.nav__redes { display: block; margin-inline-start: 0.35rem; }
.nav__redes .redes__enlace { width: 30px; height: 30px; color: var(--claro-media); }
.nav__redes .redes__enlace svg { width: 17px; height: 17px; }
.nav__redes .redes__enlace:hover,
.nav__redes .redes__enlace:focus-visible { color: var(--ambar); }
/* Por debajo de este ancho la barra no da: los ítems del menú se parten
   en dos líneas. Los iconos se van de la cabecera y quedan en el pie. */
@media (max-width: 1360px) { .nav__redes { display: none; } }

/* 44×44 es el mínimo táctil; los tres trazos se centran dentro */
.hamburguesa { display: none; width: 44px; height: 44px; position: relative; flex: none; }
.hamburguesa span {
  position: absolute;
  /* trazo de 26 px centrado en la caja de 44: el resto es área táctil */
  inset-inline: 9px;
  height: 1.5px;
  background: var(--claro);
  transition: transform 0.4s var(--curva), opacity 0.3s var(--curva), top 0.4s var(--curva);
}
/* alto del dibujo 16 px: (44 − 16) / 2 = 14 arriba y abajo */
.hamburguesa span:nth-child(1) { top: 14px; }
.hamburguesa span:nth-child(2) { top: 21.25px; }
.hamburguesa span:nth-child(3) { top: 28.5px; }
.hamburguesa.esta-abierta span:nth-child(1) { top: 21.25px; transform: rotate(45deg); }
.hamburguesa.esta-abierta span:nth-child(2) { opacity: 0; }
.hamburguesa.esta-abierta span:nth-child(3) { top: 21.25px; transform: rotate(-45deg); }

/* 1200: con seis rótulos y cuatro idiomas, la barra de escritorio deja
   de entrar por debajo de ese ancho. Medido en los cuatro. */
@media (max-width: 1200px) {
  /* Sin desenfoque: si no, .nav pasa a ser el bloque contenedor del panel
     del menú (position:fixed) y este colapsa a una franja de dos ítems. */
  .nav.esta-fijo {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--onix);
  }

  .hamburguesa { display: block; margin-inline-start: 1.25rem; order: 3; }
  .nav__acciones { order: 2; margin-inline-start: auto; }
  .nav__cta { display: none; }
  .nav__menu {
    position: fixed;
    inset-block-start: var(--nav-h);
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: column;
    justify-content: safe center;
    gap: 1.75rem;
    background: var(--onix);
    margin: 0;
    padding: 2rem var(--canal) 5rem;
    transform: translateX(100%);
    /* visibility: si no, los seis enlaces del panel cerrado siguen recibiendo
       el foco del tabulador aunque estén fuera de pantalla */
    visibility: hidden;
    transition: transform 0.5s var(--curva), visibility 0s linear 0.5s;
    overflow-y: auto;
  }
  .nav__menu.esta-abierto {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--curva), visibility 0s linear 0s;
  }

  /* Con el menú abierto la barra deja de ser transparente: si no, sobre la
     portada se veía una franja de la foto encima del panel oscuro. */
  body.menu-abierto .nav {
    background: var(--onix);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* al fijarse la barra baja a 66px, pero el panel arranca en --nav-h:
       quedaba una rendija de 12px con la página detrás. Se fija la altura
       para que el borde inferior de la barra y el techo del panel coincidan. */
    height: var(--nav-h);
  }
  body.menu-abierto .nav::after { opacity: 0; }

  /* Y el logotipo vuelve, aunque en la portada esté oculto por defecto.
     Se repite el :not(.muestra-logo) para superar en especificidad a la
     regla que lo esconde; si no, aquella gana y la barra queda vacía. */
  body[data-pagina="inicio"].menu-abierto .nav:not(.muestra-logo) .nav__logo {
    opacity: 1;
    visibility: visible;
    /* sin el retardo heredado: el logotipo entra junto con el panel,
       no 400 ms después */
    transition: opacity 0.3s var(--curva), visibility 0s linear 0s;
  }
  .nav__enlace { font-size: 1.15rem; letter-spacing: 0.14em; }

  /* En el panel del teléfono las redes van centradas, bajo el botón */
  .nav__redes { display: block; margin-block-start: 0.75rem; margin-inline-start: 0; }
  .nav__redes .redes__enlace { width: 40px; height: 40px; }
  .nav__redes .redes__enlace svg { width: 21px; height: 21px; }
  .nav__redes .redes { justify-content: center; }
  .nav__redes .redes__enlace { color: var(--claro-media); }

  /* El panel tenía un vacío grande arriba: lo ocupa el símbolo de la marca */
  .nav__simbolo {
    display: block;
    margin-block-end: 0.5rem;
    color: var(--ambar);
    opacity: 0.9;
  }
  .nav__simbolo svg { height: 74px; width: auto; margin-inline: auto; }

  /* En el panel del teléfono el desplegable se abre en su lugar. El ancho
     fijo evita que el bloque quede más angosto que el resto de los ítems. */
  .nav__grupo { display: grid; justify-items: center; width: min(100%, 300px); }
  .nav__grupo .nav__abrir { justify-self: center; }
  .nav__sub {
    position: static;
    display: none;
    min-width: 0;
    margin-block-start: 0.9rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__grupo.esta-abierto .nav__sub { display: grid; gap: 0.1rem; width: 100%; }
  .nav__subenlace { padding: 0.5rem 0 0.5rem 1rem; border-inline-start: 1px solid rgba(241, 239, 236, 0.16); }
  .nav__subnombre { font-size: 1.02rem; }
  .nav__subenlace--todos { margin-block-start: 0.5rem; padding-block: 0.7rem; border-block-start: 0; }
  .nav__menu .cta-movil { display: block; margin-top: 1rem; }
}

/* --------------------------------------------------------------------------
   7. PORTADA
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block-start: 66px;
  color: var(--claro);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.portada__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: acercar 22s var(--curva-suave) forwards;
}
@keyframes acercar {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}

/* La toma es apaisada y la portada mide una pantalla de alto: en un teléfono
   el recorte se come la torre y deja sólo una mancha de tejados. Se corre el
   encuadre hacia la torre, que es lo que da el lugar. */
@media (max-width: 900px) {
  .portada__fondo img { object-position: 30% center; }
}

.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.86) 0%, rgba(18, 18, 18, 0.5) 26%, rgba(18, 18, 18, 0.66) 62%, rgba(18, 18, 18, 0.96) 100%),
    radial-gradient(ellipse 80% 64% at 50% 46%, rgba(18, 18, 18, 0.44) 0%, rgba(18, 18, 18, 0.78) 100%);
}

.portada__cuerpo {
  margin-block: auto;
  padding-block: clamp(1.25rem, 0.7rem + 1.7vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portada__marca {
  color: var(--ambar);
  margin-bottom: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
}
.portada__marca svg {
  /* se acota por ancho y por alto: en pantallas bajas no se come el pliegue */
  height: min(clamp(120px, 64px + 11vw, 260px), 28vh);
  width: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0 46px rgba(246, 135, 33, 0.34));
}

.portada__lema {
  font-size: var(--t-h1);
  font-weight: 200;
  /* 28ch: la frase del concepto corporativo entra en dos líneas en los
     cuatro idiomas; con 19ch se partía en tres y bajaba los datos */
  max-width: 28ch;
  margin-inline: auto;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.portada__texto {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 46ch;
  color: var(--claro-media);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
}

.portada__botones {
  margin-top: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.portada__datos {
  border-block-start: 1px solid rgba(241, 239, 236, 0.16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* Tres bloques: el título puede ocupar una o dos líneas según el idioma,
   así que la etiqueta se ancla abajo y las tres quedan a la misma altura. */
.portada__datos > * { padding-block: clamp(1rem, 0.7rem + 1.3vw, 1.75rem); display: flex; flex-direction: column; }
.portada__datos > * + * { border-inline-start: 1px solid rgba(241, 239, 236, 0.16); padding-inline-start: clamp(0.9rem, 0.4rem + 1.6vw, 2rem); }

.dato__valor {
  font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.3rem);
  text-wrap: balance;
  font-weight: 200;
  color: var(--ambar);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dato__etiqueta {
  margin-top: auto;
  padding-top: 0.55rem;
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--claro-suave);
  line-height: 1.4;
}

/* En el teléfono los tres bloques van apilados: en dos columnas quedaba
   uno solo en la última fila. */
@media (max-width: 720px) {
  .portada__datos { grid-template-columns: 1fr; }
  .portada__datos > * + * { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid rgba(241, 239, 236, 0.16); }
  .portada__datos > * { padding-block: 0.65rem; }
}

/* En ventanas bajas se compacta el conjunto para que la franja de datos
   quede lo más cerca posible del pliegue sin achicar el logotipo de más. */
@media (max-height: 800px) {
  .portada__cuerpo { padding-block: 1rem; }
  .portada__marca { margin-bottom: 1rem; }
  .portada__texto { margin-top: 1rem; }
  .portada__botones { margin-top: 1.5rem; }
  .portada__datos > * { padding-block: 0.9rem; }
}

/* Portada corta para páginas internas */
.portada-corta {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(4rem, 2rem + 7vw, 8rem)) clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--onix);
  color: var(--claro);
  overflow: hidden;
  isolation: isolate;
}
.portada-corta__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
}
.portada-corta__fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada-corta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.6) 48%, rgba(18, 18, 18, 0.94));
}
.portada-corta h1 { font-size: var(--t-h1); max-width: 18ch; }

/* Migas */
.migas {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-apoyo);
  margin-bottom: 1.5rem;
}
.migas a { display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; }
.migas a:hover { color: var(--ambar); }
.migas span { color: rgba(241, 239, 236, 0.45); }

/* --------------------------------------------------------------------------
   8. GRILLAS EDITORIALES
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.duo--arriba { align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.marco::before {
  inset-block-start: clamp(-10px, -1.4vw, -6px);
  inset-inline-start: clamp(-10px, -1.4vw, -6px);
  border-width: 1px 0 0 1px;
}
.marco::after {
  inset-block-end: clamp(-10px, -1.4vw, -6px);
  inset-inline-end: clamp(-10px, -1.4vw, -6px);
  border-width: 0 1px 1px 0;
}

/* --------------------------------------------------------------------------
   9. TARJETAS DE TIPOLOGÍA
   -------------------------------------------------------------------------- */
/* Dos columnas fijas: con auto-fit las cuatro tipologías caían en 3+1 y la
   última fila quedaba con 800 px vacíos. Cuatro columnas se descartaron
   porque dejaban tarjetas de 270 px y el texto a 26 caracteres por línea. */
.tipologias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
}
@media (max-width: 700px) { .tipologias { grid-template-columns: 1fr; } }

.tipo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea-clara);
  transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva),
              border-color 0.5s var(--curva);
  overflow: hidden;
}
.tipo:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
  border-color: var(--ambar-linea);
}

.tipo__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  /* con dos columnas la foto es el doble de ancha: se recorta para que la
     sección no se estire */
  overflow: hidden;
  background: var(--hueso-hondo);
}
.tipo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--curva);
}
.tipo:hover .tipo__foto img { transform: scale(1.055); }
@media (min-width: 1100px) { .tipo__foto { aspect-ratio: 16 / 10; } }

.tipo__cinta {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  background: var(--ambar);
  color: var(--onix);
  padding: 0.45rem 0.9rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}

.tipo__cuerpo {
  padding: clamp(1.35rem, 1rem + 1vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
}

.tipo__nombre { font-size: var(--t-h3); font-weight: 500; }

.tipo__medida {
  font-size: var(--t-chico);
  letter-spacing: 0.06em;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}

.tipo__publicos {
  margin-top: 0.45rem;
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--oliva);
}

.tipo__texto { font-size: 0.94rem; color: var(--tinta-media); flex: 1; }

/* Los números en grande: es lo que compara alguien que busca dónde dormir.
   Cuatro bloques que llenan la fila exacta del ancho de la tarjeta. */
.tipo__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid var(--linea-clara);
  list-style: none;
  padding: 0;
}
.tipo__dato {
  background: var(--blanco);
  padding: 0.9rem 0.35rem;
  text-align: center;
}
.tipo__dato b {
  display: block;
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem);
  font-weight: 200;
  line-height: 1.05;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.tipo__dato span {
  display: block;
  margin-top: 0.34rem;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  text-wrap: balance;
}
/* Tres señas bajo los recuadros: las dos que más se preguntan y una puerta
   al listado completo. Van sin caja para no competir con los números. */
/* Al saltar por una ancla, la cabecera fija se comía el borde superior de
   la sección: se le reserva su alto más un respiro. */
main > section[id] { scroll-margin-top: 5rem; }

.extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.extras__it {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.3rem;
  text-align: center;
  text-wrap: balance;
  color: var(--texto-apoyo);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--rapido) var(--curva-suave);
}
.extras__it svg { width: 20px; height: 20px; color: var(--ambar); flex: none; }
a.extras__it:hover,
a.extras__it:focus-visible { color: var(--acento-texto); }
a.extras__it:hover svg,
a.extras__it:focus-visible svg { color: var(--acento-texto); }
.depto__ficha .extras { margin-top: 0.35rem; }
/* En pantalla chica no hay ancho para tres columnas: las señas se apilan
   y el icono pasa al costado del texto. */
@media (max-width: 700px) {
  .extras { grid-template-columns: 1fr; }
  .extras__it {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0.15rem;
    text-align: start;
  }
}

.tipo__pie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid var(--linea-clara);
}

/* Antes era un enlace chico al pie y el cliente no encontraba cómo entrar al
   departamento. Ahora es un botón de ancho completo que se enciende con la
   tarjeta entera. */
.tipo__ver {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--tinta);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva),
              border-color 0.3s var(--curva);
}
.tipo__ver svg { width: 1em; height: 1em; flex: none; }
.tipo__ver:hover,
.tipo__ver:focus-visible,
.tipo:hover .tipo__ver {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--onix);
}
/* El enlace se estira sobre la tarjeta: el click lleva al detalle desde
   cualquier punto sin anidar un enlace dentro de otro. */
.tipo__ver::after { content: ""; position: absolute; inset: 0; }


/* Acceso a las fotos, inmediatamente debajo de la imagen y antes del texto.
   Antes era una insignia dentro de la foto: parecía clicable y no lo era.
   El z-index es obligatorio: sin él, el ::after estirado de .tipo__ver se
   queda con el clic. */
.tipo__galeria {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--linea-clara);
  background: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.tipo__galeria svg { width: 1em; height: 1em; }
.tipo__galeria:hover,
.tipo__galeria:focus-visible { background: var(--hueso-hondo); color: var(--tinta); }

/* --------------------------------------------------------------------------
   10. COMODIDADES
   -------------------------------------------------------------------------- */
.comodidades {
  display: grid;
  /* columnas explícitas: los doce esenciales cierran en 4, 3 o 2 sin huecos */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-oscura);
  border: 1px solid var(--linea-oscura);
}
@media (max-width: 1000px) { .comodidades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .comodidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.comodidad {
  background: var(--onix);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background-color 0.45s var(--curva);
}
.comodidad:hover { background: var(--onix-80); }
.comodidad svg { width: 26px; height: 26px; color: var(--ambar); }
.comodidad__nombre {
  font-size: var(--t-chico);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--claro);
}
.comodidad__detalle { font-size: 0.88rem; color: var(--claro-suave); line-height: 1.55; }

/* --------------------------------------------------------------------------
   10 quater. PROPÓSITO — visión y misión
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   10 bis. INTRODUCCIÓN
   El primer texto después de la portada. Va en blanco y no en crema: la
   sección que sigue ya es crema y así el corte se ve sin abrir otra sección
   oscura. Un solo tamaño para los tres párrafos y justificado.
   -------------------------------------------------------------------------- */
/* Menos aire vertical que una sección corriente: es un bloque de tres
   párrafos, no una parada del recorrido. */
.intro {
  background: var(--blanco);
  color: var(--tinta);
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
}
/* La medida va en el contenedor: con un tope por párrafo, uno más grande daba
   una columna más ancha y los bordes izquierdos quedaban dentados. */
/* Alineado al riel, como el resto de la página: un bloque centrado en medio
   de una página alineada a la izquierda se lee como un error. La medida es
   algo más ancha que la del cuerpo corriente porque el justificado con
   columnas cortas abre ríos de espacio entre palabras. */
.intro__cuerpo { max-width: 72ch; margin-inline: auto; }
.intro__parrafo {
  color: var(--texto-apoyo);
  text-align: justify;
  /* justificar sin partir palabras abre ríos de espacio entre palabras */
  hyphens: auto;
  text-wrap: auto;
}
.intro__parrafo + .intro__parrafo { margin-top: 1.4rem; }
.intro__parrafo--cierre {
  font-size: clamp(1.1rem, 0.98rem + 0.55vw, 1.42rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--acento-texto);
  /* centrado: el justificado no aplica a un cierre de dos líneas */
  text-align: center;
  text-wrap: balance;
}

/* En escritorio los dos primeros párrafos van lado a lado y el cierre cruza
   abajo: con una sola columna sobraban seiscientos píxeles a la derecha. */
@media (min-width: 900px) {
  /* el cierre se separa de lo que resume */
  .intro__parrafo--cierre {
    margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border-top: 1px solid var(--linea-clara);
  }
}

/* --------------------------------------------------------------------------
   GALERÍA — la subpágina de fotos. Un grupo por departamento y uno por
   galería suelta; las celdas abren el mismo visor que el resto del sitio.
   -------------------------------------------------------------------------- */
.grupo + .grupo { margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.grupo__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 0.85rem;
  margin-block-end: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-block-end: 1px solid var(--linea);
}
.grupo__titulo { font-size: var(--t-h3); font-weight: 500; color: var(--texto-pleno); }
.grupo__cuenta {
  flex: none;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-apoyo);
  font-variant-numeric: tabular-nums;
}
.grupo__grilla {
  display: grid;
  /* columnas explícitas: auto-fit dejaba la última fila con celdas de otro
     ancho, y acá los grupos tienen 4, 7, 9 y 15 fotos */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem);
}
@media (max-width: 1000px) { .grupo__grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grupo__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grupo__celda {
  display: block;
  padding: 0;
  border: 0;
  background: var(--onix-80);
  overflow: hidden;
  cursor: pointer;
}
.grupo__celda img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--lento) var(--curva-suave), opacity var(--rapido) var(--curva-suave);
}
.grupo__celda:hover img,
.grupo__celda:focus-visible img { transform: scale(1.04); opacity: 0.88; }

/* --------------------------------------------------------------------------
   10 ter. SOSTENIBILIDAD — los ODS con la paleta de la marca

   Los Objetivos de Desarrollo Sostenible tienen colores oficiales de Naciones
   Unidas, y su emblema tiene condiciones de uso propias. El manual de Forty
   125, por su lado, cierra la paleta. Volcar los colores de la ONU rompería
   las dos cosas, así que cada objetivo se identifica por su número y su
   título, con los dos tonos naturales de la marca: oliva para los cinco
   priorizados y pizarra para el 13, que es el eje transversal.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   11. TERRAZA
   -------------------------------------------------------------------------- */
/* El área social se distingue del resto con el segundo color de la marca */
.terraza { background: var(--pizarra-campo); color: var(--tinta); }

/* Foto destacada: el marco va afuera, el recorte del zoom adentro */
.terraza__disparo {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: var(--hueso-hondo);
}
.terraza__disparo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.85s var(--curva), opacity 0.4s var(--curva);
}
.terraza__disparo:hover img { transform: scale(1.045); opacity: 0.92; }

/* Cierre de la sección: el plano acompaña, ya no es el protagonista */
/* --------------------------------------------------------------------------
   12. UBICACIÓN
   -------------------------------------------------------------------------- */
.mapa {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--linea-oscura);
  background: var(--onix-80);
  overflow: hidden;
}
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.86); }

.direccion {
  font-size: var(--t-h4);
  font-weight: 300;
  line-height: 1.5;
}

/* Los usos del salón: dos columnas cortas, con la misma marca de tilde que
   los puntos de cada departamento. */
.usos { margin-top: 1.75rem; }
.usos__titulo { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-apoyo); }
.usos ul { list-style: none; padding: 0; margin: 0.8rem 0 0; columns: 2; column-gap: 1.75rem; }
.usos li {
  break-inside: avoid;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding-block: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--texto-pleno);
}
.usos svg { width: 1em; height: 1em; margin-top: 0.22em; color: var(--acento-texto); flex: none; }
@media (max-width: 420px) { .usos ul { columns: 1; } }

.cerca { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 2rem; }
.cerca li {
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--linea-oscura);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.94rem;
  color: var(--claro-media);
}
.cerca li:first-child { border-block-start: 1px solid var(--linea-oscura); }
.cerca svg { width: 1.05em; height: 1.05em; color: var(--ambar); flex: none; }

/* --------------------------------------------------------------------------
   13. RESERVAS
   -------------------------------------------------------------------------- */
.reservar { background: var(--grafito); color: var(--claro); }

/* Cuatro columnas fijas: con auto-fit los cuatro canales caían en 3+1 por
   debajo de 1181 px y dejaban 635 px de fila vacía. */
.canales {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
  margin-top: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}
@media (max-width: 1180px) { .canales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .canales { grid-template-columns: 1fr; } }

/* Sin URL cargada la tarjeta ya no es un enlace: tampoco debe parecerlo */
.canal[aria-disabled="true"] { cursor: default; }
.canal[aria-disabled="true"]:hover { transform: none; border-color: var(--linea-oscura); }

.canal {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border: 1px solid rgba(241, 239, 236, 0.18);
  background: rgba(18, 18, 18, 0.32);
  transition: border-color 0.4s var(--curva), background-color 0.4s var(--curva),
              transform 0.4s var(--curva);
}
.canal:hover {
  border-color: var(--ambar);
  background: rgba(18, 18, 18, 0.62);
  transform: translateY(-4px);
}
.canal--principal {
  border-color: var(--ambar);
  background: linear-gradient(150deg, rgba(246, 135, 33, 0.16), rgba(18, 18, 18, 0.42));
}
.canal__icono { width: 30px; height: 30px; color: var(--ambar); }
.canal__nombre { font-size: var(--t-h4); font-weight: 300; }
.canal__texto { font-size: 0.9rem; color: var(--claro-media); flex: 1; }
.canal__accion {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s var(--curva);
}
.canal:hover .canal__accion { gap: 0.9rem; }
.canal__accion svg { width: 1em; height: 1em; }

.canal[data-estado="pendiente"] { opacity: 0.62; }
.canal[data-estado="pendiente"]:hover { opacity: 1; }

/* Burbuja flotante de WhatsApp */
.flotante {
  position: fixed;
  inset-block-end: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  inset-inline-end: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ambar);
  color: var(--onix);
  padding: 0.85rem 1.25rem;
  box-shadow: 0 6px 22px rgba(18, 18, 18, 0.5), 0 0 0 4px rgba(18, 18, 18, 0.18);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: transform 0.5s var(--curva), opacity 0.4s var(--curva),
              visibility 0.4s var(--curva), background-color 0.3s var(--curva);
}
.flotante.esta-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.flotante:hover { background: #ff9631; }
.flotante svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 560px) {
  /* solo se oculta la palabra, no el ícono */
  .flotante [data-txt] { display: none; }
  .flotante {
    padding: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    justify-content: center;
  }
  .flotante svg { width: 27px; height: 27px; }
}

/* --------------------------------------------------------------------------
   14. PREGUNTAS
   -------------------------------------------------------------------------- */
.acordeon { border-block-start: 1px solid var(--linea-oscura); max-width: 940px; }
.acordeon__item { border-block-end: 1px solid var(--linea-oscura); }
.acordeon__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  text-align: start;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 300;
  color: var(--claro);
  transition: color 0.3s var(--curva);
}
.acordeon__btn:hover { color: var(--ambar); }
.acordeon__signo { position: relative; width: 14px; height: 14px; flex: none; }
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  background: var(--ambar);
  transition: transform 0.4s var(--curva), opacity 0.3s var(--curva);
}
.acordeon__signo::before { inset-block-start: 6.5px; inset-inline: 0; height: 1px; }
.acordeon__signo::after { inset-inline-start: 6.5px; inset-block: 0; width: 1px; }
.acordeon__btn[aria-expanded="true"] .acordeon__signo::after { transform: rotate(90deg); opacity: 0; }

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  /* la altura cero no saca el contenido del orden de tabulación */
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--curva), visibility 0s linear 0.45s;
}
.acordeon__panel.esta-abierto {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s var(--curva), visibility 0s linear 0s;
}
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  padding-block-end: 1.5rem;
  max-width: var(--ancho-texto);
  color: var(--claro-media);
  font-size: 0.96rem;
}

/* --------------------------------------------------------------------------
   15. INVENTARIO Y PLANOS
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   COMPARACIÓN DE TIPOLOGÍAS
   Cuatro filas con la oferta completa del edificio. Sustituye al listado de
   unidades una por una: el lector necesita saber qué tipos hay, no la
   distribución de cada piso, que no le aporta nada.
   -------------------------------------------------------------------------- */
.comparar {
  margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  overflow-x: auto;
}

.comparar__tabla {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.comparar__tabla thead th {
  text-align: start;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--texto-apoyo);
  padding: 0 0 0.85rem;
  border-block-end: 1px solid var(--linea);
  white-space: nowrap;
}
.comparar__tabla thead .comparar__num { text-align: end; }

.comparar__tabla tbody th,
.comparar__tabla tbody td {
  padding-block: 1.05rem;
  border-block-end: 1px solid var(--linea);
  vertical-align: baseline;
  font-weight: 300;
}
.comparar__tabla tbody td { text-align: end; color: var(--texto-apoyo); font-variant-numeric: tabular-nums; }
/* la distribución es texto, no cifra: se alinea al inicio */
.comparar__tabla tbody td.comparar__txt { text-align: start; font-variant-numeric: normal; }
.comparar__tabla tbody th { text-align: start; }
.comparar__tabla tbody tr:last-child th,
.comparar__tabla tbody tr:last-child td { border-block-end: 0; }
.comparar__tabla tbody tr { transition: background-color 0.3s var(--curva); }
.comparar__tabla tbody tr:hover { background: rgba(246, 135, 33, 0.05); }

.comparar__nombre {
  /* el enlace medía 28 px de alto: por debajo del mínimo táctil */
  padding-block: 0.55rem;
  margin-block: -0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
  color: var(--texto-pleno);
  transition: color 0.3s var(--curva), gap 0.3s var(--curva);
}
.comparar__nombre svg { width: 0.9em; height: 0.9em; color: var(--acento-texto); }
.comparar__nombre:hover { color: var(--acento-texto); gap: 0.95rem; }

/* Cada celda respira: en escritorio las columnas quedaban pegadas */
.comparar__tabla thead th + th,
.comparar__tabla tbody td { padding-inline-start: 1.25rem; }

/* Apilado. La tabla horizontal obliga a arrastrar de lado en el teléfono y
   las columnas se leen encimadas; acá cada tipología pasa a ser un bloque
   con sus datos rotulados. */
@media (max-width: 700px) {
  .comparar { overflow-x: visible; }
  .comparar__tabla { min-width: 0; display: block; }
  .comparar__tabla thead { display: none; }
  .comparar__tabla tbody,
  .comparar__tabla tbody tr { display: block; }

  .comparar__tabla tbody tr {
    border: 1px solid var(--linea);
    padding: 1.15rem 1.25rem;
  }
  .comparar__tabla tbody tr + tr { margin-top: -1px; }
  .comparar__tabla tbody tr:hover { background: none; }

  .comparar__tabla tbody th,
  .comparar__tabla tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0;
    text-align: start;
  }
  .comparar__tabla tbody th { margin-bottom: 0.7rem; }
  .comparar__tabla tbody td + td { margin-top: 0.45rem; }

  .comparar__celda::before {
    content: attr(data-etq);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--texto-apoyo);
  }
  .comparar__tabla tbody td.comparar__txt { text-align: end; }
}

/* --------------------------------------------------------------------------
   16. GALERÍA / LIGHTBOX
   -------------------------------------------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--curva), visibility 0.4s var(--curva);
}
.visor.esta-abierto { opacity: 1; visibility: visible; }

.visor__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
  border-block-end: 1px solid rgba(241, 239, 236, 0.12);
  color: var(--claro);
  flex: none;
}
.visor__titulo { font-size: var(--t-h4); font-weight: 300; }
.visor__conteo {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--claro-suave);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.visor__cerrar {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(241, 239, 236, 0.24);
  color: var(--claro);
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva), border-color 0.3s var(--curva);
  flex: none;
}
.visor__cerrar:hover { background: var(--ambar); color: var(--onix); border-color: var(--ambar); }
.visor__cerrar svg { width: 16px; height: 16px; }

.visor__escena {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 0.4rem + 1.5vw, 2rem);
  min-height: 0;
}
.visor__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: fundido 0.4s var(--curva);
}
@keyframes fundido { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

.visor__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(18, 18, 18, 0.6);
  border: 1px solid rgba(241, 239, 236, 0.2);
  color: var(--claro);
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva), border-color 0.3s var(--curva);
}
.visor__nav:hover { background: var(--ambar); color: var(--onix); border-color: var(--ambar); }
.visor__nav svg { width: 18px; height: 18px; }
.visor__nav--prev { inset-inline-start: clamp(0.5rem, 0.2rem + 1vw, 1.5rem); }
.visor__nav--next { inset-inline-end: clamp(0.5rem, 0.2rem + 1vw, 1.5rem); }

.visor__tiras {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
  overflow-x: auto;
  border-block-start: 1px solid rgba(241, 239, 236, 0.12);
  flex: none;
  scrollbar-width: thin;
}
.visor__tira {
  width: 84px;
  aspect-ratio: 4 / 3;
  flex: none;
  opacity: 0.38;
  border: 1px solid transparent;
  transition: opacity 0.3s var(--curva), border-color 0.3s var(--curva);
  overflow: hidden;
}
.visor__tira img { width: 100%; height: 100%; object-fit: cover; }
.visor__tira:hover { opacity: 0.75; }
.visor__tira.esta-activa { opacity: 1; border-color: var(--ambar); }

/* Mosaico de galería en página */
.mosaico {
  display: grid;
  /* auto-fit y no auto-fill: las columnas sobrantes se colapsan y el mosaico
     llena el ancho en lugar de dejar un hueco muerto a la derecha */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.5rem, 0.25rem + 0.8vw, 1rem);
}
.mosaico__celda {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--onix-80);
  cursor: pointer;
}
/* Espaciador de proporción: la altura de la celda queda en auto y todas las de
   una misma fila se estiran a la misma altura. Con aspect-ratio no se estiran
   y la foto ancha terminaba unos píxeles más abajo que las otras dos. */
.mosaico__celda::before { content: ""; display: block; padding-block-start: 75%; }
.mosaico__celda picture { position: absolute; inset: 0; display: block; }
.mosaico__celda img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--curva), opacity 0.4s var(--curva);
}
.mosaico__celda:hover img { transform: scale(1.06); opacity: 0.82; }
.mosaico__celda::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.35s var(--curva);
}
.mosaico__celda:hover::after { border-color: var(--ambar); }
.mosaico__rotulo {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  padding: 2.75rem 1rem 0.9rem;
  text-align: start;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claro);
  background: linear-gradient(180deg, rgba(18, 18, 18, 0), rgba(18, 18, 18, 0.78));
  pointer-events: none;
}

.mosaico__celda--ancha { grid-column: span 2; }
.mosaico__celda--ancha::before { padding-block-start: 37.5%; }
@media (max-width: 620px) {
  .mosaico__celda--ancha { grid-column: span 1; }
  .mosaico__celda--ancha::before { padding-block-start: 75%; }
}

/* Botón para desplegar el resto de las fotos en pantallas angostas. */
.mosaico__mas {
  display: none;
  width: 100%;
  margin-block-start: 0.55rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.3s var(--curva), color 0.3s var(--curva);
}
.mosaico__mas:hover { border-color: var(--ambar); color: var(--ambar); }
.mosaico__mas svg { width: 1.05em; height: 1.05em; transition: transform 0.35s var(--curva); }

/* Variante de tres piezas. Con auto-fit, en anchos intermedios caben tres
   columnas y la tercera foto quedaba sola en una segunda fila. Acá el número
   de columnas es explícito en cada tramo, así nunca hay huérfanas. */
.mosaico--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .mosaico--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico--tres > :first-child { grid-column: span 2; }
  .mosaico--tres > :first-child::before { padding-block-start: 42%; }
}
@media (max-width: 460px) {
  .mosaico--tres { grid-template-columns: 1fr; }
  .mosaico--tres > :first-child { grid-column: auto; }
  .mosaico--tres > :first-child::before { padding-block-start: 75%; }
}

/* --------------------------------------------------------------------------
   17. DEPARTAMENTO EN DETALLE (página departamentos)
   La foto va primero y grande: antes la tapaba una grilla de seis datos y la
   página abría con una tabla. Acá se mira, después se compara.
   -------------------------------------------------------------------------- */
/* Un filete de un píxel no alcanzaba para ver dónde termina un departamento
   y empieza el siguiente. Los pares van sobre una banda blanca que sale del
   riel y cruza la pantalla: la separación deja de depender de la atención.
   Las dos sombras hacen el sangrado completo; el recorte horizontal del body
   evita cualquier barra lateral. */
.depto {
  position: relative;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);
}
/* Dentro de la banda blanca se invierten los dos rellenos que ya eran blancos,
   para que la tarjeta de reserva y los números no se fundan con el fondo. */
.depto--banda .depto__reserva { background: var(--hueso); }
.depto--banda .depto__datos li { background: var(--hueso); }

.depto--banda {
  background: var(--oliva-campo);
  box-shadow: 0 0 0 100vmax var(--oliva-campo);
  clip-path: inset(0 -100vmax);
}
.depto:first-child { padding-block-start: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.depto:last-child { padding-block-end: clamp(2.75rem, 2rem + 3.5vw, 4.75rem); }

/* El número del departamento, con el mismo cuadrado que los rótulos de sección */
.depto__marca {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.75rem;
}
/* Contador, no rótulo: el cuadrado ámbar relleno es el de las secciones y
   repetirlo acá hacía que el "01" de la sección y el del primer departamento
   se leyeran como el mismo elemento. Va al aire y dice de cuántos es. */
.depto__indice {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--oliva);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.depto__indice b { font-weight: 400; color: var(--acento-texto); }
.depto__indice span { color: var(--tinta-suave); }
.depto--banda .depto__indice { border-color: var(--oliva); }
.depto__marca .sobretitulo { margin: 0; }

.depto__titulo { font-size: var(--t-h3); font-weight: 500; }
.depto__texto {
  margin-top: 0.9rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Foto grande, y el aviso de cuántas hay detrás */
.depto__hero {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--hueso-hondo);
  cursor: pointer;
}
/* Sin vh: atar la foto al alto de la ventana la hacía saltar al aparecer la
   barra del navegador en el teléfono y la achataba en pantallas bajas. */
.depto__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--curva);
}
.depto__hero:hover img { transform: scale(1.04); }
@media (max-width: 1000px) { .depto__hero img { aspect-ratio: 16 / 9; } }
@media (max-width: 700px)  { .depto__hero img { aspect-ratio: 4 / 3; } }

.depto__lupa {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.05rem;
  background: rgba(18, 18, 18, 0.76);
  color: var(--claro);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.depto__hero:hover .depto__lupa { background: var(--ambar); color: var(--onix); }
.depto__lupa svg { width: 1.15em; height: 1.15em; }

/* Los tres números a la izquierda, los motivos a la derecha */
/* Dos columnas y la tarjeta de reserva cruzando abajo: con tres columnas los
   números y los motivos medían 99 px contra los 284 de la tarjeta y quedaban
   185 px de aire muerto debajo de cada una. */
.depto__ficha {
  display: grid;
  /* 360 y no 290: es el ancho mínimo para que las tres señas entren en
     fila sin partir «aire acondicionado». */
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: start;
  margin-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (max-width: 780px) { .depto__ficha { grid-template-columns: 1fr; } }

.depto__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid var(--linea-clara);
  list-style: none;
  padding: 0;
}
.depto__datos li { background: var(--hueso); padding: 1.15rem 0.4rem; text-align: center; }
.depto__datos b {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 200;
  line-height: 1.05;
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.depto__datos span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.depto__puntos { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.depto__puntos li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-media);
}
.depto__puntos svg { width: 1.05em; height: 1.05em; margin-top: 0.26em; color: var(--ambar); flex: none; }

/* La tarjeta de reserva ocupa la columna que antes quedaba vacía */
.depto__reserva {
  grid-column: 1 / -1;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  /* sobre la banda blanca el relleno se confunde con el fondo: manda el borde */
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem) clamp(1.25rem, 1rem + 1vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.depto__meta { display: grid; gap: 0.2rem; }
.depto__meta b {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.depto__meta span {
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.depto__reserva .btn { justify-content: center; }
.depto__aviso {
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
/* el aviso empuja al resto contra el borde y absorbe el ancho sobrante */
.depto__aviso { flex: 1 1 14rem; }
@media (max-width: 900px) { .depto__aviso { display: none; } }
@media (max-width: 620px) {
  .depto__reserva { flex-direction: column; align-items: stretch; }
  .depto__reserva .btn { width: 100%; }
  .depto__aviso { display: block; flex: none; }
}

/* Tira de fotos con pie: la descripción de cada toma ya existía en los datos
   y no se veía en ninguna parte. */
.tira {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.3rem + 0.9vw, 1.15rem);
}
.tira__celda {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}
.tira__foto { display: block; position: relative; overflow: hidden; background: var(--hueso-hondo); }
.tira__celda img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.8s var(--curva), opacity 0.4s var(--curva);
}
.tira__celda:hover img { transform: scale(1.06); opacity: 0.86; }
.tira__pie {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

@media (max-width: 860px) { .tira { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  /* En el teléfono se ve la foto grande y el resto se despliega */
  .tira { grid-template-columns: 1fr; }
  .tira:not(.esta-abierto) { display: none; }
  .depto .mosaico__mas { display: inline-flex; }
}
.tira.esta-abierto + .mosaico__mas svg { transform: rotate(180deg); }

/* Comparación: cierra la sección en lugar de abrirla */
/* Cierra una sección de fondo crema, así que la banda sangra a todo el ancho
   con la misma técnica que separa un departamento del siguiente: expansión de
   la sombra y recorte horizontal. */
.comparar__cierre {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  background: var(--onix);
  color: var(--claro);
  box-shadow: 0 0 0 100vmax var(--onix);
  clip-path: inset(0 -100vmax);
}
.comparar__cierre .titulo { color: var(--claro); }
.comparar__tabla tbody tr:hover { background: rgba(246, 135, 33, 0.08); }

/* La descripción de la foto abierta: sin ella el visor era una imagen suelta */
.visor__pie {
  margin: 0.9rem auto 0;
  max-width: 70ch;
  padding-inline: 1rem;
  text-align: center;
  font-size: var(--t-chico);
  line-height: 1.55;
  color: var(--claro-media);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   18. PIE
   -------------------------------------------------------------------------- */
/* El pie arranca con un escalón de color, un filete a todo el ancho y el
   remate ámbar del logotipo, para que no se funda con la última sección. */
.pie {
  position: relative;
  background: var(--onix-80);
  color: var(--claro);
  /* El remate inferior deja aire suficiente para que el botón flotante de
     WhatsApp nunca tape los créditos. */
  padding-block: clamp(3rem, 1.8rem + 4vw, 5rem) clamp(5rem, 4rem + 2vw, 6.5rem);
  border-block-start: 1px solid var(--linea-oscura);
}
.pie::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: max(var(--canal), calc((100% - var(--ancho)) / 2 + var(--canal)));
  width: 64px;
  height: 1px;
  background: var(--ambar);
}

/* Redes: sólo iconos, sin rótulo. El bloque lleva hidden desde el HTML y
   el script lo levanta si hay alguna URL cargada. */
.redes { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.redes__enlace {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--texto-apoyo);
  transition: color var(--rapido) var(--curva-suave);
}
.redes__enlace svg { width: 21px; height: 21px; }
.redes__enlace:hover,
.redes__enlace:focus-visible { color: var(--ambar); }
.redes--pie { margin-top: 1.1rem; margin-inline-start: -0.55rem; }

.pie__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-block-end: 1px solid var(--linea-oscura);
}
@media (max-width: 860px) { .pie__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__grilla { grid-template-columns: 1fr; } }

.pie__marca { color: var(--ambar); margin-bottom: 1.5rem; }
.pie__marca svg { height: 72px; width: auto; }
.pie__lema { color: var(--claro-media); max-width: 30ch; font-size: 0.96rem; }

.pie__titulo {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 1.15rem;
}
.pie__lista { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.pie__lista a, .pie__lista span {
  color: var(--claro-media); font-size: 0.94rem;
  transition: color 0.3s var(--curva);
  display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem;
}
.pie__lista a:hover { color: var(--ambar); }

.pie__base a {
  display: inline-block;
  color: var(--claro-media);
  border-block-end: 1px solid rgba(241, 239, 236, 0.22);
  /* el margen negativo agranda el área de toque sin mover la línea */
  padding-block: 0.55rem 0.35rem;
  margin-block: -0.55rem -0.35rem;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}
.pie__base a:hover { color: var(--ambar); border-color: var(--ambar); }

.pie__base {
  padding-block-start: 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.85rem 1.5rem;
  align-items: center;
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  color: var(--claro-suave);
}
.pie__base-item--centro { justify-self: center; text-align: center; }
.pie__base-item--fin { justify-self: end; text-align: end; }

.pie__credito {
  color: var(--claro-media);
  border-block-end: 1px solid var(--ambar-linea);
  padding-block-end: 3px;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}
.pie__credito:hover,
.pie__credito:focus-visible { color: var(--ambar); border-block-end-color: var(--ambar); }

@media (max-width: 860px) {
  .pie__base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pie__base-item--centro,
  .pie__base-item--fin { justify-self: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   19. REVELADO AL SCROLL
   -------------------------------------------------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--curva), transform 0.85s var(--curva);
}
.revelar.esta-visible { opacity: 1; transform: none; }
.revelar[data-retraso="1"] { transition-delay: 0.09s; }
.revelar[data-retraso="2"] { transition-delay: 0.18s; }
.revelar[data-retraso="3"] { transition-delay: 0.27s; }
.revelar[data-retraso="4"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
  .portada__fondo img { animation: none; }
}

/* --------------------------------------------------------------------------
   20. TRADUCCIÓN
   -------------------------------------------------------------------------- */
[data-en] { display: revert; }
html[lang="en"] [data-solo="es"] { display: none; }
html[lang="es"] [data-solo="en"] { display: none; }

/* Bloqueo de scroll cuando hay capa abierta */
body.sin-scroll { overflow: hidden; }