/* ============================================================
   GARDAO · web de presentación (maqueta)
   Tipografías: Sora (títulos) + Inter (texto)
   Colores corporativos: azul #00109d · amarillo #f4b318
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --azul: #00109d;
  --azul-oscuro: #00086b;
  --azul-suave: #eef0ff;
  --amarillo: #f4b318;
  --amarillo-oscuro: #d99c07;
  --amarillo-suave: #fdf3dc;
  --tinta: #0b1020;
  --tinta-2: #3d4460;
  --tinta-3: #6a7189;
  --borde: #e3e6f0;
  --fondo: #ffffff;
  --fondo-alt: #f6f7fb;
  /* Punto de estado «abierto» del hero; no se usa en WhatsApp */
  --estado: #25d366;

  --fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulo: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radio-sm: 10px;
  --radio: 16px;
  --radio-lg: 26px;

  --sombra-sm: 0 1px 2px rgba(11, 16, 32, .07);
  --sombra: 0 14px 34px -16px rgba(11, 16, 32, .22);
  --sombra-lg: 0 34px 64px -28px rgba(0, 16, 157, .32);

  --max: 1160px;
  --header-h: 84px;
  --transicion: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. 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-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta-2);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

strong { color: var(--tinta); font-weight: 600; }
em { font-style: normal; color: var(--tinta-3); }

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

section[id],
footer[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radio-sm);
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  transition: top var(--transicion);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: clamp(72px, 9vw, 128px); }
.section--alt { background: var(--fondo-alt); }

.section__head { max-width: 600px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title {
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem);
  margin-bottom: .45em;
}

.section__lead {
  max-width: 48ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
  color: var(--tinta-2);
}
.section__head--center .section__lead { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--amarillo);
}

.grid { display: grid; gap: clamp(18px, 2.2vw, 26px); }

.note {
  padding: 14px 18px;
  border-left: 4px solid var(--amarillo);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  background: var(--amarillo-suave);
  font-size: .95rem;
  color: var(--tinta-2);
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), background-color var(--transicion),
              color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--amarillo);
  color: var(--azul-oscuro);
  box-shadow: 0 10px 22px -12px rgba(244, 179, 24, .95);
}
.btn--primary:hover { background: var(--amarillo-oscuro); }

.btn--ghost {
  background: transparent;
  color: var(--azul);
  border-color: rgba(0, 16, 157, .28);
}
.btn--ghost:hover { border-color: var(--azul); background: var(--azul-suave); }

/* Botón de WhatsApp en azul corporativo: el verde se descartó por paleta */
.btn--wa {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0, 16, 157, .9);
}
.btn--wa:hover { background: var(--azul-oscuro); }

.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: .85rem; }
.btn--block { width: 100%; }

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
}

/* ---------- 5. Fotografías ---------- */
.media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio-lg);
  background: var(--fondo-alt);
  box-shadow: var(--sombra);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.media:hover img { transform: scale(1.025); }
.media--tall { aspect-ratio: 4 / 5; height: 100%; min-height: 420px; }


/* ---------- 6. Cabecera ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
  transition: box-shadow var(--transicion);
}
.header.is-scrolled {
  box-shadow: 0 10px 26px -24px rgba(11, 16, 32, .55);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.brand__icon {
  display: block;
  height: 44px;
  width: auto;
  flex: 0 0 auto;
  transition: transform var(--transicion);
}
.brand__text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  position: relative;
  top: 3px; /* centrado óptico con el icono (la tinta no coincide con la caja de línea) */
  line-height: 1;
  white-space: nowrap;
}
.brand__name {
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .005em;
  color: var(--azul);
}
.brand__claim {
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--tinta-3);
}
.brand:hover .brand__icon { transform: scale(1.04); }

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.nav__link {
  position: relative;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--tinta);
  transition: color var(--transicion);
}
.nav__link:hover { color: var(--azul); background: none; text-decoration: none; }
.nav__link.is-active { color: var(--azul); background: none; }


.nav__cta { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 2;
}
.nav { order: 1; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. Animación de entrada ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  /* Respaldo cálido mientras carga la foto (sin azul) */
  background-color: #4a2a08;
  /* 2 capas de tinte cálido + la foto: apenas velan la imagen; solo la franja
     izquierda (donde va el texto) gana algo de densidad para que el blanco se
     lea. Tonos ámbar tostado/marrón derivados de #f4b318. */
  background-image:
    linear-gradient(180deg, rgba(60, 32, 5, .30) 0%, rgba(122, 74, 18, .02) 34%, rgba(52, 28, 4, .42) 100%),
    linear-gradient(96deg, rgba(58, 31, 5, .62) 0%, rgba(84, 46, 8, .46) 26%, rgba(140, 84, 16, .20) 52%, rgba(196, 128, 34, .06) 100%),
    url("img/foto-hero-mudanza.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center, 66% 56%;
}

.hero__inner {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  min-height: min(86vh, 900px);
  padding-block: clamp(56px, 8vh, 104px) clamp(26px, 4vh, 42px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 6px 13px 6px 10px;
  border: 1px solid #ededf2;
  border-radius: 999px;
  background: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta-2);
}
.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--estado);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}

/* Contraste sobre la foto: el badge pasa a efecto "cristal" */
.hero .badge {
  margin-bottom: 30px;
  padding: 8px 16px 8px 12px;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  font-size: .78rem;
  color: #fff;
}
.hero .badge__dot {
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .30), 0 0 12px rgba(37, 211, 102, .85);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 1.15rem + 3.95vw, 4.7rem);
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: .98;
  color: #fff;
  /* Sombra nítida + halo medio: el titular grande también gana fuerza sobre la foto */
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82), 0 4px 18px rgba(0, 0, 0, .45);
}
.hero__title-accent {
  display: block;
  margin-top: .55em;
  font-size: .44em;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.24;
  color: rgba(255, 255, 255, .80);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82), 0 1px 14px rgba(42, 22, 4, .70);
}

.hero__subtitle {
  max-width: 34em;
  margin: 26px 0 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  /* Blanco casi pleno pero no puro: mantiene la jerarquía frente al #fff del titular */
  color: #f8f9fa;
  /* Sombra corta y oscura: el texto pequeño necesita borde nítido sobre la foto,
     el halo cálido de antes ya no basta con el tinte suave del fondo */
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82), 0 1px 14px rgba(42, 22, 4, .70);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.hero .btn--primary { box-shadow: 0 18px 40px -18px rgba(244, 179, 24, .95); }
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, .80);
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  color: #fff;
  /* Refuerzo de legibilidad: sombra en el texto y halo cálido bajo el botón */
  text-shadow: 0 1px 3px rgba(28, 14, 2, .72);
  box-shadow: 0 10px 26px -16px rgba(28, 14, 2, .60);
}
.hero .btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .34);
  color: #fff;
}

.hero__copy {
  align-self: center;
  min-width: 0;
  max-width: 46rem;
}

.hero__address {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  margin: 40px 0 0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .015em;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 1px 14px rgba(42, 22, 4, .72);
}
.hero__address-icon {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  opacity: 1;
}

/* Entrada suave del copy (respeta "reducir movimiento") */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: hero-rise .95s cubic-bezier(.2, .7, .3, 1) both; }
  .hero__copy > :nth-child(2) { animation-delay: .07s; }
  .hero__copy > :nth-child(3) { animation-delay: .14s; }
  .hero__copy > :nth-child(4) { animation-delay: .21s; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 8.b Franja de fotos (mosaico bajo el hero) ---------- */
.photo-strip {
  /* Respiro respecto al hero: 50-60 px de blanco */
  margin-top: clamp(50px, 4.5vw, 60px);
}

/* Aviso de deslizamiento: solo se muestra cuando la franja es un carrusel */
.photo-strip__hint { display: none; }

.photo-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; /* junta fina: parece un mosaico continuo */
  background: var(--tinta);
}

.photo-strip__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--tinta);
}

/* Degradado inferior: legibilidad del texto sobre cualquier foto */
.photo-strip__item::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 62%;
  background: linear-gradient(180deg,
    rgba(4, 10, 36, 0) 0%,
    rgba(4, 10, 36, .18) 46%,
    rgba(4, 10, 36, .78) 100%);
  pointer-events: none;
}

.photo-strip__item img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}
.photo-strip__item:hover img { transform: scale(1.045); }

.photo-strip__caption {
  position: absolute;
  left: clamp(18px, 2vw, 34px);
  right: clamp(18px, 2vw, 34px);
  bottom: clamp(18px, 2vw, 30px);
  z-index: 2;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.05rem, .8rem + .8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(3, 8, 32, .5), 0 2px 22px rgba(3, 8, 32, .5);
  text-wrap: balance;
}

/* La franja se adapta sola: mantiene el mosaico y reduce la altura */
@media (max-width: 899px) {
  .photo-strip__item img { height: 340px; }
}

/* Móvil: la franja pasa a carrusel deslizable con la siguiente foto asomando.
   Se ve más grande que apilada y ocupa menos de la mitad de alto. */
@media (max-width: 620px) {
  .photo-strip__hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    padding-inline: 20px;
    font-family: var(--fuente-titulo);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-3);
  }
  .photo-strip__hint svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--amarillo-oscuro);
  }

  .photo-strip__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px;
    padding-inline: 20px;
    background: transparent;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .photo-strip__grid::-webkit-scrollbar { display: none; }

  .photo-strip__item {
    border-radius: var(--radio);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .photo-strip__item img { height: 320px; }
  .photo-strip__caption {
    left: 18px;
    right: 18px;
    bottom: 16px;
    font-size: 1rem;
  }
}

/* ---------- 9. Tarjetas de ventajas ---------- */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 30px 26px 32px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 16, 157, .18);
  box-shadow: var(--sombra);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--azul-suave);
  color: var(--azul);
}
.card__icon svg { width: 24px; height: 24px; }
.card__title {
  margin-bottom: .45em;
  font-size: 1.06rem;
  font-weight: 600;
}
.card__text { margin: 0; font-size: .93rem; color: var(--tinta-2); }

/* ---------- 10. Tamaños ---------- */
/* #f6f7fb (--fondo-alt) separa la foto y las tarjetas blancas del fondo de página */
#tamanos { background: var(--fondo-alt); }

.split {
  display: grid;
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

.split__body .section__title { margin-bottom: .4em; }

.sizes {
  display: grid;
  gap: 14px;
  margin-block: 30px 26px;
}
.size {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--amarillo);
  border-radius: var(--radio-sm);
  background: #fff;
  box-shadow: var(--sombra);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.size:hover { border-left-color: var(--azul); transform: translateX(3px); }

/* Número protagonista + unidad discreta (sin repetir los m² en grande) */
.size__m2 {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--fuente-titulo);
  letter-spacing: -.02em;
}
.size__num {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--azul);
}
.size__unit {
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta-3);
  letter-spacing: 0;
}
.size__for { font-size: .92rem; color: var(--tinta-2); }

.split__body .note { margin-block: 0 24px; }

/* Aviso en azul pálido: no compite con el botón amarillo de la lista de espera */
.note--info {
  border-left-color: rgba(0, 16, 157, .25);
  background: var(--azul-suave);
}

/* ---------- 11. FAQ (acordeón nativo) ---------- */
.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq__item {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: #fff;
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.faq__item[open] {
  border-color: rgba(0, 16, 157, .22);
  box-shadow: var(--sombra);
}

.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--fondo-alt); }

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul-suave);
  transition: background-color var(--transicion), transform var(--transicion);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transform: translate(-50%, -50%);
  transition: transform var(--transicion), opacity var(--transicion);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--amarillo); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { opacity: 0; }

.faq__a { padding: 0 24px 22px; }
.faq__a p { margin: 0; max-width: 62ch; font-size: .95rem; color: var(--tinta-2); }
.faq__a p + p { margin-top: 12px; }

/* Listas dentro de una respuesta (prohibiciones, consejos…) */
.faq__a ul {
  display: grid;
  gap: 6px;
  margin: 12px 0 14px;
  padding: 0;
  max-width: 62ch;
}
.faq__a li {
  position: relative;
  padding-left: 20px;
  font-size: .95rem;
  color: var(--tinta-2);
}
.faq__a li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amarillo);
}
.faq__a ul:last-child { margin-bottom: 0; }

/* ---------- 12. Contacto ---------- */
/* Menos aire entre el subtítulo y las dos tarjetas de la sección */
#contacto .section__head { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* Las dos tarjetas (formulario e información) se estiran a la misma altura */
.contact {
  /* Franja interior común: con el mismo padding inferior en ambas tarjetas,
     los dos botones de acción quedan exactamente a la misma altura */
  --contact-pad: clamp(22px, 3vw, 32px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

/* Los dos botones de acción comparten alto (uno lleva icono y el otro no) */
.contact .btn--block { min-height: 56px; }

/* La tarjeta del formulario rellena el alto de la fila */
.contact__form-wrap {
  display: flex;
  flex-direction: column;
}

.contact__info {
  display: flex;
  flex-direction: column;
  padding: var(--contact-pad);
  border-radius: var(--radio-lg);
  background: #fff;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}
.contact__title { font-size: 1.15rem; margin-bottom: .6em; }

.contact__address {
  font-style: normal;
  font-size: .98rem;
  color: var(--tinta-2);
  margin-bottom: 20px;
}

.contact__list { display: grid; gap: 14px; margin-bottom: 4px; }
.contact__list li {
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.contact__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact__label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.contact__value { font-size: .95rem; color: var(--tinta); }

/* Mapa incrustado: ancho completo, 200 px de alto y esquinas redondeadas */
.contact__map {
  flex: 1;
  min-height: 200px;
  margin-block: 22px;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-alt);
}
.contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 0;
}

/* ---------- 13. Formulario ---------- */
.form {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: #fff;
  box-shadow: var(--sombra-sm);
}

.form__row { display: grid; gap: 18px; }

/* En la sección de contacto la tarjeta se estira hasta igualar la de información:
   el campo de mensaje absorbe el espacio sobrante y el botón de envío (último hijo)
   queda pegado al pie, a la misma altura que el botón de WhatsApp de la otra tarjeta. */
.contact__form-wrap .form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--contact-pad);
}
.contact__form-wrap .field--grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact__form-wrap .field--grow .field__input {
  flex: 1;
  min-height: 118px;
}

.field { display: grid; gap: 6px; }

.field__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tinta);
}
.field__hint { font-weight: 400; color: var(--tinta-3); }

.field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-sm);
  background: #fdfdff;
  font-family: inherit;
  font-size: .95rem;
  color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}
.field__input::placeholder { color: #9aa1b8; }
.field__input:hover { border-color: #cfd5e6; }
.field__input:focus {
  outline: none;
  border-color: var(--azul);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 16, 157, .12);
}
.field__input--textarea { resize: vertical; min-height: 110px; }

.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4460' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tinta-2);
  cursor: pointer;
}
.check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--azul);
  cursor: pointer;
}
.check a { text-decoration: underline; }

.field__input:invalid:not(:placeholder-shown) { border-color: #d9534f; }

.form__status {
  display: none;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  background: var(--azul-suave);
  font-size: .88rem;
  font-weight: 500;
  color: var(--azul);
}
.form__status.is-visible { display: block; }
.form__status.is-error { background: #fdecec; color: #a12a2a; }

/* ---------- 14. Footer ---------- */
.footer {
  padding-block: clamp(44px, 6vw, 68px) 26px;
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(244, 179, 24, .18), transparent 65%),
    linear-gradient(160deg, var(--azul) 0%, #000a6b 60%, #00063f 100%);
  color: #c8cef2;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--amarillo); }

.footer__top {
  display: grid;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.footer__brand { display: grid; align-content: start; }

.footer__logo {
  width: 168px;
  height: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
}
.footer__tagline { margin: 16px 0 0; font-size: .92rem; color: #c8cef2; }

.footer__heading {
  margin-bottom: 12px;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amarillo);
}

.footer__nav { display: grid; align-content: start; gap: 8px; font-size: .93rem; }
.footer__contact { font-size: .93rem; }
.footer__contact p { margin-bottom: .7em; }

.footer__bottom {
  display: grid;
  gap: 12px;
  padding-top: 22px;
  font-size: .82rem;
}
.footer__copy { margin: 0; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer__legal a { color: #c8cef2; }

/* ---------- 15. WhatsApp flotante ---------- */
/* Amarillo corporativo con el glifo en azul: se ve en cualquier fondo y no desafina */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--azul);
  box-shadow: 0 14px 28px -12px rgba(217, 156, 7, .8), 0 0 0 4px rgba(255, 255, 255, .7);
  transition: transform var(--transicion), background-color var(--transicion);
}
.wa-float:hover { background: var(--amarillo-oscuro); transform: translateY(-2px) scale(1.04); text-decoration: none; }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- 16. Páginas legales (aviso legal, privacidad, cookies) ---------- */
/* Cabecera y pie iguales a la home; solo cambia el bloque de contenido, que
   se limita a 880 px de ancho para que la lectura sea cómoda */
.legal {
  padding-block: clamp(44px, 5.5vw, 76px) clamp(60px, 7vw, 100px);
  background:
    radial-gradient(900px 380px at 100% 0%, var(--azul-suave), transparent 70%),
    var(--fondo);
}
.legal__inner { max-width: 880px; }

.legal__title {
  margin-bottom: .3em;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem);
  color: var(--azul);
}

.legal__lead {
  max-width: 58ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.1rem);
  color: var(--tinta-2);
}

.legal__updated {
  margin-top: 18px;
  font-size: .82rem;
  color: var(--tinta-3);
}

.legal__body { margin-top: clamp(28px, 4vw, 44px); }
.legal__body h2 {
  margin-bottom: .5em;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  color: var(--azul);
}
.legal__body h2 + p { margin-top: 0; }
.legal__body p { max-width: 68ch; }

.legal__body ul {
  display: grid;
  gap: 10px;
  max-width: 68ch;
  margin-bottom: 1em;
}
.legal__body li { position: relative; padding-left: 20px; }
.legal__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amarillo);
}
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }

/* Ficha de datos del titular / responsable */
.legal__data {
  display: grid;
  max-width: 68ch;
  margin: 0 0 1.4em;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  overflow: hidden;
}
.legal__data > div {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 20px;
}
.legal__data > div + div { border-top: 1px solid var(--borde); }
.legal__data dt {
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
}
.legal__data dd { margin: 0; }

/* Dato pendiente de confirmar antes de publicar (NIF, correo…) */
.legal__pending {
  padding: 1px 7px;
  border: 1px dashed var(--amarillo-oscuro);
  border-radius: 6px;
  background: var(--amarillo-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  color: #8a5b00;
  white-space: nowrap;
}

/* Enlaces cruzados entre las tres páginas legales */
.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--borde);
  font-size: .92rem;
}
.legal__nav a { font-weight: 600; color: var(--tinta-2); }
.legal__nav a:hover { color: var(--azul); }
.legal__nav a[aria-current="page"] {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 17. Responsive ---------- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--azul);
  }
  .split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; }
  .split__body { align-self: center; }
  .split__media { display: grid; }
  .contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .footer__top { grid-template-columns: 1fr .95fr 1.1fr; gap: 40px; }
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}

@media (max-width: 899px) {
  .header__inner {
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
  }
  .brand { gap: 8px; }
  .brand__icon { height: 36px; }
  .brand__name { font-size: 1.05rem; }
  .brand__claim { font-size: .66rem; letter-spacing: .1em; }
  .header__cta { display: none; }
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    top: 69px; /* 68px de cabecera + 1px de borde inferior */
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 14px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 13px 12px; border-radius: var(--radio-sm); font-size: 1rem; }
  .nav__cta { display: inline-flex; margin-top: 12px; min-height: 48px; }

  body.is-menu-open { overflow: hidden; }

  section[id], footer[id] { scroll-margin-top: 84px; }

  /* En móvil la foto de la sección va arriba y la lista de tamaños debajo:
     se mantiene el orden del HTML (.split__media antes que .split__body) */
  .media--tall { min-height: 0; }
}

@media (max-width: 620px) {
  .grid--4 { grid-template-columns: 1fr; }
  .size { grid-template-columns: 1fr; gap: 4px; }
  .size__for { font-size: 1rem; }
  .card__text { font-size: 1rem; }
  .faq__q { padding: 16px 18px; font-size: 1rem; }
  .faq__a { padding: 0 18px 18px; }
  .faq__a p,
  .faq__a li { font-size: 1rem; }
  .contact__value { font-size: 1rem; }
  .hero__actions .btn { width: 100%; min-height: 56px; }
  /* 16px: por debajo de esa medida iOS hace zoom al enfocar un campo */
  .field__input { font-size: 1rem; }
  .check { font-size: .9rem; }
  .footer__logo { width: 144px; }
  /* Enlaces legales con altura de toque cómoda (van en una fila, sin zoom) */
  .footer__legal { gap: 4px 18px; }
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Hueco bajo el pie: el botón flotante de WhatsApp no tapa el copyright */
  .footer__bottom { padding-bottom: 42px; }
  .legal__data > div { grid-template-columns: 1fr; gap: 2px; }
  .wa-float {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .wa-float svg { width: 27px; height: 27px; }
}

/* iOS hace zoom al enfocar un campo con fuente menor de 16 px. Afecta también
   al iPad en horizontal, que ya usa el diseño de escritorio, por eso se corrige
   aquí y no solo en el bloque de 620 px. */
@supports (-webkit-touch-callout: none) {
  .field__input { font-size: 1rem; }
}

/* Pantallas sin hover: evita que los efectos "hover" se queden pegados al tocar
   (tarjetas elevadas, fotos ampliadas, enlaces resaltados…) */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .size:hover,
  .wa-float:hover { transform: none; }

  .card:hover {
    border-color: var(--borde);
    box-shadow: var(--sombra-sm);
  }
  .size:hover { border-left-color: var(--amarillo); }

  .media:hover img,
  .photo-strip__item:hover img { transform: none; }

  .faq__q:hover { background: transparent; }
  .nav__link:not(.is-active):hover { color: var(--tinta); background: 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;
  }
  .js .reveal { opacity: 1; transform: none; }
}