/* ============================================================
   Habitar Inmobiliaria — sistema de diseño
   Colores y tipografía según Manual de Identidad Corporativa 2022
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&family=Carlito:wght@400;700&display=swap');

:root {
  /* Paleta corporativa — únicos colores permitidos */
  --navy:        #33507E;   /* azul oscuro: titulares, fondos sólidos */
  --blue:        #3370B4;   /* azul medio: subtítulos, acentos */
  --lime:        #CAD22A;   /* verde lima: SOLO acento puntual y CTA */

  /* Derivados de los azules (permitido: tints/shades) */
  --navy-deep:   #24395A;
  --navy-soft:   #41618F;
  --blue-100:    #EAF0F8;
  --blue-200:    #D3E1F1;
  --lime-deep:   #B4BC1F;

  /* Neutros */
  --white:       #FFFFFF;
  --ink:         #23303F;
  --muted:       #5D6E85;
  --line:        #E3E9F2;
  --shell:       #F7F9FC;

  --font-title: 'Aller', 'Nunito Sans', 'PT Sans', 'Segoe UI', sans-serif;
  --font-body:  'Calibri', 'Carlito', 'Segoe UI', sans-serif;

  --wrap: 1160px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(35, 48, 63, .06);
  --shadow:    0 8px 30px rgba(51, 80, 126, .10);
  --shadow-lg: 0 20px 60px rgba(51, 80, 126, .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); }
p  { margin: 0 0 1rem; }
p.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--muted); }

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

/* El encabezado es fijo: sin este margen, saltar a #formulario deja el
   título del formulario escondido detrás de la barra. */
section[id], [id="formulario"], [id="cotizar"] { scroll-margin-top: 92px; }

/* Los botones del selector son ancla (#formulario-venta / #formulario-arriendo).
   Margen mayor para que al aterrizar se vea también el título de la sección
   y no solo el formulario suelto. */
.form-switch button[id] { scroll-margin-top: 150px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--shell { background: var(--shell); }
.section--tint  { background: var(--blue-100); }
.center { text-align: center; }

.eyebrow {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .75rem;
}
.section-head { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1rem;
  padding: .95rem 1.7rem;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--lime  { background: var(--lime); color: var(--navy-deep); box-shadow: 0 6px 18px rgba(202,210,42,.32); }
.btn--lime:hover  { background: var(--lime-deep); color: var(--navy-deep); }
.btn--navy  { background: var(--navy); color: var(--white); }
.btn--navy:hover  { background: var(--navy-deep); color: var(--white); }
.btn--blue  { background: var(--blue); color: var(--white); }
.btn--blue:hover  { background: var(--navy); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--blue-200); }
.btn--ghost:hover { background: var(--blue-100); color: var(--navy); }
.btn--on-navy { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--on-navy:hover { background: var(--white); color: var(--navy); }
.btn--sm { padding: .6rem 1.1rem; font-size: .92rem; }

/* ---------- Encabezado ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding: .85rem 0; }

/* El logo y los botones NO se encogen. Por omisión flex deja que todo
   ceda cuando no cabe, y eso aplastaba el logo un 15% (proporción 2.97
   → 2.54) y partía «Área de clientes» en tres líneas. Deformar el logo
   además incumple el manual: escalar siempre de forma uniforme.
   Quien cede es la navegación, y si aun así no cabe, el botón de
   clientes se oculta y queda en el menú y en el pie. */
.brand { flex: 0 0 auto; }
.brand img { height: 46px; width: auto; max-width: none; }

.header-cta { flex: 0 0 auto; }
.header-cta .btn { white-space: nowrap; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; min-width: 0; }
.nav a {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .97rem;
  color: var(--navy);
  position: relative;
  padding: .25rem 0;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 3px; background: var(--lime); border-radius: 2px;
  transition: right .22s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: .6rem; }

/* Área de clientes y centro de asistencia: en escritorio viven en el
   botón del encabezado; en móvil, dentro del menú desplegable. La barra
   ya carga 7 secciones, así que meterlos también ahí la desbordaría. */
.nav__movil { display: none; }

/* «Administración de inmuebles» es una etiqueta larga y la barra lleva 7
   secciones: sin esto los enlaces se parten en dos líneas y el encabezado
   se ve apretado. Se evita el corte de palabra y se va soltando espacio
   —primero el botón de clientes, luego la separación— antes de pasar al
   menú de hamburguesa. */
.nav a { white-space: nowrap; }

/* Medido: con «Área de clientes» entero, la barra pedía 1160px justos,
   que es exactamente el ancho máximo del contenedor. Cero holgura, así
   que reventaba. Se libera espacio por dos lados —la etiqueta pasa a
   «Clientes» y la separación baja a 1.4rem— y el corte se fija donde la
   cuenta deja de dar, no a ojo. */
.nav { gap: 1.4rem; }

@media (max-width: 1250px) { .header-cta .btn--clientes { display: none; } }
@media (max-width: 1180px) { .nav { gap: 1rem; } .nav a { font-size: .9rem; } }
@media (max-width: 1060px)  {
  .nav__movil { display: block; }
  .nav a { white-space: normal; font-size: .97rem; }
}

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--navy);
}

@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .header-cta .btn--phone { display: none; }
}

/* ---------- Banner de portada ----------
   Banda propia con la fotografía de la plaza de Salento y el lema encima.
   La foto va LIMPIA, sin velo de color: decisión de Sebas. El contraste
   del lema lo sostiene solo la sombra del texto, así que si algún día se
   cambia la fotografía hay que volver a comprobar que se lea. */
.banner {
  position: relative;
  display: grid;
  place-items: center;
  /* Banda más alta a propósito. La foto se muestra con «cover», que ya
     usa todo el ancho disponible: la única forma de que se vea MÁS
     fotografía y menos recorte es darle más altura. */
  min-height: clamp(320px, 44vw, 620px);
  padding: 2rem 1.25rem;
  text-align: center;
  background-color: var(--navy-deep);
  background-image: url('../assets/hero-salento.jpg');
  background-size: cover;
  background-position: center 55%;
}

/* Separación con el hero: corte recto marcado por un filete lima.
   Nada de difuminado — la fotografía llega limpia hasta el borde y el
   filete resuelve el canto, además de meter el color de acento de la
   marca justo donde se necesita un remate. */
.banner { border-bottom: 4px solid var(--lime); }

@supports (background-image: image-set(url('../assets/hero-salento.webp') type('image/webp'))) {
  .banner {
    background-image:
      image-set(url('../assets/hero-salento.webp') type('image/webp'),
                url('../assets/hero-salento.jpg') type('image/jpeg'));
  }
}

@media (max-width: 700px) {
  .banner {
    background-image: url('../assets/hero-salento-movil.jpg');
  }
}

/* Lema de marca: versalitas espaciadas y filete lima, como el original */
.banner__lema {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1rem, .72rem + 1.35vw, 2rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(20, 30, 48, .7);
  padding-bottom: .7rem;
  border-bottom: 3px solid var(--lime);
}

.hero {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 55%, #1C2E4A 100%);
  color: var(--white);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Elemento gráfico de apoyo: franjas diagonales ascendentes del manual */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 40px; pointer-events: none;
}
.hero::before {
  width: 620px; height: 150px; right: -140px; top: 40px;
  background: var(--blue); opacity: .30; transform: rotate(-34deg);
}
.hero::after {
  width: 620px; height: 150px; right: -80px; top: 210px;
  background: var(--navy-soft); opacity: .35; transform: rotate(-34deg);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero__lead { font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); color: rgba(255,255,255,.86); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__note { margin-top: 1.5rem; font-size: .92rem; color: rgba(255,255,255,.72); }

/* Buscador de intención */
.finder {
  margin-top: 2.75rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.finder__label { font-family: var(--font-title); font-weight: 800; color: var(--navy); margin: 0 0 .9rem; }
.finder__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.finder__opt {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--navy);
  font-family: var(--font-title); font-weight: 800;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.finder__opt span { font-family: var(--font-body); font-weight: 400; font-size: .88rem; color: var(--muted); }
.finder__opt:hover { border-color: var(--blue); background: var(--blue-100); color: var(--navy); transform: translateY(-3px); }

/* ---------- Cifras ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; text-align: center; }
.stat__num {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  color: var(--navy); line-height: 1; display: block;
}
.stat__num small { font-size: .5em; color: var(--blue); }
.stat__label { color: var(--muted); font-size: .95rem; margin: .45rem 0 0; }

/* ---------- Tarjetas ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display: flex; flex-direction: column;
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); color: inherit; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin-bottom: 1rem; }
.card__more {
  margin-top: auto; font-family: var(--font-title); font-weight: 800;
  color: var(--blue); display: inline-flex; align-items: center; gap: .35rem;
}
a.card:hover .card__more { color: var(--navy); }
a.card:hover .card__more svg { transform: translateX(4px); }
.card__more svg { transition: transform .2s var(--ease); }

.card__icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--blue-100); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.card--feature .card__icon { background: var(--navy); color: var(--white); }

/* Lista de chequeo */
.checks { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; }
.checks svg { flex: 0 0 auto; margin-top: .28rem; color: var(--lime); }
.checks strong { color: var(--navy); font-family: var(--font-title); }

/* Bloque partido texto/panel */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.panel {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem);
  position: relative; overflow: hidden;
}
.panel::after {
  content: ''; position: absolute; width: 380px; height: 110px;
  right: -110px; bottom: -30px; background: var(--blue);
  opacity: .35; border-radius: 34px; transform: rotate(-34deg);
}
.panel > * { position: relative; z-index: 1; }
.panel h2, .panel h3 { color: var(--white); }
.panel p { color: rgba(255,255,255,.85); }
.panel .checks strong { color: var(--white); }

/* Pasos numerados */
.steps { counter-reset: step; display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 4rem; min-height: 3rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.15rem;
  font-family: var(--font-title); font-weight: 900; font-size: 1.35rem;
  color: var(--blue); background: var(--blue-100);
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
}
.steps h3 { margin-bottom: .2rem; }
.steps p { color: var(--muted); margin: 0; }

/* Zonas */
.tags { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.tags li {
  font-family: var(--font-title); font-weight: 700; font-size: .95rem;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--blue-200); border-radius: 999px;
  padding: .5rem 1.1rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.tags li a { color: inherit; }
.tags li:hover { background: var(--blue-100); border-color: var(--blue); }

/* Preguntas frecuentes */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .75rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.15rem 1.4rem;
}
.faq details[open] { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.faq summary {
  font-family: var(--font-title); font-weight: 800; color: var(--navy);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--blue); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq p { margin: .85rem 0 0; color: var(--muted); }

/* Llamado final */
.cta-band {
  background: linear-gradient(140deg, var(--blue) 0%, var(--navy) 70%);
  color: var(--white); border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem); text-align: center;
  position: relative; overflow: hidden;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.88); max-width: 56ch; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.75rem; }

/* ---------- Pie ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; font-size: .95rem; }
.site-footer h4 { color: var(--white); font-size: 1rem; margin-bottom: .9rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2.5rem; }
.site-footer img { height: 52px; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--lime); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.social { display: flex; gap: .7rem; margin-top: 1rem; }
.social a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--white);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.social a:hover { background: var(--lime); color: var(--navy-deep); transform: translateY(-2px); }
.footer-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  font-size: .88rem; color: rgba(255,255,255,.6);
}

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--lime); color: var(--navy-deep);
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(35,48,63,.28);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.07); color: var(--navy-deep); }

/* Cabecera interior de página */
.page-head {
  background: var(--navy); color: var(--white);
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  position: relative; overflow: hidden;
}
.page-head::after {
  content: ''; position: absolute; width: 560px; height: 140px;
  right: -120px; top: 30px; background: var(--blue);
  opacity: .32; border-radius: 38px; transform: rotate(-34deg);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: var(--white); margin-bottom: .4rem; }
.page-head p { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0; }
.crumb { font-size: .88rem; color: rgba(255,255,255,.65); margin-bottom: .9rem; }
.crumb a { color: rgba(255,255,255,.8); }
.crumb a:hover { color: var(--lime); }

/* Formulario */
.form-grid { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-family: var(--font-title); font-weight: 700; color: var(--navy); font-size: .93rem; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .86rem; color: var(--muted); }

/* ---------- Formularios embebidos de HubSpot ----------
   ⚠️ Estos formularios se pintan DENTRO de un <iframe class="hs-form-iframe">.
   El CSS de este archivo NO cruza al iframe: los colores, la tipografía y el
   botón del formulario se configuran en HubSpot (Marketing → Formularios →
   editar → Estilo), no aquí. Lo único que controlamos desde el sitio es el
   contenedor y el bloque de respaldo. */
.hs-form-target { min-height: 120px; }
.hs-form-target h3 { margin-bottom: .3rem; }
.hs-form-target p { color: var(--muted); }
.hs-form-target iframe.hs-form-iframe { width: 100% !important; border: 0; display: block; }

/* Aviso mientras HubSpot pinta: sin esto el visitante ve un espacio
   en blanco y cree que la página está rota. */
.hs-form-cargando {
  color: var(--muted); font-size: .95rem;
  display: flex; align-items: center; gap: .6rem;
}
.hs-form-cargando::before {
  content: ''; width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid var(--blue-200); border-top-color: var(--blue);
  border-radius: 50%; animation: hs-giro .7s linear infinite;
}
@keyframes hs-giro { to { transform: rotate(360deg); } }

/* Selector entre dos formularios (captación: arriendo o venta) */
.form-switch {
  display: flex; gap: .4rem; margin-bottom: 1.4rem;
  background: var(--blue-100); padding: .35rem; border-radius: 12px;
}
.form-switch button {
  flex: 1; cursor: pointer;
  font-family: var(--font-title); font-weight: 800; font-size: .95rem;
  color: var(--navy); background: transparent;
  border: 0; border-radius: 9px; padding: .7rem .9rem;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-switch button:hover { background: rgba(255,255,255,.6); }
.form-switch button[aria-pressed="true"] {
  background: var(--white); color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--lime); color: var(--navy-deep);
  padding: .75rem 1.25rem; font-family: var(--font-title); font-weight: 800; z-index: 100;
}
.skip-link:focus { left: 0; }

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

/* Botones apilados a ancho completo (tarjeta que lleva al formulario) */
.acciones-apiladas { display: grid; gap: .75rem; margin-top: 1.25rem; }
.acciones-apiladas .btn { justify-content: center; }