@charset "UTF-8";
/* Limpiezas Vistamar — hoja de estilos única.
   Sin frameworks: la web anterior cargaba 3,8 MB de JS y 1,6 MB de CSS. */

/* ---------------------------------------------------------------- Fuentes */
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/lato-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --mar: #00aae8;          /* cian de marca */
  --mar-hondo: #0085b5;
  --mar-noche: #005ea3;
  --mar-claro: #e8f7fd;
  --tinta: #14303d;
  --tinta-suave: #52707d;
  --linea: #dde7ec;
  --fondo: #ffffff;
  --fondo-alt: #f5fafc;
  --exito: #1f9d55;
  --radio: 10px;
  --radio-l: 16px;
  --sombra: 0 1px 3px rgba(20, 48, 61, .08), 0 8px 24px rgba(20, 48, 61, .06);
  --sombra-alta: 0 2px 6px rgba(20, 48, 61, .10), 0 16px 40px rgba(20, 48, 61, .12);
  --ancho: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
}

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

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 900; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); font-weight: 700; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

a { color: var(--mar-hondo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mar-noche); }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--mar-noche); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radio) 0; font-weight: 700;
}
.saltar:focus { left: 0; color: #fff; }

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

/* ---------------------------------------------------------------- Layout */
.contenedor {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto; padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: 760px; }

.seccion { padding-block: clamp(3rem, 8vw, 5.5rem); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--mar { background: var(--mar-claro); }

.rejilla { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); align-items: start; }
@media (min-width: 640px)  { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.encabezado-seccion { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.encabezado-seccion--centro { margin-inline: auto; text-align: center; }
.encabezado-seccion p { color: var(--tinta-suave); font-size: 1.125rem; margin-bottom: 0; }

.antetitulo {
  display: block; font-size: .8rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mar-hondo); margin-bottom: .6rem;
}

/* ---------------------------------------------------------------- Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85rem 1.6rem; border-radius: var(--radio);
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--principal { background: var(--mar); color: #fff; }
.boton--principal:hover { background: var(--mar-hondo); color: #fff; }

.boton--wasap { background: #25d366; color: #0a2e18; }
.boton--wasap:hover { background: #1eb955; color: #06230f; }

.boton--fantasma { border-color: var(--mar); color: var(--mar-hondo); background: transparent; }
.boton--fantasma:hover { background: var(--mar); color: #fff; }

.boton--claro { background: #fff; color: var(--mar-noche); }
.boton--claro:hover { background: var(--mar-claro); color: var(--mar-noche); }

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

/* ---------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}
.cabecera__logo { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; text-decoration: none; }
.cabecera__logo img { width: 50px; height: 47px; object-fit: contain; }
.cabecera__marca { display: flex; flex-direction: column; line-height: 1.12; }
.cabecera__marca strong { font-size: 1.1rem; font-weight: 900; color: var(--tinta); letter-spacing: -.02em; }
.cabecera__marca small { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mar-hondo); }
@media (max-width: 420px) { .cabecera__marca strong { font-size: .98rem; } }

.nav__lista {
  list-style: none; display: flex; align-items: center;
  gap: .25rem; margin: 0; padding: 0;
}
.nav__lista a {
  display: block; padding: .5rem .75rem; border-radius: var(--radio);
  color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .975rem;
}
.nav__lista a:hover { background: var(--mar-claro); color: var(--mar-noche); }
.nav__lista a[aria-current="page"] { color: var(--mar-hondo); background: var(--mar-claro); }
.nav__lista .nav__cta a,
.nav__lista .nav__cta a[aria-current="page"] {
  background: var(--mar); color: #fff; margin-left: .5rem; padding-inline: 1.1rem;
}
.nav__lista .nav__cta a:hover { background: var(--mar-hondo); }

.nav__tel {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 900; color: var(--mar-noche); text-decoration: none; white-space: nowrap;
}
.nav__tel:hover { color: var(--mar); }

.menu-boton {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 2px solid var(--linea); border-radius: var(--radio);
  padding: .55rem .8rem; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer;
}
.menu-boton__barras { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.menu-boton__barras::before,
.menu-boton__barras::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after  { top: 6px; }

@media (max-width: 980px) {
  .menu-boton { display: inline-flex; }
  .cabecera__nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra); padding: .75rem var(--gutter) 1.25rem;
  }
  .cabecera__nav[hidden] { display: none; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__lista a { padding: .8rem 1rem; font-size: 1.05rem; }
  .nav__lista .nav__cta a { margin-left: 0; margin-top: .5rem; text-align: center; }
  .nav__tel { padding: .8rem 1rem; }
}
@media (min-width: 981px) {
  .cabecera__nav { display: flex !important; align-items: center; gap: 1rem; }
  .cabecera__nav[hidden] { display: flex !important; }
}

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; color: #fff; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0, 45, 70, .86) 0%, rgba(0, 70, 120, .70) 38%, rgba(0, 120, 175, .38) 72%, rgba(0, 170, 232, .22) 100%);
}
.hero__cuerpo { padding-block: clamp(3.5rem, 11vw, 7rem); max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: .4em; text-wrap: balance; }
.hero__entrada { font-size: clamp(1.075rem, 1rem + .5vw, 1.3rem); color: rgba(255, 255, 255, .94); margin-bottom: 1.8rem; }
.hero .antetitulo { color: #a5e4ff; }
.hero__avales {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 2.2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: .95rem; color: rgba(255, 255, 255, .92);
}
.hero__aval { display: flex; align-items: center; gap: .5rem; font-weight: 700; }

.hero--interior { text-align: left; }
.hero--interior .hero__cuerpo { padding-block: clamp(2.5rem, 7vw, 4.5rem); max-width: 46rem; }

/* ---------------------------------------------------------------- Migas */
.migas { background: var(--fondo-alt); border-bottom: 1px solid var(--linea); font-size: .9rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .7rem 0; }
.migas li { margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--tinta-suave); }
.migas li + li::before { content: "›"; color: var(--linea); }
.migas a { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- Tarjetas */
.tarjeta {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-l);
  overflow: hidden; box-shadow: var(--sombra);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); border-color: #c6dfe9; }
.tarjeta__media { aspect-ratio: 4 / 3; background: var(--mar-claro); }
.tarjeta__media img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__cuerpo { padding: 1.15rem 1.35rem 1.25rem; display: flex; flex-direction: column; }
.tarjeta__cuerpo h3 { margin-bottom: .35rem; }
.tarjeta__cuerpo h3 a { color: inherit; text-decoration: none; }
.tarjeta__cuerpo h3 a:hover { color: var(--mar-hondo); }
.tarjeta__cuerpo p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: .55rem; }
/* El enlace va justo detrás del texto, no empujado al fondo de la caja: con
   textos de distinta longitud eso dejaba huecos enormes en las más cortas. */
.tarjeta__pie { margin-top: .15rem; margin-bottom: 0; font-weight: 700; }
.tarjeta__pie a { text-decoration: none; display: inline-flex; align-items: center; gap: .35em; }
.tarjeta__pie a::after { content: "→"; transition: transform .18s; }
.tarjeta__pie a:hover::after { transform: translateX(3px); }

/* Tarjeta con icono, sin imagen */
.ventaja { padding: 1.6rem; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-l); }
.ventaja__icono {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 12px; background: var(--mar-claro); color: var(--mar-hondo); margin-bottom: 1rem;
}
.ventaja__icono svg { width: 26px; height: 26px; }
.ventaja h3 { margin-bottom: .35rem; }
.ventaja p { color: var(--tinta-suave); margin-bottom: 0; font-size: .975rem; }

/* ---------------------------------------------------------------- Dos columnas */
.duo { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--invertido .duo__media { order: -1; }
}
.duo__media img { border-radius: var(--radio-l); box-shadow: var(--sombra); width: 100%; }
/* En fichas largas de servicio y zona, la tarjeta lateral acompaña al scroll. */
@media (min-width: 880px) {
  .duo--pegajoso { align-items: start; }
  .duo--pegajoso .duo__media { position: sticky; top: 96px; }
}
.duo__texto > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Listas de comprobación */
.lista-check { list-style: none; padding: 0; }
.lista-check li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: .6rem;
  border-left: 3px solid var(--mar); border-bottom: 3px solid var(--mar);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ---------------------------------------------------------------- Chips de zona */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem; }
.chips li { margin: 0; }
.chips a, .chips span {
  display: inline-block; padding: .4rem .9rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  font-size: .925rem; font-weight: 700; color: var(--tinta-suave); text-decoration: none;
}
.chips a:hover { border-color: var(--mar); color: var(--mar-hondo); background: var(--mar-claro); }

/* ---------------------------------------------------------------- CTA */
.cta { background: linear-gradient(115deg, var(--mar-noche), var(--mar)); color: #fff; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .93); font-size: 1.125rem; }
.cta .contenedor { text-align: center; }
.cta .botonera { justify-content: center; }
.cta__nota { font-size: .925rem; color: rgba(255, 255, 255, .8); margin-top: 1.2rem; margin-bottom: 0; }

/* ---------------------------------------------------------------- Galería */
.galeria { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.galeria figure { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--mar-claro); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.galeria figure:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 700; font-size: 1.0625rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--mar); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 1.2rem; color: var(--tinta-suave); }
.faq details > div > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Formulario */
.formulario { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-weight: 700; font-size: .95rem; }
.campo .pista { font-size: .875rem; color: var(--tinta-suave); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--tinta);
  padding: .75rem .9rem; border: 2px solid var(--linea); border-radius: var(--radio);
  background: #fff; width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--mar); outline: none; box-shadow: 0 0 0 3px rgba(0, 170, 232, .18);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.campo--check input { width: auto; margin-top: .3rem; flex-shrink: 0; }
.campo--check label { font-weight: 400; font-size: .925rem; color: var(--tinta-suave); }
.requerido { color: #c0392b; }

.aviso {
  padding: 1rem 1.2rem; border-radius: var(--radio);
  background: var(--mar-claro); border-left: 4px solid var(--mar);
  font-size: .95rem; color: var(--tinta-suave);
}
.aviso > :last-child { margin-bottom: 0; }
.aviso--tarea {
  background: #fff8e6; border-left-color: #e6a700;
}

/* ---------------------------------------------------------------- Datos de contacto */
.datos-contacto { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.datos-contacto li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.datos-contacto svg { width: 22px; height: 22px; color: var(--mar); flex-shrink: 0; margin-top: .25rem; }
.datos-contacto strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.datos-contacto a { font-size: 1.1rem; font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- Pie */
.pie { background: var(--tinta); color: #b9ccd5; padding-block: clamp(2.5rem, 6vw, 4rem) 0; font-size: .95rem; }
.pie a { color: #dbe9ef; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie h2, .pie h3 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.pie__rejilla { display: grid; gap: 2rem; }
@media (min-width: 700px)  { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.pie__logo { width: 76px; height: 71px; object-fit: contain; margin-bottom: 1.1rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .55rem; }
.pie__redes { display: flex; gap: .65rem; margin-top: 1.2rem; }
.pie__redes a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; color: #dbe9ef;
}
.pie__redes a:hover { background: var(--mar); border-color: var(--mar); color: #fff; }
.pie__redes svg { width: 18px; height: 18px; }
.pie__kit { margin-top: 2.5rem; padding: 1.2rem; background: #fff; border-radius: var(--radio); text-align: center; }
.pie__kit img { margin-inline: auto; max-width: 560px; width: 100%; }
.pie__legal {
  margin-top: 2.5rem; padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between; font-size: .875rem;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.pie__legal li { margin: 0; }

/* ---------------------------------------------------------------- WhatsApp flotante */
.wasap-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: transform .18s;
}
.wasap-flotante:hover { transform: scale(1.06); color: #fff; }
.wasap-flotante svg { width: 30px; height: 30px; }
@media (min-width: 700px) { .wasap-flotante { right: 1.5rem; bottom: 1.5rem; } }

/* ---------------------------------------------------------------- Texto legal */
.texto-legal { max-width: 48rem; }
.texto-legal h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.texto-legal h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.texto-legal table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .95rem; }
.texto-legal th, .texto-legal td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.texto-legal th { background: var(--fondo-alt); font-weight: 700; }

.tabla-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- Impresión */
@media print {
  .cabecera, .pie, .wasap-flotante, .cta, .migas { display: none !important; }
  body { font-size: 11pt; color: #000; }
}

/* ==================================================================
   INTERACCIÓN Y MOVIMIENTO
   Todo lo de aquí se desactiva por completo con prefers-reduced-motion
   (ver el bloque del final).
   ================================================================== */

/* ---- Aparición al hacer scroll ---------------------------------- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
              transform .55s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.revelar.es-visible { opacity: 1; transform: none; }
/* Escalonado dentro de una rejilla: cada tarjeta entra un pelín después */
.revelar[data-retraso="1"] { transition-delay: .07s; }
.revelar[data-retraso="2"] { transition-delay: .14s; }
.revelar[data-retraso="3"] { transition-delay: .21s; }
.revelar[data-retraso="4"] { transition-delay: .28s; }
/* Sin JS no se oculta nada: la clase sólo se aplica si el script arranca */
.sin-js .revelar { opacity: 1; transform: none; }

/* ---- Botones ---------------------------------------------------- */
.boton {
  position: relative;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
.boton--principal:hover { box-shadow: 0 6px 18px rgba(0, 170, 232, .35); }
.boton--wasap:hover     { box-shadow: 0 6px 18px rgba(37, 211, 102, .38); }
.boton--claro:hover     { box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.boton--fantasma:hover  { box-shadow: 0 6px 18px rgba(0, 170, 232, .25); }

/* ---- Navegación: subrayado que crece desde el centro ------------ */
.nav__lista a { position: relative; transition: color .2s ease, background-color .2s ease; }
@media (min-width: 981px) {
  .nav__lista li:not(.nav__cta) a::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: .28rem;
    height: 2px; background: var(--mar); border-radius: 2px;
    transition: left .22s cubic-bezier(.2, .7, .3, 1), right .22s cubic-bezier(.2, .7, .3, 1);
  }
  .nav__lista li:not(.nav__cta) a:hover::after,
  .nav__lista li:not(.nav__cta) a[aria-current="page"]::after {
    left: .75rem; right: .75rem;
  }
  .nav__lista li:not(.nav__cta) a:hover { background: transparent; }
  .nav__lista li:not(.nav__cta) a[aria-current="page"] { background: transparent; }
}
.nav__cta a { transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.nav__cta a:hover { box-shadow: 0 5px 16px rgba(0, 170, 232, .35); transform: translateY(-1px); }
.nav__tel { transition: color .2s ease, transform .2s ease; }
.nav__tel:hover { transform: translateY(-1px); }
.nav__tel svg { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.nav__tel:hover svg { transform: rotate(-12deg) scale(1.1); }

/* La cabecera gana sombra al separarse de lo alto de la página */
.cabecera { transition: box-shadow .25s ease, background-color .25s ease; }
.cabecera.esta-desplazada { box-shadow: 0 2px 20px rgba(20, 48, 61, .10); }

/* ---- Tarjetas --------------------------------------------------- */
.tarjeta {
  transition: box-shadow .28s ease, transform .28s cubic-bezier(.2, .7, .3, 1),
              border-color .28s ease;
}
.tarjeta:hover { transform: translateY(-5px); }
.tarjeta__media { overflow: hidden; }
.tarjeta__media img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.tarjeta:hover .tarjeta__media img { transform: scale(1.06); }
.tarjeta__cuerpo h3 a { transition: color .2s ease; }
/* Toda la tarjeta reacciona aunque el ratón no esté justo sobre el enlace */
.tarjeta:hover .tarjeta__cuerpo h3 a { color: var(--mar-hondo); }
.tarjeta:hover .tarjeta__pie a::after { transform: translateX(4px); }
.tarjeta:focus-within { box-shadow: var(--sombra-alta); border-color: var(--mar); }

/* ---- Tarjetas de ventaja (icono) -------------------------------- */
.ventaja {
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              box-shadow .28s ease, border-color .28s ease;
}
.ventaja:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: #c6dfe9;
}
.ventaja__icono {
  transition: transform .35s cubic-bezier(.2, .7, .3, 1),
              background-color .28s ease, color .28s ease;
}
.ventaja:hover .ventaja__icono {
  background: var(--mar); color: #fff;
  transform: scale(1.08) rotate(-5deg);
}

/* ---- Chips de zona ---------------------------------------------- */
.chips a { transition: border-color .2s ease, color .2s ease,
                       background-color .2s ease, transform .2s ease; }
.chips a:hover { transform: translateY(-2px); }

/* ---- Galería ---------------------------------------------------- */
.galeria figure { position: relative; }
.galeria img { transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .4s ease; }
.galeria figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 61, 92, .35), transparent 55%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.galeria figure:hover img { transform: scale(1.06); }
.galeria figure:hover::after { opacity: 1; }

/* ---- FAQ -------------------------------------------------------- */
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--mar-hondo); }
.faq summary::after { transition: transform .25s ease, color .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq details[open] > div { animation: desplegar .3s cubic-bezier(.2, .7, .3, 1); }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Enlaces del pie -------------------------------------------- */
.pie a { transition: color .2s ease, transform .2s ease; }
.pie ul a:hover { transform: translateX(3px); display: inline-block; }
.pie__redes a { transition: background-color .25s ease, border-color .25s ease,
                            color .25s ease, transform .25s ease; }
.pie__redes a:hover { transform: translateY(-3px); }

/* ---- WhatsApp flotante: anillo que late ------------------------- */
.wasap-flotante { transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease; }
.wasap-flotante::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: latido 2.6s ease-out infinite;
}
.wasap-flotante:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37, 211, 102, .5); }
.wasap-flotante:hover::before { animation-play-state: paused; }
@keyframes latido {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---- Campos de formulario --------------------------------------- */
.campo input, .campo select, .campo textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.campo input:hover:not(:focus),
.campo select:hover:not(:focus),
.campo textarea:hover:not(:focus) { border-color: #c2d7e0; }

/* ---- Enlaces de texto dentro del contenido ---------------------- */
.texto-legal a:not(.boton), .duo__texto a:not(.boton), .aviso a {
  background-image: linear-gradient(var(--mar), var(--mar));
  background-size: 0% 2px; background-repeat: no-repeat;
  background-position: left bottom;
  text-decoration: none;
  transition: background-size .25s cubic-bezier(.2, .7, .3, 1), color .2s ease;
  padding-bottom: 1px;
}
.texto-legal a:not(.boton):hover, .duo__texto a:not(.boton):hover, .aviso a:hover {
  background-size: 100% 2px;
}


/* ==================================================================
   RESPONSIVE — repaso por tamaños
   ================================================================== */

/* Nada se sale nunca por el lado */
html, body { overflow-x: hidden; }
.tabla-scroll, .faq details > div { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
h1, h2, h3 { overflow-wrap: break-word; }

/* --- Móvil pequeño (320-380 px): iPhone SE y similares ----------- */
@media (max-width: 380px) {
  :root { --gutter: .9rem; }
  body { font-size: 1rem; }
  .boton { width: 100%; padding-inline: 1rem; }
  .botonera { gap: .6rem; }
  .cabecera__logo img { width: 42px; height: 39px; }
  .cabecera__marca small { font-size: .66rem; letter-spacing: .06em; }
  .menu-boton span:not(.menu-boton__barras) { display: none; }
  .hero__avales { gap: .9rem; }
  .hero__aval { font-size: .875rem; }
  .tarjeta__cuerpo { padding: 1rem 1.1rem 1.1rem; }
  .datos-contacto a { font-size: 1rem; overflow-wrap: anywhere; }
  .pie__legal { font-size: .8rem; }
}

/* --- Móvil en horizontal: el hero no debe ocupar 3 pantallas ----- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero__cuerpo { padding-block: 2rem; }
  .hero__avales { margin-top: 1.2rem; padding-top: 1rem; }
  .cabecera { position: static; }
}

/* --- Tablet vertical (640-880 px) -------------------------------- */
@media (min-width: 640px) and (max-width: 879px) {
  .duo { gap: 2rem; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .hero__cuerpo { max-width: 34rem; }
}

/* --- Tablet horizontal / portátil pequeño ------------------------ */
@media (min-width: 880px) and (max-width: 1060px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Pantallas grandes (>1400 px): que no quede desangelado ------ */
@media (min-width: 1400px) {
  :root { --ancho: 1240px; }
  .hero__cuerpo { max-width: 44rem; }
}

/* --- Pantallas muy anchas ---------------------------------------- */
@media (min-width: 1800px) {
  :root { --ancho: 1320px; }
  body { font-size: 1.125rem; }
}

/* --- Áreas táctiles: en pantallas sin ratón, todo más cómodo ----- */
@media (hover: none) {
  /* Sin ratón no hay hover: quitamos los efectos que se quedan "pegados" */
  .tarjeta:hover, .ventaja:hover, .boton:hover,
  .chips a:hover, .pie__redes a:hover { transform: none; }
  .tarjeta:hover .tarjeta__media img,
  .galeria figure:hover img { transform: none; }
  .nav__lista a { padding-block: .85rem; }       /* objetivo táctil ≥44 px */
  .faq summary { padding-block: 1.3rem; }
  .pie li { margin-bottom: .8rem; }
  .pie ul a { display: inline-block; padding-block: .2rem; }
}

/* --- Pantallas de alta densidad ---------------------------------- */
@media (min-resolution: 2dppx) {
  body { -webkit-font-smoothing: antialiased; }
}

/* --- Modo de alto contraste -------------------------------------- */
@media (prefers-contrast: more) {
  :root { --tinta-suave: #2c4a56; --linea: #94b3c0; }
  .boton { border-color: currentColor; }
}

/* --- Movimiento reducido: se desactiva TODO lo de arriba --------- */
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wasap-flotante::before { animation: none; }
  .faq details[open] > div { animation: none; }
  .boton:hover, .tarjeta:hover, .ventaja:hover,
  .chips a:hover, .pie__redes a:hover, .wasap-flotante:hover { transform: none; }
  .tarjeta:hover .tarjeta__media img,
  .galeria figure:hover img { transform: none; }
  .ventaja:hover .ventaja__icono { transform: none; }
  .nav__tel:hover svg { transform: none; }
}

/* ---- Servicio × zona (páginas de zona) -------------------------- */
.servicio-zona {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.4rem; background: #fff;
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.servicio-zona:hover { border-color: #c6dfe9; box-shadow: var(--sombra); transform: translateY(-3px); }
.servicio-zona__icono {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--mar-claro); color: var(--mar-hondo);
  transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.servicio-zona:hover .servicio-zona__icono {
  background: var(--mar); color: #fff; transform: scale(1.06) rotate(-5deg);
}
.servicio-zona__icono svg { width: 24px; height: 24px; }
.servicio-zona h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.servicio-zona p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: .5rem; }
.servicio-zona > div:last-child > :last-child { margin-bottom: 0; }
@media (max-width: 420px) {
  .servicio-zona { flex-direction: column; gap: .8rem; padding: 1.15rem; }
}
@media (hover: none) { .servicio-zona:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .servicio-zona:hover { transform: none; }
  .servicio-zona:hover .servicio-zona__icono { transform: none; }
}

/* ==================================================================
   UTILIDADES
   Sustituyen a los atributos style="…" en línea. Sin ellos la CSP
   necesitaría 'unsafe-inline' en style-src, que es justo lo que
   abre la puerta a la inyección de contenido.
   ================================================================== */
.sin-margen        { margin: 0; }
.sin-margen-abajo  { margin-bottom: 0; }
.margen-arriba     { margin-top: 1.5rem; }
.margen-arriba-s   { margin-top: 1.25rem; }
.margen-arriba-l   { margin-top: 2rem; }
.centrado          { text-align: center; }
.centrado .botonera { justify-content: center; }
.tarjeta--panel    { padding: 1.75rem; }

/* ---- Formulario embebido de Tally ------------------------------- */
.marco-formulario {
  border: 1px solid var(--linea); border-radius: var(--radio-l);
  background: #fff; overflow: hidden; margin-bottom: .9rem;
}
.marco-formulario iframe { display: block; width: 100%; border: 0; }
@media (max-width: 640px) { .marco-formulario { border-radius: var(--radio); } }