/*!
 * Demo Hero overrides for OculiAlcoy (demo landing only)
 * Scope: .theme-physiocare
 */

/* Bridge hero tint variables to landing brand */
.theme-physiocare {
  /* Use brand rgb variables if present; fallback to mint tones */
  --hero-primary-tint: rgba(var(--oftalmologo-primary-rgb, 0, 165, 127), 0.18);
  --hero-secondary-tint: rgba(var(--oftalmologo-secondary-rgb, 23, 98, 126), 0.22);
  --hero-primary-bloom: rgba(var(--oftalmologo-primary-rgb, 0, 165, 127), 0.26);
}

.theme-physiocare .hero-section.feature-hero.oftalmologo-hero {
  position: relative;
  padding: 6.5rem 0 3.5rem;
}

/* Centrado del hero cuando no hay wizard */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.is-centered{
  display:flex;
  align-items:center;
  min-height:72vh;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.is-centered .row{
  align-items:center;
  justify-content:center;
}

/* Video background support */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video {
  background: none !important;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-overlay {
  position: absolute;
  inset: 0;
  /* Refuerza contraste: degradado horizontal + vertical */
  background:
    linear-gradient(90deg,
      rgba(14, 22, 24, 0.62) 0%,
      rgba(14, 22, 24, 0.50) 45%,
      rgba(14, 22, 24, 0.28) 70%,
      rgba(14, 22, 24, 0.00) 100%
    ),
    linear-gradient(180deg,
      rgba(14, 22, 24, 0.50) 0%,
      rgba(14, 22, 24, 0.65) 100%
    );
}

/* Subtle brand overlay behind content */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(var(--oftalmologo-primary-rgb, 0, 165, 127), .10), transparent 60%),
    radial-gradient(1200px 600px at 80% 20%, rgba(var(--oftalmologo-secondary-rgb, 23, 98, 126), .10), transparent 60%);
  pointer-events: none;
}

/* Ensure content is above background decor */
.theme-physiocare .hero-section .container {
  position: relative;
  z-index: 2;
}

/* Texto oscuro por defecto: el hero de la demo no lleva imagen ni vídeo de
   fondo (solo el degradado claro de marca), así que el titular debe leerse
   en oscuro. El blanco con sombra queda reservado para cuando SÍ hay una
   imagen o un vídeo detrás (.has-bg / .has-video), donde hace falta contraste
   sobre una foto. */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero h1,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero h2 {
  color: var(--fa-text);
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .accent{
  color: var(--oftalmologo-secondary, var(--fa-primary));
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .text-muted,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .list-unstyled,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .list-unstyled li{
  color: var(--fa-muted) !important;
}

/* Sobre imagen o vídeo: recupera el blanco con sombra para legibilidad */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg h1,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg h2,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .lead,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video h1,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video h2,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .lead {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .accent,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .accent{
  color: #e8fff5; /* menta muy clara para mantener marca pero con alto contraste */
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .text-muted,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .list-unstyled,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .list-unstyled li,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .text-muted,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .list-unstyled,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .list-unstyled li{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Checks del hero con recuadro atractivo */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-checks{
  display:inline-flex;
  gap:.5rem;
  flex-wrap:wrap;
  padding:.25rem;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.is-centered .hero-checks{
  justify-content:center;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-checks li{
  display:flex;align-items:center;gap:.5rem;margin:0;
  padding:.45rem .7rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(var(--oftalmologo-primary-rgb), .18);
  box-shadow:0 6px 16px rgba(2,8,23,.05);
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-checks li i{
  width:24px;height:24px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--fa-primary), var(--fa-secondary));
  color:#fff !important;
  box-shadow:0 4px 12px rgba(2,8,23,.18);
}

/* Botón sólido del hero: siempre en degradado de marca, buen contraste en
   claro y en foto/vídeo por igual. */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero .btn.btn-oftalmologo{
  background: linear-gradient(135deg, var(--fa-primary), var(--fa-secondary));
  color:#fff;
  border:none;
  box-shadow: 0 12px 28px rgba(var(--oftalmologo-primary-rgb), .24);
}

/* Solo cuando hay imagen o vídeo detrás: badge y botón outline en blanco
   translúcido (necesitan contraste sobre una foto, no sobre el fondo claro
   por defecto, donde ya tienen su propio estilo de marca). */
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .badge-soft,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .badge-soft{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  color:#e8fff5;
  margin: 0 auto 0.5rem; /* centrado y separación inferior */
  width:auto !important; /* Safari/old */
  inline-size: max-content; /* shrink to text */
  max-width: 95%;
  white-space: nowrap;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .btn.btn-outline-oftalmologo,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .btn.btn-outline-oftalmologo{
  color:#fff;
  border:1px solid rgba(255,255,255,.65);
  background: transparent;
}
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-bg .btn.btn-outline-oftalmologo:hover,
.theme-physiocare .hero-section.feature-hero.oftalmologo-hero.has-video .btn.btn-outline-oftalmologo:hover{
  background: rgba(255,255,255,.12);
}

/* En móviles, overlay más intenso para máxima legibilidad */
@media (max-width: 575.98px){
  .theme-physiocare .hero-section.feature-hero.oftalmologo-hero .hero-overlay{
    background:
      linear-gradient(90deg,
        rgba(14, 22, 24, 0.72) 0%,
        rgba(14, 22, 24, 0.58) 55%,
        rgba(14, 22, 24, 0.34) 80%,
        rgba(14, 22, 24, 0.00) 100%
      ),
      linear-gradient(180deg,
        rgba(14, 22, 24, 0.60) 0%,
        rgba(14, 22, 24, 0.72) 100%
      );
  }
}


/* Floating icons: size and positions to avoid overlap with wizard */
.theme-physiocare .hero-section .floating-elements {
  pointer-events: none;
  z-index: 1;
}
.theme-physiocare .hero-section .float-element {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(0, 165, 127, 0.1);
  color: var(--fa-primary);
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.06);
}
.theme-physiocare .hero-section .float-1 { top: 6%; left: 3%; }
.theme-physiocare .hero-section .float-2 { top: 4%; right: 4%; }
.theme-physiocare .hero-section .float-3 { bottom: 8%; left: 6%; }
.theme-physiocare .hero-section .float-4 { bottom: 4%; right: 8%; }

/* Wizard block and card polishing */
.theme-physiocare .hero-image-container {
  max-width: 560px;
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.theme-physiocare .hero-gate .card { border-radius: 16px; border: 1px solid #dbe7e2; }
.theme-physiocare .hero-gate .card-header { background: transparent; }

/* Soft badge and buttons tweaks */
.theme-physiocare .badge-soft { border-radius: 999px; padding: .35rem .65rem; }
.theme-physiocare .btn-hero-primary { box-shadow: 0 12px 28px rgba(var(--oftalmologo-primary-rgb), .22); transition: transform .18s ease, box-shadow .18s ease; }
.theme-physiocare .btn-hero-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(var(--oftalmologo-primary-rgb), .28); }

/* Shape divider height a bit taller on demo */
.theme-physiocare .shape-divider-bottom-1 svg { height: 90px; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .theme-physiocare .btn-hero-primary,
  .theme-physiocare .btn-oftalmologo,
  .theme-physiocare .btn-outline-oftalmologo { transition: none !important; }
}

/* Responsive: reduce floats noise and space on small screens */
@media (max-width: 991.98px) {
  .theme-physiocare .hero-section.feature-hero.oftalmologo-hero { padding: 5.5rem 0 2.5rem; }
  .theme-physiocare .hero-section .float-element { transform: scale(.85); }
  .theme-physiocare .hero-section .float-2 { right: 0; }
  .theme-physiocare .hero-section .float-1 { left: 0; }
}
@media (max-width: 767.98px) {
  .theme-physiocare .hero-section .floating-elements { display: none; }
  .theme-physiocare .hero-image-container { margin-top: 1rem; }
}

/* Elementos flotantes */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* Circulo decorativo */
.floating-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    animation: float 8s infinite ease-in-out;
}

.floating-circle.small {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 165, 127, 0.2);
}

.floating-circle.medium {
    width: 100px;
    height: 100px;
    background-color: rgba(0, 165, 127, 0.15);
}

.floating-circle.large {
    width: 150px;
    height: 150px;
    background-color: rgba(0, 165, 127, 0.1);
}

/* Posicionamiento de los elementos */
.circle1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.circle2 {
    top: 60%;
    left: 5%;
    animation-delay: 1s;
}

.circle3 {
    top: 10%;
    right: 15%;
    animation-delay: 2s;
}

.circle4 {
    bottom: 15%;
    right: 10%;
    animation-delay: 3s;
}

.circle5 {
    bottom: 30%;
    left: 20%;
    animation-delay: 4s;
}