/* ============================================================
   Vita Animalia · landing
   Tokens tomados de 10_ACTIVOS_WEB/TOKENS/vita-animalia.css.
   Texto sobre color siempre en Oscuro Soporte; el verde se usa
   como trazo o superficie, nunca como color de texto sobre blanco.
   ============================================================ */

@font-face {
  font-family: "Alice";
  src: url("../fuentes/alice-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde: #83A261;
  --azul: #6890CD;
  --amarillo: #F4BE52;
  --rosa: #DB8B88;
  --verde-gato: #A8C28C;
  --oscuro: #263238;
  --blanco: #FFFFFF;

  --oscuro-2: color-mix(in srgb, var(--oscuro) 82%, #000);
  --papel: color-mix(in srgb, var(--amarillo) 6%, var(--blanco));
  --tinta-2: rgba(38, 50, 56, .8);
  --claro-2: rgba(255, 255, 255, .8);
  --linea: rgba(38, 50, 56, .14);
  --linea-clara: rgba(255, 255, 255, .14);

  --serif: "Alice", Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pildora: 999px;

  --gutter: clamp(18px, 4.6vw, 72px);
  --alto-cabecera: 104px;
  --foco: var(--oscuro);

  --suave: cubic-bezier(.22, .61, .36, 1);
  --resorte: cubic-bezier(.34, 1.36, .64, 1);
  --trazo-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C48 3 92 12 132 7 S186 4 197 7' fill='none' stroke='%2383A261' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) - 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--blanco);
  color: var(--oscuro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.08; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}
.sobre-oscuro, .nosotros__historia, .catalogo__panel, .nutricion__producto, .forma, .agendar, .contacto, .final, .pie { --foco: var(--blanco); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.salto {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--pildora);
  background: var(--oscuro);
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s var(--suave);
}
.salto:focus { top: 16px; }

.contenedor { width: min(1480px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ─────────────── Tipografía compartida ─────────────── */
.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oscuro);
}
.antetitulo::before { content: ""; flex: 0 0 44px; height: 3px; border-radius: 4px; background: var(--amarillo); }
.antetitulo--azul::before { background: var(--azul); }
.antetitulo--verde::before { background: var(--verde); }
.antetitulo--amarillo { color: var(--amarillo); }
.antetitulo--amarillo::before { background: var(--amarillo); }
.antetitulo--rosa-linea::before { background: var(--rosa); }
.antetitulo--centro { justify-content: center; }

.titulo { letter-spacing: -.03em; text-wrap: balance; }
.titulo--xl { font-size: clamp(42px, 5vw, 80px); line-height: 1; }
.titulo--l { font-size: clamp(38px, 4.2vw, 66px); line-height: 1.02; }
.titulo--m { font-size: clamp(28px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.02em; }
.titulo--claro { color: var(--blanco); }

.texto-azul { color: var(--azul); }
.texto-verde-gato { color: var(--verde-gato); }
.texto-amarillo { color: var(--amarillo); }

/* Énfasis verde: trazo dibujado bajo el texto, que conserva el color oscuro */
.subrayado {
  background-image: var(--trazo-verde);
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% .2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .04em;
}

.seccion { position: relative; padding-block: clamp(64px, 8vw, 110px); overflow: clip; isolation: isolate; }
.seccion__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 3vw, 42px);
}
.seccion__lead { font-size: 17px; line-height: 1.65; color: var(--tinta-2); max-width: 60ch; }
.seccion__lead strong { color: var(--oscuro); }
.seccion__lead--grande { font-size: clamp(17px, 1.4vw, 21px); }
.seccion__lead--claro { color: var(--claro-2); }
.seccion__lead--claro strong { color: var(--blanco); }

/* ─────────────── Botones ─────────────── */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.acciones--centro { justify-content: center; }

.boton {
  --mx: 0px;
  --my: 0px;
  --elevar: 0px;
  --presion: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  overflow: clip;
  border: 2px solid transparent;
  border-radius: var(--pildora);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--mx), calc(var(--my) + var(--elevar))) scale(var(--presion));
  transition: transform .3s var(--suave), box-shadow .3s var(--suave), background-color .25s var(--suave), border-color .25s var(--suave), color .25s var(--suave);
}
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.boton__icono { flex: 0 0 auto; width: 22px; height: 22px; }
.boton__texto { position: relative; }
.boton:hover { --elevar: -2px; }
.boton:hover::before { transform: translateX(120%); transition: transform .8s var(--suave); }
.boton:active { --presion: .98; transition-duration: .11s; }

.boton--amarillo { background: var(--amarillo); border-color: var(--amarillo); color: var(--oscuro); }
.boton--amarillo:hover { box-shadow: 0 12px 26px -10px rgba(38, 50, 56, .45); }
.boton--contorno { background: var(--blanco); border-color: var(--oscuro); color: var(--oscuro); }
.boton--contorno:hover { background: color-mix(in srgb, var(--verde) 16%, var(--blanco)); }
.boton--contorno::before { background: linear-gradient(105deg, transparent 30%, rgba(131, 162, 97, .22) 50%, transparent 70%); }
.boton--contorno-claro { background: transparent; border-color: rgba(255, 255, 255, .72); color: var(--blanco); }
.boton--contorno-claro:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanco); }
.boton--contorno-claro::before { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); }
.boton--grande { min-height: 58px; padding: 0 30px; font-size: 17px; }

/* ─────────────── Cabecera ─────────────── */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .35s var(--suave), box-shadow .35s var(--suave), transform .5s var(--suave), opacity .5s var(--suave);
}
.cabecera__barra {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
  height: var(--alto-cabecera);
  border-bottom: 1px solid rgba(38, 50, 56, .24);
  transition: height .35s var(--suave), border-color .35s var(--suave);
}
.cabecera.es-solida {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 30px -24px rgba(38, 50, 56, .5);
}
.cabecera.es-solida .cabecera__barra { height: 84px; border-color: transparent; }
.cabecera__logo { display: block; width: clamp(240px, 19vw, 290px); }
.cabecera__logo img { width: 100%; height: auto; }

.nav__lista { display: flex; justify-content: flex-end; gap: clamp(18px, 2vw, 38px); }
.nav__enlace {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: var(--pildora);
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--suave);
}
.nav__enlace:hover::after, .nav__enlace[aria-current="true"]::after { transform: scaleX(1); }

.menu-boton {
  display: none;
  width: 50px;
  height: 50px;
  padding: 13px 12px;
  border: 1px solid rgba(38, 50, 56, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  cursor: pointer;
}
html:not(.js) .menu-boton { display: none !important; }
.menu-boton span { display: block; height: 3px; margin: 3px 0; border-radius: var(--pildora); background: var(--oscuro); }

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--blanco);
}
.menu-movil[hidden] { display: none; }
.menu-movil__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-movil__cabeza img { width: 240px; }
.menu-movil__cerrar {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(38, 50, 56, .22);
  border-radius: 14px;
  background: var(--blanco);
  cursor: pointer;
}
.menu-movil__cerrar span { position: absolute; left: 13px; right: 13px; top: 23px; height: 3px; border-radius: var(--pildora); background: var(--oscuro); transform: rotate(45deg); }
.menu-movil__cerrar span + span { transform: rotate(-45deg); }
.menu-movil__lista { display: grid; }
.menu-movil__lista a {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 24px;
  text-decoration: none;
}
.menu-movil__acciones { display: grid; gap: 12px; margin-top: auto; }

/* ─────────────── 1. Hero ─────────────── */
.hero {
  --trazo: 1;
  --hero-salida: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(720px, min(920px, 100svh));
  padding-top: var(--alto-cabecera);
  padding-bottom: clamp(40px, 6vh, 80px);
  overflow: clip;
  isolation: isolate;
  background: var(--blanco);
}
.hero__foto { position: absolute; inset: 0; z-index: -3; overflow: clip; }
.hero__foto > picture { width: 100%; height: 100%; }
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
  transform: translateY(calc(var(--hero-salida) * 2.5%)) scale(1.02);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 32%, rgba(255, 255, 255, .78) 44%, rgba(255, 255, 255, .08) 66%, rgba(255, 255, 255, 0) 100%);
}
.hero__orbe {
  position: absolute;
  z-index: -1;
  left: -250px;
  bottom: -250px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: var(--rosa);
  opacity: .12;
}
.hero__contenido {
  transform: translateY(calc(var(--hero-salida) * -22px));
  opacity: calc(1 - var(--hero-salida) * .35);
}
.hero__titulo {
  max-width: 11ch;
  font-size: clamp(60px, 6.3vw, 108px);
  line-height: .94;
  letter-spacing: -.035em;
}
.hero__linea { display: block; overflow: clip; padding-bottom: .09em; margin-bottom: -.09em; }
.hero__linea > span { display: inline-block; }
.trazo-palabra { position: relative; display: inline-block; isolation: isolate; }
.trazo {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: .03em;
  width: 104%;
  height: .26em;
  overflow: visible;
}
.trazo path {
  fill: none;
  stroke: var(--verde);
  stroke-width: clamp(9px, 1.3vw, 19px);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--trazo));
  opacity: .62;
  vector-effect: non-scaling-stroke;
}
.hero__lead {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(19px, 1.45vw, 25px);
  line-height: 1.42;
  color: rgba(38, 50, 56, .92);
  text-wrap: balance;
}
.hero .acciones { margin-top: 34px; }
.hero__ubicacion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.hero__ubicacion svg { width: 25px; height: 25px; color: var(--oscuro); }
.hero__ubicacion:hover { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 5px; }

/* ─────────────── 2. Nosotros ─────────────── */
.nosotros {
  background:
    radial-gradient(circle at 92% 6%, rgba(104, 144, 205, .15) 0 12%, transparent 12.2%),
    radial-gradient(circle at 1% 72%, rgba(219, 139, 136, .14) 0 11%, transparent 11.2%),
    var(--blanco);
}
.deco--orbitas {
  position: absolute;
  z-index: -1;
  right: -160px;
  top: 145px;
  width: 610px;
  height: 610px;
  background: url("../iconos/VA_RECURSO_PATRON_ORBITAS_SIN_FONDO.svg") center / contain no-repeat;
  opacity: .5;
  transform: translateY(var(--par, 0px));
}
.nosotros__fila { display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; align-items: stretch; }
.nosotros__historia {
  position: relative;
  min-height: 640px;
  padding: clamp(44px, 5vw, 68px) clamp(32px, 5vw, 72px);
  overflow: clip;
  border-radius: 30px;
  background: var(--oscuro);
  color: var(--blanco);
}
.nosotros__historia::after {
  content: "";
  position: absolute;
  right: -95px;
  bottom: -90px;
  width: 410px;
  height: 410px;
  border: 2px solid rgba(244, 190, 82, .32);
  border-radius: 45% 55% 58% 42% / 47% 38% 62% 53%;
  transform: rotate(12deg);
  pointer-events: none;
}
.nosotros__orbita {
  position: absolute;
  right: -60px;
  top: 38%;
  width: 360px;
  height: 360px;
  pointer-events: none;
}
.nosotros__orbita path {
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--dibujo, 1));
  opacity: .5;
}
.nosotros__historia .titulo { position: relative; max-width: 14ch; }
.palabra-mascara { position: relative; display: inline-block; color: var(--amarillo); }
.nosotros__intro { position: relative; max-width: 30ch; margin-top: 32px; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 27px); line-height: 1.35; }
.nosotros__texto { position: relative; max-width: 52ch; margin-top: 20px; font-size: 18px; line-height: 1.67; color: rgba(255, 255, 255, .78); }

.nosotros__proposito { display: grid; gap: 18px; }
.proposito {
  position: relative;
  padding: 40px 42px 36px;
  border: 1px solid rgba(38, 50, 56, .12);
  border-radius: 30px;
  background: var(--blanco);
  box-shadow: 0 22px 70px rgba(38, 50, 56, .08);
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.proposito__linea { position: absolute; left: 42px; right: 42px; top: 0; height: 8px; border-radius: 0 0 999px 999px; }
.proposito--mision { --acento: var(--rosa); }
.proposito--vision { --acento: var(--azul); }
.proposito__linea { background: var(--acento); }
.proposito__etiqueta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.proposito__etiqueta i { width: 11px; height: 11px; border-radius: 50%; background: var(--acento); transition: transform .3s var(--suave); }
.proposito .titulo { margin-bottom: 13px; }
.proposito p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .proposito:hover { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(38, 50, 56, .12); }
  .proposito:hover .proposito__etiqueta i { transform: scale(1.35); }
}

.equipo {
  position: relative;
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: 36px;
  margin-top: 24px;
  padding: 42px 46px 38px;
  overflow: clip;
  border-radius: 30px;
  background: var(--amarillo);
}
.equipo__campo {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 380px;
  height: 260px;
  background: url("../iconos/VA_RECURSO_CAMPO_ORGANICO_SIN_FONDO.svg") center / contain no-repeat;
  opacity: .16;
  transform: translateY(var(--par, 0px));
  pointer-events: none;
}
.equipo > :not(.equipo__campo) { position: relative; }
.equipo .titulo { font-size: clamp(38px, 3.4vw, 50px); }
.equipo__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.equipo__punto {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 15px;
  min-height: 90px;
  padding: 15px 18px;
  border: 1px solid rgba(38, 50, 56, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .8);
  transition: transform .35s var(--suave), box-shadow .35s var(--suave);
}
.equipo__numero {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--oscuro);
  color: var(--blanco);
  font-family: var(--serif);
  font-size: 21px;
  transition: transform .6s var(--resorte);
}
.equipo__punto p { font-size: 16px; line-height: 1.38; font-weight: 700; }
.equipo__nota { margin-top: 18px; font-size: 16px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .equipo__punto:hover { transform: translateY(-4px) rotate(-.8deg); box-shadow: 0 16px 30px -18px rgba(38, 50, 56, .5); }
}

.franja-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 30px;
  margin-top: 24px;
  padding: 30px 38px;
  border-radius: 26px;
  background: rgba(168, 194, 140, .32);
}
.franja-cta__texto { font-family: var(--serif); font-size: clamp(22px, 2vw, 27px); line-height: 1.25; }
.franja-cta--oscura { margin-top: 34px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--blanco); }

/* ─────────────── 3. Catálogo ─────────────── */
.catalogo { background: linear-gradient(160deg, var(--blanco) 0 40%, var(--papel) 100%); }
.orbe { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transform: translateY(var(--par, 0px)); }
.orbe--azul { width: 390px; height: 390px; right: -120px; top: -150px; background: rgba(104, 144, 205, .16); }
.orbe--rosa { width: 230px; height: 230px; left: -80px; bottom: 80px; background: rgba(219, 139, 136, .15); }
.linea-scroll { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.linea-scroll path {
  fill: none;
  stroke: var(--verde);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--dibujo, 1));
  opacity: .7;
  vector-effect: non-scaling-stroke;
}

.catalogo__pestanas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  padding: 9px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--oscuro) 8%, var(--papel));
}
.catalogo__pestana {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 10px 16px;
  border-radius: 17px;
  color: var(--tinta-2);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color .3s var(--suave), background-color .3s var(--suave);
}
.catalogo__pestana[aria-selected="true"] { background: var(--oscuro); color: var(--blanco); }
.catalogo__pestana:focus-visible { outline-color: var(--oscuro); }
.catalogo__indicador { display: none; }
.js .catalogo__pestana[aria-selected="true"] { background: transparent; }
.js .catalogo__indicador {
  position: absolute;
  top: 9px;
  left: 0;
  display: block;
  width: var(--ancho, 33%);
  height: calc(100% - 18px);
  border-radius: 17px;
  background: var(--oscuro);
  box-shadow: 0 12px 28px rgba(38, 50, 56, .18);
  transform: translateX(var(--x, 9px));
  transition: transform .55s var(--resorte), width .45s var(--suave);
}
.js .catalogo__indicador::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -9px;
  height: 4px;
  border-radius: 10px;
  background: var(--amarillo);
}

.catalogo__marco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.catalogo__panel {
  --acento: var(--azul);
  display: grid;
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.4fr);
  min-height: 660px;
  overflow: clip;
  border-radius: 34px;
  background: var(--oscuro);
  box-shadow: 0 30px 90px rgba(38, 50, 56, .2);
  color: var(--blanco);
}
.catalogo__panel[data-acento="rosa"] { --acento: var(--rosa); }
.catalogo__panel[data-acento="verde"] { --acento: var(--verde-gato); }
.js .catalogo__panel[hidden] { display: none; }

.catalogo__visual { position: relative; min-height: 100%; overflow: clip; background: var(--oscuro-2); }
.catalogo__visual picture, .catalogo__visual img { position: absolute; inset: 0; width: 100%; height: 100%; }
.catalogo__visual img { object-fit: cover; object-position: 62% 40%; }
#medicina-veterinaria .catalogo__visual img { object-position: 64% 30%; }
.catalogo__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 30, 35, .05) 30%, rgba(20, 30, 35, .9) 100%);
}
.catalogo__foto-texto { position: absolute; z-index: 2; left: 38px; right: 38px; bottom: 36px; }
.catalogo__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: var(--pildora);
  background: rgba(255, 255, 255, .94);
  color: var(--oscuro);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.catalogo__chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
.catalogo__frase { margin-top: 18px; max-width: 16ch; font-family: var(--serif); font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; text-wrap: balance; }

.catalogo__contenido { padding: clamp(24px, 2.6vw, 38px); background: linear-gradient(145deg, var(--oscuro), var(--oscuro-2)); }
.catalogo__arriba { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.catalogo__elige { font-family: var(--serif); font-size: clamp(28px, 2.4vw, 34px); line-height: 1.1; }
.catalogo__instruccion { max-width: 48ch; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--claro-2); }
.catalogo__cuenta {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--amarillo);
  font-weight: 700;
}
.catalogo__servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.servicio {
  display: grid;
  grid-template-columns: 44px 1fr 22px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
  background: rgba(255, 255, 255, .045);
  color: var(--blanco);
  text-decoration: none;
  transition: transform .3s var(--suave), background-color .3s var(--suave), border-color .3s var(--suave), color .3s var(--suave), box-shadow .3s var(--suave);
}
.servicio:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acento) 70%, transparent); }
.servicio[aria-current="true"] { background: var(--papel); border-color: var(--papel); color: var(--oscuro); box-shadow: 0 15px 34px rgba(0, 0, 0, .22); transform: scale(1.015); }
.servicio__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, .92); transition: transform .45s var(--resorte), background-color .3s; }
.servicio[aria-current="true"] .servicio__icono { background: color-mix(in srgb, var(--acento) 30%, var(--blanco)); transform: rotate(-6deg); }
.servicio__icono img { width: 28px; height: 28px; }
.servicio__nombre { font-size: 15px; font-weight: 700; line-height: 1.25; }
.servicio__flecha { width: 20px; height: 20px; color: var(--amarillo); transition: transform .3s var(--suave); }
.servicio[aria-current="true"] .servicio__flecha { color: var(--oscuro); }
.servicio:hover .servicio__flecha { transform: translateX(4px); }

.catalogo__fichas { display: grid; gap: 14px; margin-top: 22px; }
.js .catalogo__fichas { overflow: clip; transition: height .45s var(--suave); }
.js .ficha[hidden] { display: none; }
.ficha {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 5px solid var(--acento);
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
}
.ficha:focus { outline: none; }
.ficha__etiqueta { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo); }
.ficha__titulo { margin-bottom: 10px; font-size: clamp(24px, 2vw, 28px); }
.ficha__texto { max-width: 66ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.ficha__texto + .ficha__texto { margin-top: 10px; }
.ficha__aviso {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--acento) 22%, transparent);
  font-size: 14px;
  font-weight: 700;
}
.ficha__bloque { margin-top: 16px; }
.ficha__subtitulo { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ficha__lista { display: grid; gap: 6px; }
.ficha__lista li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.ficha__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.ficha__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha__chips li { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--pildora); font-size: 13px; line-height: 1.3; }
.ficha__acciones { margin-top: 20px; }
.catalogo__nota { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--claro-2); }

/* ─────────────── 4. Nutrición OptiCare ─────────────── */
.nutricion { background: var(--blanco); }
.nutricion__puntos {
  position: absolute;
  z-index: -1;
  right: -100px;
  top: -110px;
  width: 380px;
  height: 380px;
  opacity: .28;
  background-image: radial-gradient(var(--azul) 2px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(140deg, #000, transparent 72%);
  mask-image: linear-gradient(140deg, #000, transparent 72%);
  transform: translateY(var(--par, 0px));
}
.nutricion__escena {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  min-height: 620px;
  overflow: clip;
  border-radius: 38px;
  background: var(--papel);
  box-shadow: 0 32px 85px rgba(38, 50, 56, .13);
}
.nutricion__info { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 60px) clamp(24px, 4vw, 58px); background: linear-gradient(145deg, var(--papel), var(--blanco)); }
.nutricion__sello {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid rgba(38, 50, 56, .16);
  border-radius: var(--pildora);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nutricion__sello i { width: 10px; height: 10px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 5px rgba(244, 190, 82, .2); }
.nutricion__info .titulo { margin: 24px 0 12px; font-size: clamp(38px, 3.6vw, 54px); }
.nutricion__frase { margin-bottom: 20px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25; }
.nutricion__texto { max-width: 60ch; margin-bottom: 26px; font-size: 16px; line-height: 1.7; color: var(--tinta-2); }
.nutricion__texto strong { color: var(--oscuro); }
.nutricion__etapas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 28px; }
.etapa {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 11px 14px;
  border: 1px solid rgba(38, 50, 56, .14);
  border-radius: 15px;
  background: var(--blanco);
  font-size: 14px;
  font-weight: 700;
  transition: transform .3s var(--suave), background-color .3s var(--suave);
}
.etapa--verde { --c: var(--verde); }
.etapa--azul { --c: var(--azul); }
.etapa--amarillo { --c: var(--amarillo); }
.etapa--rosa { --c: var(--rosa); }
.etapa__icono { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, var(--blanco)); }
.etapa__icono img { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .etapa:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--c) 14%, var(--blanco)); }
}
.nutricion__nota { margin-top: 15px; font-size: 13px; color: var(--tinta-2); }

.nutricion__producto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: 48px 32px;
  overflow: clip;
  isolation: isolate;
  background: var(--oscuro);
}
.nutricion__producto::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(circle at 65% 32%, rgba(104, 144, 205, .38), transparent 32%),
    radial-gradient(circle at 24% 72%, rgba(131, 162, 97, .34), transparent 34%),
    linear-gradient(135deg, var(--oscuro), var(--oscuro-2));
  transform: rotate(-4deg);
}
.nutricion__anillo {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  translate: -50% -50%;
  animation: girar 60s linear infinite;
  animation-play-state: paused;
}
.nutricion__anillo::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.nutricion__anillo--a { width: 570px; height: 570px; }
.nutricion__anillo--b { width: 410px; height: 410px; animation-direction: reverse; animation-duration: 45s; }
.nutricion__anillo--c { width: 260px; height: 260px; animation-duration: 32s; }
.nutricion__producto.en-pantalla .nutricion__anillo { animation-play-state: running; }
@keyframes girar { to { rotate: 360deg; } }

.destello { position: absolute; z-index: 1; width: 26px; height: 26px; transform: translateY(var(--par, 0px)); }
.destello--1 { left: 12%; top: 20%; color: var(--amarillo); }
.destello--2 { right: 12%; bottom: 20%; color: var(--rosa); }
.destello--3 { left: 18%; bottom: 16%; width: 16px; height: 16px; color: var(--verde-gato); }

.nutricion__insignia {
  position: absolute;
  z-index: 4;
  top: 32px;
  right: 32px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--oscuro);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(7deg);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .25);
}
.nutricion__insignia svg { width: 24px; height: 24px; }

.nutricion__bolsas {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  width: min(92%, 700px);
  transition: transform .9s var(--suave);
}
.nutricion__bolsa { filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .38)); }
.nutricion__bolsa img { width: 100%; border-radius: 6px; }
.nutricion__bolsa--gatos { flex: 1234 1 0; }
.nutricion__bolsa--perros { flex: 2481 1 0; }
.nutricion__pedestal {
  position: absolute;
  z-index: 2;
  left: 11%;
  right: 11%;
  bottom: 44px;
  height: 130px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
  box-shadow: 0 25px 50px rgba(0, 0, 0, .28);
}

/* ─────────────── 5. Nuestra forma de cuidar ─────────────── */
.forma {
  color: var(--blanco);
  background:
    radial-gradient(circle at 16% 20%, rgba(104, 144, 205, .17), transparent 28%),
    radial-gradient(circle at 90% 82%, rgba(131, 162, 97, .13), transparent 30%),
    linear-gradient(145deg, var(--oscuro), var(--oscuro-2));
}
.linea-scroll--forma path { opacity: .42; }
.principios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1200px; }
.principio {
  --rx: 0deg;
  --ry: 0deg;
  --px: 0px;
  --py: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 29px 27px 26px;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 27px;
  background: rgba(255, 255, 255, .055);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s var(--suave), background-color .35s var(--suave), color .35s var(--suave), box-shadow .35s var(--suave), border-color .35s;
}
.principio::before { content: ""; position: absolute; right: -70px; top: -80px; width: 180px; height: 180px; border-radius: 50%; background: var(--acento); opacity: .12; }
.principio__numero { font-family: var(--serif); font-size: 58px; line-height: 1; color: var(--acento); transform: translate(var(--px), var(--py)); transition: transform .3s var(--suave); }
.principio__icono {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 30px 0 24px;
  border-radius: 17px;
  background: var(--acento);
  box-shadow: 0 12px 25px color-mix(in srgb, var(--acento) 26%, transparent);
  transform: translate(calc(var(--px) * 1.6), calc(var(--py) * 1.6));
  transition: transform .3s var(--suave);
}
.principio__icono svg { width: 32px; height: 32px; }
.principio__icono g { fill: none; stroke: var(--oscuro); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.principio__titulo { margin-bottom: 15px; font-size: clamp(25px, 2vw, 29px); line-height: 1.1; }
.principio p { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .8); transition: color .35s; }
.principio__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 21px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  transition: color .35s;
}
.principio__pie svg { width: 22px; height: 22px; color: var(--acento); transition: transform .3s var(--suave); }
@media (hover: hover) and (pointer: fine) {
  .principio:hover {
    background: var(--papel);
    color: var(--oscuro);
    border-color: transparent;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .22);
    transform: translateY(-10px) rotateX(var(--rx)) rotateY(var(--ry));
  }
  .principio:hover p, .principio:hover .principio__pie { color: var(--tinta-2); }
  .principio:hover .principio__pie svg { transform: translate(4px, -4px); color: var(--oscuro); }
}

/* ─────────────── 6. Trabajos ─────────────── */
.trabajos { background: var(--blanco); }
.galeria {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  grid-template-rows: 300px 260px;
  gap: 14px;
}
.galeria__pieza { position: relative; overflow: clip; border-radius: 24px; background: var(--oscuro); }
.galeria__pieza:first-child { grid-row: 1 / 3; }
.galeria__pieza:nth-child(4) { grid-column: 2 / 4; }
.galeria__pieza picture, .galeria__pieza img { width: 100%; height: 100%; }
.galeria__pieza img { object-fit: cover; transition: transform .9s var(--suave); }
.galeria__pieza:nth-child(2) img { object-position: 28% center; }
.galeria__pieza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(20, 34, 40, .8)); pointer-events: none; }
.galeria__etiqueta { position: absolute; z-index: 1; left: 20px; bottom: 18px; color: var(--blanco); font-size: 14px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .galeria__pieza:hover img { transform: scale(1.04); }
}
.instagram {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: var(--papel);
}
.instagram__icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--azul); color: var(--blanco); }
.instagram__icono svg { width: 30px; height: 30px; }
.instagram p { line-height: 1.55; color: var(--tinta-2); }
.instagram strong { color: var(--oscuro); }
.trabajos__estilo { display: flex; justify-content: space-between; align-items: center; gap: 20px 30px; margin-top: 24px; }
.trabajos__estilo p { max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.trabajos__nota { margin-top: 14px; font-size: 13px; color: var(--tinta-2); }

/* ─────────────── 7. Cómo agendar ─────────────── */
.agendar {
  --progreso: 1;
  color: var(--blanco);
  background: radial-gradient(circle at 85% 20%, rgba(104, 144, 205, .23), transparent 28%), linear-gradient(145deg, var(--oscuro), var(--oscuro-2));
}
.orbe--azul-oscuro { width: 300px; height: 300px; left: -120px; bottom: -80px; background: rgba(168, 194, 140, .08); }
.agendar__lema { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; color: rgba(255, 255, 255, .9); }
.pasos { position: relative; margin-top: clamp(28px, 3vw, 43px); }
.pasos__linea { position: absolute; z-index: 0; overflow: visible; pointer-events: none; left: var(--l, 54px); top: var(--t, 54px); width: var(--w, 0px); height: var(--h, 0px); }
.pasos__linea--v { display: none; }
.pasos__linea path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pasos__guia { stroke: rgba(255, 255, 255, .16); }
.pasos__progreso { stroke: var(--amarillo); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progreso)); }
.pasos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.paso {
  position: relative;
  min-height: 260px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 25px;
  background: rgba(255, 255, 255, .07);
}
.paso__numero {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--oscuro);
  font-family: var(--serif);
  font-size: 24px;
  transition: background-color .35s var(--suave), color .35s, transform .5s var(--resorte), box-shadow .35s;
}
.js .paso:not(.activo) .paso__numero { background: var(--oscuro); color: var(--blanco); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.js .paso.activo .paso__numero { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 22%, transparent); }
.paso__titulo { margin-bottom: 13px; font-size: clamp(24px, 2vw, 28px); line-height: 1.1; }
.paso p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.agendar__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 29px;
  padding: 24px 28px;
  border-radius: 21px;
  background: rgba(255, 255, 255, .06);
}
.agendar__telefono { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); color: var(--blanco); text-decoration: none; }
.agendar__telefono:hover { text-decoration: underline; text-decoration-color: var(--amarillo); text-underline-offset: 6px; }

/* ─────────────── 8. Preguntas frecuentes ─────────────── */
.preguntas { background: var(--papel); }
.preguntas__rejilla { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.preguntas__lado { position: sticky; top: calc(84px + 30px); }
.preguntas__lado .titulo { margin-bottom: 18px; }
.preguntas__otra {
  margin-top: 28px;
  padding: 24px;
  border-left: 5px solid var(--azul);
  border-radius: 20px;
  background: color-mix(in srgb, var(--azul) 16%, var(--blanco));
}
.preguntas__otra-titulo { margin-bottom: 6px; font-family: var(--serif); font-size: 25px; }
.preguntas__otra p:not(.preguntas__otra-titulo) { margin-bottom: 16px; font-size: 15px; }
.acordeon { display: grid; gap: 10px; }
.acordeon__item { overflow: clip; border: 1px solid rgba(38, 50, 56, .14); border-radius: 18px; background: var(--blanco); }
.acordeon__encabezado { font-family: var(--sans); font-size: 16px; line-height: 1.35; }
.acordeon__boton {
  position: relative;
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 20px 60px 20px 22px;
  border: 0;
  background: none;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.acordeon__boton:focus-visible { outline-offset: -3px; border-radius: 18px; }
.acordeon__signo { position: absolute; right: 22px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; }
.acordeon__signo::before, .acordeon__signo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2.6px;
  border-radius: 2px;
  background: var(--verde);
  transition: transform .35s var(--suave);
}
.acordeon__signo::after { transform: rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: rotate(0deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::before { transform: rotate(180deg); }
.acordeon__contenido > p { margin: 0 22px 12px; font-size: 15px; line-height: 1.65; color: var(--tinta-2); }
.acordeon__contenido > p:last-child { margin-bottom: 22px; }
.js .acordeon__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--suave), opacity .3s var(--suave), visibility 0s; }
.js .acordeon__contenido { min-height: 0; overflow: clip; }
.js .acordeon__item:not(.abierto) .acordeon__panel { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .4s var(--suave), opacity .25s var(--suave), visibility 0s .4s; }

/* ─────────────── 9. Ubicación ─────────────── */
.ubicacion { background: var(--blanco); }
.ubicacion__cabeza { display: grid; justify-items: center; gap: 0; text-align: center; }
.ubicacion__cabeza .titulo { margin-bottom: 18px; }
.ubicacion__cabeza .seccion__lead { max-width: 58ch; }
.ubicacion__rejilla { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-top: 38px; }
.mapa { position: relative; min-height: 560px; overflow: clip; border-radius: 28px; background: color-mix(in srgb, var(--verde-gato) 20%, var(--blanco)); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__tarjeta {
  position: absolute;
  top: 18px;
  right: 18px;
  max-width: min(320px, 60%);
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 15px 30px rgba(38, 50, 56, .13);
  pointer-events: none;
}
.mapa__lugar { font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.mapa__detalle { margin-top: 5px; font-size: 13px; color: var(--tinta-2); }
.contacto { padding: clamp(26px, 3vw, 37px); border-radius: 28px; background: var(--oscuro); color: var(--blanco); }
.contacto .titulo { margin-bottom: 20px; }
.contacto__direccion { margin-bottom: 22px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.contacto__bloque { padding: 17px 0; border-top: 1px solid var(--linea-clara); }
.contacto__etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); }
.contacto__valor { display: inline-block; margin-top: 6px; font-weight: 700; text-decoration: none; word-break: break-word; }
.contacto__valor:hover { text-decoration: underline; text-underline-offset: 4px; }
.contacto__redes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.red {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.red svg { flex: 0 0 24px; width: 24px; height: 24px; }
a.red:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.red--dato { border-style: dashed; border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); }
.contacto .acciones { margin-top: 20px; }

/* ─────────────── 10. CTA final ─────────────── */
.final {
  color: var(--blanco);
  text-align: center;
  background: linear-gradient(145deg, #27353b, var(--oscuro-2));
}
.final__forma { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transform: translateY(var(--par, 0px)); }
.final__forma--verde { width: 420px; height: 420px; left: -140px; top: 12%; background: radial-gradient(circle, rgba(131, 162, 97, .22), transparent 68%); }
.final__forma--rosa { width: 360px; height: 360px; right: -110px; top: -60px; background: radial-gradient(circle, rgba(219, 139, 136, .2), transparent 68%); }
.final__forma--azul { width: 480px; height: 480px; right: 18%; bottom: -300px; background: radial-gradient(circle, rgba(104, 144, 205, .2), transparent 68%); }
.final__caja { max-width: 1050px; }
.final .titulo { margin: 0 auto 24px; max-width: 18ch; }
.final p:not(.antetitulo) { max-width: 62ch; margin: 0 auto 30px; font-size: 18px; line-height: 1.65; color: var(--claro-2); }

/* ─────────────── 11. Footer ─────────────── */
.pie { padding: clamp(44px, 5vw, 60px) 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); background: var(--oscuro-2); color: rgba(255, 255, 255, .82); }
.pie__rejilla { display: grid; grid-template-columns: 1.2fr .8fr .9fr; gap: clamp(28px, 5vw, 70px); }
.pie__logo { width: min(300px, 100%); min-width: 240px; }
.pie__lema { margin-top: 12px; color: var(--amarillo); font-size: 15px; font-weight: 700; }
.pie__titulo { margin-bottom: 14px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amarillo); }
.pie__columna ul { display: grid; gap: 6px; font-size: 14.5px; line-height: 1.6; }
.pie__columna a { text-decoration: none; }
.pie__columna a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 4px; }
.pie__firma {
  width: min(1480px, calc(100% - 2 * var(--gutter)));
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, .72);
}
.pie__firma a { color: var(--amarillo); font-weight: 700; text-decoration: none; }
.pie__firma a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─────────────── WhatsApp flotante ─────────────── */
.whatsapp-flotante {
  position: fixed;
  z-index: 90;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 4px solid var(--blanco);
  border-radius: 50%;
  background: var(--verde);
  color: var(--oscuro);
  box-shadow: 0 14px 36px rgba(38, 50, 56, .24);
  transition: transform .45s var(--resorte), opacity .3s var(--suave), visibility 0s;
}
.whatsapp-flotante svg { width: 30px; height: 30px; }
.whatsapp-flotante:hover { transform: translateY(-3px); }
.js .whatsapp-flotante:not(.visible) { opacity: 0; visibility: hidden; transform: scale(.85); transition: transform .3s var(--suave), opacity .25s var(--suave), visibility 0s .3s; }

/* ─────────────── Cursor de patita ─────────────── */
.cursor-activo, .cursor-activo * { cursor: none !important; }
.cursor-activo input, .cursor-activo textarea, .cursor-activo [contenteditable] { cursor: text !important; }
.cursor-pata {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -6px 0 0 -8px;
  pointer-events: none;
  color: var(--cursor, var(--oscuro));
  transition: color .2s var(--suave), opacity .2s;
  will-change: transform;
}
.cursor-pata svg { width: 100%; height: 100%; transition: transform .15s var(--suave); }
.cursor-pata.pulsando svg { transform: scale(.78); }
.cursor-pata.oculto { opacity: 0; }
.huella { position: fixed; z-index: 999; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; color: var(--cursor, var(--oscuro)); animation: huella .42s var(--suave) forwards; }
.huella svg { width: 100%; height: 100%; }
@keyframes huella {
  from { opacity: .9; transform: translate(var(--hx0), var(--hy0)) scale(.6) rotate(var(--hr)); }
  to { opacity: 0; transform: translate(var(--hx1), var(--hy1)) scale(1) rotate(var(--hr)); }
}

/* ============================================================
   Sistema de movimiento: sólo activo con .anim (JS + movimiento permitido).
   Sin JavaScript todo queda visible en su estado final.
   ============================================================ */
.anim .cabecera { opacity: 0; transform: translateY(-12px); }
.anim.listo .cabecera { opacity: 1; transform: none; }

.anim .hero__linea > span { transform: translateY(108%); transition: transform .9s var(--suave); }
.anim .hero__item { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--suave), transform .7s var(--suave); }
.anim .hero__foto img { filter: contrast(.9) saturate(.92); transition: filter 1.2s var(--suave); }
.anim .hero__foto { transform: scale(1.025); transition: transform 1.2s var(--suave); }
.anim.listo .hero__linea > span { transform: none; }
.anim.listo .hero__linea:nth-child(1) > span { transition-delay: .18s; }
.anim.listo .hero__linea:nth-child(2) > span { transition-delay: .27s; }
.anim.listo .hero__linea:nth-child(3) > span { transition-delay: .36s; }
.anim.listo .hero__item { opacity: 1; transform: none; }
.anim.listo .hero__lead { transition-delay: .5s; }
.anim.listo .hero .acciones { transition-delay: .6s; }
.anim.listo .hero__ubicacion { transition-delay: .68s; }
.anim.listo .hero__foto img { filter: none; }
.anim.listo .hero__foto { transform: none; }

.anim [data-reveal] {
  transition: opacity .8s var(--suave), transform .8s var(--suave), filter .8s var(--suave), clip-path 1s var(--suave);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.anim [data-reveal="text"]:not(.is-in) { opacity: 0; transform: translateY(16px); filter: blur(6px); }
.anim h2[data-reveal="text"], .anim h3[data-reveal="text"] { clip-path: inset(-12% -4% -24% -4%); }
.anim h2[data-reveal="text"]:not(.is-in), .anim h3[data-reveal="text"]:not(.is-in) { transform: translateY(26px); clip-path: inset(0 -4% 100% -4%); }
.anim .antetitulo[data-reveal]:not(.is-in) { letter-spacing: .1em; }
.anim [data-reveal="card"]:not(.is-in) { opacity: 0; transform: translateY(26px) scale(.97); }
.anim [data-reveal="card"][data-desde="arriba"]:not(.is-in) { transform: translate(18px, -24px); }
.anim [data-reveal="card"][data-desde="abajo"]:not(.is-in) { transform: translate(18px, 24px); }
.anim [data-reveal="expand"]:not(.is-in) { opacity: 0; transform: scaleX(.94); }
.anim [data-reveal="image"] { clip-path: inset(0 round 24px); }
.anim [data-reveal="image"]:not(.is-in) { clip-path: inset(10% 8% 10% 8% round 40px); opacity: .2; }
.anim [data-reveal="image"] img { transition: transform 1.2s var(--suave); }
.anim [data-reveal="image"]:not(.is-in) img { transform: scale(1.06); }
.anim [data-reveal="section"] { clip-path: ellipse(160% 160% at 0% 50%); }
.anim [data-reveal="section"]:not(.is-in) { clip-path: ellipse(0% 70% at 0% 50%); }
.anim .catalogo__marco[data-reveal="section"], .anim .nutricion__escena[data-reveal="section"] { clip-path: none; }
.anim .catalogo__marco[data-reveal="section"]:not(.is-in) { opacity: 0; transform: translateY(40px); }
.anim .nutricion__escena[data-reveal="section"]:not(.is-in) .nutricion__producto { clip-path: ellipse(0% 80% at 100% 50%); }
.anim .nutricion__producto { clip-path: ellipse(150% 150% at 100% 50%); transition: clip-path 1.1s var(--suave) .15s; }
.anim .nutricion__escena:not(.is-in) .nutricion__bolsas { transform: translateY(34px); }
.anim .nutricion__insignia { transition: transform .8s var(--resorte) .5s; }
.anim .nutricion__escena:not(.is-in) .nutricion__insignia { transform: rotate(12deg) scale(.6); }
.anim .palabra-mascara { color: var(--blanco); }
.anim .palabra-mascara::after {
  content: attr(data-texto) / "";
  position: absolute;
  inset: 0;
  color: var(--amarillo);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--suave) .45s;
}
.anim .is-in .palabra-mascara::after { clip-path: inset(0 0 0 0); }
.anim .subrayado { background-size: 0% .2em; transition: background-size 1s var(--suave) .35s; }
.anim .is-in .subrayado { background-size: 100% .2em; }
.anim .proposito__linea { transform: scaleX(0); transition: transform .9s var(--suave) .3s; }
.anim .proposito.is-in .proposito__linea { transform: scaleX(1); }
.anim .equipo__punto:not(.is-in) .equipo__numero { transform: scale(.85) rotate(-4deg); }
.anim [data-icono-trazo] > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--suave) .35s; }
.anim .principio.is-in [data-icono-trazo] > * { stroke-dashoffset: 0; }
.anim .catalogo__visual img { transition: clip-path .8s var(--suave), transform 1.1s var(--suave); }
.anim .catalogo__panel.entrando .catalogo__visual img { animation: barrido .85s var(--suave); }
.anim .catalogo__panel.entrando .catalogo__foto-texto { animation: subir .7s var(--suave) .15s both; }
.anim .catalogo__panel.entrando .servicio { animation: subir .55s var(--suave) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
.anim .ficha.entrando { animation: subir .45s var(--suave) both; }
.anim .ficha.entrando .ficha__acciones { animation: subir .45s var(--suave) .18s both; }
@keyframes barrido {
  from { clip-path: ellipse(0% 90% at 0% 50%); transform: scale(1.06); }
  to { clip-path: ellipse(160% 160% at 0% 50%); transform: scale(1); }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ─────────────── Responsive ─────────────── */
@media (max-width: 1200px) {
  .nav__opcional { display: none; }
}

@media (max-width: 1080px) {
  .nav, .boton--cabecera { display: none; }
  .menu-boton { display: block; }
  .cabecera__barra { grid-template-columns: auto 1fr auto; }
  .menu-boton { grid-column: 3; }
  .nosotros__fila, .preguntas__rejilla, .ubicacion__rejilla { grid-template-columns: 1fr; }
  .nosotros__historia { min-height: 0; }
  .equipo { grid-template-columns: 1fr; gap: 24px; }
  .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preguntas__lado { position: static; }
  .catalogo__panel { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --alto-cabecera: 88px; }
  .seccion__cabeza { grid-template-columns: 1fr; gap: 20px; }
  .catalogo__panel { display: block; min-height: 0; border-radius: 25px; }
  .catalogo__visual { min-height: 340px; }
  .catalogo__foto-texto { left: 22px; right: 22px; bottom: 22px; }
  .catalogo__cuenta { display: none; }
  .catalogo__pestanas { gap: 6px; padding: 6px; border-radius: 18px; }
  .js .catalogo__indicador { top: 6px; height: calc(100% - 12px); border-radius: 13px; }
  .catalogo__pestana { min-height: 58px; padding: 8px 6px; font-size: 13px; border-radius: 13px; }
  .catalogo__servicios {
    display: flex;
    gap: 9px;
    margin-right: calc(-1 * clamp(24px, 2.6vw, 38px));
    padding: 4px clamp(24px, 2.6vw, 38px) 10px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .catalogo__servicios li { flex: 0 0 min(220px, 64%); scroll-snap-align: start; }
  .servicio { height: 100%; }
  .nutricion__escena { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 26px; }
  .nutricion__producto { min-height: 380px; padding: 70px 20px 40px; }
  .nutricion__anillo--a { width: 400px; height: 400px; }
  .nutricion__anillo--b { width: 290px; height: 290px; }
  .nutricion__anillo--c { width: 180px; height: 180px; }
  .nutricion__insignia { width: 86px; height: 86px; top: 18px; right: 18px; font-size: 9px; }
  .nutricion__insignia svg { width: 18px; height: 18px; }
  .nutricion__pedestal { bottom: 28px; height: 90px; }
  .galeria { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 180px 180px; }
  .galeria__pieza:first-child { grid-column: 1 / 3; grid-row: auto; }
  .galeria__pieza:nth-child(4) { grid-column: 1 / 3; }
  .instagram { grid-template-columns: auto 1fr; }
  .instagram .boton { grid-column: 1 / 3; }
  .trabajos__estilo { flex-direction: column; align-items: stretch; }
  .pasos__lista { grid-template-columns: 1fr; }
  .paso { min-height: 0; }
  .pasos__linea--h { display: none; }
  .pasos__linea--v { display: block; }
  .mapa { display: flex; flex-direction: column; min-height: 0; }
  .mapa iframe { position: relative; inset: auto; height: 380px; }
  .mapa__tarjeta { position: relative; top: auto; right: auto; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
  .linea-scroll { display: none; }
}

/* Hero apilado en teléfonos y tabletas verticales */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero__foto { order: 2; }
  .hero::before { display: none; }
  .hero__orbe { width: 260px; height: 260px; left: -165px; bottom: auto; top: 44%; }
  .hero__contenido { padding-top: 34px; }
  .hero__titulo { font-size: clamp(46px, 13.6vw, 62px); }
  .hero__lead { margin-top: 18px; font-size: 17px; line-height: 1.4; }
  .hero__contenido { position: relative; z-index: 1; }
  .hero__foto { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 4.3; margin-top: 6px; }
  .hero__foto::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 32%;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0));
  }
  .hero__foto img { object-position: 60% center; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero__foto { aspect-ratio: 16 / 11; }
}

@media (max-width: 760px) {
  .cabecera__logo { width: 240px; }
  .cabecera.es-solida .cabecera__barra { height: 76px; }
  .cabecera.es-solida .cabecera__logo { width: 210px; }
  .hero .acciones { display: grid; margin-top: 22px; gap: 10px; }
  .hero .boton { width: 100%; min-height: 54px; }
  .antetitulo { font-size: 11px; letter-spacing: .18em; }
  .antetitulo::before { flex-basis: 32px; }
  .nosotros__historia, .proposito, .equipo { border-radius: 24px; }
  .nosotros__orbita { right: -190px; top: 46%; }
  .catalogo__frase { font-size: 28px; }
  .proposito { padding: 36px 26px 32px; }
  .proposito__linea { left: 26px; right: 26px; }
  .equipo { padding: 34px 22px 30px; }
  .equipo__lista { grid-template-columns: 1fr; }
  .equipo__punto { grid-template-columns: 46px 1fr; min-height: 76px; }
  .equipo__numero { width: 46px; height: 46px; font-size: 18px; }
  .franja-cta { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .acciones { display: grid; grid-template-columns: 1fr; }
  .acciones .boton { width: 100%; }
  .nutricion__etapas { gap: 8px; }
  .nutricion__producto { padding-top: 96px; }
  .nutricion__bolsas { flex-direction: column; align-items: center; gap: 14px; }
  .nutricion__bolsa--gatos { flex: none; flex-grow: 0 !important; width: 60%; }
  .nutricion__bolsa--perros { flex: none; flex-grow: 0 !important; width: 100%; }
  .etapa { padding: 10px; font-size: 13px; }
  .principios { grid-template-columns: 1fr; }
  .principio {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas: "num titulo" "icono texto" "pie pie";
    gap: 4px 15px;
    min-height: 0;
    padding: 22px;
  }
  .principio__numero { grid-area: num; font-size: 44px; }
  .principio__icono { grid-area: icono; width: 50px; height: 50px; margin: 8px 0 0; }
  .principio__titulo { grid-area: titulo; margin: 4px 0 10px; }
  .principio p { grid-area: texto; }
  .principio__pie { grid-area: pie; }
  .agendar__acciones, .franja-cta--oscura { padding: 22px; }
  .paso { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; padding: 24px 22px; }
  .paso__numero { grid-row: 1 / 3; margin-bottom: 0; }
  .paso__titulo { margin-top: 10px; }
  .contacto__redes { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .whatsapp-flotante { width: 58px; height: 58px; }
}

@media (max-width: 380px) {
  .cabecera__logo { width: 240px; }
  .menu-boton { width: 46px; height: 46px; padding: 12px 11px; }
  .catalogo__pestana { font-size: 12px; }
}

/* ─────────────── Movimiento reducido ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; transition-delay: 0s !important; }
  .boton, .principio, .servicio { transform: none !important; }
}

/* ============================================================
   Páginas interiores (OptiCare y aviso de privacidad)
   ============================================================ */
.interior { padding-top: calc(var(--alto-cabecera) + clamp(40px, 6vw, 80px)); }
.interior .cabecera { background: rgba(255, 255, 255, .92); }
.documento { width: min(820px, calc(100% - 2 * var(--gutter))); margin-inline: auto; padding-bottom: clamp(64px, 8vw, 100px); }
.documento h1 { margin-bottom: 20px; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.documento h2 { margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: clamp(26px, 2.6vw, 34px); }
.documento p, .documento li { font-size: 17px; line-height: 1.7; color: var(--tinta-2); }
.documento p + p { margin-top: 14px; }
.documento__lista { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 22px; list-style: disc; }
.documento__fecha { margin-top: 36px; font-size: 14px; }
.documento a:not(.boton) { font-weight: 700; text-decoration-color: var(--verde); text-underline-offset: 4px; }
.documento .acciones { margin-top: 32px; }

.opticare-pagina { width: min(1280px, calc(100% - 2 * var(--gutter))); margin-inline: auto; padding-bottom: clamp(64px, 8vw, 100px); }
.opticare-pagina__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 40px 70px; align-items: end; margin-bottom: 40px; }
.opticare-pagina h1 { font-size: clamp(42px, 5vw, 78px); line-height: 1; letter-spacing: -.035em; }
.presentaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.presentacion {
  display: flex;
  flex-direction: column;
  overflow: clip;
  border: 1px solid var(--linea);
  border-radius: 24px;
  background: var(--blanco);
  box-shadow: 0 18px 50px -30px rgba(38, 50, 56, .35);
}
.presentacion__foto { display: grid; place-items: center; height: 230px; padding: 22px; background: var(--oscuro); }
.presentacion__foto img { max-height: 100%; width: auto; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .35)); }
.presentacion__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 22px; }
.presentacion__etapa { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: var(--pildora); background: color-mix(in srgb, var(--c) 24%, var(--blanco)); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.presentacion h2 { font-size: 26px; }
.presentacion .boton { margin-top: auto; width: 100%; }
.distribuidor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.distribuidor img { width: 100%; border-radius: 22px; }
.opticare-pagina__nota { margin-top: 28px; padding: 20px 24px; border-radius: 18px; background: var(--papel); font-size: 15px; color: var(--tinta-2); }
@media (max-width: 860px) {
  .opticare-pagina__cabeza { grid-template-columns: 1fr; }
  .distribuidor { grid-template-columns: 1fr; }
}

/* ─────────────── WordPress ─────────────── */
body.admin-bar .cabecera, body.admin-bar .menu-movil { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .cabecera, body.admin-bar .menu-movil { top: 46px; }
}
.documento__contenido ul, .documento__contenido ol { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 22px; }
.documento__contenido ul { list-style: disc; }
.documento__contenido ol { list-style: decimal; }
.documento__contenido > * + * { margin-top: 14px; }
.documento__contenido h2 + p, .documento__contenido h3 + p { margin-top: 0; }
.documento__contenido h3 { margin: 28px 0 10px; font-size: 24px; }
.documento__contenido a { font-weight: 700; text-decoration-color: var(--verde); text-underline-offset: 4px; }
.documento__contenido strong { color: var(--oscuro); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }