/* path: grupo-veterinario/landing-descargas/css/secciones.css
   Las zonas de la página: aviso de Instagram, cabecera, cierre,
   WhatsApp flotante y pie.
   Parte de la landing de descargables. El índice de qué hay en cada
   fichero está en `landing-descargas/LEEME.md`. */

/* ─── AVISO DE INSTAGRAM ─────────────────────────────────
   El navegador dentro de Instagram rompe las descargas. Como TODO el
   tráfico llega de ahí, esto no es un detalle: es el principal modo de
   fallo de la página. Barra fina, no modal, y se cierra.               */
.aviso-ig{
  display:none;
  background:var(--tinta);color:var(--papel);
  padding:.7rem 0;font-size:.82rem;
  padding-top:max(.7rem, env(safe-area-inset-top));
}
body[data-ig="1"] .aviso-ig{display:block}
.aviso-ig .env{display:flex;align-items:center;gap:.8rem}
.aviso-ig p{flex:1;line-height:1.4}
.aviso-ig b{font-weight:600}
.aviso-ig button{
  flex:none;background:none;border:0;color:inherit;opacity:.6;
  font:inherit;cursor:pointer;padding:.35rem;min-width:44px;min-height:44px;
}
.aviso-ig button:hover{opacity:1}

/* ─── CABECERA ───────────────────────────────────────── */
.cab{padding:3rem 0 2.2rem}
@media (min-width:48rem){ .cab{padding:4.5rem 0 3rem} }

.marca{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--tinta-media);
  padding:.4rem .8rem .4rem .5rem;
  border:1px solid var(--linea);border-radius:99px;
  background:var(--papel-alto);
}
.marca svg{width:15px;height:15px;color:var(--acento)}

h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem, 12vw, 5.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:1.3rem 0 0;
  max-width:14ch;
  text-wrap:balance;
}
h1 .viva{
  color:var(--acento);
  transition:color .4s var(--salida);
}

.entradilla{
  font-size:1.05rem;
  color:var(--tinta-media);
  max-width:38ch;
  margin-top:1.1rem;
}
@media (min-width:48rem){ .entradilla{font-size:1.15rem} }

/* ─── CIERRE ─────────────────────────────────────────────
   El paso siguiente. En Venezuela la conversación pasa por WhatsApp, así
   que aquí no hay formulario: hay un botón que abre el chat con el
   mensaje ya escrito.                                                  */
.cierre{
  border-top:1px solid var(--linea);
  background:var(--papel-alto);
  padding:3rem 0 3.2rem;
}
.cierre h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem, 6vw, 2.3rem);line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance;max-width:18ch;
}
.cierre .sub{color:var(--tinta-media);margin-top:.7rem;max-width:40ch}

.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.5rem;
  font:700 1rem/1 var(--sans);
  padding:1rem 1.5rem;min-height:52px;
  border-radius:99px;
  background:var(--acento);color:var(--papel-alto);
  text-decoration:none;
  box-shadow:var(--sombra);
  transition:background .2s var(--salida), transform .12s var(--salida);
}
@media (prefers-color-scheme: dark){ .wa{color:#0f1613} }
.wa:hover{background:var(--acento-hondo)}
.wa:active{transform:scale(.97)}
.wa svg{width:20px;height:20px;flex:none}

.datos{
  display:grid;grid-template-columns:1fr;gap:1.6rem;
  margin-top:2.4rem;padding-top:1.8rem;
  border-top:1px solid var(--linea);
  font-size:.9rem;color:var(--tinta-media);
}
@media (min-width:34rem){ .datos{grid-template-columns:1fr 1fr;gap:2.4rem} }
.datos .et{
  font-weight:600;color:var(--tinta);margin-bottom:.35rem;font-size:.85rem;
}
.datos a{color:var(--acento);text-decoration:none;font-weight:500}
.datos a:hover{text-decoration:underline}
.mapa{display:inline-block;margin-top:.55rem}

/* ─── WHATSAPP FLOTANTE ──────────────────────────────────
   El botón se queda pegado abajo mientras se navega. La investigación de
   2026 es clara con esto: en móvil lo que está al alcance del pulgar y
   siempre visible se usa, y lo que hay que ir a buscar al final, no.

   Va con TEXTO, no solo el icono: un círculo verde con un glifo obliga a
   adivinar, y aquí la acción es la que paga la campaña.                */
.flota{
  position:fixed;
  right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:40;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.9rem 1.25rem;min-height:52px;
  border-radius:99px;
  background:var(--acento);color:var(--papel-alto);
  font:700 .95rem/1 var(--sans);
  text-decoration:none;
  box-shadow:0 4px 12px -2px rgb(20 26 23 / .28), 0 12px 32px -8px rgb(20 26 23 / .35);
  transition:background .2s var(--salida), transform .22s var(--salida),
             opacity .22s var(--salida);
}
@media (prefers-color-scheme: dark){
  .flota{
    color:#0f1613;
    box-shadow:0 4px 12px -2px rgb(0 0 0 / .5), 0 12px 32px -8px rgb(0 0 0 / .6);
  }
}
.flota svg{width:20px;height:20px;flex:none}
.flota:hover{background:var(--acento-hondo)}
.flota:active{transform:scale(.95)}

/* Cuando el botón grande del cierre ya está a la vista, el flotante se
   aparta: tener dos veces el mismo botón en pantalla es ruido, no énfasis.
   `visibility` además lo saca del foco del teclado mientras está fuera. */
.flota[data-fuera="1"]{
  opacity:0;
  transform:translateY(120%) scale(.9);
  visibility:hidden;
}
@media (prefers-reduced-motion: reduce){
  .flota{transition:opacity .2s linear}
  .flota[data-fuera="1"]{transform:none}
}

/* Que el flotante no tape la última tarjeta ni el pie. */
main{padding-bottom:6.5rem}
@media (min-width:48rem){ main{padding-bottom:5rem} }

/* ─── PIE ───────────────────────────────────────────── */
footer{
  border-top:1px solid var(--linea);
  padding:2.4rem 0;
  padding-bottom:max(2.4rem, env(safe-area-inset-bottom));
  font-size:.86rem;color:var(--tinta-media);
}
footer strong{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.05rem;color:var(--tinta);margin-bottom:.2rem;
}
.enlaces{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1rem}
footer a{color:var(--acento);text-decoration:none;font-weight:500}
footer a:hover{text-decoration:underline}