/*
 * Sistema visual armónico de la portada.
 * Escala base: 8, 13, 21, 34, 55 y 89 px (aproximación progresiva a φ).
 * Esta capa es exclusivamente presentacional: no modifica contenido ni lógica.
 */
:root{
  --h-1:8px;
  --h-2:13px;
  --h-3:21px;
  --h-4:34px;
  --h-5:55px;
  --h-6:89px;
  --h-radius:21px;
  --h-radius-lg:34px;
  --h-line:rgba(196,181,253,.19);
  --h-surface:linear-gradient(145deg,rgba(31,21,62,.94),rgba(12,9,31,.98));
  --h-shadow:0 21px 55px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
}

body{
  background-color:#090614;
  background-image:radial-gradient(circle at 50% 18%,rgba(124,58,237,.055),transparent 28%),linear-gradient(180deg,rgba(10,7,22,0),rgba(5,3,14,.35));
}

/* El hero conserva su composición limpia; el planetario permanece intacto. */
.hero h1{letter-spacing:-.045em;line-height:1.13;text-wrap:balance}
.hero p.lead{line-height:1.62}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  width:min(100%,530px);
  margin-top:34px;
  overflow:hidden;
  border:1px solid var(--h-line);
  border-radius:var(--h-radius);
  background:linear-gradient(135deg,rgba(34,22,67,.74),rgba(12,9,31,.82));
  box-shadow:var(--h-shadow);
}
.hero-stats div{min-width:0;padding:13px 18px;text-align:center}
.hero-stats div+div{border-left:1px solid rgba(196,181,253,.13)}
.hero-stats div strong{font-size:1.16rem}
.hero-stats div span{display:block;line-height:1.35}
.hero-nudge{width:min(100%,530px);margin-top:21px;padding-top:13px;border-top:1px solid rgba(196,181,253,.11)}

/* Ritmo editorial: cada bloque tiene centro, pausa y profundidad propios. */
#contenido>section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(196,181,253,.06);
}
#contenido>section>.container{position:relative;z-index:1}
#contenido>section::before{
  content:"";
  position:absolute;
  z-index:0;
  width:min(62vw,780px);
  aspect-ratio:1.618/1;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(168,85,247,.11),rgba(56,189,248,.035) 42%,transparent 72%);
  filter:blur(18px);
  pointer-events:none;
}
#contenido>section:nth-of-type(odd)::before{left:-22%;top:13%}
#contenido>section:nth-of-type(even)::before{right:-22%;bottom:8%}
#contenido>section::after{
  position:absolute;
  z-index:0;
  top:34px;
  color:rgba(216,180,254,.035);
  font:800 clamp(7rem,15vw,13rem)/1 'Sora',sans-serif;
  letter-spacing:-.08em;
  pointer-events:none;
}
#contenido>section:nth-of-type(odd)::after{right:clamp(14px,4vw,55px)}
#contenido>section:nth-of-type(even)::after{left:clamp(14px,4vw,55px)}
#concierge::after{content:"01"}
#servicios::after{content:"02"}
#streaming::after{content:"03"}
#acerca::after{content:"04"}
#como-funciona::after{content:"05"}
#confianza::after{content:"06"}
#faq::after{content:"07"}
#contacto::after{content:"08"}

.section-head{max-width:720px;margin-bottom:55px}
.section-head h2,.stream-wrap>h2{
  font-size:clamp(2rem,3.7vw,2.85rem);
  line-height:1.12;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.section-head h2::after,.stream-wrap>h2::after{
  content:"";
  display:block;
  width:55px;
  height:3px;
  margin:21px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#a855f7 50%,#e879f9);
  box-shadow:0 0 16px rgba(168,85,247,.45);
}
.section-head p{max-width:680px;margin-inline:auto;line-height:1.68}
.comfort-line{margin-top:13px;line-height:1.55}
.helper-tip{border-radius:var(--h-radius);padding:18px 21px;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 13px 34px rgba(0,0,0,.16)}

/* Acceso rápido: una sola pieza protagonista, sin competir con el hero. */
.concierge-shell{
  border-radius:var(--h-radius-lg);
  padding:34px;
  background:radial-gradient(circle at 82% 0,rgba(56,189,248,.13),transparent 31%),radial-gradient(circle at 13% 100%,rgba(232,121,249,.1),transparent 33%),var(--h-surface);
  box-shadow:0 34px 89px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.1);
}
.concierge-head{margin-bottom:21px}
.concierge-intents{gap:13px}
.concierge-intent{border-radius:var(--h-radius);min-height:89px}

/* Servicios: retícula estable, tarjetas profundas y proporciones repetibles. */
#servicesGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}
#servicesGrid>.service-card{grid-column:auto}
.service-card{
  border-radius:var(--h-radius);
  padding:28px 26px;
  background:radial-gradient(circle at 18% 0,rgba(168,85,247,.14),transparent 28%),linear-gradient(155deg,rgba(31,21,62,.97),rgba(14,10,36,.99));
  box-shadow:var(--h-shadow);
}
.service-card:nth-child(3n+2){background:radial-gradient(circle at 50% 0,rgba(56,189,248,.11),transparent 27%),linear-gradient(155deg,rgba(31,21,62,.97),rgba(14,10,36,.99))}
.service-card:nth-child(3n){background:radial-gradient(circle at 82% 0,rgba(232,121,249,.12),transparent 28%),linear-gradient(155deg,rgba(31,21,62,.97),rgba(14,10,36,.99))}
.service-card h3{font-size:1.08rem;letter-spacing:-.025em}
.service-card p{line-height:1.58}

/* Relación áurea en los bloques de lectura extensa. */
@media(min-width:921px){
  .stream-wrap{grid-template-columns:minmax(0,1.618fr) minmax(320px,1fr);gap:34px 55px}
  .journey-layout{grid-template-columns:minmax(0,1.618fr) minmax(320px,1fr);max-width:1100px;gap:34px}
}
.catalog-teaser,.stream-panel,.about-wrap .tab-panel,.journey-preview{
  border-radius:var(--h-radius-lg);
  box-shadow:0 34px 89px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.09);
}
.stream-panel{padding:34px}
.stream-feature{padding-block:21px}
.about-wrap{max-width:922px}
.about-wrap .tabs{margin-bottom:21px}
.about-wrap .tab-panel{padding:34px;line-height:1.72;background:var(--h-surface)}
.tab-btn{min-height:47px;padding-inline:21px}
.journey-preview{padding:34px}
.journey-layout .steps{gap:13px}
.journey-layout .step{border-radius:var(--h-radius);padding:21px}

/* La confianza alterna pruebas breves y testimonios con una misma geometría. */
.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:21px;margin-bottom:55px}
.trust-item{
  min-height:233px;
  justify-content:center;
  border-radius:var(--h-radius);
  padding:26px 21px;
  background:var(--h-surface);
  box-shadow:var(--h-shadow);
}
.testimonials{grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}
.testimonial{
  min-height:275px;
  border-radius:var(--h-radius);
  padding:26px;
  background:linear-gradient(155deg,rgba(31,21,62,.95),rgba(13,9,32,.99));
  box-shadow:0 21px 55px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06);
}

/* FAQ y cierre: foco central, respiración corta y final memorable. */
.faq-enhanced .faq-list{max-width:890px}
.faq-enhanced .faq-item{border-radius:var(--h-radius);margin-bottom:13px}
.faq-enhanced .faq-q{padding:18px 21px}
#contacto .cta-box{
  width:min(100%,1100px);
  margin-inline:auto;
  padding:55px 89px;
  border-radius:var(--h-radius-lg);
  background:radial-gradient(ellipse at 50% 0,rgba(56,189,248,.16),transparent 38%),radial-gradient(ellipse at 50% 100%,rgba(232,121,249,.13),transparent 42%),linear-gradient(135deg,#2b1055,#100722 68%);
  box-shadow:0 34px 89px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.11),0 0 55px rgba(168,85,247,.09);
}
#contacto h2{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;text-wrap:balance}
#contacto p{max-width:620px;line-height:1.68}

footer{position:relative;background:radial-gradient(ellipse at 50% 0,rgba(168,85,247,.09),transparent 35%),#110b24}
footer::before{content:"";position:absolute;left:50%;top:-1px;width:min(55vw,610px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#38bdf8,#e879f9,transparent);box-shadow:0 0 13px rgba(168,85,247,.5)}
.footer-grid{grid-template-columns:1.618fr 1fr 1fr;gap:55px}

@media(max-width:920px){
  #servicesGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-about{grid-column:1/-1}
}

@media(max-width:620px){
  .hero h1{font-size:clamp(2.25rem,11vw,3rem)}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--h-radius)}
  .hero-stats div{padding:13px 6px}
  .hero-stats div+div{border-left:1px solid rgba(196,181,253,.13);border-top:0}
  .hero-stats div strong{font-size:.92rem}
  .hero-stats div span{font-size:.68rem}
  #contenido>section::after{display:none}
  .section-head{margin-bottom:34px}
  .section-head h2,.stream-wrap>h2{font-size:clamp(1.85rem,9vw,2.35rem)}
  .section-head h2::after,.stream-wrap>h2::after{width:34px;margin-top:13px}
  .concierge-shell{padding:21px 14px;border-radius:var(--h-radius)}
  #servicesGrid,.trust-grid,.testimonials{grid-template-columns:1fr}
  .service-card,.trust-item,.testimonial{min-height:0}
  .catalog-teaser,.stream-panel,.about-wrap .tab-panel,.journey-preview{border-radius:var(--h-radius)}
  .stream-panel,.about-wrap .tab-panel,.journey-preview{padding:21px}
  #contacto .cta-box{padding:34px 21px;border-radius:var(--h-radius)}
  #contacto .btn{width:100%;margin:6px 0}
  .footer-grid{grid-template-columns:1fr;gap:34px}
  .footer-about{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .service-card,.trust-item,.testimonial{scroll-behavior:auto}
}