/* Identidad JPets — azul rey + celeste + blanco, juvenil y redondeado.
   Fuente: @jpetsveterinaria (revisado 19 oct 2026). */

:root {
  --fondo: #f1f8ff;
  --fondo-alt: #ffffff;
  --tinta: #0b2545;
  --suave: #4f6b8f;
  --linea: #d7ecfb;
  --acento: #1f5fd0;
  --acento-hondo: #163f8f;

  --fuente-titulo: "Baloo 2", "Fraunces", sans-serif;
  --fuente-wordmark: "Baloo 2", sans-serif;
  --radio: 24px;
  --patron: radial-gradient(circle at 8% 20%, rgba(63,182,240,0.12) 0 5px, transparent 6px),
            radial-gradient(circle at 92% 12%, rgba(31,95,208,0.08) 0 5px, transparent 6px),
            radial-gradient(circle at 20% 90%, rgba(63,182,240,0.1) 0 5px, transparent 6px),
            radial-gradient(circle at 80% 75%, rgba(31,95,208,0.07) 0 5px, transparent 6px);

  /* Huesos y patas en celeste muy suave, tileados sobre el blanco. */
  --patron-cuerpo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%233fb6f0' fill-opacity='0.06'%3E%3Ccircle cx='18' cy='22' r='4'/%3E%3Ccircle cx='27' cy='17' r='3'/%3E%3Ccircle cx='9' cy='17' r='3'/%3E%3Ccircle cx='18' cy='11' r='3'/%3E%3C/g%3E%3Cg fill='%231f5fd0' fill-opacity='0.05' transform='rotate(-15 75 65)'%3E%3Crect x='68' y='63' width='15' height='4.5' rx='2.2'/%3E%3Ccircle cx='69' cy='61' r='3.2'/%3E%3Ccircle cx='69' cy='68' r='3.2'/%3E%3Ccircle cx='82' cy='61' r='3.2'/%3E%3Ccircle cx='82' cy='68' r='3.2'/%3E%3C/g%3E%3C/svg%3E");

  /* Divisor en forma de ola, celeste, al pie del hero. */
  --ola-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26'%3E%3Cpath d='M0 14 Q15 2 30 14 T60 14 V26 H0 Z' fill='%23d7ecfb'/%3E%3C/svg%3E");
}

.cabeza__nombre { font-family: var(--fuente-wordmark); font-weight: 700; }
.cabeza__logo { border-radius: 999px; border: 2px solid #3fb6f0; }

.hero__titulo { letter-spacing: -0.02em; }
.hero__estado { border-radius: 999px; border-color: #3fb6f0; }

.urgencias { border-radius: 26px; }

.servicio { border-radius: 20px; }
.servicio__resumen { font-family: var(--fuente-wordmark); font-weight: 600; }

.equipo__marco { border-radius: 22px; border-color: #bfe3fa; background: #fbfeff; }

.boton-wa, .boton-llamar, .barra-movil__boton { border-radius: 999px; }

.sede { border-radius: 22px; }

/* Burbujas celestes suaves detrás de urgencias. */
.urgencias {
  background:
    radial-gradient(circle at 12% 15%, rgba(63,182,240,0.1), transparent 55%),
    radial-gradient(circle at 88% 85%, rgba(31,95,208,0.08), transparent 55%),
    var(--fondo-alt);
}

/* Secciones alternadas azul rey / celeste. */
.equipo {
  background: var(--fondo);
  border-top: none;
  border-radius: 26px;
  padding: 28px 20px;
  margin: 10px 0;
}
.pasos {
  background: linear-gradient(135deg, var(--acento), var(--acento-hondo));
  color: #fff;
  border-top: none;
  border-radius: 28px;
  padding: 30px 22px;
  margin: 10px 0;
}
.pasos .bloque__titulo, .pasos__lista strong { color: #fff; }
.pasos__lista p { color: rgba(255,255,255,0.85); }
.pasos__num { background: #fff; color: var(--acento-hondo); }