/* ============================================================
   REFERIDOS INVITACIÓN V2 — estilos propios de /invitacion-v2
   (usa los componentes de base.css / styles.css:
   .oyo-btn, .oyo-logos-*, .oyo-benefit-*, .oyo-step-*, .oyo-plan-card-*,
   .oyo-testimonial-*, .oyo-stat-*, .oyo-qs-team-*, .oyo-faq-*)
   ============================================================ */

/* ---------- HERO ----------
   Degradado calcado por muestreo de píxeles del render real de Figma
   (verificado: 0-1 unidad de diferencia por canal).
   Misma estrategia que .oyo-influencer-hero (landings de influencers,
   ej. /amba/aixacortez): fila bootstrap (texto | foto) en flujo normal,
   flex + align-items:center y min-height:70vh en pantallas grandes, y
   la foto con ancho FIJO en píxeles (no un % del hero) para que no
   cambie de tamaño según qué tan alto termine el hero por el otro lado. */
.oyo-ref2-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #46b2d1 0%, #48c0c1 40%, var(--color-teal-vivid) 100%);
  padding: 64px 0;
}

.oyo-ref2-hero > .container {
  width: 100%;
}

@media (min-width: 1200px) {
  .oyo-ref2-hero {
    min-height: 70vh;
  }
}

.oyo-ref2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/influencer/hero-bg-swirl.svg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 220% auto;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 992px) {
  .oyo-ref2-hero::before {
    display: none;
  }

  .oyo-ref2-hero {
    padding: 64px 0;
  }
}

.oyo-ref2-hero-decor {
  position: absolute;
  left: 34.24%;
  top: -16.37%;
  width: 68.47%;
  height: auto;
  max-width: none;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.oyo-ref2-hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.oyo-ref2-hero-eyebrow {
  color: var(--color-dark);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

.oyo-ref2-hero-title {
  color: var(--color-white);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.12;
  margin-bottom: 16px;
}

.oyo-ref2-hero-subtitle {
  color: var(--color-dark);
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 20px;
}

.oyo-ref2-hero-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oyo-ref2-hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.oyo-ref2-hero-checklist img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  object-fit: contain;
}

/* Medido por píxeles del render real de Figma: el bloque navy va a todo
   el ancho de la tarjeta (sin margen lateral), solo con separación
   arriba/abajo (24px / 20px) — no un padding parejo en los 4 lados. */
.oyo-ref2-benefit-card {
  background-color: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  max-width: 480px;
}

.oyo-ref2-benefit-card-head {
  background-color: var(--color-dark);
  padding: 16px 16px 14px;
  margin: 24px 0 20px;
  text-align: left;
}

.oyo-ref2-benefit-label {
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.oyo-ref2-benefit-amount {
  color: var(--color-white);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.oyo-ref2-benefit-desc {
  color: var(--color-white);
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  margin: 0;
}

/* Mobile: la foto vive en el flujo normal, centrada debajo del texto.
   Desktop (≥992px): la foto se ancla abajo-a-la-derecha del hero
   (position:absolute, bottom:0, right:0), pegada a los bordes de la
   sección, tal como en el Figma — no centrada en la columna. */
.oyo-ref2-hero-media-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}

.oyo-ref2-hero-photo {
  position: relative;
  width: 280px;
  max-width: calc(100vw - 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ccc;
  background-color: var(--color-white);
  z-index: 1;
  flex-shrink: 0;
}

/* Recorte más cerrado (menos fondo/cuarto visible) para acercarse al
   encuadre de Figma — ajustado a criterio visual, sin metadata exacta
   de Figma disponible (MCP caído). */
.oyo-ref2-hero-photo img {
  position: absolute;
  top: -7.7%;
  left: -40.2%;
  width: 165%;
  height: auto;
  max-width: none;
  display: block;
}

.oyo-ref2-hero-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.oyo-ref2-hero-cta .oyo-btn-wa-wrap {
  width: 100%;
}

.oyo-ref2-hero-cta .oyo-btn-outline {
  border: none;
  color: var(--color-dark);
}

.oyo-ref2-hero-cta .oyo-btn-outline:hover {
  border: none;
}

/* <1000px (incluye mobile): sin foto — el texto ocupa todo el ancho
   y se centra, ya que no queda columna de imagen que balancear. */
@media (max-width: 999.98px) {
  .oyo-ref2-hero-media-col,
  .oyo-ref2-hero > .oyo-ref2-hero-photo {
    /* !important necesario: .d-lg-block de Bootstrap ya trae !important
       y gana sobre esta regla en el rango 992–999.98px si no lo igualamos. */
    display: none !important;
  }

  .oyo-ref2-hero-text-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .oyo-ref2-hero-main {
    text-align: center;
  }

  .oyo-ref2-hero-checklist li {
    justify-content: center;
    text-align: left;
  }

  .oyo-ref2-benefit-card {
    margin: 0 auto;
  }

  .oyo-ref2-hero-cta {
    /* justify-content (no solo align-items) porque en 992–999.98px la
       regla ≥992px ya puso flex-direction:row, y ahí align-items pasa
       a controlar el eje vertical, no el horizontal. */
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .oyo-ref2-hero-eyebrow {
    font-size: 20px;
  }

  .oyo-ref2-hero-title {
    font-size: 50px;
  }

  .oyo-ref2-hero-subtitle {
    font-size: 20px;
  }

  /* 992–1399px: la columna de texto es angosta y el título ya es grande,
     así que el círculo se dimensiona por ancho (vw, acotado) para que
     nunca se monte sobre el texto — no por la altura del hero. */
  .oyo-ref2-hero-photo {
    position: absolute;
    top: auto;
    bottom: -50px;
    right: -50px;
    width: clamp(440px, 46vw, 680px);
    aspect-ratio: 1;
    z-index: 2;
  }

  .oyo-ref2-hero-cta {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .oyo-ref2-hero-cta .oyo-btn-wa-wrap {
    width: auto;
  }
}

/* 1000–1399px: título un poco más chico (ya no necesita ser tan grande
   en una columna angosta) + más padding derecho recuperado, para
   cederle ese espacio a la foto y que se vea bastante más grande en
   este rango específico, sin tocar 992–999px ni montarse sobre el texto. */
@media (min-width: 1000px) and (max-width: 1399.98px) {
  .oyo-ref2-hero-main {
    padding-right: 80px;
  }

  .oyo-ref2-hero-title {
    font-size: 42px;
  }

  .oyo-ref2-hero-photo {
    width: clamp(480px, 52vw, 740px);
  }
}

/* 1000–1199px: columna más angosta todavía dentro del rango anterior,
   bajamos un poco más los tamaños de texto para que respire mejor. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .oyo-ref2-hero-title {
    font-size: 36px;
  }

  .oyo-ref2-hero-subtitle {
    font-size: 17px;
  }

  .oyo-ref2-hero-checklist li {
    font-size: 14px;
  }
}

/* ≥1400px: suficiente ancho de columna de texto como para que el
   círculo se pueda dimensionar por la altura real del hero (más
   grande, "pegado" a los bordes como en el Figma) sin montarse sobre
   el texto. */
@media (min-width: 1400px) {
  .oyo-ref2-hero-photo {
    top: 32px;
    bottom: -50px;
    right: -50px;
    width: auto;
  }
}

/* ---------- DIFERENCIADORES: fondo crema (no gris, a diferencia del home) ---------- */
.oyo-ref2-diferenciadores-bg {
  background-color: var(--color-cream) !important;
}

/* ---------- TESTIMONIOS: fondo crema, tarjetas blancas ---------- */
.oyo-ref2-testimonials-bg {
  background-color: var(--color-cream);
}

.oyo-ref2-testimonials-bg .oyo-testimonial-card {
  background-color: var(--color-white);
}

/* ---------- PLANES (texto de aplicación de descuento) ---------- */
.oyo-ref2-plans-applied {
  color: var(--color-dark);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 24px;
}

/* ---------- CREADO POR EXPERTAS ----------
   Reutiliza .oyo-qs-team + .oyo-creado-* tal cual (ya definidos en
   styles.css y usados en /terapiaonline). Solo el mismo ajuste puntual
   de tamaños que esa página aplica para calzar con su Figma. */
.oyo-creado.oyo-qs-team {
  padding: 40px 24px;
}

.oyo-creado .oyo-creado-title {
  font-size: 36px;
}

@media (min-width: 992px) {
  .oyo-creado .oyo-creado-title {
    font-size: 48px;
  }

  .oyo-creado .oyo-creado-photo img {
    margin: 16px 0 8px;
  }
}

.oyo-creado .oyo-creado-body p {
  font-weight: 700;
}

/* ---------- FAQ — banner final ---------- */
.oyo-ref2-faq-banner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  background-color: var(--color-cream);
  border-radius: 16px;
  padding: 24px;
  margin-top: 32px;
}

.oyo-ref2-faq-banner-title {
  color: var(--color-navy-deep);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
}

.oyo-ref2-faq-banner-sub {
  color: var(--color-navy-deep);
  font-weight: 400;
  font-size: 15px;
  margin: 0;
}

@media (min-width: 768px) {
  .oyo-ref2-faq-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

#planes .oyo-plan-card-per-session {
  font-size: 14px;
  letter-spacing: -0.3px;
}

#planes .oyo-plan-card--scheme-dark .oyo-plan-card-price,
#planes .oyo-plan-card--scheme-dark .oyo-plan-card-unit {
  color: var(--color-white);
}