/* inicio.css
   Módulo visual de la página principal.
   Todas las reglas están encapsuladas con el prefijo inicio-.
*/

.inicio-hero{
  isolation:isolate;
  min-height:372px;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 50px rgba(4,20,48,.22), 0 8px 18px rgba(4,20,48,.14);
}

.inicio-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-size:100% 100%;
  animation:inicio-gradient-breathe 12s ease-in-out infinite alternate;
}

.inicio-hero-bg--azul{
  background-image:
    radial-gradient(circle at 12% 8%, rgba(65,145,255,.38), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(24,180,232,.22), transparent 31%),
    linear-gradient(128deg, rgba(255,255,255,.06), transparent 42%),
    linear-gradient(135deg, #06182f 0%, #0a2b55 66%, #0f477c 100%);
}

.inicio-hero-bg--rojo{
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,117,132,.27), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(220,74,111,.20), transparent 31%),
    linear-gradient(128deg, rgba(255,255,255,.055), transparent 42%),
    linear-gradient(135deg, #3a0d1f 0%, #6d1838 62%, #9a294d 100%);
}

.inicio-hero::before{
  z-index:1;
  opacity:.23;
  mix-blend-mode:normal;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:38px 38px;
}

.inicio-hero::after{
  z-index:1;
  opacity:.72;
  background:
    radial-gradient(420px 220px at 74% 18%, rgba(255,255,255,.13), transparent 66%),
    radial-gradient(440px 260px at 91% 91%, rgba(0,0,0,.20), transparent 70%);
}

.inicio-hero-inner{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:34px;
  padding-top:34px;
  padding-bottom:34px;
}

.inicio-hero-content{
  min-width:0;
}

.inicio-hero-title{
  max-width:680px;
  text-wrap:balance;
  text-shadow:0 3px 18px rgba(0,0,0,.24);
}

.inicio-hero-actions{
  align-items:center;
  row-gap:12px;
}

.inicio-hero-secondary{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.72);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  backdrop-filter:blur(6px);
}

.inicio-hero-secondary:hover,
.inicio-hero-secondary:focus-visible{
  background:rgba(255,255,255,.15);
  border-color:#ffffff;
}

.inicio-hero-search{
  min-height:46px;
  margin-inline-start:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.92);
  background:#ffffff;
  box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.inicio-hero-search--azul{
  color:#0a3564;
}

.inicio-hero-search--rojo{
  color:#721a3a;
}

.inicio-hero-search:hover,
.inicio-hero-search:focus-visible{
  transform:translateY(-4px) scale(1.025);
  box-shadow:0 20px 38px rgba(0,0,0,.30), 0 0 0 4px rgba(255,255,255,.12);
  filter:brightness(1.02);
}

.inicio-hero-search:active{
  transform:translateY(-1px) scale(.995);
}

.inicio-hero-search-icon{
  font-size:15px;
}

.inicio-hero-search-text{
  white-space:nowrap;
}

.inicio-hero-visual{
  min-height:250px;
  border-color:rgba(255,255,255,.20);
  background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow:0 24px 54px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(4px);
  transition:transform .28s ease, box-shadow .28s ease;
}

.inicio-hero-visual:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 64px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
}

.inicio-hero-image{
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.24));
}

.inicio-product-card{
  isolation:isolate;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 18px 38px rgba(5,22,52,.20), 0 7px 15px rgba(5,22,52,.12);
}

.inicio-product-card::before,
.inicio-product-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.inicio-product-card::before{
  inset:0;
  z-index:0;
  background:var(--inicio-product-gradient);
}

.inicio-product-card::after{
  inset:0;
  z-index:0;
  opacity:.32;
  background-image:
    radial-gradient(300px 190px at 84% 6%, rgba(255,255,255,.24), transparent 68%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:100% 100%, 40px 40px, 40px 40px;
}

.inicio-product-card--azul{
  --inicio-product-gradient:
    radial-gradient(circle at 8% 0%, rgba(65,145,255,.35), transparent 36%),
    linear-gradient(135deg, #06182f 0%, #0a2b55 68%, #0f477c 100%);
}

.inicio-product-card--rojo{
  --inicio-product-gradient:
    radial-gradient(circle at 8% 0%, rgba(255,117,132,.25), transparent 36%),
    linear-gradient(135deg, #3a0d1f 0%, #6d1838 64%, #9a294d 100%);
}

.inicio-product-title,
.inicio-product-copy,
.inicio-product-link{
  position:relative;
  z-index:1;
}

.inicio-product-title{
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}

.inicio-product-copy{
  max-width:72%;
  color:rgba(255,255,255,.92);
}

.inicio-product-link{
  display:inline-flex;
  align-items:center;
  margin-top:5px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  box-shadow:0 7px 16px rgba(0,0,0,.12);
  backdrop-filter:blur(5px);
}

.inicio-product-card:hover .inicio-product-link,
.inicio-product-card:focus-visible .inicio-product-link{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.48);
}

.inicio-product-image{
  z-index:1;
  transition:transform .26s ease, filter .26s ease;
}

.inicio-product-card:hover .inicio-product-image,
.inicio-product-card:focus-visible .inicio-product-image{
  transform:translate3d(-5px,-4px,0) scale(1.035);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));
}

@keyframes inicio-gradient-breathe{
  from{
    transform:scale(1);
    filter:saturate(1);
  }
  to{
    transform:scale(1.018);
    filter:saturate(1.08);
  }
}

@media (max-width:1050px){
  .inicio-hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);
    padding-left:34px;
  }

  .inicio-hero-search{
    margin-inline-start:0;
  }
}

@media (max-width:900px){
  .inicio-hero{
    min-height:0;
  }

  .inicio-hero-inner{
    grid-template-columns:1fr;
    padding:28px 18px;
  }

  .inicio-hero-title{
    max-width:none;
  }

  .inicio-hero-visual{
    min-height:210px;
  }

  .inicio-product-copy{
    max-width:100%;
  }
}

@media (max-width:560px){
  .inicio-hero-inner{
    padding:24px 6px;
  }

  .inicio-hero-actions{
    align-items:stretch;
  }

  .inicio-hero-secondary,
  .inicio-hero-search{
    flex:1 1 100%;
    width:100%;
  }

  .inicio-hero-search-text{
    white-space:normal;
  }

  .inicio-hero-visual{
    min-height:170px;
  }
}

@media (prefers-reduced-motion:reduce){
  .inicio-hero-bg{
    animation:none;
  }

  .inicio-hero-search,
  .inicio-hero-visual,
  .inicio-product-image{
    transition:none;
  }
}