/* Todo el componente está aislado bajo #raudal-cover. */
#raudal-cover{--w-blue:#1649ef;--w-acid:#d9ff67;--w-paper:#151614;--w-ink:#f4f7e9;--w-soft:#a3a99a;color:var(--w-ink);font:400 14px/1.6 'DM Sans',sans-serif;isolation:isolate;container-type:inline-size;overflow:clip;background:#151614}
#raudal-cover *,#raudal-cover *::before,#raudal-cover *::after{box-sizing:border-box}
#raudal-cover [hidden]{display:none!important}
#raudal-cover h1,#raudal-cover p{margin:0}
#raudal-cover a{color:inherit;text-decoration:none}
#raudal-cover button{font:inherit;color:inherit;cursor:pointer}
#raudal-cover a:focus-visible,#raudal-cover button:focus-visible{outline:2px solid var(--w-acid);outline-offset:4px}
#raudal-cover .w-pad{padding-inline:5.4%}
#raudal-cover .w-micro{font-size:10px;line-height:1.45;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
/* Cabecera opcional: se puede sustituir por la de la web de destino. */
#raudal-cover .w-header{height:60px;min-height:60px;display:flex;align-items:center;gap:24px;position:relative;z-index:5;background:#151614;padding-inline:5.4%}
#raudal-cover .w-wordmark{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:700;letter-spacing:-1.6px;display:flex;align-items:baseline;gap:4px}
#raudal-cover .w-wordmark i{font-family:'Instrument Serif',serif;font-size:30px;line-height:1;color:#87aaff;font-weight:400;font-style:normal}
#raudal-cover .w-header>.w-micro{font-size:8px;line-height:1.4;color:#a3a99a;max-width:22ch}
#raudal-cover .w-header nav{display:flex;align-items:center;gap:23px;margin-left:auto;font-size:11px}
#raudal-cover .w-header nav a:hover{color:#9fb7ff}
#raudal-cover .w-header nav a:first-child{color:#87aaff}
#raudal-cover .cover-pause{height:31px;width:31px;flex:none;border:1px solid #3d4137;border-radius:50%;display:grid;place-items:center;background:transparent;font-size:11px}
#raudal-cover .w-hero{position:relative;overflow:hidden;color:#f4f7e9;background:#0939bf}
#raudal-cover .w-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#raudal-cover .w-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#001d6c25,transparent 70%),linear-gradient(0deg,#001a5538,transparent 35%);pointer-events:none}
#raudal-cover .w-hero-top{position:relative;z-index:2;display:flex;justify-content:space-between;pointer-events:none}
#raudal-cover .w-live{display:flex;align-items:center;gap:7px}
#raudal-cover .w-live::before{content:'';height:4px;width:4px;flex:none;background:var(--w-acid);border-radius:50%;box-shadow:0 0 10px #d9ff6799}
#raudal-cover .w-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.085em;line-height:.78;text-transform:uppercase;position:relative;z-index:2;pointer-events:none}
#raudal-cover .w-hero h1 span{display:block}
#raudal-cover .w-hero h1 .w-last{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;font-size:1.16em;line-height:1.04;margin-left:-.02em;letter-spacing:-.065em}
#raudal-cover .w-hero-bottom{position:relative;z-index:3}
#raudal-cover .w-hero-copy{font-size:14px;line-height:1.5;max-width:33ch}
#raudal-cover .w-hero-copy strong{font-weight:500}
#raudal-cover .w-hero-cta{display:flex;align-items:flex-end;gap:12px}
#raudal-cover .w-pill{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:44px;padding:10px 20px;border:1px solid var(--w-acid);border-radius:100px;background:var(--w-acid);color:#17220c;font-size:11px;white-space:nowrap;transition:transform .25s,background .25s}
#raudal-cover .w-pill span{font-size:21px;line-height:1}
#raudal-cover .w-pill:hover{background:#fff}
#raudal-cover .w-hero-contact{font-size:12px;border-bottom:1px solid #d0dfff66}
#raudal-cover .w-provoke{position:absolute;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border:1px solid #d9ff6799;border-radius:50%;color:var(--w-acid);background:#d9ff670a;backdrop-filter:blur(6px);line-height:1.4;transition:background .25s,color .25s,transform .25s}
#raudal-cover .w-provoke:hover{background:var(--w-acid);color:#17220c;transform:scale(1.05)}
#raudal-cover .cover-wave{font-size:24px;line-height:.8;margin-bottom:4px}
#raudal-cover .w-hero-fallback{position:absolute;inset:24% 12% auto auto;font:700 clamp(120px,30cqw,380px)/1 'Space Grotesk',sans-serif;color:#c1d5ff;transform:perspective(600px) rotateY(-27deg) rotateZ(12deg);text-shadow:2px 2px #6d97ee,5px 5px #183f8e,12px 20px 20px #001c7b66}
#raudal-cover .w-hero h1 span{animation:raudal-cover-title 1s cubic-bezier(.16,1,.3,1) both}
#raudal-cover .w-hero h1 .w-last{animation-delay:.1s}
#raudal-cover[data-motion=off] *,#raudal-cover[data-motion=off] *::before,#raudal-cover[data-motion=off] *::after{animation:none!important;transition:none!important}
#raudal-cover[data-motion=off] [data-magnet]{transform:none!important}
@keyframes raudal-cover-title{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@container(max-width:580px){
 #raudal-cover .w-header{height:auto;min-height:104px;flex-wrap:wrap;padding-block:13px;gap:10px}
 #raudal-cover .w-header>.w-micro{display:none}
 #raudal-cover .w-header .cover-pause{margin-left:auto}
 #raudal-cover .w-header nav{order:3;margin:0;flex:1 0 100%;gap:22px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){#raudal-cover *,#raudal-cover *::before,#raudal-cover *::after{animation:none!important;transition:none!important}}

#raudal-cover .w-hero{
  --hero-gutter:clamp(18px,5.4cqw,90px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,2svh,22px);
  block-size:max(220px,calc(100vh - var(--site-header-size,60px)));
  block-size:max(220px,calc(100svh - var(--site-header-size,60px)));
  min-block-size:0;
  padding-block:clamp(12px,2.8svh,32px);
  background:#0939bf;
}
#raudal-cover .w-hero-top,
#raudal-cover .w-hero-bottom{
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:1800px;
  margin-inline:auto;
  padding-inline:var(--hero-gutter);
  padding-block:0;
}
#raudal-cover .w-hero-top{align-items:start;gap:20px}
#raudal-cover .w-hero-top .w-micro{font-size:clamp(9px,.8cqw,11px);line-height:1.4;max-inline-size:31ch}
#raudal-cover .w-hero-stage{
  position:relative;
  container-type:size;
  min-inline-size:0;
  min-block-size:0;
  display:grid;
  align-items:center;
  padding-inline:var(--hero-gutter);
  z-index:2;
  pointer-events:none;
}
#raudal-cover .w-hero h1{
  align-self:center;
  justify-self:start;
  margin:0;
  padding:0;
  inline-size:max-content;
  max-inline-size:48%;
  font-size:min(21cqw,44cqh,520px);
  line-height:.78;
  letter-spacing:-.085em;
}
#raudal-cover .w-hero h1 .w-last{font-size:1.16em;line-height:1.04}
#raudal-cover .w-hero[data-scene-layout=stacked] h1{
  align-self:start;
  max-inline-size:90%;
  margin-block-start:min(2cqh,12px);
  font-size:min(27cqw,22cqh,140px);
}
#raudal-cover .w-provoke{
  pointer-events:auto;
  inset:auto clamp(14px,4cqw,70px) clamp(8px,3cqh,35px) auto;
  inline-size:clamp(54px,7cqw,78px);
  block-size:clamp(54px,7cqw,78px);
  font-size:clamp(8px,.7cqw,10px);
  gap:2px;
}
#raudal-cover .w-provoke svg{inline-size:18px;block-size:18px;margin-bottom:2px}
#raudal-cover .w-hero-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:16px 25px;
  margin-block:0;
}
#raudal-cover .w-hero-copy{font-size:clamp(12px,1.25cqw,17px);line-height:1.5;max-inline-size:33ch}
#raudal-cover .w-hero-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px;inline-size:auto}
#raudal-cover .w-hero-contact{font-size:12px}
#raudal-cover .w-hero-fallback{font-size:clamp(120px,30cqw,380px);inset:24% 12% auto auto}
@container(max-width:580px){
  #raudal-cover .w-hero{gap:10px;padding-block:12px}
  #raudal-cover .w-hero-top .w-live{display:none}
  #raudal-cover .w-hero-bottom{grid-template-columns:1fr;gap:12px}
  #raudal-cover .w-hero-copy{font-size:12px;line-height:1.45;max-inline-size:none}
  #raudal-cover .w-hero-cta{flex-direction:row;align-items:center;justify-content:space-between;inline-size:100%;gap:18px}
  #raudal-cover .w-hero-cta .w-pill{min-block-size:44px;padding:9px 17px;font-size:11px}
}
@media(max-height:480px) and (min-width:581px){
  #raudal-cover .w-hero{padding-block:10px;gap:8px}
  #raudal-cover .w-hero-top .w-micro{font-size:9px}
  #raudal-cover .w-hero-copy{font-size:12px;line-height:1.4}
  #raudal-cover .w-hero-cta{flex-direction:row;align-items:center;gap:18px}
  #raudal-cover .w-hero-cta .w-pill{min-block-size:40px;padding:8px 16px}
}

/* Integración en la prueba: el menú fijo de la web va por encima de la portada */
#raudal-cover .w-hero{padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
#raudal-cover .w-hero-top,#raudal-cover .w-hero-bottom{padding-left:max(var(--hero-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--hero-gutter),env(safe-area-inset-right,0px))}
@container(max-width:580px){#raudal-cover .w-hero{padding-top:calc(env(safe-area-inset-top,0px) + 84px)}}

/* Titular «Webs e IA / para tu negocio»: más largo que «Haz olas», así que va más pequeño */
#raudal-cover .w-hero h1{font-size:min(8.6cqw,24cqh,230px);letter-spacing:-.06em}
#raudal-cover .w-hero h1 .w-last{font-size:.8em;letter-spacing:-.04em;text-transform:none;margin-top:.08em}
#raudal-cover .w-hero[data-scene-layout=stacked] h1{font-size:min(12.5cqw,15cqh,110px)}

/* Titular más grande: ocupa más ancho y la R se aparta a la derecha */
#raudal-cover .w-hero h1{font-size:min(11.8cqw,30cqh,310px);max-inline-size:62%}
#raudal-cover .w-hero h1 .w-last{font-size:.84em}
#raudal-cover .w-hero[data-scene-layout=stacked] h1{font-size:min(16cqw,17cqh,130px);max-inline-size:96%}

/* Hueco para los botones flotantes (Raudi y WhatsApp) abajo a la derecha */
#raudal-cover .w-hero-bottom{padding-right:calc(var(--hero-gutter) + 64px)}
#raudal-cover .w-provoke{right:calc(clamp(14px,4cqw,70px) + 64px)}
@container(max-width:580px){#raudal-cover .w-hero-bottom{padding-right:76px}#raudal-cover .w-provoke{right:80px}}
/* Móvil (portada apilada): el botón de la ola va en el hueco entre el titular y la R */
#raudal-cover .w-hero[data-scene-layout=stacked] .w-provoke{inset:31cqh 4px auto auto;right:max(4px,env(safe-area-inset-right,0px))}
@media (hover:none){#raudal-cover .w-provoke:hover{background:#d9ff670a;color:var(--w-acid);transform:none}}
#raudal-cover .w-hero[data-scene-layout=stacked] .w-provoke{right:max(16px,env(safe-area-inset-right,0px))}