/* =========================================================
   Servicio Integral de Limpieza - estilos
   Paleta tomada del logotipo: verde, azul cielo y blanco.
   Sin fuentes externas: se usan las tipografías del sistema.
   ========================================================= */

:root{
  --green:#8DC63F;
  --blue:#29A9E1;
  --blue-deep:#1479A8;
  --ink:#0F2B3A;
  --line:#CDE5F0;

  /* Serif de aspecto clásico para el nombre */
  --serif:'Palatino Linotype',Palatino,'Book Antiqua','Iowan Old Style',Georgia,serif;
  /* Sans limpia para el resto del texto */
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:#fff;
  min-height:100svh;
  overflow-x:hidden;
}

/* ---------- Estructura ---------- */
.page{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:center;
  isolation:isolate;
}

/* Cuadrícula tipo plano que se desvanece hacia los bordes */
.page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 62% 50%, #000 15%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 75% at 62% 50%, #000 15%, transparent 78%);
}

header{
  position:absolute;
  top:0;left:0;
  padding:26px 6vw;
  z-index:2;
}
header svg{display:block;width:54px;height:54px;animation:mk-in 1s ease-out both}

/* Logo del encabezado: medallón SIL.
   - El semicírculo verde recorre la circunferencia muy despacio.
   - Un destello de luz cruza las iniciales y las hace ver metálicas. */
.mk-arc{transform-origin:0 0;animation:mk-spin 36s linear infinite}
.mk-badge{filter:drop-shadow(0 1.5px 2.5px rgba(15,43,58,.25))}
.mk-shine{animation:mk-glint 7s ease-in-out 1.4s infinite both}
@keyframes mk-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@keyframes mk-glint{
  0%{transform:translateX(-34px)}
  18%,100%{transform:translateX(34px)}
}

.copy{
  padding:120px 4vw 96px 6vw;
  position:relative;
  z-index:1;
}

/* ---------- Nombre ---------- */
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,5.2vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.012em;
  max-width:10em;
}
/* Primera línea: el nombre. Segunda: más pequeña, espaciada y en azul */
h1 .line{display:block}
h1 .line + .line{
  margin-top:.55em;
  font-size:.46em;
  line-height:1.2;
  letter-spacing:.3em;
  color:var(--blue-deep);
}

.w{display:inline-block;white-space:nowrap}
.l{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i) * 32ms + 250ms);
}
@keyframes rise{to{opacity:1;transform:none}}

/* Filete fino que se traza de verde a azul */
.rule{
  width:min(230px,50%);
  height:1px;
  margin-top:30px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transform-origin:left center;
  transform:scaleX(0);
  animation:draw 1.3s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
@keyframes draw{to{transform:scaleX(1)}}

/* ---------- Frases que se escriben ---------- */
.ticker{
  margin-top:26px;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5;
  min-height:1.5em;
}
#typed{color:var(--blue-deep);font-weight:600}
.caret{
  display:inline-block;
  width:2px;height:1.1em;
  margin-left:3px;
  vertical-align:-.18em;
  background:var(--green);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- Botón ---------- */
.cta{
  display:inline-flex;
  align-items:center;
  margin-top:38px;
  padding:14px 24px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:.98rem;
  transition:background-color .25s ease, transform .25s ease;
}
.cta:hover{background:var(--blue-deep);transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- Escenario de la red ---------- */
.stage{
  position:relative;
  height:min(88svh,780px);
  min-height:420px;
}
#net{position:absolute;inset:0;width:100%;height:100%;display:block}


/* ---------- Móvil ---------- */
@media (max-width:899px){
  .page{grid-template-columns:1fr;align-content:start}
  .stage{order:-1;height:54svh;min-height:340px}
  .copy{padding:8px 6vw 96px}
  header{padding:18px 6vw}
  header svg{width:48px;height:48px}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .l{animation:none;opacity:1;transform:none}
  .rule{animation:none;transform:none}
  .caret{animation:none}
  .cta{transition:none}
  header svg,.mk-arc{animation:none}
  .mk-shine{animation:none;display:none}
}