/* =====================================================================
   Medical Propet · sitio público
   Violeta #2B019C y menta #07D8A8, los colores de la marca.
   El menta se reserva para lo que invita a actuar: botones, precios,
   acentos. Si aparece en todos lados deja de llamar la atención, que es
   lo único para lo que sirve.
   ===================================================================== */

:root {
  --violeta:   #2B019C;
  --violeta-o: #1E0170;
  --violeta-c: #4A2BC7;
  --violeta-t: #F2EFFF;   /* fondo muy suave, para secciones */
  --menta:     #07D8A8;
  --menta-o:   #05B38B;
  --menta-t:   #E6FBF5;

  --tinta:  #1A1033;
  --papel:  #FFFFFF;
  --nube:   #F7F6FC;
  --gris:   #5F5A7A;
  --linea:  #E4E1F0;
  --alerta: #D93852;

  /* Compatibilidad: queda nombres viejos apuntando a los nuevos para no
     romper reglas que todavía los usen. */
  --verde:   var(--violeta);
  --verde-c: var(--menta);
  --arena:   var(--nube);
  --guinda:  var(--alerta);

  --medida: 68ch;
  --radio: 14px;
  --radio-g: 24px;
  --paso: clamp(3rem, 7vw, 6rem);
  --sombra: 0 10px 30px rgba(43, 1, 156, .08);
  --sombra-f: 0 18px 50px rgba(43, 1, 156, .14);
}

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

html { 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;
  background: var(--papel);
  color: var(--tinta);
  font-family: Karla, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Bricolage Grotesque', Karla, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p  { max-width: var(--medida); }

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--verde-c); outline-offset: 3px; border-radius: 3px; }

.env { width: min(1140px, 92vw); margin-inline: auto; }
.seccion { padding-block: var(--paso); }
.seccion--arena { background: var(--arena); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta h2, .seccion--tinta h3 { color: var(--papel); }
.seccion--tinta a { color: var(--verde-c); }

/* --- Barra superior ------------------------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,244,.93);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra__fila { display: flex; align-items: center; gap: 1.5rem; padding-block: .7rem; }
.marca {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--tinta); text-decoration: none; letter-spacing: -.02em; display: flex; gap: .5rem; align-items: center;
}
.marca__punto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--guinda); }
.nav { display: flex; gap: 1.35rem; margin-left: auto; align-items: center; }
.nav a:not(.btn) { color: var(--tinta); text-decoration: none; font-size: .95rem; }
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--menta);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.nav__movil { display: none; }

/* --- Acceso al portal del socio -------------------------------------
   Va en la barra, a la derecha del menú: alguien que ya es socio entra
   a ver sus cuotas y no tiene por qué buscar dónde. */
.acceso { display: flex; align-items: center; gap: .6rem; margin-left: .4rem; }
/* El panel desplegable se retiró: «Ingresar» lleva a la pantalla de
   acceso, que tiene lugar para explicar qué resuelve cada opción. */

@media (max-width: 920px) {
  /* En el celular los dos botones ocupan el ancho, uno debajo del otro:
     apretados en una fila quedan de tres centímetros y se toca el que
     no era. */
  .acceso { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; }
  .acceso .btn { width: 100%; justify-content: center; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .nav--abierta { display: flex; flex-direction: column; align-items: flex-start;
                  width: 100%; margin: 0; padding-bottom: 1rem; gap: .9rem; }
  .nav__movil { display: block; margin-left: auto; background: none; border: 1px solid var(--linea);
                border-radius: var(--radio); padding: .45rem .7rem; font-size: 1rem; color: var(--tinta); }
}

/* --- Botones -------------------------------------------------------- */
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: var(--radio);
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn--linea { border-color: var(--violeta); color: var(--violeta); background: none; }
.btn--linea:hover { background: var(--violeta); color: #fff; }
.btn--claro { background: #fff; color: var(--violeta-o); }
.btn--claro:hover { background: var(--menta-t); color: var(--violeta-o); }

/* --- Héroe: la factura ---------------------------------------------- */
.heroe { padding-block: clamp(3rem, 7vw, 5.5rem) var(--paso); }
.heroe__grilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 920px) { .heroe__grilla { grid-template-columns: 1fr; } }
.heroe__bajada { font-size: 1.15rem; color: var(--gris); }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* El comprobante. Es el argumento de venta, no un adorno. */
.ticket {
  background: #fff; border: 1px solid var(--linea); border-radius: 4px;
  padding: 1.75rem 1.5rem 1.25rem; max-width: 380px; margin-inline: auto;
  box-shadow: 0 18px 40px -28px rgba(16,48,43,.5);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.ticket::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: repeating-linear-gradient(135deg, #fff 0 9px, transparent 9px 18px);
  filter: drop-shadow(0 1px 0 var(--linea));
}
.ticket__enc { border-bottom: 1px dashed var(--linea); padding-bottom: .75rem; margin-bottom: .9rem; }
.ticket__tit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: .98rem; }
.ticket__sub { font-size: .8rem; color: var(--gris); }
.ticket__fila { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; font-size: .93rem; }
.ticket__fila span:last-child { font-weight: 600; }
.ticket__total {
  border-top: 1px solid var(--tinta); margin-top: .7rem; padding-top: .7rem;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ticket__total strong { color: var(--guinda); font-size: 1.3rem; font-family: 'Bricolage Grotesque', sans-serif; }
.ticket__pie {
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--linea);
  background: var(--arena); margin-inline: -1.5rem; margin-bottom: -1.25rem;
  padding: .9rem 1.5rem 1.1rem;
}
.ticket__pie small { color: var(--gris); display: block; font-size: .8rem; }
.ticket__cuota { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--verde); }

/* --- Grilla comparativa de planes ----------------------------------- */
.comparador { width: 100%; border-collapse: collapse; font-size: .95rem; }
.comparador th, .comparador td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--linea); }
.comparador thead th { vertical-align: bottom; border-bottom: 2px solid var(--tinta); }
.comparador td.c, .comparador th.c { text-align: center; width: 15%; }
.comparador tbody tr:hover { background: rgba(127,183,168,.12); }
.plan-enc__nombre { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; font-weight: 600; }
.plan-enc__precio { font-size: 1.35rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.plan-enc__periodo { font-size: .78rem; color: var(--gris); font-weight: 400; }
.plan-enc--destacado { background: var(--arena); }
.marca-si { color: var(--verde); font-weight: 700; }
.marca-no { color: var(--linea); }
.cinta {
  display: inline-block; background: var(--guinda); color: #fff; font-size: .7rem;
  padding: .15rem .5rem; border-radius: 3px; font-weight: 700; letter-spacing: .02em;
}
.tabla-scroll { overflow-x: auto; }

/* --- Pasos ---------------------------------------------------------- */
.pasos { counter-reset: paso; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.paso { counter-increment: paso; position: relative; padding-top: 2.6rem; }
.paso::before {
  content: counter(paso); position: absolute; top: 0; left: 0;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 700;
  color: var(--verde); border-bottom: 2px solid var(--verde-c); padding-bottom: .1rem; min-width: 1.6rem;
}
.paso h3 { margin-bottom: .3rem; }
.paso p { font-size: .95rem; color: var(--gris); margin: 0; }

/* --- Acordeón de preguntas ------------------------------------------ */
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  cursor: pointer; padding: 1.05rem 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; color: var(--verde); font-size: 1.3rem; line-height: 1; }
.pregunta[open] summary::after { content: "−"; }
.pregunta__cuerpo { padding-bottom: 1.1rem; color: var(--gris); }
.pregunta__cuerpo p { margin-top: 0; }

/* --- Formularios ---------------------------------------------------- */
/* Mismo motivo que «.instalar[hidden]»: un display de autor gana contra
   el hidden del navegador, y el campo quedaba visible siempre. */
.campo[hidden] { display: none !important; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .35rem; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .72rem .85rem; border: 1.5px solid var(--linea);
  border-radius: var(--radio); background: #fff; font: inherit; font-size: 1rem; color: var(--tinta);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--verde); outline: none; }
.campo small { color: var(--gris); font-size: .84rem; }

/* Las dos del backoffice que también usan el sitio y el portal, y que
   estaban definidas solo en «app.css»: la ayuda de un campo salía con el
   tamaño del texto normal, y una referencia de transferencia salía en la
   tipografía del cuerpo en vez de monoespaciada. */
.campo__ayuda { font-size: .84rem; color: var(--gris); line-height: 1.45; }
.campo__clave {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; color: var(--gris); letter-spacing: -.01em;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: .9rem 1.1rem; border-radius: var(--radio); margin-bottom: 1.2rem; font-size: .95rem; }
.aviso--error { background: #FBEAE9; color: #7A201D; border: 1px solid #E8C4C2; }
.aviso--ok { background: #E6F0ED; color: #15443B; border: 1px solid var(--verde-c); }

/* --- Prosa del CMS -------------------------------------------------- */
.prosa { max-width: var(--medida); }
.prosa h2 { margin-top: 2.2rem; }
.prosa img { max-width: 100%; height: auto; border-radius: var(--radio); }
.prosa ul, .prosa ol { padding-left: 1.2rem; }
.prosa li { margin-bottom: .45rem; }
.prosa table { width: 100%; border-collapse: collapse; }
.prosa td, .prosa th { border: 1px solid var(--linea); padding: .5rem .7rem; }

/* --- Pie ------------------------------------------------------------ */
.pie { background: var(--tinta); color: var(--arena); padding-block: var(--paso) 2rem; }
.pie a { color: var(--verde-c); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__grilla { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .pie__grilla { grid-template-columns: 1fr; } }
.pie__col h3 { font-size: .95rem; margin-bottom: .8rem; color: var(--papel); }
.pie__col ul { list-style: none; padding: 0; margin: 0; }
.pie__col li { margin-bottom: .45rem; font-size: .93rem; }
.pie__legal { border-top: 1px solid rgba(236,228,214,.2); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .84rem; color: #9FB3AD; }

/* --- Banner de cookies ---------------------------------------------- */
.cookies {
  position: fixed; inset: auto 1rem 1rem; z-index: 90; max-width: 560px; margin-inline: auto;
  background: var(--tinta); color: var(--papel); padding: 1.25rem 1.4rem;
  border-radius: var(--radio); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.cookies p { font-size: .9rem; margin: 0 0 1rem; max-width: none; }
.cookies a { color: var(--verde-c); }
.cookies__acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookies[hidden] { display: none; }

/* --- Utilidades ----------------------------------------------------- */
.lista-limpia { list-style: none; padding: 0; margin: 0; }
.destaque { font-size: 1.15rem; color: var(--gris); }
.saltar {
  position: absolute; left: -9999px; background: var(--tinta); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--radio); z-index: 100;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* =====================================================================
   BARRA Y LOGO
   ===================================================================== */
.barra { background: var(--papel); border-bottom: 1px solid var(--linea); }

.marca__logo {
  display: block;
  height: 58px;
  width: auto;
}
@media (max-width: 980px) { .marca__logo { height: 48px; } }
@media (max-width: 720px) { .marca__logo { height: 40px; } }

.marca__eslogan {
  font-size: .72rem;
  color: var(--gris);
  letter-spacing: .01em;
  margin-top: .1rem;
}

/* El color va en la propia clase del botón, con suficiente peso para no
   depender de dónde esté puesto: el mismo botón aparece en la barra, en
   el banner y en medio de un párrafo. */
.btn--sm { padding: .5rem 1rem; font-size: .92rem; }

.btn.btn--principal { background: var(--violeta); color: #fff; }
.btn.btn--principal:hover,
.btn.btn--principal:focus-visible { background: var(--violeta-o); color: #fff; }

/* El menta es el color de «hacé esto»: se usa en el botón que más
   queremos que toquen, y en ninguno más de la misma pantalla. */
.btn.btn--menta {
  background: var(--menta);
  color: var(--violeta-o);
  font-weight: 700;
}
.btn.btn--menta:hover,
.btn.btn--menta:focus-visible { background: var(--menta-o); color: #fff; }

/* =====================================================================
   BANNER DEL ENCABEZADO
   ===================================================================== */
.banners { position: relative; background: var(--violeta-o); overflow: hidden; }

.banner {
  position: relative;
  display: none;
  min-height: var(--banner-alto, 440px);
  background-size: cover;
  background-position: center;
}
.banner.activo { display: block; }

/* Un velo sobre la foto: sin él, un título blanco sobre un cielo claro
   no se lee, y es el caso más común en fotos de mascotas al aire libre. */
.banner::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
      rgba(30, 1, 112, calc(var(--velo, 35) / 100 + .25)) 0%,
      rgba(30, 1, 112, calc(var(--velo, 35) / 100)) 45%,
      rgba(30, 1, 112, calc(var(--velo, 35) / 200)) 100%);
}
.banner--claro::before {
  background: linear-gradient(100deg,
      rgba(255, 255, 255, calc(var(--velo, 35) / 100 + .3)) 0%,
      rgba(255, 255, 255, calc(var(--velo, 35) / 140)) 60%,
      rgba(255, 255, 255, 0) 100%);
}

.banner__caja {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  min-height: var(--banner-alto, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banner__contenido { max-width: 34rem; }
.banner--centro .banner__caja { align-items: center; text-align: center; }
.banner--derecha .banner__caja { align-items: flex-end; text-align: right; }

.banner__titulo {
  font-family: 'Bricolage Grotesque', Karla, system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 .7rem;
  color: #fff;
}
.banner__bajada { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.93); margin: 0 0 1.6rem; }
.banner--claro .banner__titulo { color: var(--violeta-o); }
.banner--claro .banner__bajada { color: var(--tinta); }

/* Flechas y puntos */
.banners__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; cursor: pointer; z-index: 3;
  background: rgba(255,255,255,.88); color: var(--violeta);
  font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.banners__flecha:hover { background: #fff; }
.banners__flecha--ant { left: 1rem; }
.banners__flecha--sig { right: 1rem; }

.banners__puntos {
  position: absolute; bottom: 1.1rem; left: 0; right: 0; z-index: 3;
  display: flex; gap: .45rem; justify-content: center;
}
.banners__punto {
  width: 2.2rem; height: .28rem; border-radius: 99px; border: 0;
  background: rgba(255,255,255,.45); cursor: pointer; padding: 0;
}
.banners__punto[aria-current="true"] { background: var(--menta); }

@media (max-width: 720px) {
  .banner, .banner__caja { min-height: 380px; }
  .banners__flecha { display: none; }
  .banner--derecha .banner__caja,
  .banner--centro .banner__caja { align-items: flex-start; text-align: left; }
}

/* =====================================================================
   PIEZAS DE LA PORTADA
   ===================================================================== */
.seccion--nube { background: var(--nube); }
.seccion--violeta { background: var(--violeta-o); color: #fff; }
.seccion--violeta h2, .seccion--violeta h3 { color: #fff; }

.tarjetas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: 1.6rem;
  box-shadow: var(--sombra);
}
.tarjeta__icono {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--menta-t); color: var(--violeta);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: .9rem;
}
.tarjeta h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.tarjeta p { color: var(--gris); font-size: .96rem; margin: 0; }

/* Los tres pasos: lo que más pregunta alguien que no conoce el servicio
   es «cómo funciona», y conviene que sea lo primero después del banner. */
.pasos { counter-reset: paso; display: grid; gap: 1.5rem;
         grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.paso { position: relative; padding-top: 3.2rem; }
.paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 0; left: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--violeta); color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.cinta {
  background: var(--menta);
  color: var(--violeta-o);
  text-align: center;
  padding: .6rem 1rem;
  font-size: .95rem;
  font-weight: 600;
}
.cinta a { color: var(--violeta-o); }

.sello {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--menta-t); color: var(--violeta-o);
  border-radius: 99px; padding: .35rem .9rem;
  font-size: .85rem; font-weight: 600;
}

.pie { background: var(--violeta-o); color: rgba(255,255,255,.8); }
.pie a { color: #fff; }
.pie__logo { height: 38px; width: auto; margin-bottom: .8rem; }

/* --- Acciones dentro de una pregunta --------------------------------- */
.pregunta__accion {
  margin: .9rem 0 0;
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
}
.pregunta__numero { font-size: .88rem; color: var(--gris); }

.faq__cierre {
  margin-top: 3.5rem;
  padding: 2rem;
  background: var(--nube);
  border-radius: var(--radio-g);
}
.faq__canales { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }

/* Botón flotante de WhatsApp. Abajo a la derecha, donde el pulgar llega
   sin estirarse en un celular. */
.wa-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.wa-flotante:hover { background: #1FB356; color: #fff; }
@media print { .wa-flotante { display: none; } }

/* =====================================================================
   ACCESO, REGISTRO Y BIENVENIDA
   Pantallas sueltas, sin la barra del sitio: quien llega acá viene a
   hacer una cosa y el menú solo le ofrece formas de irse.
   ===================================================================== */
.acceso-pagina {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(160deg, var(--violeta-t) 0%, var(--nube) 55%, #fff 100%);
}
.acceso-caja { width: 100%; max-width: 27rem; }
.acceso-caja--ancha { max-width: 40rem; }

.acceso-marca { display: block; text-align: center; margin-bottom: 1.6rem; }
.acceso-marca img { height: 42px; width: auto; }

.acceso-tarjeta {
  background: #fff;
  border-radius: var(--radio-g);
  padding: 2rem;
  box-shadow: var(--sombra-f);
}
.acceso-titulo {
  font-family: 'Bricolage Grotesque', Karla, sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 .4rem; color: var(--violeta-o);
}
.acceso-bajada { color: var(--gris); font-size: .96rem; margin: 0 0 1.5rem; }

/* El botón de Google: grande, primero y con el borde marcado. Es el
   camino que queremos que tomen, y tiene que verse así. */
.acceso-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 2px solid var(--violeta);
  border-radius: var(--radio);
  background: #fff;
  color: var(--violeta-o);
  font-weight: 700; font-size: 1.02rem;
  text-decoration: none;
}
.acceso-google:hover { background: var(--violeta); color: #fff; }
.acceso-google__nota {
  display: flex; align-items: flex-start; gap: .4rem;
  font-size: .82rem; color: var(--gris);
  margin: .7rem 0 0; line-height: 1.4;
}
.acceso-google__nota i { color: var(--menta-o); margin-top: .1rem; }

.acceso-o {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.4rem 0;
  color: var(--gris); font-size: .86rem;
}
.acceso-o::before, .acceso-o::after {
  content: ''; flex: 1; height: 1px; background: var(--linea);
}

.acceso-form { display: grid; gap: .9rem; }
.acceso-fila { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .acceso-fila { grid-template-columns: 1fr; } }

.acceso-campo { display: grid; gap: .3rem; }
.acceso-campo > span { font-size: .88rem; font-weight: 600; color: var(--tinta); }
.acceso-campo > span small { font-weight: 400; color: var(--gris); }
.acceso-campo input {
  padding: .7rem .85rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: 1rem; font-family: inherit;
  background: #fff;
}
.acceso-campo input:focus {
  outline: 2px solid var(--violeta-c); outline-offset: 1px; border-color: transparent;
}
.acceso-enviar { width: 100%; justify-content: center; margin-top: .3rem; }

.acceso-error {
  background: #FDECEF; border: 1px solid #F7C3CC; color: #8B1D2E;
  border-radius: var(--radio); padding: .7rem .9rem;
  font-size: .92rem; margin-bottom: 1.1rem;
}
.acceso-legal { font-size: .82rem; color: var(--gris); margin: .2rem 0 0; }
.acceso-ayuda { text-align: center; margin: 1.2rem 0 0; font-size: .9rem; }
.acceso-pie { text-align: center; margin: 1.2rem 0 0; font-size: .94rem; color: var(--gris); }
.acceso-pie--tenue { font-size: .84rem; margin-top: .8rem; }

/* Bienvenida */
.bienvenida-tilde {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--menta); color: var(--violeta-o);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 1.1rem;
}
.acceso-caja--ancha .acceso-titulo,
.acceso-caja--ancha .acceso-bajada { text-align: center; }

.bienvenida-bloque { margin: 1.8rem 0; }
.bienvenida-bloque h2 { font-size: 1rem; margin-bottom: .6rem; }
.bienvenida-cot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem; border: 1px solid var(--linea); border-radius: var(--radio);
  margin-bottom: .5rem;
}

.bienvenida-pasos { display: grid; gap: .7rem; margin-top: 1.6rem; }
.bienvenida-paso {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; color: var(--tinta);
}
.bienvenida-paso:hover { border-color: var(--violeta); background: var(--violeta-t); }
.bienvenida-paso i { font-size: 1.35rem; color: var(--violeta); }
.bienvenida-paso strong { display: block; font-size: .98rem; }
.bienvenida-paso span { font-size: .86rem; color: var(--gris); }
.bienvenida-paso--principal {
  border-color: var(--violeta); border-width: 2px; background: var(--violeta-t);
}

/* El estado de la solicitud, en la bienvenida */
.bienvenida-solicitud {
  display: flex; gap: .9rem; align-items: flex-start;
  border-radius: var(--radio); padding: 1rem 1.2rem;
  margin: 1.5rem 0; text-align: left;
}
.bienvenida-solicitud i { font-size: 1.4rem; margin-top: .1rem; }
.bienvenida-solicitud--espera { background: #FFF6E0; color: #6B5415; }
.bienvenida-solicitud--bien { background: var(--menta-t); color: #06694F; }
.bienvenida-solicitud--mal { background: #FDECEF; color: #8B1D2E; }
.bienvenida-motivo { margin: .5rem 0 0; font-size: .9rem; }

/* =====================================================================
   Veterinarias recomendadas
   ===================================================================== */
.vet-hero {
  background: var(--violeta-t);
  padding: 3rem 1rem 2.5rem;
  text-align: center;
}
.vet-hero h1 {
  font-family: 'Bricolage Grotesque', Karla, sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--violeta-o);
  margin: 0 0 .7rem;
}
.vet-hero p { max-width: 42rem; margin: 0 auto 1.5rem; color: var(--tinta); }

.vet-buscador {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.vet-check { display: flex; align-items: center; gap: .5rem; font-size: .93rem; }
.vet-check input { width: 1.15rem; height: 1.15rem; }

.vet-nota { font-size: .84rem; color: var(--gris); margin-top: 1rem; }

.vet-estado { padding: 1rem 0; font-size: .95rem; }
.vet-estado--ok  { color: #06694F; font-weight: 600; }
.vet-estado--mal { color: #8B1D2E; }

.vet-lista { display: grid; gap: 1rem; padding-bottom: 2rem; }
@media (min-width: 680px) { .vet-lista { grid-template-columns: 1fr 1fr; } }

.vet-card {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-g); padding: 1.3rem;
}
/* La destacada se distingue por el borde, no por el tamaño: una tarjeta
   más grande desordena la grilla y hace que las demás parezcan rotas. */
.vet-card--destacada { border: 2px solid var(--violeta); background: var(--violeta-t); }
.vet-card h3 { margin: .4rem 0 .2rem; font-size: 1.15rem; color: var(--violeta-o); }
.vet-km  { font-size: .88rem; color: var(--gris); margin: 0 0 .6rem; }
.vet-dir { font-size: .95rem; margin: 0 0 .6rem; }
.vet-desc { font-size: .9rem; color: var(--gris); }

.vet-chip {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .15rem .6rem; border-radius: 99px;
  background: var(--violeta); color: #fff; margin-right: .3rem;
}
.vet-chip--urg { background: #B3332F; }

/* El número de urgencias, grande y separado: quien lo busca a las tres
   de la mañana no está para leer una ficha entera. */
.vet-urg {
  display: block; background: #FDECEF; color: #8B1D2E;
  border-radius: var(--radio); padding: .6rem .9rem;
  font-weight: 700; text-decoration: none; margin: .7rem 0;
}

.vet-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.vet-acciones .btn { flex: 1; min-width: 9rem; text-align: center; }

.vet-cta {
  background: var(--menta-t); padding: 3rem 1rem; text-align: center;
  margin-top: 2rem;
}
.vet-cta h2 { color: var(--violeta-o); margin: 0 0 .6rem; }
.vet-cta p { max-width: 38rem; margin: 0 auto 1.3rem; }

.vet-beneficios {
  background: var(--menta-t); border-radius: var(--radio-g);
  padding: 1.2rem 1.4rem; margin-bottom: 1.8rem;
}
.vet-beneficios ul { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .94rem; }
.vet-beneficios li { margin-bottom: .4rem; }

.vet-datos dt { font-size: .84rem; color: var(--gris); margin-top: .8rem; }
.vet-datos dd { margin: 0; font-size: 1rem; }

/* =====================================================================
   Páginas de contenido largo (Quiénes somos, etc.)
   ===================================================================== */
.pagina-lead {
  font-size: 1.15rem; line-height: 1.65; color: var(--tinta);
  border-left: 3px solid var(--menta); padding-left: 1.1rem;
  margin-bottom: 2rem;
}

.pagina-cita {
  background: var(--violeta-t); border-radius: var(--radio-g);
  padding: 1.5rem 1.8rem; margin: 2rem 0; border: 0;
}
.pagina-cita p {
  font-size: 1.05rem; font-style: italic; color: var(--violeta-o); margin: 0;
}

.pagina-lista { list-style: none; padding: 0; margin: 1.5rem 0; }
.pagina-lista li {
  padding: 1rem 0 1rem 1.6rem; border-bottom: 1px solid var(--linea);
  position: relative;
}
.pagina-lista li::before {
  content: ''; position: absolute; left: 0; top: 1.45rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--menta);
}
.pagina-lista li:last-child { border-bottom: 0; }

.pagina-valores { list-style: none; padding: 0; margin: 1.5rem 0; }
.pagina-valores li { padding: .6rem 0; font-size: .97rem; }
.pagina-valores strong { color: var(--violeta-o); }

/* Los fundadores, uno al lado del otro: las dos formaciones se leen
   juntas, que es lo que explica de dónde sale la empresa. */
.pagina-fundadores { display: grid; gap: 1.2rem; margin: 1.8rem 0; }
@media (min-width: 720px) { .pagina-fundadores { grid-template-columns: 1fr 1fr; } }

.fundador {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-g); padding: 1.4rem;
}
.fundador h3 { margin: 0 0 .2rem; color: var(--violeta-o); font-size: 1.1rem; }
.fundador__rol {
  font-size: .85rem; color: var(--menta-o); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .9rem;
}
.fundador ul { padding-left: 1.1rem; margin: 0 0 .9rem; font-size: .92rem; }
.fundador li { margin-bottom: .3rem; }
.fundador__nota {
  font-size: .9rem; color: var(--gris); margin: 0;
  padding-top: .8rem; border-top: 1px solid var(--linea);
}

.pagina-cierre {
  display: flex; gap: .8rem; flex-wrap: wrap;
  margin: 2.5rem 0 1rem;
}

/* =====================================================================
   Formularios largos del sitio (registro de veterinarias)

   «.campo» ya existía esperando un <label> adentro. Acá la etiqueta es un
   <span> dentro de un <label class="campo">, que es lo que hace que al
   tocar el texto se enfoque el campo. Sin esta regla el <span> quedaba
   sin estilo y el formulario se veía desarmado.
   ===================================================================== */
/* El contenedor del sitio es «.env»; acá solo se angosta para un
   formulario largo, que leído a todo el ancho cansa. */
.env--angosta { width: min(44rem, 92vw); }

.form-vet { margin-top: 1.5rem; }

.form-vet .campo { display: block; margin-bottom: 1.3rem; }
.form-vet .campo > span {
  display: block; font-size: .92rem; font-weight: 600;
  margin-bottom: .35rem; color: var(--tinta);
}
.form-vet .campo > span em {
  font-style: normal; font-weight: 400; color: var(--gris); font-size: .86rem;
}
.form-vet .campo input,
.form-vet .campo select,
.form-vet .campo textarea {
  width: 100%; padding: .75rem .9rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 1rem; font-family: inherit; background: #fff;
  box-sizing: border-box;
}
.form-vet .campo input:focus,
.form-vet .campo select:focus,
.form-vet .campo textarea:focus {
  outline: 2px solid var(--violeta-c); outline-offset: 1px; border-color: transparent;
}
.form-vet .campo small {
  display: block; color: var(--gris); font-size: .85rem; margin-top: .3rem;
  line-height: 1.45;
}

/* Dos columnas en pantalla ancha, una sola en el teléfono: dos campos de
   media pantalla en un móvil no entran sin que el texto se corte. */
.campo-fila { display: grid; gap: 0 1.1rem; }
@media (min-width: 620px) { .campo-fila { grid-template-columns: 1fr 1fr; } }

.form-vet fieldset { border: 0; padding: 0; margin: 0 0 1.3rem; }

.campo-check {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .8rem 1rem; margin-bottom: .9rem;
  background: var(--nube); border-radius: var(--radio);
  font-size: .96rem; cursor: pointer;
}
.campo-check input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; flex: 0 0 auto; }

.campo-error {
  color: var(--alerta); font-size: .86rem; margin: .35rem 0 0;
  font-weight: 600;
}
/* El campo con error se ve antes de leer el mensaje. */
.campo:has(.campo-error) input,
.campo:has(.campo-error) textarea { border-color: var(--alerta); }

.form-vet .btn { width: 100%; margin-top: .5rem; }
@media (min-width: 620px) { .form-vet .btn { width: auto; min-width: 16rem; } }

/* =====================================================================
   La franja que invita a las veterinarias, encima del pie
   ===================================================================== */
.franja-vet {
  background: var(--menta-t);
  padding: 2.5rem 1rem;
  /* Separada del recuadro del pie: pegada parecía parte de la letra
     chica, y es lo que queremos que se lea. */
  margin-bottom: 0;
  border-top: 1px solid var(--linea);
}
.franja-vet__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.8rem; flex-wrap: wrap;
}
.franja-vet h2 {
  margin: 0 0 .4rem; font-size: 1.3rem; color: var(--violeta-o);
  font-family: 'Bricolage Grotesque', Karla, sans-serif;
}
.franja-vet p { margin: 0; font-size: .97rem; max-width: 40rem; }
.franja-vet .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .franja-vet__caja { flex-direction: column; align-items: flex-start; }
  .franja-vet .btn { width: 100%; text-align: center; }
}

/* =====================================================================
   La credencial, vista por quien la escanea

   La mira una recepcionista con el teléfono en la mano, parada en el
   mostrador. Lo primero tiene que ser si puede atender o no.
   ===================================================================== */
.cred-publica { padding-top: 2rem; }

.cred-sello {
  display: flex; align-items: center; gap: 1rem;
  border-radius: var(--radio-g); padding: 1.3rem 1.5rem;
  margin-bottom: 1.8rem;
}
.cred-sello i { font-size: 2.2rem; flex: 0 0 auto; }
.cred-sello strong { display: block; font-size: 1.15rem; }
.cred-sello span { font-size: .93rem; }
.cred-sello--ok  { background: var(--menta-t); color: #06694F; }
.cred-sello--mal { background: #FDECEF; color: #8B1D2E; }

.cred-datos h1 {
  font-family: 'Bricolage Grotesque', Karla, sans-serif;
  font-size: clamp(1.5rem, 5vw, 2rem); color: var(--violeta-o);
  margin: 0 0 1rem;
}
.cred-datos dl { display: grid; gap: 0; margin: 0; }
@media (min-width: 520px) { .cred-datos dl { grid-template-columns: 11rem 1fr; } }
.cred-datos dt {
  font-size: .85rem; color: var(--gris); padding: .5rem 0 0;
}
.cred-datos dd { margin: 0; padding: .5rem 0; font-size: 1rem; }
.cred-datos code {
  font-size: 1rem; letter-spacing: .05em; color: var(--violeta-o);
}

.cred-mascotas { margin-top: 2rem; }
.cred-mascotas h2 { font-size: 1.1rem; color: var(--violeta-o); }
.cred-mascota {
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .9rem 1.1rem; margin-bottom: .6rem;
}
.cred-mascota strong { display: block; font-size: 1.02rem; }
.cred-mascota span { font-size: .88rem; color: var(--gris); }
.cred-mascota code { font-size: .8rem; color: var(--gris); }

.cred-nota {
  font-size: .87rem; color: var(--gris); margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--linea);
}

/* =====================================================================
   La invitación a instalar la aplicación
   ===================================================================== */
/* El «display: flex» de abajo pisa el atributo «hidden», que solo trae
   un «display: none» del navegador y pierde contra cualquier regla de
   autor. Sin esta línea el cartel se ve siempre —incluso en una
   computadora, donde nunca se pidió mostrarlo— y el botón de cerrar
   parece roto: el JS pone hidden y no pasa nada. */
.instalar[hidden] { display: none !important; }

.instalar {
  /* Por encima del botón flotante de WhatsApp, que está en 90: con un
     z-index menor le tapaba justo el botón de instalar y el de cerrar,
     y el cartel quedaba inservible. */
  position: fixed; left: .7rem; right: .7rem; bottom: .7rem; z-index: 95;
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio-g); padding: .85rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
@media (min-width: 640px) {
  .instalar { left: auto; right: 1.2rem; bottom: 1.2rem; max-width: 26rem; }
}
.instalar img { border-radius: .6rem; flex: 0 0 auto; }
.instalar__txt { flex: 1; min-width: 0; }
.instalar__txt strong { display: block; font-size: .95rem; }
.instalar__txt span { display: block; font-size: .82rem; color: var(--gris); }
.instalar__ayuda { margin-top: .3rem; }

.instalar__ok {
  flex: 0 0 auto; border: 0; border-radius: var(--radio);
  background: var(--violeta); color: #fff;
  padding: .6rem 1.1rem; font-weight: 700; font-size: .9rem;
  font-family: inherit; cursor: pointer;
}
.instalar__no {
  flex: 0 0 auto; border: 0; background: none; color: var(--gris);
  font-size: 1rem; cursor: pointer; padding: .3rem;
}

/* Y el botón de WhatsApp se aparta mientras el cartel está abierto: dos
   cosas flotando en la misma esquina se pisan. El selector general no
   alcanza porque el botón puede estar antes en el documento. */
body:has(.instalar:not([hidden])) .wa-flotante { bottom: 7.5rem; }

/* =====================================================================
   Planes en el teléfono: tarjetas, no tabla

   Una tabla de cuatro columnas en una pantalla de 390px obliga a
   arrastrar de lado, y arrastrando se pierde el encabezado: la persona
   ve un tilde sin saber de qué plan es.
   ===================================================================== */
.planes-cards { display: none; }

@media (max-width: 860px) {
  /* La tabla se va del todo acá; no se oculta con scroll, se reemplaza. */
  .tabla-scroll { display: none; }

  .planes-cards {
    display: grid; gap: .9rem; padding: .5rem 0 1.5rem;
  }

  .plan-card {
    display: block; position: relative; text-decoration: none;
    background: #fff; border: 1.5px solid var(--linea);
    border-radius: var(--radio-g); padding: 1.3rem 1.4rem;
    color: var(--tinta);
  }
  .plan-card--destacado {
    border-color: var(--violeta); background: var(--violeta-t);
  }
  .plan-card__cinta {
    position: absolute; top: -.7rem; left: 1.3rem;
    background: var(--menta); color: var(--violeta-o);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: .2rem .7rem; border-radius: 99px;
  }
  .plan-card__nombre {
    display: block; font-size: 1.15rem; color: var(--violeta-o);
    margin-bottom: .2rem;
  }
  .plan-card__precio {
    display: block; font-size: 1.9rem; font-weight: 700;
    line-height: 1.1; color: var(--violeta-o);
  }
  .plan-card__periodo {
    display: block; font-size: .82rem; color: var(--gris);
  }
  .plan-card__resumen {
    display: block; font-size: .9rem; color: var(--gris); margin-top: .7rem;
  }
  .plan-card__ver {
    display: block; margin-top: .9rem; font-weight: 700;
    font-size: .92rem; color: var(--violeta);
  }
  .plan-card__ver::after { content: ' →'; }
}

/* =====================================================================
   Contacto: dos columnas en pantalla ancha, una sola en el teléfono

   Estaba escrito en el estilo en línea, que no mira el ancho: en un
   móvil las dos columnas quedaban igual de angostas y el formulario se
   salía de la pantalla.
   ===================================================================== */
.contacto-grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  .contacto-grilla { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
}

.contacto-aparte {
  background: var(--arena);
  padding: 1.6rem;
  border-radius: var(--radio);
}
@media (min-width: 900px) { .contacto-aparte { padding: 2rem; } }

/* En el teléfono el formulario va primero: la persona entró a escribir,
   no a leer los otros canales. */
@media (max-width: 899px) {
  .contacto-grilla > form,
  .contacto-grilla > div:first-child { order: 1; }
  .contacto-aparte { order: 2; }
}

/* Que nada se salga de la pantalla, pase lo que pase con el contenido. */
.contacto-grilla input,
.contacto-grilla select,
.contacto-grilla textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.contacto-grilla pre,
.contacto-grilla code { white-space: pre-wrap; word-break: break-word; }

/* Las grillas de dos columnas que estaban en el estilo en línea.
   «auto-fit» se adapta solo; un «1fr 1fr» escrito a mano, no: en un
   teléfono deja dos columnas de la mitad del ancho. */
.plan-grilla { display: grid; grid-template-columns: 1fr; gap: 2rem;
               align-items: start; }
@media (min-width: 900px) {
  .plan-grilla { grid-template-columns: 1.4fr .9fr; gap: 3rem; }
}

.par-campos { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .par-campos { grid-template-columns: 1fr 1fr; } }

/* Los dos botones del hero, uno al lado del otro también en el teléfono.
   Con «wrap» a secas el segundo caía abajo y quedaba lejos del primero,
   que es justo donde se mira. */
@media (max-width: 560px) {
  .heroe__acciones { flex-wrap: nowrap; gap: .6rem; }
  .heroe__acciones .btn {
    flex: 1 1 0; min-width: 0; text-align: center;
    padding-left: .9rem; padding-right: .9rem;
    white-space: nowrap;
  }
}

/* El cartel con las instrucciones queda más alto que con el botón solo:
   se le da aire para que el texto no se apriete contra el borde. */
.instalar__ayuda {
  line-height: 1.45;
}
.instalar__ayuda:not([hidden]) ~ * { margin-top: .2rem; }

/* En pantallas angostas el botón y la X no entran al lado del texto. */
@media (max-width: 420px) {
  .instalar { flex-wrap: wrap; }
  .instalar__txt { flex: 1 1 100%; order: 1; }
  .instalar img { order: 0; }
  .instalar__no { order: 0; margin-left: auto; }
  .instalar__ok { order: 2; flex: 1 1 100%; margin-top: .3rem; }
}

/* Las instrucciones, resaltadas un instante cuando aparecen: si el
   cartel ya estaba abierto mostrando lo mismo, sin esto el toque del
   botón no se nota. */
.instalar__ayuda--mira {
  animation: mp-mira 1.2s ease-out;
  border-radius: .4rem;
}
@keyframes mp-mira {
  0%   { background: var(--menta); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .instalar__ayuda--mira { animation: none; background: var(--menta-t); }
}

.instalar__ok:disabled { opacity: .65; cursor: default; }

/* Las instrucciones en una sola frase corrida. Con «strong» de bloque
   —que es lo que heredaban del tipo de letra del cartel— cada palabra
   resaltada caía en su propia línea y el texto quedaba en escalera. */
/* El «display: block» de acá abajo pisaría el atributo «hidden», igual
   que pasó con el cartel entero. */
.instalar__ayuda[hidden] { display: none !important; }

.instalar__ayuda {
  display: block;
  font-size: .85rem;
  color: var(--tinta);
}
.instalar__ayuda b {
  display: inline;
  font-weight: 700;
  white-space: nowrap;
}