/* =========================================================
   VISTA · Tema "circular + azul" (PREVIEW / experimento)
   Se carga DESPUÉS de vista.css para ganar en la cascada.
   Remapea el azul al #2E63F6 nuevo + redondea todo + píldoras.
   ========================================================= */
:root{
  /* --- azul evolucionado (antes #1b61c9) --- */
  --blue:      #2E63F6;
  --blue-deep: #1D48C8;
  --blue-mid:  #4E7DF7;
  --blue-bg:   #eaf1ff;
  --blue-bg-s: #d8e6ff;
  /* navy / off-white se mantienen igual que hoy */

  /* --- redondeo más "circular" (Plantons) --- */
  --r-xs:  8px;  --r-sm:  10px; --r-md:  14px; --r-lg:  20px;
  --r-xl:  28px; --r-2xl: 38px; --r-pill: 999px;

  /* sombra del botón con el azul nuevo */
  --shadow-btn: 0 1px 2px rgba(0,0,0,0.06), 0 6px 18px rgba(46,99,246,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* ---------- botones = píldora ---------- */
.btn{ border-radius: var(--r-pill); padding: 14px 26px; }
.btn-sm{ padding: 10px 18px; }
.btn-primary:hover{ box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 10px 26px rgba(46,99,246,0.34); }

/* ---------- tarjetas más redondeadas ---------- */
.card{ border-radius: 24px; }
.svc-card, .card.pain{ border-radius: 26px; }

/* ---------- imágenes / media redondeadas ---------- */
.hero-media, .hero-media img, .hero-media video{ border-radius: 30px; }
/* respeta a quien pidió menos animación: pausa el video del hero (queda el póster) */
@media (prefers-reduced-motion: reduce){ .hero-vid{ /* pausado vía JS en bubbles.js */ } }
figure img{ border-radius: 22px; }
.hero-caption{ border-radius: 18px; }

/* ---------- hero: capa de burbujas detrás del contenido ---------- */
.hero{ position: relative; overflow: hidden; }
.hero > .container{ position: relative; z-index: 2; }
canvas.vista-bubbles{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* la franja de credenciales (cred-pill) ya es píldora — reforzamos el azul */
.cred-pill{ border-radius: var(--r-pill); }

/* foco accesible con el azul nuevo (hereda de --blue, aquí explícito) */
:focus-visible{ outline-color: var(--blue); }

@media (prefers-reduced-motion: reduce){
  canvas.vista-bubbles{ opacity:.7; }
}

/* ---------- hero cinemagraph (solo Estancia) ---------- */
.hero-media-cine{ position: relative; }
.hero-media-cine .hero-cine{
  display: block; width: 100%; height: 560px; object-fit: cover;
  border-radius: 30px; filter: saturate(.9); background: var(--blue-bg);
}
.hero-cine-scrim{
  position: absolute; inset: 0; border-radius: 30px; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,17,23,0) 55%, rgba(15,17,23,.30) 100%);
}
@media (max-width: 960px){ .hero-media-cine .hero-cine{ height: 480px; } }
@media (max-width: 560px){ .hero-media-cine .hero-cine{ height: 420px; } }

/* ---------- isotipo vivo: nav / footer / CTA / sellos ---------- */
.brand{white-space:nowrap}
.vi-mark{width:23px;height:23px;display:inline-block;vertical-align:-.18em;margin-right:8px}
.vi-mark-btn{width:17px;height:17px;--vi-pin:#fff;--vi-bar:rgba(255,255,255,.55);margin-right:2px}
.vi-tagline{font-weight:600;font-size:13.5px;color:var(--blue);margin:8px 0 2px;letter-spacing:.01em}
/* el punto del hero-tag ahora es el pin de la marca */
.hero-tag::before{width:10px;height:12px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M32 64 C 33 51 47 47 47 31 A 15.5 15.5 0 1 0 16 31 C 16 45 31 50 32 64 Z' fill='%232E63F6'/%3E%3C/svg%3E") center/contain no-repeat}

/* cinturón: variable del cotizador cubierta por el tema */
:root{ --azul:#2E63F6; }