/* ==========================================================================
   TRASTEROS VANGUARD — styles.css
   --------------------------------------------------------------------------
   Hoja principal, escrita "mobile first".
   Todas las @media queries están en css/responsive.css.

   CRITERIO DE DISEÑO
   Menos elementos, más espacio. El blanco, los grises y la fotografía
   llevan el peso; el rosa y el azul son solo acciones y acentos; el
   amarillo aparece únicamente en promociones.

   ÍNDICE
   01. Tokens            08. Hero              15. Calculadora
   02. Reset y base      09. Promoción         16. Formularios
   03. Layout            10. Ventajas          17. Galería y lightbox
   04. Tipografía        11. Cómo funciona     18. Opiniones
   05. Botones           12. Tamaños y precios 19. Ubicación y FAQ
   06. Header            13. Catálogo          20. Footer
   07. Menú móvil        14. Ficha de trastero 21. Flotantes, cookies, animación
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* --- Marca. Se usan con moderación: acciones y acentos. --- */
  --rosa: #E6007C;
  --rosa-oscuro: #C10068;   /* para texto pequeño: 6:1 sobre blanco */
  --rosa-tenue: #FDF2F8;
  --azul: #2C2F88;
  --azul-oscuro: #22246B;
  --azul-tenue: #F2F3FA;
  --amarillo: #FFCC00;
  --amarillo-tenue: #FFF9E3;

  /* --- Neutros. La base real de la web. --- */
  --blanco: #FFFFFF;
  /* Tres tonos de fondo que se alternan para dar ritmo visual sin ruido */
  --gris-04: #FAFAFA;
  --gris-08: #F7F7F8;
  --gris-15: #EDEDF1;
  --gris-30: #D8D9E0;
  --gris-50: #8C8D9B;
  --gris-70: #585967;   /* texto secundario — 6,4:1 sobre blanco */
  --gris-90: #2B2C38;
  --tinta: #0F1020;

  --verde: #147A4A;

  /* --- Semánticos --- */
  --fondo: var(--blanco);
  --fondo-alt: var(--gris-04);
  --fondo-alt2: var(--gris-08);
  --texto: var(--tinta);
  --texto-suave: var(--gris-70);
  --borde: var(--gris-15);
  --borde-fuerte: var(--gris-30);

  /* --- Tipografía ---
     En dispositivos Apple se usa SF Pro del sistema (legal, sin descarga).
     En el resto se carga Inter, visualmente equivalente. */
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
            'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Escala fluida, generosa */
  /* El mínimo baja hasta 2.15rem: por debajo, palabras largas como
     "complicaciones" no caben en un móvil de 320 px y desbordan. */
  --t-display: clamp(2.15rem, 1.5rem + 4.4vw, 5.4rem);
  --t-h1: clamp(2rem, 1.45rem + 3vw, 4.1rem);
  --t-h2: clamp(1.95rem, 1.5rem + 2.2vw, 3.2rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.55rem);
  --t-lead: clamp(1.08rem, 1rem + 0.5vw, 1.4rem);
  --t-base: 1.0625rem;
  --t-peque: 0.9375rem;
  --t-micro: 0.8125rem;

  /* --- Espacio: generoso a propósito --- */
  --sec-y: clamp(4.75rem, 3rem + 8vw, 10.5rem);

  /* SISTEMA DE CONTENEDOR ÚNICO.
     Todo el contenido de la web —header, secciones y footer— usa estas dos
     medidas. Si algo se desalinea, es que no está dentro de .contenedor. */
  --contenedor: 1200px;
  --gutter: 20px;            /* 24px desde 640px · 32px desde 1024px */

  --header-h: 64px;

  /* --- Formas --- */
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  /* --- Sombras: casi imperceptibles --- */
  --sombra-1: 0 1px 3px rgba(15, 16, 32, .05);
  --sombra-2: 0 8px 30px rgba(15, 16, 32, .08);
  --sombra-3: 0 24px 70px rgba(15, 16, 32, .16);

  /* --- Movimiento --- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-rapida: .18s var(--ease);
  --t-media: .34s var(--ease);
  --t-lenta: .7s var(--ease);
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.sin-scroll, body.menu-abierto { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

section[id], div[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
section:focus, main:focus { outline: none; }

::selection { background: var(--rosa); color: #fff; }

/* ==========================================================================
   03. LAYOUT
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.contenedor--estrecho { max-width: 760px; }
.contenedor--medio { max-width: 940px; }

.seccion { padding-block: var(--sec-y); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--alt2 { background: var(--fondo-alt2); }

/* Bloques con un toque corporativo muy suave: se usan con moderación
   (cierres con llamada a la acción y franja de promoción). */
.seccion--marca {
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(44, 47, 136, .06), transparent 62%),
    radial-gradient(760px 380px at 88% 100%, rgba(230, 0, 124, .06), transparent 60%),
    var(--azul-tenue);
}
.seccion--promo {
  background:
    radial-gradient(700px 340px at 80% 0%, rgba(255, 204, 0, .20), transparent 62%),
    var(--amarillo-tenue);
}
.seccion--compacta { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }

/* Cabecera de sección: título grande, texto corto, mucho aire debajo */
.cabecera {
  max-width: 34ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.cabecera--centro {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}
.cabecera--ancha { max-width: 52ch; }

.eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa-oscuro);
  margin-bottom: 1.1rem;
}
.cabecera__desc {
  font-size: var(--t-lead);
  color: var(--texto-suave);
  margin: 1.1rem 0 0;
  max-width: 52ch;
}
.cabecera--centro .cabecera__desc { margin-inline: auto; }
/* Reseñas: solo cabecera y un botón, así que no necesita el margen largo */
.resenas .cabecera { margin-bottom: 2.25rem; }
/* El texto del botón es largo: en móviles estrechos se recorta un poco el
   relleno lateral y, si aun así no cabe (320 px), se permite partir la línea
   antes que desbordar la pantalla. */
.resenas .btn { max-width: 100%; }
@media (max-width: 419px) {
  .resenas .btn { padding-inline: 1.25rem; white-space: normal; text-align: center; }
}

/* Separador de pelo */
.linea { height: 1px; background: var(--borde); border: 0; margin: 0; }

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

.saltar {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 300;
  padding: .8rem 1.3rem;
  background: var(--tinta);
  color: #fff;
  border-radius: var(--r-s);
  transition: top var(--t-rapida);
}
.saltar:focus { top: 1rem; }

/* ==========================================================================
   04. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 680;
  text-wrap: balance;
  /* Si una palabra no cabe, se parte en lugar de salirse de la pantalla.
     Es la solución de origen, no un overflow-x: hidden que la esconda. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }

p { margin: 0 0 1.05rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.texto-rosa { color: var(--rosa); }
.texto-suave { color: var(--texto-suave); }

.enlace {
  color: var(--rosa-oscuro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.enlace:hover { color: var(--rosa); }

code {
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--gris-15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}

/* Aviso informativo */
.aviso {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--amarillo-tenue);
  border: 1px solid rgba(255, 204, 0, .5);
  border-radius: var(--r-m);
  font-size: var(--t-peque);
  color: #6B5200;
  margin-bottom: 2rem;
}
/* [hidden] tiene que ganar a display:flex, o el aviso se ve igualmente. */
.aviso[hidden] { display: none; }

.aviso svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.aviso strong { color: #4A3800; }

/* ==========================================================================
   05. BOTONES
   ========================================================================== */
.btn {
  --btn-bg: var(--tinta);
  --btn-color: #fff;
  --btn-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1.75rem;
  border: 1.5px solid var(--btn-borde);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-align: center;
  white-space: nowrap;
  transition: background var(--t-rapida), color var(--t-rapida),
              border-color var(--t-rapida), transform var(--t-rapida);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primario { --btn-bg: var(--rosa); }
.btn--primario:hover { --btn-bg: var(--rosa-oscuro); }

.btn--azul { --btn-bg: var(--azul); }
.btn--azul:hover { --btn-bg: var(--azul-oscuro); }

.btn--secundario {
  --btn-bg: transparent;
  --btn-color: var(--tinta);
  --btn-borde: var(--borde-fuerte);
}
.btn--secundario:hover { --btn-bg: var(--gris-08); --btn-borde: var(--gris-50); }

.btn--claro { --btn-bg: #fff; --btn-color: var(--tinta); }
.btn--claro:hover { --btn-bg: var(--gris-15); }

.btn--bloque { width: 100%; }
.btn--peque { min-height: 44px; padding: .5rem 1.2rem; font-size: var(--t-peque); }
.btn--grande { min-height: 58px; padding: 1rem 2.1rem; }

.btn[disabled], .btn.is-cargando { opacity: .55; pointer-events: none; transform: none; }

.btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-rapida);
}
.btn:hover svg { transform: translateX(3px); }

.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.acciones--centro { justify-content: center; }

/* Chips de filtro */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .45rem 1.1rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--gris-70);
  font-size: var(--t-peque);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-rapida);
}
.chip:hover { border-color: var(--gris-50); color: var(--tinta); }
.chip.is-activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* Estado de disponibilidad */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .32rem .75rem;
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: 650;
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}
.estado__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado--libre { color: var(--verde); }
.estado--ocupado { color: var(--gris-50); }
.estado--proximo { color: var(--azul); }
.estado--consultar { color: var(--gris-50); }
.estado--consultar .estado__punto { background: currentColor; opacity: .45; }

/* Pastilla de promoción */
.pastilla-promo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem .4rem .9rem;
  border-radius: var(--r-full);
  background: var(--amarillo-tenue);
  border: 1px solid rgba(255, 204, 0, .55);
  font-size: var(--t-peque);
  font-weight: 600;
  color: #6B5200;
}
/* Oferta principal de la portada: UNA sola pastilla amarilla, compacta,
   con el texto en azul corporativo. Sin doble borde, sin degradados y sin
   sombras: solo el fondo, el radio y un relleno proporcionado. Va centrada
   bajo los dos botones y es claramente secundaria frente al titular. */
.oferta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.oferta__pastilla {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .28em;
  padding: .5rem 1.3rem .55rem;
  border-radius: var(--r-full);
  background: var(--amarillo);
  color: var(--azul);
  font-size: clamp(1.15rem, 2.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.oferta__l1, .oferta__l2 { white-space: nowrap; }   /* ninguna palabra se parte */
.oferta__condicion {
  font-size: var(--t-peque);
  font-weight: 600;
  color: var(--gris-70);
}

/* Letra pequeña de la furgoneta y otras condiciones */
.asterisco {
  display: inline-block;
  margin-top: .3rem;
  font-size: var(--t-micro);
  color: var(--gris-70);
}

.pastilla-promo b {
  padding: .15rem .6rem;
  border-radius: var(--r-full);
  background: var(--amarillo);
  color: #3D2F00;
  /* El importe es el gancho de la oferta: se ve claramente más grande que
     el resto de la pastilla, sin tocar su color, su forma ni su relleno. */
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
  /* El texto de la pastilla nunca se parte en dos líneas: en móvil es
     estrecha y el navegador cortaba por el espacio. */
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   06. HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-media), background var(--t-media);
}
.header.is-scrolled {
  border-bottom-color: var(--borde);
  background: rgba(255, 255, 255, .9);
}

.header__inner {
  /* Mismas medidas que .contenedor: el logo queda alineado con el
     contenido de la página, no flotando por su cuenta. */
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Logo: un solo archivo (config.js → marca.logo) + el nombre en texto */
.logo { display: flex; align-items: center; flex-shrink: 0; }
/* Logotipo horizontal: se fija la altura y el ancho se ajusta solo,
   así nunca se deforma. */
.logo img { width: auto; height: 32px; }
.logo__texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.02rem;
  color: var(--tinta);
}
.logo__texto span {
  font-size: .575rem;
  font-weight: 650;
  letter-spacing: .24em;
  color: var(--rosa);
  text-transform: uppercase;
  margin-top: 3px;
}

/* Navegación de escritorio */
.nav { display: none; margin-inline: auto; }
.nav__lista { display: flex; align-items: center; gap: .15rem; }
.nav__lista a {
  display: block;
  padding: .5rem .62rem;
  white-space: nowrap;
  border-radius: var(--r-s);
  font-size: .92rem;
  font-weight: 500;
  color: var(--gris-70);
  transition: color var(--t-rapida), background var(--t-rapida);
}
.nav__lista a:hover { color: var(--tinta); background: var(--gris-08); }
.nav__lista a[aria-current="page"] { color: var(--tinta); font-weight: 650; }

/* --- Desplegable «Más» --- */
.nav__mas { position: relative; }
.nav__boton {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .62rem;
  border-radius: var(--r-s);
  font-size: .92rem;
  font-weight: 500;
  color: var(--gris-70);
  white-space: nowrap;
  transition: color var(--t-rapida), background var(--t-rapida);
}
.nav__boton:hover { color: var(--tinta); background: var(--gris-08); }
.nav__boton.is-activo,
.nav__boton[aria-expanded="true"] { color: var(--tinta); font-weight: 650; }
.nav__chevron {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-rapida);
}
.nav__boton[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__desplegable {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  min-width: 210px;
  padding: .45rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-2);
  display: grid;
  gap: 1px;
}
.nav__desplegable[hidden] { display: none; }
.nav__desplegable a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--gris-70);
  white-space: nowrap;
}
.nav__desplegable a:hover { background: var(--rosa-tenue); color: var(--rosa-oscuro); }
.nav__desplegable a[aria-current="page"] { color: var(--tinta); font-weight: 650; background: var(--gris-08); }

.header__acciones { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.logo { flex-shrink: 0; }

.header__tel {
  display: none;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border-radius: var(--r-full);
  font-weight: 650;
  font-size: .92rem;
  color: var(--azul);
  white-space: nowrap;
  transition: background var(--t-rapida);
}
.header__tel:hover { background: var(--azul-tenue); }
.header__tel svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.header__cta { display: none; }

.icono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  color: var(--tinta);
  transition: background var(--t-rapida);
}
.icono-btn:hover { background: var(--gris-08); }
.icono-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono-btn--wa { color: #25D366; }
.icono-btn--wa svg { fill: currentColor; stroke: none; }
.icono-btn--tel { color: var(--azul); }

.header__movil { display: flex; align-items: center; gap: .15rem; }

/* Hamburguesa */
.hamburguesa { position: relative; }
.hamburguesa span {
  position: absolute;
  left: 13px;
  width: 18px; height: 1.7px;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform var(--t-media), opacity var(--t-rapida);
}
.hamburguesa span:nth-child(1) { top: 17px; }
.hamburguesa span:nth-child(2) { top: 21.5px; }
.hamburguesa span:nth-child(3) { top: 26px; }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ==========================================================================
   07. MENÚ MÓVIL
   ========================================================================== */
.menu-movil {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility cambia de golpe al abrir y se retrasa al cerrar: el panel es
     enfocable en cuanto se abre, sin depender de la transición. */
  transition: opacity var(--t-media), transform var(--t-media),
              visibility 0s linear var(--t-media);
}
.menu-abierto .menu-movil {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-media), transform var(--t-media), visibility 0s;
}

.menu-movil .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
.menu-movil .nav__lista a {
  padding: 1.05rem .25rem;
  font-size: 1.3rem;
  font-weight: 620;
  letter-spacing: -0.025em;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  color: var(--tinta);
}
.menu-movil .nav__lista a:hover { background: none; color: var(--rosa); }
.menu-movil .nav__lista a[aria-current="page"] { color: var(--rosa); }

.menu-movil__pie { margin-top: 2rem; display: grid; gap: .7rem; }
.menu-movil__dato {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: var(--t-peque);
  color: var(--texto-suave);
}
.menu-movil__dato svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  /* Tinte de marca al 5 %: da vida al blanco sin colorear la página */
  background:
    radial-gradient(760px 460px at 78% -10%, rgba(230, 0, 124, .07), transparent 60%),
    radial-gradient(680px 420px at 12% 0%, rgba(44, 47, 136, .06), transparent 58%);
}
.hero__eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris-70);
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.045em;
  line-height: .97;
  max-width: 14ch;
  margin-inline: auto;
}
.hero__sub {
  font-size: var(--t-lead);
  color: var(--texto-suave);
  max-width: 44ch;
  margin: 1.6rem auto 0;
}
.hero .acciones { margin-top: 2.5rem; justify-content: center; }
.hero__promo { margin-top: 2.25rem; }

/* La fotografía manda: ancha y protagonista */
.hero__foto {
  margin: clamp(3rem, 7vw, 5.5rem) 0 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--gris-08);
  aspect-ratio: 16 / 10;
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Hero corto para las páginas interiores */
.hero--interior {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  text-align: left;
}
.hero--interior h1 { max-width: 18ch; margin-inline: 0; }
.hero--interior .hero__sub { margin-inline: 0; }

/* Cifras de apoyo */
.cifras {
  display: grid;
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--borde);
  text-align: left;
}
.cifra strong {
  display: block;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
/* Solo el span hijo directo es la etiqueta pequeña: el número puede llevar
   su propio <span> dentro del <strong> sin encogerse. */
.cifra > span { display: block; margin-top: .45rem; font-size: var(--t-peque); color: var(--texto-suave); }

/* ==========================================================================
   09. PROMOCIÓN — clara y sin bloques saturados
   ========================================================================== */
.promo { text-align: center; }
/* Titular de la promoción: "ÚLTIMO MES" en azul y "GRATIS" en rosa, en dos
   líneas. Sustituye a la cifra gigante que había antes. */
.promo__titular {
  margin: 0;
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.promo__titular-a, .promo__titular-b { display: block; }
.promo__titular-a { color: var(--azul); }
.promo__titular-b { color: var(--rosa); }
.promo__condicion {
  margin: .9rem 0 0;
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--texto-suave);
}
.promo h2:not(.promo__titular) { margin-top: 1.25rem; }
.promo__desc { margin: 1.1rem auto 0; max-width: 46ch; color: var(--texto-suave); font-size: var(--t-lead); }
.promo .acciones { margin-top: 2.5rem; justify-content: center; }

.promo__claims {
  display: grid;
  gap: 0;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  border-top: 1px solid var(--borde);
  text-align: left;
}
.promo__claim { padding: 2rem 0; border-bottom: 1px solid var(--borde); }
.promo__claim h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.promo__claim p { color: var(--texto-suave); font-size: var(--t-peque); }
.promo__claim svg {
  width: 24px; height: 24px;
  margin-bottom: 1rem;
  fill: none; stroke: var(--rosa);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Portada y calculadora son la misma promoción: se dice con claridad,
   no en la letra pequeña. */
/* Desplegable de condiciones: <details> nativo, sin librerías. El triángulo
   por defecto se sustituye por un signo que cambia al abrir. */
.condiciones {
  margin-top: 2rem;
  text-align: center;
}
.condiciones__control {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .25rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-peque);
  font-weight: 600;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.condiciones__control::-webkit-details-marker { display: none; }
.condiciones__control::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-rapida);
}
.condiciones[open] .condiciones__control::after { transform: translateY(2px) rotate(-135deg); }
.condiciones__control:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.condiciones__cuerpo { margin-top: .5rem; }

.promo__misma {
  margin: 2rem auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--t-peque);
  color: var(--texto);
}
.promo__legal { margin-top: 1.25rem; font-size: var(--t-micro); color: var(--gris-70); }

/* ==========================================================================
   10. VENTAJAS
   ========================================================================== */
.ventajas {
  display: grid;
  gap: 1px;
  background: var(--borde);
  border-block: 1px solid var(--borde);
}
.ventaja {
  background: var(--blanco);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
}
.seccion--alt .ventaja { background: var(--fondo-alt); }
.ventaja svg {
  box-sizing: content-box;
  width: 22px; height: 22px;
  padding: 10px;
  margin-bottom: 1.35rem;
  border-radius: 12px;
  background: var(--rosa-tenue);
  fill: none; stroke: var(--rosa);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
/* Alternamos rosa y azul para que la rejilla no sea monocolor */
.ventaja:nth-child(even) svg { background: var(--azul-tenue); stroke: var(--azul); }
.ventaja:hover svg { transform: translateY(-2px); }
.ventaja h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.ventaja p { color: var(--texto-suave); font-size: var(--t-peque); }

/* ==========================================================================
   11. CÓMO FUNCIONA
   ========================================================================== */
.pasos { display: grid; gap: clamp(2.5rem, 5vw, 3rem); }
.paso { padding-top: 1.5rem; border-top: 2px solid var(--rosa); }
.paso__num {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--rosa-oscuro);
  margin-bottom: 1rem;
}
.paso h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .6rem; }
.paso p { color: var(--texto-suave); font-size: var(--t-peque); }

/* ==========================================================================
   12. TAMAÑOS Y PRECIOS
   ========================================================================== */
.tamanos { display: grid; gap: 1.5rem; }

.tamano {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--blanco);
  border: 1px solid var(--gris-30);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  transition: border-color var(--t-media), transform var(--t-media), box-shadow var(--t-media);
}
.tamano:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  border-color: var(--borde-fuerte);
}
/* "Mediano" es la opción destacada: se marca SOLO con el contorno azul
   corporativo, del mismo grosor que las otras dos. Sin fondo de color y
   sin barra superior: el color entra por el borde, no por relleno. */
.tamano--destacado {
  position: relative;
  border-color: rgba(44, 47, 136, .5);
  box-shadow: 0 2px 16px rgba(44, 47, 136, .07);
}
.tamano--destacado:hover {
  border-color: var(--azul);
  box-shadow: 0 10px 34px rgba(44, 47, 136, .13);
}

.tamano__etiqueta {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .22rem .75rem;
  border-radius: var(--r-full);
  background: var(--azul-tenue);
  border: 1px solid rgba(44, 47, 136, .18);
  color: var(--azul);
  font-size: var(--t-micro);
  font-weight: 650;
}
.tamano h3 { font-size: 1.45rem; margin-bottom: .35rem; }
.tamano__rango { font-size: var(--t-peque); color: var(--texto-suave); margin-bottom: 1.75rem; }
.tamano__desde { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .4rem; }
.tamano__desde small { font-size: var(--t-peque); color: var(--texto-suave); font-weight: 500; }
.tamano__desde strong { font-size: 2.7rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.tamano__libres { font-size: var(--t-peque); color: var(--verde); font-weight: 600; margin-bottom: 1.75rem; }

.lista-check { display: grid; gap: .6rem; font-size: var(--t-peque); color: var(--gris-70); }
.lista-check li { position: relative; padding-left: 1.5rem; }
.lista-check li::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 13px; height: 8px;
  border-left: 2px solid var(--rosa);
  border-bottom: 2px solid var(--rosa);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.tamano .lista-check { margin-bottom: 2rem; }
.tamano .btn { margin-top: auto; }

/* ==========================================================================
   13. CATÁLOGO DE TRASTEROS
   ========================================================================== */
.filtros {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--borde);
}
.filtros__fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.filtros__chips {
  display: flex; gap: .5rem;
  overflow-x: auto;
  padding-bottom: .2rem;
  min-width: 0;
  scrollbar-width: none;
}
.filtros__chips::-webkit-scrollbar { display: none; }
.filtros__orden {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  /* Sin esto, el <select> impone el ancho de su opción más larga
     ("Superficie: mayor a menor") y desborda la pantalla en móviles
     estrechos. Con min-width:0 puede encogerse y recorta el texto. */
  min-width: 0;
  flex: 0 1 auto;
}
.filtros__orden label { font-size: var(--t-peque); color: var(--texto-suave); white-space: nowrap; }
.filtros__orden .select { min-width: 0; flex: 1 1 auto; text-overflow: ellipsis; }

.select {
  max-width: 100%;
  min-height: 42px;
  padding: .45rem 2.4rem .45rem .95rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585967' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 16px;
  font-size: var(--t-peque);
  font-weight: 550;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--t-rapida);
}
.select:hover { border-color: var(--gris-50); }

.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__pista {
  position: relative;
  width: 42px; height: 25px;
  border-radius: var(--r-full);
  background: var(--gris-30);
  transition: background var(--t-rapida);
  flex-shrink: 0;
}
.switch__pista::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sombra-1);
  transition: transform var(--t-media);
}
.switch input:checked + .switch__pista { background: var(--verde); }
.switch input:checked + .switch__pista::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__pista { outline: 3px solid var(--rosa); outline-offset: 3px; }
.switch__txt { font-size: var(--t-peque); font-weight: 550; }

.listado__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
  font-size: var(--t-peque);
  color: var(--texto-suave);
}
#contador-trasteros { font-weight: 600; color: var(--tinta); }

/* --- LA REJILLA ---
   3 trasteros por página. En escritorio, uno al lado del otro. */
.trasteros__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);   /* móvil: 1 columna */
}

/* --- Tarjeta del catálogo ---
   Sin fotografía: informa con tipografía y espacio. Las fotos reales se
   usan en las secciones editoriales, donde aportan contexto. --- */
/* Acento tipográfico del titular. Color plano por defecto: si el navegador
   no soporta background-clip:text, el texto se ve en azul corporativo. */
.acento-marca {
  color: var(--azul);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .acento-marca {
    /* El azul ocupa más de la mitad del recorrido y solo al final vira
       al rosa. Es un matiz, no un degradado de dos colores a partes
       iguales. Los únicos colores son los de la marca. */
    background-image: linear-gradient(101deg,
      #2C2F88 0%, #2C2F88 68%, #8E1C7E 87%, #E6007C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
/* En pantallas estrechas la frase ocupa todo el ancho y el degradado se
   recorre entero, así que se nota más. Se retrasa el viraje para que el
   efecto sea igual de discreto que en escritorio. */
@media (max-width: 639px) {
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .acento-marca {
      background-image: linear-gradient(101deg,
        #2C2F88 0%, #2C2F88 78%, #9A1878 91%, #E6007C 100%);
    }
  }
}

/* Modo alto contraste e impresión: color plano, sin degradado. */
@media (prefers-contrast: more), print {
  .acento-marca {
    background-image: none;
    color: var(--azul);
    -webkit-text-fill-color: var(--azul);
  }
}

.tarjeta { display: flex; }
.tarjeta__enlace {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.75rem 1.6rem 1.5rem;
  background: var(--blanco);
  /* Borde de gris medio, no del gris casi invisible: las tres tarjetas
     tienen que leerse como tres objetos separados, no como un bloque. */
  border: 1px solid var(--gris-30);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.tarjeta__enlace:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: rgba(230, 0, 124, .28);
}

/* La tarjeta central de cada página de 3: mismo fondo blanco, mismo grosor
   de borde (1 px). Solo cambia el color a azul corporativo. Sin relleno. */
.tarjeta--destacada .tarjeta__enlace {
  border-color: rgba(44, 47, 136, .5);
  box-shadow: 0 2px 16px rgba(44, 47, 136, .07);
}
.tarjeta--destacada .tarjeta__enlace:hover {
  border-color: var(--azul);
  box-shadow: 0 10px 34px rgba(44, 47, 136, .13);
}

.tarjeta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.35rem;
}
.tarjeta__cat {
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-70);
}
.tarjeta__top .estado { box-shadow: none; background: var(--gris-08); }

.tarjeta__id {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--tinta);
  margin-bottom: 1.2rem;
}

.tarjeta__datos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 1.2rem;
}
.tarjeta__dato { font-size: var(--t-peque); color: var(--gris-70); white-space: nowrap; }
.tarjeta__dato b { font-weight: 650; color: var(--tinta); }
.tarjeta__dato--med { flex-basis: 100%; color: var(--gris-50); }

.tarjeta__precio { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.tarjeta__precio b {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--azul);
}
.tarjeta__precio > span { font-size: var(--t-peque); color: var(--texto-suave); }
.tarjeta__m2 {
  flex-basis: 100%;
  margin-top: .3rem;
  font-size: var(--t-micro);
  color: var(--gris-70);
}

.tarjeta__rasgos { display: grid; gap: .4rem; margin: 1.35rem 0 0; }
.tarjeta__rasgos li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-micro);
  color: var(--gris-70);
}
.tarjeta__rasgos li::before {
  content: '';
  position: absolute; left: 0; top: .42em;
  width: 11px; height: 7px;
  border-left: 1.8px solid var(--rosa);
  border-bottom: 1.8px solid var(--rosa);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.tarjeta__accion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: var(--t-peque);
  font-weight: 650;
  color: var(--rosa-oscuro);
}
.tarjeta__accion svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-rapida);
}
.tarjeta__enlace:hover .tarjeta__accion svg { transform: translateX(4px); }

/* Ocupado: se atenúa sin dejar de leerse */
.tarjeta.is-ocupado .tarjeta__enlace { background: var(--fondo-alt); }
.tarjeta.is-ocupado .tarjeta__id,
.tarjeta.is-ocupado .tarjeta__precio b { color: var(--gris-50); }

.trasteros__vacio {
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--texto-suave);
}

/* --- Paginación --- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.paginacion__nums { display: flex; align-items: center; gap: .15rem; }
.paginacion__num {
  min-width: 44px; height: 44px;
  padding: 0 .3rem;
  border-radius: var(--r-full);
  font-size: var(--t-peque);
  font-weight: 600;
  color: var(--gris-70);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.paginacion__num:hover { background: var(--gris-08); color: var(--tinta); }
.paginacion__num.is-activo { background: var(--tinta); color: #fff; }
.paginacion__hueco { width: 28px; text-align: center; color: var(--gris-50); }
.paginacion__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 50%;
  color: var(--tinta);
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.paginacion__flecha:hover:not([disabled]) { background: var(--gris-08); border-color: var(--gris-50); }
.paginacion__flecha[disabled] { opacity: .3; cursor: not-allowed; }
.paginacion__flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   14. FICHA DE TRASTERO (panel) — se construye desde main.js
   ========================================================================== */
.panel {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 16, 32, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-media);
  overflow-y: auto;
}
.panel[hidden] { display: none; }
.panel.is-abierto { opacity: 1; }

.panel__caja {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--blanco);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-3);
  transform: translateY(26px);
  transition: transform var(--t-media);
  -webkit-overflow-scrolling: touch;
}
.panel.is-abierto .panel__caja { transform: none; }

.panel__cerrar {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tinta);
  box-shadow: var(--sombra-1);
  transition: background var(--t-rapida);
}
.panel__cerrar:hover { background: #fff; }
.panel__cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.panel__foto { margin: 0; aspect-ratio: 4 / 3; background: var(--gris-08); overflow: hidden; }
.panel__foto img { width: 100%; height: 100%; object-fit: cover; }

.panel__cuerpo { padding: clamp(1.5rem, 4vw, 2.25rem); }
.panel__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-70);
  font-weight: 650;
  margin-bottom: .45rem;
}
.panel__titulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.2rem);
  margin-bottom: 1.75rem;
}
.panel__titulo .estado { box-shadow: none; background: var(--gris-08); }

.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 1.75rem;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  overflow: hidden;
}
.ficha > div { background: var(--blanco); padding: .9rem 1.1rem; }
.ficha dt {
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-70);
  margin-bottom: .2rem;
}
.ficha dd { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.02em; }
/* Filas completas: así la rejilla nunca deja un hueco suelto. */
.ficha__ancho,
.ficha__precio { grid-column: 1 / -1; }
.ficha__precio dd { font-size: 1.6rem; color: var(--rosa); }
.ficha__precio dd small { font-size: .9rem; font-weight: 500; color: var(--texto-suave); }

.panel__lista { display: grid; gap: .6rem; margin-bottom: 1.75rem; font-size: var(--t-peque); color: var(--gris-70); }
.panel__lista li { position: relative; padding-left: 1.5rem; }
.panel__lista li::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 13px; height: 8px;
  border-left: 2px solid var(--rosa);
  border-bottom: 2px solid var(--rosa);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.panel__promo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  margin-bottom: 1.75rem;
  background: var(--amarillo-tenue);
  border: 1px solid rgba(255, 204, 0, .5);
  border-radius: var(--r-m);
  font-size: var(--t-peque);
  font-weight: 600;
  color: #6B5200;
}
.panel__promo svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.panel__acciones { display: grid; gap: .65rem; margin-top: 1.5rem; }
.panel__nota { margin-top: 1rem; font-size: var(--t-micro); color: var(--texto-suave); text-align: center; }

/* ==========================================================================
   15. CALCULADORA
   ========================================================================== */
.calc { display: grid; gap: 1.5rem; align-items: start; }

.calc__panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}

.calc__tabs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde);
  min-width: 0;
  scrollbar-width: none;
}
.calc__tabs::-webkit-scrollbar { display: none; }

/* Sin esto, la fila de pestañas —que no rompe línea— ensancharía la
   página entera y aparecería scroll horizontal en el móvil. */
.calc > *, .calc__panel, .objeto, .filtros__chips, .filtros__fila { min-width: 0; }

.calc__objetos { display: grid; gap: .3rem; }

.objeto {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem .6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-m);
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.objeto:hover { background: var(--gris-08); }
.objeto.is-activo { border-color: rgba(230, 0, 124, .28); background: var(--rosa-tenue); }

/* En pantallas muy estrechas el icono se oculta: el nombre necesita ese
   espacio para no partirse en tres líneas (se recupera a partir de 420 px). */
.objeto__icono { display: none; }
.objeto__icono {
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--gris-08);
  color: var(--azul);
}
.objeto.is-activo .objeto__icono { background: rgba(230, 0, 124, .1); color: var(--rosa); }
.objeto__icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.objeto__texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.objeto__nombre { font-size: .94rem; font-weight: 550; letter-spacing: -0.01em; }
.objeto__vol { font-size: var(--t-micro); color: var(--texto-suave); }

.stepper {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-shrink: 0;
  background: var(--gris-08);
  border-radius: var(--r-full);
  padding: 3px;
}
.stepper__btn {
  /* 44 px en móvil: objetivo táctil recomendado. */
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--gris-70);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.stepper__btn:hover { background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-1); }
.stepper__valor { min-width: 24px; text-align: center; font-size: .94rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Resultado */
.calc__resultado {
  background: var(--tinta);
  color: #fff;
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.calc__resultado h3 { color: #fff; font-size: 1.05rem; margin-bottom: 1.5rem; }
.calc__vacio { color: rgba(255, 255, 255, .62); font-size: var(--t-peque); }

.calc__dato { margin-bottom: 1.5rem; }
.calc__dato-label {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .25rem;
}
.calc__dato-valor { font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.calc__dato-valor > span:last-child { font-size: .42em; font-weight: 600; color: rgba(255, 255, 255, .6); margin-left: .25rem; }
.calc__dato--destacado .calc__dato-valor { color: var(--amarillo); }

.calc__barra {
  --pct: 0%;
  position: relative;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .13);
  overflow: hidden;
  margin: 1.5rem 0;
}
.calc__barra::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: inherit;
  background: var(--rosa);
  transition: width var(--t-media);
}

.calc__sugeridos { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.pastilla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .7rem .95rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: var(--t-peque);
  text-align: left;
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.pastilla:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .32); }
.pastilla span { color: rgba(255, 255, 255, .68); }

.calc__nota { font-size: var(--t-peque); color: rgba(255, 255, 255, .68); }
.calc__nota .enlace { color: var(--amarillo); }

.calc__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: var(--t-peque);
  color: var(--texto-suave);
}

/* ==========================================================================
   16. FORMULARIOS
   ========================================================================== */
.form { display: grid; gap: 1.1rem; }
.form__fila { display: grid; gap: 1.1rem; }

.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo > label, .campo__label { font-size: var(--t-peque); font-weight: 600; }
.campo .opcional { color: var(--texto-suave); font-weight: 400; }

.input, .textarea, .campo .select {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  background: var(--blanco);
  font-size: 1rem;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo .select { padding-right: 2.6rem; border-radius: var(--r-m); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

.input:hover, .textarea:hover { border-color: var(--gris-50); }
.input:focus, .textarea:focus, .campo .select:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 4px rgba(230, 0, 124, .12);
}
.input::placeholder, .textarea::placeholder { color: var(--gris-70); opacity: 1; }

.campo.is-error .input,
.campo.is-error .textarea,
.campo.is-error .select { border-color: #C42121; }
.campo__error { font-size: var(--t-micro); color: #C42121; min-height: 1em; }

.radios { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio { position: relative; flex: 1 1 130px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .6rem 1rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-m);
  font-size: var(--t-peque);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-rapida);
}
.radio input:checked + span { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.radio input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 3px; }

.check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__caja {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1.5px solid var(--gris-50);
  border-radius: 6px;
  background: var(--blanco);
  transition: all var(--t-rapida);
}
.check__caja::after {
  content: '';
  position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t-rapida);
}
.check input:checked + .check__caja { background: var(--rosa); border-color: var(--rosa); }
.check input:checked + .check__caja::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__caja { outline: 3px solid var(--rosa); outline-offset: 3px; }
.check__txt { font-size: var(--t-peque); color: var(--gris-70); line-height: 1.5; }
.check__txt a { color: var(--rosa-oscuro); text-decoration: underline; text-underline-offset: 2px; }
.campo.is-error .check__caja { border-color: #C42121; }

/* Honeypot antispam: invisible para personas */
.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__aviso { padding: .85rem 1rem; border-radius: var(--r-m); font-size: var(--t-peque); }
.form__aviso--error { background: #FDECEC; color: #9E1C1C; border: 1px solid #F3C8C8; }
.form__aviso a { text-decoration: underline; }
.form__pie { font-size: var(--t-micro); color: var(--texto-suave); text-align: center; }

/* Mensaje de éxito */
.exito { text-align: center; padding: 1rem 0; }
.exito:focus { outline: none; }
.exito__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(20, 122, 74, .1);
}
.exito__icono svg { width: 28px; height: 28px; fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.exito h2, .exito h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.exito p { color: var(--texto-suave); max-width: 44ch; margin-inline: auto; }

.panel-form {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   17. GALERÍA Y LIGHTBOX
   ========================================================================== */
.galeria { display: grid; gap: .8rem; }
.galeria__item {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--gris-08);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta); }
.galeria__item:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 8, 16, .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: min(1100px, 100%); max-height: 76vh; object-fit: contain; border-radius: var(--r-m); }
.lightbox__pie { margin-top: 1rem; max-width: 60ch; text-align: center; color: rgba(255, 255, 255, .8); font-size: var(--t-peque); }
.lightbox__contador { color: rgba(255, 255, 255, .5); font-size: var(--t-micro); margin-top: .35rem; }
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background var(--t-rapida);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__btn--cerrar { top: 1rem; right: 1rem; }
.lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   18. OPINIONES
   ========================================================================== */
.opiniones { display: grid; gap: 1.25rem; }
.opinion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
}
.opinion__estrellas { display: flex; gap: 2px; }
.estrella { width: 16px; height: 16px; fill: var(--gris-30); }
.estrella.is-llena { fill: var(--amarillo); }
.opinion blockquote { margin: 0; }
.opinion blockquote p { font-size: 1.02rem; letter-spacing: -0.01em; }
.opinion figcaption { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; }
.opinion__nombre { font-weight: 650; font-size: var(--t-peque); }
.opinion__origen { font-size: var(--t-micro); color: var(--texto-suave); }

/* --- Reseñas reales de Google: autor, nota media y atribución --- */
/* La regla .opinion figcaption de arriba pone columna; aquí hace falta fila
   (foto · nombre · enlace), así que se iguala la especificidad. */
.opinion figcaption.opinion__autor {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
}
.opinion__foto {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gris-08);
}
.opinion__quien { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
a.opinion__nombre { color: inherit; text-decoration: none; }
a.opinion__nombre:hover { color: var(--rosa-oscuro); text-decoration: underline; }
/* Las tres tarjetas miden EXACTAMENTE lo mismo, estén en fila o apiladas:
   el hueco del texto siempre ocupa el mismo número de líneas. Si una reseña
   es más larga, se recorta y se despliega aquí mismo con «Leer más»; si es
   más corta, el hueco se mantiene. */
.opinion__texto {
  --lineas: 4;
  display: -webkit-box;
  -webkit-line-clamp: var(--lineas);
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
  min-height: calc(var(--lineas) * 1.6em);
}
.opinion.is-abierta .opinion__texto {
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
}
.opinion__mas {
  align-self: flex-start;
  margin-top: -.4rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--rosa-oscuro);
  cursor: pointer;
}
.opinion__mas:hover { text-decoration: underline; }
/* Ocupa su sitio para igualar las tarjetas, pero no se ve ni se pulsa */
.opinion__mas.is-hueco { visibility: hidden; pointer-events: none; }
.resenas__resumen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: -1rem 0 2rem;
  font-size: var(--t-peque);
  color: var(--texto-suave);
}
.resenas__resumen[hidden] { display: none; }
.resenas__fuente {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: var(--t-micro);
  color: var(--gris-50);
}
.resenas__fuente a { color: var(--gris-70); text-decoration: underline; text-underline-offset: 3px; }
.resenas__fuente a:hover { color: var(--rosa-oscuro); }
.resenas__fuente[hidden] { display: none; }
.resenas .opiniones[hidden] { display: none; }
.resenas .opiniones + .acciones { margin-top: 2rem; }

/* --- Tabla de descuentos por permanencia (precios) --- */
.promo__niveles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: .6rem;
  margin: 2.25rem auto 0;
  max-width: 760px;
}
.nivel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .75rem .3rem;
  background: var(--blanco);
  border: 1px solid var(--gris-30);
  border-radius: var(--r-s);
}
.nivel--maximo { border-color: rgba(44, 47, 136, .5); }
/* "GRATIS" es más largo que "95 %": entra sin deformar la celda. */
.nivel--maximo .nivel__pct { font-size: .95rem; letter-spacing: 0; }
.nivel__meses { font-size: var(--t-micro); color: var(--gris-70); }
.nivel__pct { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--azul); }
.promo__niveles-pie {
  margin: 1rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--t-peque);
  color: var(--texto-suave);
}

/* --- Permanencia y descuento en la calculadora ---
   Va dentro del panel oscuro del resultado, así que todo se dibuja en claro.
   Un único deslizador de 1 a 12 meses en lugar de doce botones. --- */
.permanencia {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.permanencia__titulo {
  font-size: var(--t-peque);
  font-weight: 650;
  color: #fff;
  margin-bottom: 1.1rem;
}
.permanencia__barra {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.permanencia__tope {
  flex-shrink: 0;
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, .55);
}

/* El deslizador. Se estilan los dos motores (WebKit y Firefox). */
.permanencia__slider {
  --recorrido: 45%;
  flex: 1;
  min-width: 0;
  height: 26px;
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.permanencia__slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(to right,
    var(--amarillo) 0 var(--recorrido), rgba(255, 255, 255, .22) var(--recorrido) 100%);
}
.permanencia__slider::-moz-range-track {
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .22);
}
.permanencia__slider::-moz-range-progress {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--amarillo);
}
.permanencia__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amarillo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.permanencia__slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amarillo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.permanencia__slider:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }

.permanencia__valor {
  margin: .9rem 0 0;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

/* El beneficio: amarillo corporativo, que es lo que el visitante se lleva.
   Es una pastilla del ancho justo, no un bloque amarillo a toda caja. */
.permanencia__beneficio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .05rem .45rem;
  width: fit-content;
  max-width: 100%;
  margin: .85rem auto 0;
  padding: .55rem 1.05rem .6rem;
  border-radius: var(--r-full);
  background: var(--amarillo);
  color: #3D2F00;
  text-align: center;
}
.beneficio__pct {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.beneficio__texto { font-size: var(--t-peque); font-weight: 600; }
/* 12 meses: el último mes es gratis. Nunca se dice "100 %". */
.beneficio__gratis {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}
/* Con 1 mes no hay nada que celebrar: se baja el tono */
.permanencia__beneficio.is-sin {
  display: block;
  width: auto;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78);
  font-size: var(--t-peque);
  font-weight: 500;
  padding: .7rem 1rem;
}
.permanencia__nota {
  margin: .7rem 0 0;
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, .6);
}

/* --- El MISMO selector dentro de la ficha de reserva ---
   Allí el fondo es blanco, así que solo cambian los colores: el
   comportamiento, las medidas y el amarillo del beneficio son idénticos. */
.permanencia--claro {
  border-top-color: var(--borde);
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--borde);
}
.permanencia--claro .permanencia__titulo { color: var(--texto); }
.permanencia--claro .permanencia__tope { color: var(--gris-50); }
.permanencia--claro .permanencia__valor { color: var(--texto); }
.permanencia--claro .permanencia__nota { color: var(--texto-suave); }
/* El raíl sin recorrer va en azul corporativo; el recorrido y el indicador,
   en amarillo. Sobre el panel oscuro el azul no se vería (contraste 1,5:1),
   así que allí el raíl se queda en blanco translúcido. */
.permanencia--claro .permanencia__slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    var(--amarillo) 0 var(--recorrido), rgba(44, 47, 136, .18) var(--recorrido) 100%);
}
.permanencia--claro .permanencia__slider::-moz-range-track { background: rgba(44, 47, 136, .18); }
.permanencia--claro .permanencia__slider::-webkit-slider-thumb {
  box-shadow: 0 2px 8px rgba(15, 16, 32, .22);
}
.permanencia--claro .permanencia__slider::-moz-range-thumb {
  box-shadow: 0 2px 8px rgba(15, 16, 32, .22);
}
.permanencia--claro .permanencia__beneficio.is-sin {
  background: var(--gris-08);
  color: var(--texto-suave);
}

/* Los botones secundarios dentro del panel oscuro se veían en tinta sobre
   tinta: solo aparecían al pasar el ratón. Ahora se leen siempre. */
.calc__resultado .btn--secundario {
  --btn-color: #fff;
  --btn-borde: rgba(255, 255, 255, .5);
}
.calc__resultado .btn--secundario:hover {
  --btn-bg: rgba(255, 255, 255, .14);
  --btn-borde: #fff;
  --btn-color: #fff;
}

/* ==========================================================================
   19. UBICACIÓN Y FAQ
   ========================================================================== */
.datos { display: grid; gap: 1.75rem; }
.dato { display: flex; gap: 1rem; align-items: flex-start; }
.dato__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--azul-tenue);
}
.dato__icono svg { width: 20px; height: 20px; fill: none; stroke: var(--azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dato h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-70); font-weight: 650; margin-bottom: .3rem; }
/* Un número de teléfono no se parte NUNCA por la mitad. Si no cabe junto a
   su etiqueta ("móvil", "fijo"), la etiqueta pasa a la línea siguiente. */
.dato a[href^="tel:"],
.footer a[href^="tel:"],
.menu-movil__dato a[href^="tel:"] { white-space: nowrap; }
.dato p { font-size: 1.02rem; line-height: 1.5; }
.dato a:hover { color: var(--rosa); }

/* Ubicación: la dirección y los botones arriba; debajo, fachada y mapa
   uno junto al otro, con la misma proporción y la misma altura. */
/* --- Sección "Cómo llegar" de contacto.html ---
   Tres niveles con aire entre ellos: título + fachada, dirección + botones,
   y el mapa a todo el ancho. Sin tarjetas ni cajas: la composición la
   resuelven la alineación, la tipografía y el espacio en blanco. --- */
.ubicacion__intro {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
  margin-bottom: clamp(3.5rem, 8vw, 5.5rem);
}
/* Dentro del nivel 1 el margen inferior lo pone la rejilla, no la cabecera,
   y el ancho lo marca la columna: el título no se estrecha más. */
.ubicacion__cabecera { margin-bottom: 0; max-width: none; }

.ubicacion__foto { margin: 0; }
.ubicacion__marco {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--gris-08);
  border: 1px solid var(--borde);
}
.ubicacion__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ubicacion__pie {
  margin-top: .8rem;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--texto-suave);
}

.ubicacion__direccion {
  margin: 0;
  font-size: var(--t-lead);
  color: var(--texto);
}
.ubicacion__acciones { margin-top: 1.5rem; }

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--gris-08);
  border: 1px solid var(--borde);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa--ancho { width: 100%; }
.mapa__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2rem;
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--t-peque);
}
.mapa.is-cargado .mapa__placeholder { display: none; }
.mapa__placeholder svg { width: 32px; height: 32px; fill: none; stroke: var(--gris-30); stroke-width: 1.5; }

.faq { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--borde); }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.08rem;
  font-weight: 620;
  letter-spacing: -0.018em;
  color: var(--tinta);
  transition: color var(--t-rapida);
}
.faq__pregunta:hover { color: var(--rosa); }
.faq__icono { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq__icono::before, .faq__icono::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.8px;
  background: var(--rosa);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-media), opacity var(--t-rapida);
}
.faq__icono::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-abierto .faq__icono::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq__respuesta { max-height: 0; overflow: hidden; transition: max-height var(--t-media); }
.faq__respuesta > div { padding-bottom: 1.6rem; color: var(--texto-suave); max-width: 64ch; font-size: var(--t-peque); }

/* Bloque de cierre con llamada a la acción */
.cierre { text-align: center; }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre p { margin: 1.25rem auto 0; max-width: 46ch; color: var(--texto-suave); font-size: var(--t-lead); }
.cierre .acciones { margin-top: 2.5rem; justify-content: center; }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, .64);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: 2rem;
  font-size: var(--t-peque);
}
.footer__grid { display: grid; gap: 2.5rem; }
.footer h2 {
  color: #fff;
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 650;
}
.footer a { transition: color var(--t-rapida); }
.footer a:hover { color: #fff; }
.footer ul { display: grid; gap: .55rem; }
.footer__marca { max-width: 34ch; }
.footer__marca .logo { margin-bottom: 1.1rem; }
.footer__marca .logo__texto { color: #fff; }
.footer__marca .logo__texto span { color: var(--amarillo); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .11);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, .58);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   21. FLOTANTES, COOKIES Y ANIMACIÓN
   ========================================================================== */
.flotantes {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-media), transform var(--t-media), visibility var(--t-media);
}
.flotantes.is-visible { opacity: 1; visibility: visible; transform: none; }
.flotante {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--sombra-2);
  transition: transform var(--t-rapida);
}
.flotante:hover { transform: scale(1.05); }
.flotante svg { width: 27px; height: 27px; }
.flotante--wa { background: #25D366; }
.flotante--wa svg { fill: #fff; }
/* El botón de llamada solo en tablet y escritorio: en móvil el teléfono ya
   está siempre visible en el header fijo. */
.flotante--tel { background: var(--azul); display: none; }
.flotante--tel svg { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.cookies {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 200;
  max-width: 440px;
  padding: 1.25rem;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-3);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-media), transform var(--t-media);
}
.cookies.is-visible { opacity: 1; transform: none; }
.cookies p { font-size: var(--t-peque); color: var(--texto-suave); margin-bottom: 1rem; }
.cookies p a { color: var(--rosa-oscuro); text-decoration: underline; }
.cookies__botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies__botones .btn { flex: 1 1 auto; }

/* Aparición al hacer scroll: sutil */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .2s; }
.reveal:nth-child(5) { transition-delay: .26s; }
.reveal:nth-child(6) { transition-delay: .32s; }

/* Sin JavaScript todo es visible */
html:not(.js-listo) .reveal { opacity: 1; transform: none; }

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

/* ==========================================================================
   22. PÁGINAS LEGALES
   ========================================================================== */
.legal { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); }
.legal h1 { margin-bottom: .5rem; }
.legal__fecha { color: var(--texto-suave); font-size: var(--t-peque); margin-bottom: 2.5rem; }
.legal h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borde);
}
.legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--gris-70); }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .5rem; margin-bottom: 1rem; }
.legal a { color: var(--rosa-oscuro); text-decoration: underline; text-underline-offset: 3px; }
/* Las tablas legales tienen columnas que no caben en un móvil. En vez de
   empujar la página entera, cada tabla scrollea dentro de su propia caja. */
.tabla-scroll {
  margin: 1.25rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-s);
}
.legal table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--t-peque); }
.legal th, .legal td {
  padding: .7rem .8rem;
  border: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
  /* Los correos y las URL largas parten en vez de estirar la columna */
  overflow-wrap: anywhere;
}
.legal th { background: var(--gris-08); font-weight: 650; }
/* La tabla de cookies tiene 4 columnas: por debajo de este ancho se scrollea */
.legal .tabla-scroll table { min-width: 460px; }
/* El botón para cambiar la decisión sobre cookies lleva una frase larga:
   en móviles estrechos se parte en dos líneas en vez de desbordar. */
.legal .btn { max-width: 100%; white-space: normal; }
.legal__volver { }
.legal__volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 2rem;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}
.legal__volver:hover { color: var(--rosa); }

/* Etiquetas «móvil» / «fijo» junto a los teléfonos */
.footer__etiq, .dato__etiq {
  font-size: var(--t-micro);
  color: var(--gris-50);
  font-weight: 500;
}
.dato__etiq { color: var(--gris-70); }

/* ==========================================================================
   23. LOGO REAL, OPINIONES DE GOOGLE Y FICHA CON IVA
   ========================================================================== */

/* Logotipo del footer: versión NEGATIVA oficial, colocada directamente
   sobre el fondo oscuro. Ya no lleva placa blanca —ese era un apaño de
   cuando solo teníamos el archivo en azul marino—. Solo se fija la
   altura: el ancho se calcula solo y el logotipo no se deforma. */
.logo--completo { display: inline-flex; }
/* La especificidad extra es necesaria: responsive.css fija .logo img a
   34 px para la cabecera y ahí ganaría por orden de cascada. */
.footer__marca .logo--completo img {
  width: auto;
  height: 38px;
  padding: 0;
  background: none;
}

/* Base imponible bajo el precio de la ficha */
.ficha__base {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--gris-70);
  letter-spacing: 0;
}
.ficha__precio dd small { display: inline; }

/* La cabecera se vuelve opaca al hacer scroll: el logo tiene fondo blanco
   y así no se recorta contra el contenido que pasa por detrás. */
.header.is-scrolled { background: #fff; }


/* <picture> solo envuelve al <img> para ofrecer WebP: que no genere caja
   propia, así el <img> se sigue maquetando como hijo directo. */
picture { display: contents; }


/* ==========================================================================
   24. BANDAS EDITORIALES CON FOTOGRAFÍA
   --------------------------------------------------------------------------
   Fotografía real grande, con aire alrededor. Se usa solo donde aporta
   contexto: nunca como relleno decorativo.
   ========================================================================== */
.banda { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.banda__foto {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--gris-08);
  aspect-ratio: 4 / 3;
}
.banda__foto img { width: 100%; height: 100%; object-fit: cover; }
.banda__texto h2 { margin-bottom: 1rem; }
.banda__texto p { color: var(--texto-suave); font-size: var(--t-lead); max-width: 46ch; }
.banda__texto .lista-check { margin-top: 1.75rem; }
.banda__texto .acciones { margin-top: 2rem; }

/* Tres fotografías de interior, a ancho completo */
.interiores { display: grid; gap: 1rem; }
.interiores figure { margin: 0; }
.interiores img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--gris-08);
}
.interiores figcaption {
  margin-top: .75rem;
  font-size: var(--t-peque);
  color: var(--texto-suave);
}