/* =========================================================
   HOSTAWAKE — El hosting que nunca se apaga.
   Sistema visual: tipografia grotesca apretada, superficies
   redondeadas de 30px separadas por canales de 10px, paleta
   plana de acentos y el boton-flecha de esquina con mordisco
   concavo (circulo negro de 50px sobre un cojin crema con dos
   piezas de esquina invertida).
   Fuente propia autoalojada, sin CDNs ni peticiones externas.
   ========================================================= */

@font-face {
  font-family: "Hanken Var";
  src: url("../fonts/hanken-var.woff2") format("woff2-variations"),
       url("../fonts/hanken-var.woff2") format("woff2");
  font-weight: 420 760;
  font-style: normal;
  font-display: swap;
}

/* Space Grotesk (SIL Open Font License 1.1) — solo para el logotipo. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2-variations"),
       url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; position: relative; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Fichas de diseno ---------- */
:root {
  --cream: #f9f8f6;
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #55524a;
  --rule: #cacaca;

  /* Azul de marca: solo el sol y el logotipo. Los acentos de seccion siguen
     usando el cobalto profundo de --blue. */
  --brand:      #0b4fd9;

  --blue:       #0046c7;
  --blue-pale:  #bed2f5;
  --blue-mist:  #eaf1fc;
  --terracotta: #b1653b;
  --clay:       #eeddd5;
  --purple:     #5757a5;
  --lilac:      #bfb9e3;
  --lavender:   #dfdcf1;
  --olive:      #66662a;
  --khaki:      #ebeca2;
  --chartreuse: #d9db4d;
  --green:      #59c28a;
  --mint:       #32c58b;
  --forest:     #005241;
  --tan:        #dcb688;
  --bone:       #eae9dc;
  --slate:      #2a2c2d;

  --live: #32c58b;

  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 15px;

  --gap: 10px;

  --font: "Hanken Var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-logo: "Space Grotesk", var(--font);

  /* Boton-flecha de esquina: circulo negro de 50px sobre un cojin crema de
     10px, con dos filetes concavos de 20px que lo funden con la tarjeta. */
  --arrow-size: 50px;
  --arrow-pad: 10px;
  --notch-size: 20px;
  --notch: var(--cream);

  /* curva unica para todo el movimiento del sitio */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  letter-spacing: -.05em;
  font-weight: 400;
  text-wrap: balance;
}
h3, h4, h5, h6 { font-weight: 600; }

h1 { font-size: clamp(2.625rem, 2.114rem + 1.64vw, 3.75rem); }
h1.large { font-size: clamp(2.5rem, 2.1rem + 1.5vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(2.125rem, 1.557rem + 1.82vw, 3.375rem); }
h3 { font-size: clamp(1.75rem, 1.182rem + 1.82vw, 3rem); }
h4 { font-size: clamp(1.5rem, 1.159rem + 1.09vw, 2.25rem); }
h5 { font-size: clamp(1.313rem, 1.17rem + .45vw, 1.625rem); }

main > section { margin: 160px 0; font-size: clamp(1rem, .886rem + .36vw, 1.25rem); }
@media (max-width: 900px) { main > section { margin: 80px 0; } }

.copy p { line-height: 1.32; text-wrap: pretty; }
.copy p + p { margin-top: 20px; }

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Contenedores ---------- */
/* Un unico ancho para todo el sitio: cabecera, hero y todas las secciones
   comparten esta caja, asi los bordes de las superficies quedan alineados
   en una sola vertical de arriba a abajo. */
.container { width: 100%; margin: auto; max-width: 1800px; padding: 0 40px; }
@media (max-width: 1024px) { .container { padding: 0 20px; } }
@media (max-width: 500px) { .container { padding: 0 10px; } }

[id] { scroll-margin-top: 110px; }

/* ---------- Pildora ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .5em;
  border-radius: var(--r-md); padding: 5px 14px;
  border: 1px solid currentColor; font-size: 16px; line-height: 1.15;
}
.pill.large { padding: 10px 20px; }
@media (max-width: 500px) { .pill { padding: 6px 14px; } }

/* ---------- Accesibilidad ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -80px; left: 12px; z-index: 300;
  background: var(--ink); color: var(--cream); padding: 12px 20px;
  border-radius: var(--r-md); font-weight: 600; transition: top .25s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Iconos ---------- */
/* trazo fino y remates redondos: es lo que define el estilo */
.icon { --ico: 22px; width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; stroke: none; }

/* La pieza de esquina invertida: cuadrado menos un cuarto de disco.
   Es el pegamento que hace que dos superficies crema se encuentren
   con una curva concava en vez de un angulo recto. */
.notch { width: 20px; height: 20px; color: var(--notch); }
.notch use, .notch path { fill: currentColor; stroke: none; }

/* =========================================================
   BOTON-FLECHA DE ESQUINA
   ========================================================= */
.btn-arrow {
  display: inline-flex; justify-content: center; align-items: center;
  color: var(--ink); cursor: pointer; z-index: 2;
}
.btn-arrow > span { display: flex; align-items: center; height: 100%; z-index: 1; }
.btn-arrow .btn-label { display: flex; align-items: center; padding: 0 20px 0 0; translate: 0 5px; white-space: nowrap; }

/* Redondo entero.
   Antes el cojin iba redondeado solo por arriba a la izquierda y se
   sacaba de su caja con margen negativo, para encajarse en la esquina
   de la superficie; los dos rellenos concavos lo cosian a ella. Ahora es
   un circulo completo apoyado dentro de su caja, asi que esos rellenos
   sobran: se quedan en el marcado, que es comun a los nueve idiomas, y
   se apagan aqui. */
.arrow-cont {
  display: block; flex: none;
  background: none;
  padding: var(--arrow-pad);
  border-radius: 50%;
  margin: 0;
}
.arrow-cont > .notch { display: none; }

.arrow-dot {
  width: var(--arrow-size); height: var(--arrow-size);
  background: var(--ink); border: 1px solid var(--ink); border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
}
.arrow-dot > svg { width: 14px; height: 14px; transition: transform .3s; stroke: var(--cream); fill: none; stroke-width: 3; }
/* el icono de fuente pinta con color, no con trazo */
.arrow-dot > i.icon { --ico: 21px; color: var(--cream); transition: transform .3s; }

.btn-arrow:hover .arrow-dot > svg,
a:hover > .btn-arrow .arrow-dot > svg,
.hover-arrow:hover .arrow-dot > svg { transform: rotate(-22.5deg) scale(1.4); }
/* Un icono de tema solo crece; la flecha ademas gira, que es el gesto de
   la casa. Se distinguen por la clase del propio glifo. */
.btn-arrow:hover .arrow-dot > i,
a:hover > .btn-arrow .arrow-dot > i,
.hover-arrow:hover .arrow-dot > i { transform: scale(1.16); }
.btn-arrow:hover .arrow-dot > i.fi-tr-arrow-small-right,
a:hover > .btn-arrow .arrow-dot > i.fi-tr-arrow-small-right,
.hover-arrow:hover .arrow-dot > i.fi-tr-arrow-small-right { transform: rotate(-22.5deg) scale(1.35); }
/* el boton del hero apunta hacia abajo */
.btn-arrow.down .arrow-dot > i { transform: rotate(90deg); }
.btn-arrow.down:hover .arrow-dot > i,
.hover-arrow:hover .btn-arrow.down .arrow-dot > i { transform: rotate(90deg) scale(1.35); }

/* variantes */
.btn-arrow.down .arrow-dot > svg { transform: rotate(90deg); }
.btn-arrow.down:hover .arrow-dot > svg { transform: rotate(90deg) scale(1.4); }

/* La variante clara pinta el circulo, no la caja: con el cojin
   transparente, un fondo en el envoltorio saldria como un cuadrado. */
.btn-arrow.white { background-color: transparent; }
.btn-arrow.white .arrow-dot { background-color: var(--cream); border-color: var(--cream); }
.btn-arrow.white .arrow-dot > svg { stroke: var(--ink); }
.btn-arrow.white .arrow-dot > i.icon { color: var(--ink); }

/* ancla estandar: esquina inferior derecha de una superficie */
.corner-btn { position: absolute; bottom: 0; right: 0; z-index: 2; }

/* Boton solido tipo pildora (CTA de formularios y precios) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 26px; border-radius: var(--r-lg);
  font-weight: 500; font-size: 1rem; line-height: 1.15;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.btn:active { transform: translateY(1px); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: var(--chartreuse); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* =========================================================
   CABECERA
   ========================================================= */
.site-header { width: 100%; position: fixed; z-index: 99; top: 10px; }
.header-cont { display: flex; align-items: center; }
.header-cont::before {
  content: ""; display: block; width: 500vw; height: 10px;
  position: absolute; top: -10px; left: -100vw; background: var(--cream);
}

/* barra de progreso de lectura */
.progress { position: absolute; top: -10px; left: 0; width: 100%; height: 3px; z-index: 3; }
.progress-bar { height: 100%; width: 0; background: var(--forest); transition: width .1s linear; }

/* bloque-pestana del logo */
.logo-block { display: flex; flex-direction: column; z-index: 2; }
.logo-block > .notch { width: 30px; height: 30px; position: absolute; top: 100%; left: 0; transform: scale(1.01); }
.logo-block > .notch:last-of-type { top: 0; left: 100%; }
.logo-block > a { display: block; background: var(--cream); border-radius: 0 0 var(--r-lg) 0; color: var(--brand); }
.wordmark {
  display: flex; align-items: center; gap: 12px;
  height: 88px; padding: 20px 34px 18px 15px; translate: 0 -4px;
}
.wordmark .mark { width: 44px; height: 44px; flex: none; }
.wordmark .mark svg { width: 100%; height: 100%; }
.wordmark .word { font-family: var(--font-logo); font-size: 2.35rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }

/* menu principal */
.menu {
  background: transparent; padding: 0 10px 0 50px; translate: -50px 0;
  border-radius: 0 0 40px 0; height: 80px; display: flex; align-items: center;
  flex: 1; min-width: 0;
}
/* =========================================================
   CRISTAL DEL MENU
   Cuatro cosas hacen el vidrio, y ninguna sobra:
   · el desenfoque del fondo, que es lo que se ve a traves;
   · el relleno en degradado, mas denso arriba, como un panel
     inclinado que recoge mas luz por el canto superior;
   · el filo: linea clara arriba por dentro y borde tenue
     alrededor, que es el grosor del cristal;
   · la sombra proyectada, que lo separa de la portada.
   El "brightness" no es decorativo: sube el fondo hacia la luz
   para que el texto negro siga legible pase el video que pase
   por detras. Medido, no supuesto.
   ========================================================= */
.menu > ul {
  display: flex; align-items: center; gap: 15px; padding: 0 25px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.24) 100%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow:
    0 14px 38px -16px rgba(3,20,60,.45),
    0 2px 6px -3px rgba(3,20,60,.18),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.18);
          backdrop-filter: blur(22px) saturate(190%) brightness(1.18);
  margin: 0 0 0 10px;
  overflow: hidden;
}
/* el reflejo que resbala por el canto superior del vidrio */
.menu > ul::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.30) 46%, transparent 62%);
}
/* sin soporte de desenfoque el texto tiene que seguir leyendose */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu > ul { background: rgba(255,255,255,.92); }
  .menu > ul::before { display: none; }
}
.menu > ul > li { height: 100%; }
.menu-top { display: flex; align-items: center; gap: 5px; height: 100%; }
.menu-top > a, .menu-top > span { display: block; padding: 20px 15px; transition: color .25s; }
.menu-top > a:hover, .menu-top > span:hover { color: var(--forest); }
.menu-top > a.active { font-weight: 600; }

/* buscador */
/* El desenfoque solo se activa al abrir: un backdrop-filter permanente en un
   elemento oculto deja artefactos de composición sobre la foto del hero. */

.menu-button {
  display: none; border-radius: var(--r-md); padding: 7px 12px; margin: 0 0 0 auto;
  border: 2px solid var(--chartreuse); background: var(--chartreuse);
  font-size: 18px; font-weight: 500; translate: 0 3px; transition: .3s;
}
.socials-mobile { display: none; }

@media (max-width: 1024px) {
  .site-header { height: 60px; background: var(--cream); top: 0; }
  .header-cont { justify-content: space-between; }
  .header-cont::before { display: none; }
  .progress { top: 57px; }
  .logo-block { height: 60px; justify-content: center; }
  .logo-block > .notch { display: none; }
  .logo-block > a { border-radius: 0; height: 100%; }
  .wordmark { height: 60px; padding: 10px 15px 10px 0; translate: 0; gap: 10px; }
  .wordmark .word { font-size: 1.8rem; }
  .wordmark .mark { width: 32px; height: 32px; }

  .menu-button { display: block; }
  /* El boton no se mueve: "Menu" y "Cerrar" ocupan el mismo sitio
     arriba a la derecha, y solo cambia el color al abrir. */
  /* Al abrir, el amarillo del panel sube a envolver el boton: mismo sitio,
     esquinas superiores redondeadas, base a ras del panel y un filete
     concavo a su izquierda para que las dos superficies se fundan. */
  .header-cont.menu-open .menu-button {
    align-self: flex-end; height: 55px; padding: 0 22px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    border-width: 0; background: var(--chartreuse); color: var(--ink);
    translate: 0; z-index: 101;
  }
  .header-cont.menu-open .menu-button::before {
    content: ""; position: absolute; bottom: 0; left: -20px; width: 20px; height: 20px;
    background: radial-gradient(circle 20px at 0 0, transparent 0 20px, var(--chartreuse) 20px);
  }

  .menu {
    width: calc(100% - 40px); opacity: 0; visibility: hidden;
    background: var(--chartreuse); position: absolute; top: 60px; left: 20px;
    padding: 0; translate: 0; border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
    height: auto; z-index: 100; max-height: calc(100vh - 80px); overflow-y: auto;
    transition: opacity .3s, visibility .3s;
  }
  .menu.is-open { opacity: 1; visibility: visible; }
  .menu.is-open > ul > li { transform: translateY(0); opacity: 1; }
  /* el panel apila su lista y el acceso, que ahora vive dentro */
  .menu { flex-direction: column; align-items: stretch; }
  .menu > ul {
    width: calc(100% - 40px); flex-direction: column; align-items: flex-start;
    padding: 0; border-radius: var(--r-lg); background: transparent;
    border: 0; box-shadow: none; overflow: visible;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    margin: 90px 20px 30px;
  }
  /* el reflejo del cristal no pinta nada sobre el panel amarillo */
  .menu > ul::before { display: none; }
  .menu > ul > li {
    width: 100%; font-size: 30px; border-bottom: 1px solid rgba(0,0,0,.5);
    transform: translateY(-10px); opacity: 0; transition: .3s;
  }
    .menu > ul > li:nth-child(1) { transition-delay: .05s; }
  .menu > ul > li:nth-child(2) { transition-delay: .1s; }
  .menu > ul > li:nth-child(3) { transition-delay: .15s; }
  .menu > ul > li:nth-child(4) { transition-delay: .2s; }
  .menu > ul > li:nth-child(5) { transition-delay: .25s; }
  .menu > ul > li:nth-child(6) { transition-delay: .3s; }
  .menu > ul > li:nth-child(7) { transition-delay: .35s; }
  .menu > ul a, .menu > ul > li > .menu-top > span { padding: 15px 0; }
  /* el texto del menu movil es de 30px: el icono se pone a su altura */
  .menu .nav-icon { opacity: .9; }
  .menu-top { justify-content: space-between; }

  /* Dentro del panel el acceso deja de ser una pastilla negra sobre crema:
     se dibuja solo con el trazo, asi que dentro del amarillo no aparece
     ninguna superficie de otro color. */
  .menu > .login-cont {
    margin: 0 20px 34px; opacity: 0; transform: translateY(-10px);
    transition: .3s; transition-delay: .25s;
  }
  .menu.is-open > .login-cont { opacity: 1; transform: translateY(0); }
  .menu > .login-cont .login-link {
    width: 100%; height: 62px; justify-content: center; gap: 12px;
    background: transparent; color: var(--ink);
    border: 2px solid var(--ink); border-radius: var(--r-md);
    font-size: 20px; font-weight: 500;
  }
  .menu > .login-cont .login-link .icon { --ico: .72em; }
  .menu > .login-cont .login-link:hover { background: var(--ink); color: var(--chartreuse); transform: none; }
}
@media (max-width: 500px) {
  .menu { width: calc(100% - 20px); left: 10px; }
  }

/* =========================================================
   HERO
   ========================================================= */
/* El hero sube hasta el borde y la cabecera flota encima. Los 10px de
   margen son justo el alto de la franja crema del header: sin ellos esa
   franja muerde la parte alta del circulo de datos. */
.home-hero { display: flex; margin: 10px 0 160px; }
.home-hero .hero-inner { height: 95vh; min-height: 630px; display: flex; justify-content: space-between; }
@media (max-width: 1024px) {
  .home-hero { margin-top: 0; padding-top: 70px; }
  .home-hero .hero-inner { height: calc(95vh - 70px); }
}

.hero-main {
  width: 100%; height: 100%; margin: 0 10px 0 0;
  background: var(--blue-pale);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 0;
  overflow: hidden;
  opacity: 0; transition: opacity .3s;
}
.in-view .hero-main { opacity: 1; }
/* =========================================================
   VIDEO DE PORTADA
   Un plano de alguien montando su negocio por su cuenta. El
   poster se pinta al instante y el archivo solo se descarga
   donde tiene sentido: lo decide el guardian de js/script.js.
   ========================================================= */
.hero-poster, .hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.hero-poster { background: var(--blue-pale); }
/* Los dos planos van apilados: solo el que tiene el turno se ve, y el
   relevo se hace fundiendo para que el corte no se note. La imagen fija
   de debajo se retira cuando el primero ya pinta fotogramas. */
.hero-video { opacity: 0; transition: opacity .7s; }
.hero-main.video-ready .hero-video.is-on { opacity: 1; }
/* Sin velo sobre el video.
   Llevaba un degradado oscuro pegado al borde inferior, justo donde se
   apoya la caja crema del titular. Como la caja es opaca, lo unico que
   se veia del degradado era la franja que le quedaba al lado: un halo
   gris siguiendo su contorno, que parecia una sombra mal hecha.
   El unico texto que va suelto sobre el video es el distintivo de
   servidores, y ese ya se sostiene con su propio fondo. */
.hero-video-tint { display: none; }

/* =========================================================
   PIEZA ANIMADA DEL HERO
   Cinco pantallas a semejanza de las reales: cPanel, el
   instalador Softaculous, el escritorio de WordPress, la
   tienda vendiendo y la celebracion. HTML, CSS y SVG en
   linea: no descarga nada. Ciclo de 19s, 3,8s por escena.
   ========================================================= */
.stage {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(155deg, #0b3fa8 0%, #0046c7 45%, #05307f 100%);
  display: grid; place-items: center;
}
.stage-glow {
  position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,170,255,.42), transparent 62%);
  top: -46%; right: -34%;
}
.stage-grid {
  position: absolute; inset: 0; opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 72%);
}

/* ---- la ventana ---- */
.win {
  position: relative; z-index: 1;
  width: min(82%, 720px); border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 40px 80px -30px rgba(3,20,60,.72);
  animation: winIn .9s cubic-bezier(.16,1,.3,1) both;
  font-size: 11px; line-height: 1.25; color: #33445c;
}
@keyframes winIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

.win-bar { display: flex; align-items: center; gap: 12px; padding: 9px 13px; background: #e9eef6; border-bottom: 1px solid #d8e1ee; }
.win-dots { display: flex; gap: 6px; flex: none; }
.win-dots i { width: 8.5px; height: 8.5px; border-radius: 50%; background: #c6d2e3; }
.win-dots i:first-child { background: #e6857a; }
.win-dots i:nth-child(2) { background: #e6c07a; }
.win-dots i:last-child { background: #86c99b; }
.win-url { flex: 1; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 8px; padding: 5px 11px; font-size: 11.5px; color: #55677f; min-width: 0; height: 26px; }
.win-url .icon { --ico: 10px; width: 10px; height: 10px; color: var(--mint); flex: none; }
.win-url b { font-weight: 500; white-space: nowrap; position: absolute; left: 29px; opacity: 0; }
.win-url b.u1 { animation: urlSwap 19s linear infinite; }
.win-url b.u2 { animation: urlSwap 19s linear infinite -15.2s; }
.win-url b.u3 { animation: urlSwap 19s linear infinite -11.4s; }
.win-url b.u4 { animation: urlSwap 19s linear infinite -7.6s; }
.win-url b.u5 { animation: urlSwap 19s linear infinite -3.8s; }
@keyframes urlSwap { 0% { opacity: 0; } 2%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }

.win-body { position: relative; height: clamp(250px, 30vh, 330px); background: #fff; overflow: hidden; }

.sc { position: absolute; inset: 0; opacity: 0; display: flex; flex-direction: column; }
.sc1 { animation: scene 19s linear infinite; }
.sc2 { animation: scene 19s linear infinite -15.2s; }
.sc3 { animation: scene 19s linear infinite -11.4s; }
.sc4 { animation: scene 19s linear infinite -7.6s; }
.sc5 { animation: scene 19s linear infinite -3.8s; }
/* la salida se solapa con la entrada de la siguiente: sin ese cruce
   quedaba medio segundo de ventana en blanco entre escena y escena */
@keyframes scene { 0% { opacity: 0; } 2%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }

.cursor {
  position: absolute; width: 15px; height: 20px; background: #0b1020; z-index: 5;
  clip-path: polygon(0 0, 0 78%, 26% 60%, 46% 100%, 62% 92%, 42% 54%, 74% 52%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); opacity: 0;
}

/* ============ 1 · cPanel ============ */
.cp-top { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e4eaf3; flex: none; }
.cp-logo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #1a3a63; letter-spacing: -.02em; }
.cp-logo i { width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(140deg, #ff6c2c, #f34f1c); flex: none; }
.cp-search { flex: 1; display: flex; align-items: center; gap: 6px; max-width: 240px; background: #f1f5fa; border: 1px solid #e2e9f3; border-radius: 6px; padding: 4px 9px; font-size: 10px; color: #90a1b8; }
.cp-search .icon { --ico: 9px; width: 9px; height: 9px; }
.cp-user { width: 20px; height: 20px; border-radius: 50%; background: #d5e0ef; margin-left: auto; flex: none; }
.cp-body { flex: 1; display: flex; min-height: 0; }
.cp-nav { width: 108px; flex: none; background: #f7f9fc; border-right: 1px solid #e9eef5; padding: 8px 6px; display: flex; flex-direction: column; gap: 1px; }
.cp-nav span { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #6b7f99; padding: 5px 7px; border-radius: 5px; }
.cp-nav span.on { background: #e5eefb; color: #0046c7; font-weight: 600; }
.cp-nav .icon { --ico: 11px; width: 11px; height: 11px; flex: none; }
.cp-main { flex: 1; padding: 9px 11px; min-width: 0; overflow: hidden; }
.cp-sec { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aabc2; margin: 0 0 6px; }
.cp-sec + .cp-row { margin-bottom: 10px; }
.cp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cp-row b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 3px; border-radius: 7px; border: 1px solid #e9eef5; background: #fff;
  font-size: 8.5px; font-weight: 600; color: #5b6e88; text-align: center;
  opacity: 0; animation: pop 19s cubic-bezier(.16,1,.3,1) infinite; animation-delay: var(--d);
}
.cp-row b .icon { --ico: 15px; width: 15px; height: 15px; color: #4b7fd6; }
@keyframes pop {
  0% { opacity: 0; transform: translateY(8px) scale(.95); }
  3%, 18% { opacity: 1; transform: none; }
  22%, 100% { opacity: 0; }
}
.cp-row b.pick { border-color: #0046c7; box-shadow: 0 0 0 1px #0046c7 inset; color: #0046c7; animation: pop 19s cubic-bezier(.16,1,.3,1) infinite, picked 19s ease-out infinite; }
.sof { width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(140deg, #3aa3f0, #1667c8); flex: none; }
@keyframes picked { 0%, 12% { box-shadow: 0 0 0 1px #0046c7 inset; } 14% { box-shadow: 0 0 0 1px #0046c7 inset, 0 0 0 5px rgba(0,70,199,.25); } 17%, 100% { box-shadow: 0 0 0 1px #0046c7 inset; } }
.cp-aside { width: 118px; flex: none; border-left: 1px solid #e9eef5; padding: 9px 10px; }
.cp-stat { margin: 0 0 7px; font-size: 9px; color: #7f92ab; }
.cp-stat i { display: block; height: 5px; border-radius: 3px; background: #eaeff7; margin-top: 3px; overflow: hidden; }
.cp-stat em { display: block; height: 100%; border-radius: 3px; background: #4b7fd6; width: 0; animation: gauge 19s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes gauge { 0%, 2% { width: 0; } 12%, 18% { width: var(--w); } 22%, 100% { width: var(--w); } }
.cp-info { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; color: #7f92ab; padding: 4px 0; border-top: 1px solid #eef2f8; }
.cp-info b { color: #33445c; font-weight: 600; }
/* el puntero vive dentro de la casilla que va a pulsar, no en coordenadas
   fijas: asi cae siempre encima aunque cambie el ancho de la ventana */
.cursor.c1 { right: -9px; bottom: -11px; animation: cur1 19s ease-in-out infinite; }
@keyframes cur1 {
  0%, 4% { transform: translate(24px, 26px); opacity: 0; }
  6% { opacity: 1; }
  12% { transform: translate(0, 0); opacity: 1; }
  14% { transform: translate(0, 0) scale(.8); opacity: 1; }
  18%, 100% { transform: translate(0, 0); opacity: 0; }
}

/* ============ 2 · Softaculous ============ */
.sc2 { background: #f6f8fc; }
.sf-top { padding: 8px 14px; background: #fff; border-bottom: 1px solid #e4eaf3; flex: none; }
.sf-crumb { font-size: 10px; color: #7f92ab; }
.sf-crumb em { font-style: normal; margin: 0 4px; color: #b9c6d8; }
.sf-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px; }
.wp-badge {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: #21759b; color: #fff; display: grid; place-items: center;
  font-size: 21px; font-weight: 700; line-height: 1;
  animation: spinIn 19s cubic-bezier(.16,1,.3,1) infinite -15.2s;
}
@keyframes spinIn { 0%, 2% { transform: scale(.5) rotate(-35deg); } 6%, 18% { transform: none; } 22%, 100% { transform: none; } }
.sf-title { font-size: 13px; font-weight: 700; color: #22344c; }
.bar { position: relative; width: min(64%, 300px); height: 8px; border-radius: 5px; background: #e3eaf5; flex: none; }
.bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #21759b, #0046c7); width: 0; animation: fill 19s cubic-bezier(.35,0,.2,1) infinite -15.2s; }
@keyframes fill { 0%, 2% { width: 0; } 15%, 100% { width: 100%; } }
.bar .pct { position: absolute; right: 0; top: -16px; font-size: 9.5px; font-weight: 700; color: #21759b; }
.bar .pct::after { content: "0%"; animation: pctTxt 19s steps(1, end) infinite -15.2s; }
@keyframes pctTxt { 0% { content: "0%"; } 5% { content: "24%"; } 8% { content: "58%"; } 11% { content: "83%"; } 14%, 100% { content: "100%"; } }
.log { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: #6b7f99; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.log li { display: flex; align-items: center; gap: 7px; opacity: 0; animation: step 19s linear infinite; animation-delay: calc(-15.2s + var(--d)); }
.log li em { font-style: normal; color: #22344c; font-weight: 600; }
.log li::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center/8px no-repeat;
}
.log li.done { color: #1e8f60; font-weight: 700; font-family: var(--font); }
@keyframes step { 0%, 1% { opacity: 0; transform: translateX(-6px); } 4%, 18% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; } }

/* ============ 3 · escritorio de WordPress ============ */
.sc3 { background: #f0f0f1; }
.wp-adminbar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #1d2327; color: #c3c4c7; font-size: 10px; flex: none; }
.wp-site { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; }
.wp-site i { width: 12px; height: 12px; border-radius: 50%; background: #2271b1; flex: none; }
.wp-new { margin-left: auto; }
.wp-shell { flex: 1; display: flex; min-height: 0; }
.wp-menu { width: 104px; flex: none; background: #1d2327; padding: 6px 0; display: flex; flex-direction: column; }
.wp-menu span { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #c3c4c7; padding: 6px 10px; }
.wp-menu span.on { background: #2271b1; color: #fff; font-weight: 600; }
.wp-menu i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; opacity: .75; flex: none; }
.wp-main { flex: 1; padding: 11px 13px; min-width: 0; }
.wp-h { font-size: 14px; font-weight: 400; color: #1d2327; margin: 0 0 9px; }
.wp-cards { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.wp-card {
  background: #fff; border: 1px solid #c3c4c7; border-radius: 3px; padding: 9px;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; animation: pop 19s cubic-bezier(.16,1,.3,1) infinite;
}
.wp-card p { font-size: 10.5px; font-weight: 600; color: #1d2327; margin: 0 0 2px; }
.wp-card.w1 { animation-delay: calc(-11.4s + .1s); }
.wp-card.w2 { animation-delay: calc(-11.4s + .28s); }
.wp-card.w3 { animation-delay: calc(-11.4s + .46s); }
.wp-line { display: block; height: 6px; width: var(--w); border-radius: 3px; background: #e7e8ea; }
.wp-btn { align-self: flex-start; margin-top: 3px; font-size: 9px; font-weight: 600; color: #fff; background: #2271b1; border-radius: 3px; padding: 4px 8px; }
.wp-kv { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: #50575e; }
.wp-kv i { width: 8px; height: 8px; border-radius: 2px; background: #2271b1; flex: none; }

/* ============ 4 · la tienda ============ */
.sc4 { background: #fff; }
.sh-top { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid #ecf0f6; flex: none; }
.sh-logo { font-size: 13px; font-weight: 800; letter-spacing: -.035em; color: #16233a; }
.sh-nav { font-size: 10px; color: #6b7f99; }
.sh-cart { margin-left: auto; position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #e7f6ee; color: #1e8f60; }
.sh-cart .icon { --ico: 14px; width: 14px; height: 14px; }
.sh-n {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--terracotta); color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal; display: grid; place-items: center;
  animation: bump 19s ease-out infinite -7.6s;
}
@keyframes bump { 0%, 9% { transform: scale(1); } 11% { transform: scale(1.5); } 14%, 100% { transform: scale(1); } }
.sh-body { flex: 1; padding: 11px 14px; min-height: 0; }
.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sh-grid b {
  display: flex; flex-direction: column; gap: 5px; padding: 7px;
  border-radius: 9px; border: 1px solid #ecf0f6; background: #fff;
  box-shadow: 0 6px 14px -10px rgba(20,40,80,.4);
  opacity: 0; animation: pop 19s cubic-bezier(.16,1,.3,1) infinite; animation-delay: calc(-7.6s + var(--d));
}
.sh-img svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.sh-name { font-size: 10px; font-weight: 600; color: #16233a; }
.sh-pr { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: #16233a; }
.sh-pr em { font-style: normal; font-size: 8.5px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 5px; padding: 3px 7px; }
.cursor.c4 { right: -8px; bottom: -14px; animation: cur4 19s ease-in-out infinite; }
@keyframes cur4 {
  0%, 5% { transform: translate(20px, 22px); opacity: 0; }
  7% { opacity: 1; }
  10% { transform: translate(0, 0); opacity: 1; }
  11.5% { transform: translate(0, 0) scale(.8); opacity: 1; }
  17%, 100% { transform: translate(0, 0); opacity: 0; }
}
.toast {
  position: absolute; right: 14px; top: 46px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  background: #0b1020; color: #fff; font-size: 10.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; opacity: 0;
  animation: toast 19s cubic-bezier(.16,1,.3,1) infinite -7.6s;
}
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
@keyframes toast { 0%, 11% { opacity: 0; transform: translateY(-12px); } 14%, 18% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; } }

/* ============ 5 · la celebracion ============ */
.sc5 { background: #fff; display: grid; place-items: center; }
.party { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.girl { width: clamp(168px, 22vw, 224px); height: auto; overflow: visible; }
.girl-body { transform-origin: 130px 186px; animation: hop 1.05s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scaleY(1); } 42% { transform: translateY(-11px) scaleY(1.02); } 78% { transform: translateY(1px) scaleY(.99); } }
.arm-l { transform-origin: 108px 104px; animation: waveL .92s ease-in-out infinite; }
.arm-r { transform-origin: 156px 104px; animation: waveR .92s ease-in-out infinite; }
@keyframes waveL { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-10deg); } }
@keyframes waveR { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(10deg); } }
.eyes { animation: blink 4.2s steps(1, end) infinite; transform-origin: center; }
@keyframes blink { 0%, 96% { transform: scaleY(1); } 97%, 98.6% { transform: scaleY(.1); } 99%, 100% { transform: scaleY(1); } }
.confetti rect { animation: fall 2s linear infinite; animation-delay: var(--d); transform-origin: center; }
@keyframes fall {
  0% { transform: translateY(-18px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(150px) rotate(340deg); opacity: 0; }
}
.party-title { font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; letter-spacing: -.035em; color: var(--ink); margin-top: 4px; }
.party-sub { font-size: 11.5px; color: #5a6b84; }

/* ---- fichas flotantes ---- */
.chip {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 12px 26px -12px rgba(3,20,60,.6);
  animation: floaty 6s ease-in-out infinite;
}
.chip1 { left: 4%; top: 18%; animation-delay: -1s; }
.chip2 { right: 3%; top: 36%; animation-delay: -2.5s; }
.chip3 { right: 10%; bottom: 14%; animation-delay: -4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 1100px) {
  .win { width: 92%; }
  .cp-aside { display: none; }
}
@media (max-width: 900px) {
  .stage { place-items: start center; padding-top: 6%; }
  .win-body { height: 216px; }
  .chip { font-size: 11px; padding: 6px 11px; }
  .chip1 { left: 3%; top: 11%; }
  .chip2 { right: 2%; top: 28%; }
  .chip3 { right: 5%; bottom: 11%; }
  .cp-nav, .wp-menu { width: 88px; }
  .wp-cards { grid-template-columns: 1.3fr 1fr; }
  .wp-card.w3 { display: none; }
}
@media (max-width: 560px) {
  /* sin fichas flotantes y con la ventana por debajo del distintivo,
     que en movil vive arriba a la derecha */
  .chip { display: none; }
  .win-body { height: 176px; }
  .stage { padding-top: 58px; }
  .cp-nav { display: none; }
  .cp-row { grid-template-columns: repeat(3, 1fr); }
  .cp-row b:last-child { display: none; }
  .wp-menu { width: 74px; }
  .wp-cards { grid-template-columns: 1fr; }
  .wp-card.w2, .wp-card.w3 { display: none; }
  .sh-nav { display: none; }
  .log { font-size: 8.5px; }
  .sh-pr em { display: none; }
}

/* con "reduced motion" la pieza se queda quieta en la primera escena */
@media (prefers-reduced-motion: reduce) {
  .win, .sc1, .cp-row b, .cp-stat em, .win-url b.u1 { animation: none !important; opacity: 1 !important; }
  .cp-stat em { width: var(--w) !important; }
  .sc2, .sc3, .sc4, .sc5,
  .win-url b.u2, .win-url b.u3, .win-url b.u4, .win-url b.u5 { animation: none !important; opacity: 0 !important; }
  .cursor, .chip, .girl-body, .arm-l, .arm-r, .eyes, .confetti rect { animation: none !important; }
}

/* Un apoyo corto en la esquina donde va el distintivo, no un vinete que
   cruce media portada y roce la caja del titular. */
.hero-main::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 30% at 100% 100%, rgba(4,10,24,.3), rgba(4,10,24,0) 62%);
}

.hero-title {
  max-width: 50%; position: absolute; bottom: 0; left: 0; z-index: 1;
  background: var(--cream); padding: 20px 20px 0 0;
  border-radius: 0 var(--r-lg) 0 0;
}
.hero-title > .notch { width: 30px; height: 30px; position: absolute; top: -30px; left: 0; transform: rotate(-90deg); }
.hero-title > .notch:last-of-type { top: auto; bottom: 0; left: auto; right: -30px; }
.hero-title h1 { opacity: 0; transform: translateY(-10px); transition: .6s; transition-delay: .2s; }
.hero-title > .btn-arrow { display: inline-flex; margin: 20px 0 0; opacity: 0; transform: translateY(-10px); transition: .6s; transition-delay: .4s; }
.hero-title > .btn-arrow .arrow-cont { border-radius: 50%; }
.in-view .hero-title h1,
.in-view .hero-title > .btn-arrow { opacity: 1; transform: translateY(0); }

.hero-live {
  position: absolute; z-index: 1; bottom: 24px; right: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  /* Se sostiene solo: al quitar el velo del video, el contraste tiene que
     salir de aqui. Medido contra el fotograma mas claro posible. */
  background: rgba(14,18,16,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream); padding: 9px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500;
}
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; animation: livepulse 2.4s ease-out infinite; }
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(50,197,139,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(50,197,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(50,197,139,0); }
}

.hero-details { width: 320px; flex: none; display: flex; flex-direction: column; gap: var(--gap); }
.hero-details > .stats { transform: translateX(10px); opacity: 0; transition: .3s; transition-delay: .05s; }
.in-view .hero-details > .stats { transform: translateX(0); opacity: 1; }
.hero-links { height: 100%; display: grid; grid-gap: var(--gap); gap: var(--gap); }
.hero-links > div { transform: translateX(10px); opacity: 0; transition: .3s; }
.hero-links > div:first-child { transition-delay: .1s; }
.hero-links > div:nth-child(2) { transition-delay: .15s; }
.in-view .hero-links > div { transform: translateX(0); opacity: 1; }

/* circulo de estadisticas */
.stats { display: flex; background: var(--tan); flex-shrink: 0; border-radius: 50%; overflow: hidden; width: 100%; aspect-ratio: 1/1; }
/* Metraje de fondo dentro del circulo. El velo mantiene el tono arena de la
   pieza para que siga leyendose como la misma superficie del sistema. */
.stats-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .8s; }
.stats.video-ready .stats-video { opacity: 1; }
.stats-tint { position: absolute; inset: 0; z-index: 1; background: var(--tan); transition: background-color .8s; }
.stats.video-ready .stats-tint { background: rgba(220,182,136,.74); }
.stats-slider { width: 100%; aspect-ratio: 1/1; z-index: 2; }
.stat {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .5s;
}
.stat.is-active { opacity: 1; visibility: visible; }
.stat > div { max-width: 190px; margin: 0 auto; }
.stat .stat-num { font-size: clamp(2.6rem, 1.9rem + 2.6vw, 4.8rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.stat .stat-num.long { font-size: clamp(2rem, 1.5rem + 1.6vw, 3.1rem); }
.stat p { margin-top: 6px; font-size: 15px; line-height: 1.2; }
.dots-round { position: absolute; bottom: 26px; left: 0; width: 100%; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.dots-round button { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.25); transition: background-color .3s; }
.dots-round button.is-active { background: var(--ink); }

/* teselas del hero */
.hero-cta {
  background: var(--forest); color: var(--paper); min-height: 140px;
  border-radius: var(--r-lg) var(--r-lg) 0 var(--r-lg); overflow: hidden;
}
.hero-cta > .surface { position: absolute; inset: 0; overflow: hidden; }
.hero-cta > .surface img { width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform .5s; }
.hero-cta:hover > .surface img { transform: scale(1.05); }
.hero-cta > .surface::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(0,82,65,.9), rgba(0,82,65,.62)); }
.hero-cta .cta-main { height: 100%; z-index: 1; }
.hero-cta .cta-main > a { display: block; width: 100%; height: 100%; padding: 20px 90px 20px 20px; }
/* rotulos de tesela: tamano de h5 sin ser encabezado, para no romper la
   jerarquia (iban de h1 a h5 sin nada en medio) */
.tile-title { font-size: clamp(1.313rem, 1.17rem + .45vw, 1.625rem); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }

.hero-slides { background: var(--mint); grid-row: 2/4; border-radius: var(--r-lg); overflow: hidden; color: var(--forest); min-height: 160px; }
.hero-slides .slides-track { height: 100%; min-height: 160px; }
.slide { position: absolute; inset: 0; height: 100%; padding: 28px 28px 64px; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .5s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide .tile-title { max-width: 100%; font-size: 1.05rem; line-height: 1.3; }
.slide .tile-title em { font-style: normal; color: var(--chartreuse); }
.slide .slide-who { margin-top: 12px; font-size: 13px; font-weight: 500; opacity: .8; max-width: 100%; }

/* puntos con barra de progreso */
.dots-bar { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 6px; z-index: 2; }
.dots-bar button {
  width: 22px; height: 6px; border-radius: 10px; overflow: hidden;
  background: var(--dot-bg, rgba(0,82,65,.4));
}
.dots-bar button::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--dot-fill, var(--forest)); translate: -100% 0; transition: none;
}
.dots-bar button.is-active::before { transition: translate 5.4s ease-out; translate: 0 0; }
@media (max-width: 500px) { .dots-bar button { width: 28px; height: 8px; } }

@media (max-width: 1024px) {
  .hero-title { max-width: 80%; }
  /* el bloque de titulo se ensancha y taparia el distintivo abajo */
  .hero-live { bottom: auto; top: 20px; right: 20px; }
  /* el distintivo se va arriba: abajo ya no hay nada que apoyar */
  .hero-main::after { display: none; }
  .hero-details { width: 260px; }
  .hero-cta .cta-main > a { padding: 20px 70px 20px 20px; }
  .hero-cta .tile-title { font-size: 1.25rem; }
  .hero-slides .tile-title { font-size: 1rem; }
}
@media (max-width: 860px) {
  .home-hero { margin-bottom: 80px; padding-top: 70px; }
  .home-hero .hero-inner { height: auto; min-height: 0; flex-direction: column; }
  .hero-main { width: 100%; height: 520px; margin: 0; }
  .hero-title { max-width: min(420px, 88%); }
  .hero-details { width: 100%; margin: 10px 0 0; }
  .stats { aspect-ratio: auto; border-radius: var(--r-lg); }
  .stats-slider { aspect-ratio: auto; min-height: 220px; }
  .stat { position: absolute; padding: 40px 20px; }
  .hero-links { height: auto; min-height: 380px; }
  .hero-links > div, .hero-details > .stats { transform: translateY(-10px); }
  .in-view .hero-links > div, .in-view .hero-details > .stats { transform: translateY(0); }
}

/* En móvil manda la foto: el bloque de título se estrecha y el botón de
   bajar desaparece, igual que en la referencia. */
@media (max-width: 500px) {
  .hero-title { max-width: 300px; padding: 20px 20px 0 0; }
  .hero-title h1.large { font-size: 2.5rem; }
  .hero-title > .btn-arrow { display: none; }
  .hero-title > .notch:last-of-type { bottom: 0; right: auto; left: 100%; }
  .hero-live { bottom: auto; top: 14px; right: 14px; max-width: calc(100% - 28px); font-size: 12px; padding: 6px 12px; }
}

/* =========================================================
   CONTENIDO / DECLARACION GRANDE
   ========================================================= */
.content-block { display: flex; }
.content-block h2 { max-width: 1100px; }
.content-block.narrow h2 { max-width: 860px; }
.content-block .copy { margin: 30px 0 0; max-width: 950px; }
.content-block .cont { transform: translateY(-10px); opacity: 0; transition: .3s; }
.content-block.in-view .cont { transform: translateY(0); opacity: 1; }

/* =========================================================
   VITRINA DE SERVICIOS
   ========================================================= */
.services-showcase { display: flex; flex-direction: column; }
.services-intro { max-width: 900px; margin: 0 0 40px; transform: translateY(-10px); opacity: 0; transition: .3s; }
.services-intro h2 { margin: 20px 0 0; }
.services-intro .copy { margin: 20px 0 0; max-width: 640px; }
/* La tira sangra hasta el borde derecho de la ventana: las tarjetas se
   salen del contenedor para invitar al arrastre, igual que en la referencia. */
/* La tira vive fuera de .container para poder sangrar a la derecha, asi que
   reproduce a mano su margen izquierdo: el mismo centrado a 1800px + 40px. */
.services-track-wrap {
  width: 100%;
  padding: 0 0 0 max(40px, calc((100% - 1800px) / 2 + 40px));
  transform: translateY(-10px); opacity: 0; transition: .3s; transition-delay: .1s;
}
.services-showcase.in-view .services-intro,
.services-showcase.in-view .services-track-wrap { transform: translateY(0); opacity: 1; }

.services-track {
  display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; padding: 10px 0 18px;
  scrollbar-width: none; cursor: grab;
}
.services-track::-webkit-scrollbar { display: none; }
.services-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.services-track::after { content: ""; flex: 0 0 140px; }

.service {
  flex: 0 0 clamp(250px, 25vw, 420px); display: flex; border-radius: var(--r-lg);
  scroll-snap-align: start;
}
.service-inside {
  width: 100%; display: flex; border-radius: var(--r-lg);
  transition: translate .3s, background-color .3s; min-height: 344px;
}
.service-inside:hover { translate: 0 -5px; }
.service-inside:hover .service-image img,
.service-inside:hover .service-image .art { transform: scale(1.05); }
/* El bloque ya no es un enlace, asi que el relleno viaja al contenedor
   propio. La ilustracion crece hasta el fondo para que todas las
   tarjetas terminen a la misma altura sea cual sea el largo del titulo. */
.service-head { display: flex; flex-direction: column; width: 100%; padding: 22px 24px 46px; }
.service-head h3 { margin: 0; }
.service-head .service-image { margin-top: auto; }
.service-inside h3 { color: var(--paper); max-width: 15ch; z-index: 1; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); }
/* la ventana de ejemplo ocupa el ancho de la tarjeta, ya no un circulo */
.service-image {
  width: 100%; aspect-ratio: 3/2; margin: 18px 0 0;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 34px -18px rgba(3,20,60,.55);
}
.service-image img, .service-image .art { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }

.s-blue       { background: var(--blue); }
.s-green      { background: var(--green); }
.s-olive      { background: var(--olive); }
.s-terracotta { background: var(--terracotta); }
.s-purple     { background: var(--purple); }
.s-olive:hover { background: #545423; }

/* ---------- La ventana de ejemplo de cada tarjeta ----------
   Cada tarjeta muestra un sitio ya montado: una tienda, un blog, una web
   de empresa, una landing con reservas y un portafolio. La entrada se
   reproduce una vez al aparecer la tira y en bucle queda solo un acento,
   para que la ventana nunca se vea a medio dibujar. */
.service-image .art { display: block; width: 100%; height: 100%; }

/* el marco entra primero y luego su contenido */
.in-view .art .w-shell { opacity: 0; animation: entra .5s cubic-bezier(.16,1,.3,1) both; }
.in-view .art .w-head { opacity: 0; animation: entra .5s cubic-bezier(.16,1,.3,1) .12s both; }
.in-view .art .w-item { opacity: 0; animation: entra .55s cubic-bezier(.16,1,.3,1) both; }
.in-view .art .w-hero > *, .in-view .art .w-line > *, .in-view .art .w-form > * {
  opacity: 0; animation: entra .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.2s + var(--d, 0s));
}
@keyframes entra { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* tienda: las fichas entran escalonadas y el carrito recibe el pedido */
.in-view .art-tienda .p1 { animation-delay: .24s; }
.in-view .art-tienda .p2 { animation-delay: .38s; }
.in-view .art-tienda .p3 { animation-delay: .52s; }
.in-view .art-tienda .w-badge, .in-view .art-tienda .w-badge-n {
  transform-origin: 303px 36px; animation: latido 2.8s ease-out 1.1s infinite;
}
@keyframes latido { 0%, 72% { transform: scale(1); } 80% { transform: scale(1.28); } 90%, 100% { transform: scale(1); } }

/* blog: la entrada se escribe sola con su cursor */
.in-view .art-blog .b1 { animation-delay: .24s; }
.in-view .art-blog .b2 { animation-delay: .9s; }
.in-view .art-blog .w-line rect { transform-origin: left center; animation: entra .5s cubic-bezier(.16,1,.3,1) both, escribe 6s cubic-bezier(.4,0,.2,1) 1.2s infinite; animation-delay: calc(.2s + var(--d)), calc(1.2s + var(--d)); }
@keyframes escribe { 0% { transform: scaleX(0); } 10%, 84% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.in-view .art-blog .w-caret { animation: cursorVa 6s ease-in-out 1.2s infinite, parpadeo .8s steps(2, end) infinite; }
@keyframes cursorVa {
  0% { transform: translate(0, -62px); }
  14% { transform: translate(148px, -62px); }
  28% { transform: translate(122px, -46px); }
  46% { transform: translate(138px, -22px); }
  64% { transform: translate(110px, -10px); }
  84%, 100% { transform: translate(0, 0); }
}
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }

/* empresa: el heroe entra por partes y la senal late */
.in-view .art-empresa .f1 { animation-delay: .82s; }
.in-view .art-empresa .f2 { animation-delay: .94s; }
.in-view .art-empresa .f3 { animation-delay: 1.06s; }
.in-view .art-empresa .w-ping { transform-origin: 276px 45px; animation: onda 2.6s ease-out 1s infinite; }
@keyframes onda { 0% { transform: scale(.4); opacity: 0; } 22% { opacity: .95; } 100% { transform: scale(2.4); opacity: 0; } }

/* landing: el calendario se rellena, se elige un dia y se confirma */
.in-view .art-landing .w-day { opacity: 0; animation: entra .38s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.35s + var(--d)); }
.in-view .art-landing .w-day.sel { animation: entra .38s cubic-bezier(.16,1,.3,1) both, elige 4.4s ease-out 1.4s infinite; animation-delay: calc(.35s + var(--d)), 1.4s; }
@keyframes elige {
  0%, 8% { fill: #eeddd5; }
  14%, 86% { fill: #b1653b; }
  94%, 100% { fill: #eeddd5; }
}
.in-view .art-landing .w-tick > * { opacity: 0; transform-origin: 286px 156px; animation: tic .5s cubic-bezier(.16,1,.3,1) 2.1s both; }
@keyframes tic { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.in-view .art-landing .w-form rect:last-of-type { transform-origin: 81px 166px; }

/* portafolio: las piezas se colocan y una se levanta */
.in-view .art-porta .g1 { animation-delay: .24s; }
.in-view .art-porta .g2 { animation-delay: .34s; }
.in-view .art-porta .g3 { animation-delay: .44s; }
.in-view .art-porta .g4 { animation-delay: .54s; }
.in-view .art-porta .g5 { animation-delay: .64s; }
.in-view .art-porta .g6 { animation-delay: .74s; }
.in-view .art-porta .g2 { animation: entra .55s cubic-bezier(.16,1,.3,1) .34s both, levanta 3.4s ease-in-out 1.4s infinite; }
@keyframes levanta { 0%, 62% { transform: translateY(0); } 74% { transform: translateY(-5px); } 88%, 100% { transform: translateY(0); } }
.in-view .art-porta .w-ping { transform-origin: 292px 86px; animation: onda 3s ease-out 1.2s infinite; }

/* el boton de esquina lleva el icono del tema, no la flecha:
   al pasar el raton crece, pero no gira como haria una flecha */
.btn-arrow.topic .arrow-dot > i.icon { --ico: 21px; }
.btn-arrow.topic:hover .arrow-dot > i,
.service-inside:hover .btn-arrow.topic .arrow-dot > i { transform: scale(1.18); }

@media (prefers-reduced-motion: reduce) {
  .art, .art * { animation: none !important; opacity: 1 !important; transform: none !important; }
}


@media (max-width: 1024px) { .services-track-wrap { padding: 0 0 0 20px; } }
@media (max-width: 500px) {
  .services-track-wrap { padding: 0 0 0 10px; }
  /* en movil el alto minimo de escritorio dejaba un hueco muerto entre
     el titulo y la ilustracion: la tarjeta se ajusta a su contenido y las
     hermanas se igualan solas por ser hijas de una fila flexible */
  .service-inside { min-height: 0; }
  .service-head { padding: 16px 20px 20px; }
  .service { flex: 0 0 78%; }
}

/* =========================================================
   BANDA DE PRINCIPIOS (a sangre)
   ========================================================= */
.principles .cont { height: 85vh; min-height: 520px; }
.principles-inner { width: 100%; height: 100%; display: grid; place-items: center; }
.principles-bg { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); }
.principles-bg img { width: 100%; height: 100%; object-fit: cover; transition: scale 2s; scale: 1.1; }
.principles.in-view .principles-bg img { scale: 1; }
.principles-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,8,.24), rgba(10,14,8,.48)); }

.principles-copy {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 20px; scale: .9; transition: scale 1.5s; z-index: 1;
}
.principles.in-view .principles-copy { scale: 1; }
.principles-copy ul { display: flex; flex-direction: column; align-items: center; }
.principles-copy ul li { transition: .6s; opacity: 0; translate: 0 -20px; }
.principles.in-view .principles-copy ul li { opacity: 1; translate: 0 0; }
.principles-copy ul li:not(:last-child) { margin-bottom: -15px; }
.principles-copy ul li:nth-child(1) { transition-delay: .15s; }
.principles-copy ul li:nth-child(2) { transition-delay: .3s; }
.principles-copy ul li:nth-child(3) { transition-delay: .45s; }
.principles-copy ul li:nth-child(4) { transition-delay: .6s; }
.principles-copy ul li:nth-child(5) { transition-delay: .75s; }
.principles-copy h4 {
  color: var(--bone); background: var(--olive);
  padding: 10px 20px 15px; width: min-content; white-space: nowrap; border-radius: var(--r-md);
}
.principles-btn { display: flex; align-items: center; gap: 10px; opacity: 0; transition: .6s; transition-delay: .8s; }
.principles.in-view .principles-btn { opacity: 1; }
.principles-btn span { color: var(--bone); background: var(--olive); padding: 7px 18px; border-radius: var(--r-md); }
.principles-btn > div { height: 50px; width: 50px; background: var(--olive); border-radius: 50%; display: grid; place-items: center; }
.principles-btn > div svg { width: 20px; height: 20px; stroke: var(--bone); fill: none; stroke-width: 3; transition: transform .3s; }
.principles-btn:hover > div svg { transform: rotate(-22.5deg) scale(1.4); }

@media (max-width: 860px) {
  .principles .cont { height: auto; min-height: 0; aspect-ratio: 3/4; max-height: 78vh; }
  .principles-copy h4 { white-space: normal; width: auto; max-width: 84vw; font-size: 1.15rem; }
}

/* =========================================================
   RENDIMIENTO: consola oscura + teselas de ventaja
   ========================================================= */
.perf { display: flex; flex-direction: column; }
.perf-head { max-width: 900px; margin: 0 0 40px; }
.perf-head h2 { margin: 20px 0 0; }
.perf-head .copy { margin: 20px 0 0; max-width: 660px; }

.perf-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-gap: var(--gap); gap: var(--gap); align-items: stretch; }

.perf-console {
  background: var(--slate); color: var(--paper);
  border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 26px;
  transform: translateX(-10px); opacity: 0; transition: .3s;
}
.perf.in-view .perf-console { transform: translateX(0); opacity: 1; }

.console-bar { display: flex; align-items: center; gap: 16px; padding: 0 0 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.console-dots { display: flex; gap: 7px; flex: none; }
.console-dots i { width: 11px; height: 11px; border-radius: 50%; background: #4a4d4f; }
.console-dots i:first-child { background: #e06a5b; }
.console-dots i:nth-child(2) { background: #e0b45b; }
.console-dots i:last-child { background: #5bc97f; }
.console-url {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.07); border-radius: var(--r-md);
  padding: 11px 16px; font-size: 15px; color: rgba(255,255,255,.8);
}
.console-url .icon { --ico: 14px; width: 14px; height: 14px; color: var(--mint); }
.console-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--mint); flex: none; }

.console-main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.gauge {
  width: 160px; height: 160px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge .gauge-track { stroke: rgba(255,255,255,.13); }
/* 2πr = 326.7 ; 98% -> desfase de 6.5 */
.gauge .gauge-fill { stroke: var(--chartreuse); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) .2s; }
.perf.in-view .gauge .gauge-fill { stroke-dashoffset: 6.5; }
.gauge-num { font-size: 2.75rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.gauge-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px; }
.console-copy { flex: 1; min-width: 220px; }
.console-copy h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); }
.console-copy p { margin-top: 12px; line-height: 1.35; color: rgba(255,255,255,.72); max-width: 38ch; font-size: 1rem; }

.console-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: auto; }
.cstat { background: rgba(255,255,255,.07); border-radius: var(--r-md); padding: 18px 20px; }
.cstat-num { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.cstat-num em { font-style: normal; color: var(--mint); }
.cstat-lbl { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.65); }
.spark { display: flex; align-items: flex-end; gap: 5px; height: 42px; margin-top: 12px; }
.spark i { width: 100%; border-radius: 4px; background: var(--mint); height: var(--h); opacity: .55; }
.spark i:nth-child(6) { opacity: 1; }
.spark i:last-child { opacity: .8; }

.perf-cards { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--gap); gap: var(--gap); }
.pcard {
  border-radius: var(--r-lg); padding: 24px; color: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(10px); opacity: 0; transition: .3s;
}
.perf.in-view .pcard { transform: translateX(0); opacity: 1; }
.perf.in-view .pcard:nth-child(2) { transition-delay: .05s; }
.perf.in-view .pcard:nth-child(3) { transition-delay: .1s; }
.perf.in-view .pcard:nth-child(4) { transition-delay: .15s; }
.pcard-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; margin: 0 0 18px; }
.pcard-icon .icon { --ico: 22px; width: 22px; height: 22px; }
.pcard h3 { font-size: 1.25rem; }
.pcard p { margin-top: 10px; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.82); }
.pcard.c-blue { background: var(--blue); }
.pcard.c-mint { background: var(--forest); }
.pcard.c-terracotta { background: var(--terracotta); }
.pcard.c-olive { background: var(--olive); }

@media (max-width: 1100px) {
  .perf-grid { grid-template-columns: 1fr; }
  .perf-console, .pcard { transform: translateY(-10px); }
  .perf.in-view .perf-console, .perf.in-view .pcard { transform: translateY(0); }
}
@media (max-width: 620px) {
  .perf-console { padding: 18px; }
  .console-stats { grid-template-columns: 1fr; }
  .perf-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   FICHA TECNICA: tabla + rejilla de caracteristicas
   ========================================================= */
.specs { display: flex; flex-direction: column; }
/* La tabla a 1800px dejaba el dato pegado al borde derecho y a un palmo
   de su etiqueta. Se limita a un ancho de lectura y se centra. */
.specs > .container > * { max-width: 1080px; margin-inline: auto; }
.specs-head { max-width: 1080px; margin: 0 auto 40px; }
.specs-head h2 { margin: 20px 0 0; }
.specs-head .copy { margin: 20px 0 0; max-width: 660px; }

.spec-table {
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  transform: translateY(-10px); opacity: 0; transition: .3s;
}
.specs.in-view .spec-table { transform: translateY(0); opacity: 1; }
.spec-table table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 17px 30px; font-size: 16px; font-weight: 400; }
.spec-table tbody tr:nth-child(odd of :not(.spec-group)) { background: var(--blue-mist); }
.spec-table td { text-align: right; color: var(--ink-soft); }
.spec-table td.tnum { font-weight: 600; color: var(--ink); }
.spec-table .spec-group th {
  background: var(--ink); color: var(--cream);
  font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  padding: 14px 30px;
}
.spec-table .yes { display: inline-flex; }
.spec-table .yes .icon { --ico: 19px; width: 19px; height: 19px; color: var(--mint); stroke-width: 2.8; }

.specs-sub { margin: 60px 0 24px; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); }
.spec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: var(--gap); gap: var(--gap);
  transform: translateY(-10px); opacity: 0; transition: .3s; transition-delay: .08s;
}
.specs.in-view .spec-grid { transform: translateY(0); opacity: 1; }
.spec-grid li {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border-radius: var(--r-md); padding: 18px 20px;
  font-size: 15px; line-height: 1.3;
  transition: background-color .25s;
}
.spec-grid li:hover { background: var(--blue-mist); }
.chip-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--blue-mist); display: grid; place-items: center; flex: none; }
.chip-icon .icon { --ico: 19px; width: 19px; height: 19px; color: var(--blue); }

@media (max-width: 1200px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-table th, .spec-table td, .spec-table .spec-group th { padding: 15px 20px; }
}
@media (max-width: 560px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec-table th, .spec-table td { font-size: 15px; padding: 13px 16px; }
  .spec-table .spec-group th { padding: 12px 16px; font-size: 14px; }
}

/* =========================================================
   PRECIOS
   ========================================================= */
.pricing-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin: 0 0 40px; }
.pricing-head h2 { max-width: 760px; margin: 20px 0 0; }
.pricing-head .copy { max-width: 460px; }

.billing { display: inline-flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid rgba(0,0,0,.12); padding: 6px; border-radius: var(--r-lg); }
.billing-label { padding: 8px 16px; border-radius: var(--r-md); font-size: 16px; color: var(--ink-soft); transition: color .3s; }
.billing-label.is-active { color: var(--ink); font-weight: 600; }
.switch { width: 50px; height: 28px; border-radius: 999px; background: var(--cream); border: 1px solid rgba(0,0,0,.15); flex: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform .3s; }
.switch[aria-checked="true"] .knob { transform: translateX(22px); }
.save-note { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--forest); font-weight: 600; }

.plans { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.plan {
  background: var(--paper); border-radius: var(--r-lg); padding: 24px 26px;
  display: flex; flex-direction: column;
  transform: translateY(-10px); opacity: 0; transition: .3s;
}
.plan-head { display: flex; flex-direction: column; }
/* Con solo dos planes, a todo el ancho del sitio las tarjetas salian
   apaisadas y el precio quedaba perdido. Se limita el ancho de la rejilla
   para que cada tarjeta recupere la proporcion vertical de siempre. */
@media (min-width: 861px) {
  /* toda la seccion comparte ancho: encabezado, conmutador y tarjetas
     caen sobre la misma caja, en vez de estirarse cada uno por su lado */
  .pricing > .container > * { max-width: 1080px; margin-inline: auto; }
  .plans { max-width: 1080px; }
  .plan { padding: 34px 36px; }
}
.pricing.in-view .plan { transform: translateY(0); opacity: 1; }
.pricing.in-view .plan:nth-child(2) { transition-delay: .06s; }
.plan.featured { background: var(--blue); color: var(--paper); }
.plan.featured .plan-tagline, .plan.featured .plan-renew, .plan.featured .plan-period { color: rgba(255,255,255,.78); }
.plan-name { font-size: 1.4rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.plan-ribbon { position: absolute; top: 24px; right: 26px; background: var(--chartreuse); color: var(--ink); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-md); z-index: 1; }
.plan-tagline { margin-top: 9px; font-size: 15px; line-height: 1.32; color: var(--ink-soft); max-width: 40ch; }
.plan-price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font-size: 2.5rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.plan-period { font-size: 14px; color: var(--ink-soft); }
.plan-renew { margin-top: 6px; font-size: 13px; color: var(--ink-soft); min-height: 1.3em; }
.plan .btn { margin-top: 18px; width: 100%; padding: 12px 22px; font-size: 15px; }
.plan-features { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.plan-features li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.3; }
/* icono propio por caracteristica, sin ficha: solo el trazo, discreto */
.plan-features .icon { --ico: 17px; width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--blue); stroke-width: 1.7; opacity: .85; }
.plan.featured .plan-features .icon { color: #fff; opacity: .8; }
.pricing-foot { margin-top: 24px; max-width: 70ch; font-size: 15px; line-height: 1.35; color: var(--ink-soft); }

@media (max-width: 1024px) { .plans { grid-template-columns: 1fr; } .plan-price { margin-top: 18px; } }

/* =========================================================
   REJILLA DE CONFIANZA (CTA GRID)
   ========================================================= */
.cta-grid { display: flex; }
.grid-head { max-width: 900px; margin: 0 0 40px; }
.grid-head h2 { margin: 20px 0 0; }
.ctas { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--gap); gap: var(--gap); }
.cta-cell {
  display: flex; background: var(--terracotta); color: var(--paper);
  border-radius: var(--r-md); overflow: hidden;
  opacity: 0; transform: translateX(10px); transition: .3s;
}
.cta-cell:first-child { grid-row: 1/3; transform: translateX(-10px); }
.cta-cell:nth-child(2) { transition-delay: .05s; background: var(--forest); }
.cta-cell:nth-child(3) { transition-delay: .1s; background: var(--olive); }
.cta-cell:nth-child(3):hover { background: #545423; }
.cta-grid.in-view .cta-cell { transform: translateX(0); opacity: 1; }
.cta-cell > a { width: 100%; height: 100%; display: flex; }
.cta-cell h3 { max-width: 500px; margin: 0 0 100px; z-index: 1; padding: 25px; font-size: clamp(1.5rem, 1.159rem + 1.09vw, 2.25rem); }
.cta-cell .cell-who { position: absolute; left: 25px; bottom: 26px; z-index: 1; font-size: 15px; font-weight: 500; opacity: .85; max-width: 60%; }
.cta-image-cont { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }
.cta-image { width: 100%; height: 100%; }
.cta-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cta-cell:first-child .cta-image { width: 50%; height: auto; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; }
.cta-cell:first-child .cta-image img { border-radius: 50%; }
.cta-cell:hover .cta-image img { transform: scale(1.05); }
.cta-cell:nth-child(2) .cta-image-cont::after,
.cta-cell:nth-child(3) .cta-image-cont::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(12,16,14,.78), rgba(12,16,14,.25) 62%); }
.cta-cell:nth-child(2) .cta-image img, .cta-cell:nth-child(3) .cta-image img { opacity: .95; }

@media (max-width: 860px) {
  .ctas { grid-template-columns: 1fr; }
  .cta-cell:first-child { grid-row: auto; min-height: 420px; }
  .cta-cell, .cta-cell:first-child { transform: translateY(-10px); }
  .cta-grid.in-view .cta-cell { transform: translateY(0); }
  .cta-cell:nth-child(2), .cta-cell:nth-child(3) { min-height: 280px; }
}

/* =========================================================
   SLIDER DE BLOG
   ========================================================= */
.blog-slider { display: flex; }
.blog-slider h2 { max-width: 760px; margin: 0 0 20px; }
.blog-posts { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--gap); gap: var(--gap); }
.blog-images {
  aspect-ratio: 8/5; grid-column: span 2; background: var(--purple);
  border-radius: var(--r-md); overflow: hidden;
  transform: translateX(-10px); opacity: 0; transition: .3s;
}
.blog-slider.in-view .blog-images, .blog-slider.in-view .blog-details { transform: translateX(0); opacity: 1; }
.blog-image { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s; }
.blog-image.is-active { opacity: 1; visibility: visible; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-image .art { position: absolute; inset: 0; }
.blog-image .art svg { width: 100%; height: 100%; }

.blog-details {
  background: var(--blue-mist); border-radius: var(--r-md); overflow: hidden;
  transform: translateX(10px); opacity: 0; transition: .3s;
  --dot-bg: rgba(0,70,199,.4); --dot-fill: var(--blue);
}
.blog-details-inner { position: absolute; inset: 0; border-radius: var(--r-md); overflow: hidden; }
.blog-detail {
  position: absolute; inset: 0; width: 100%; padding: 30px 30px 90px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s;
}
.blog-detail.is-active { opacity: 1; visibility: visible; }
.blog-cat { margin: 0 0 20px; align-self: flex-start; }
.cat-guias { background: var(--tan); border-color: transparent; }
.cat-seguridad { background: var(--chartreuse); border-color: transparent; }
.cat-rendimiento { background: var(--lilac); border-color: transparent; }
.blog-detail h3 { max-width: 460px; font-size: clamp(1.5rem, 1.159rem + 1.09vw, 2.25rem); }
.blog-date { display: block; margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.blog-excerpt { max-width: 450px; margin: 16px 0 0; font-size: 16px; line-height: 1.32; }

@media (max-width: 1024px) {
  .blog-posts { grid-template-columns: repeat(5, 1fr); }
  .blog-images { aspect-ratio: 1/1; grid-column: span 3; }
  .blog-details { grid-column: span 2; }
}
@media (max-width: 700px) {
  .blog-posts { grid-template-columns: 1fr; }
  .blog-images { grid-column: auto; aspect-ratio: 8/5; }
  .blog-details { grid-column: auto; min-height: 330px; }
  .blog-detail { padding: 20px 20px 80px; }
}

/* =========================================================
   DECLARACION CON FILETE
   ========================================================= */
.statement { display: flex; }
.statement .cont { opacity: 0; transform: translateY(-10px); transition: .3s; }
.statement.in-view .cont { opacity: 1; transform: translateY(0); }
.statement-main { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding: 30px 0 0; }
.statement-main h3 { min-width: 300px; max-width: 560px; margin: 0 50px 0 0; }
.statement-copy { max-width: 800px; }
.statement-copy.green { color: var(--forest); }
.statement-copy.cobalt { color: var(--blue); }
@media (max-width: 1024px) {
  .statement-main { flex-direction: column; }
  .statement-main h3 { margin: 0 0 20px; }
}

/* =========================================================
   PANEL PARTIDO (foto + superficie de color)
   ========================================================= */
.panel-split { display: flex; }
.panel-cont { display: flex; gap: var(--gap); }
.panel-image { width: 38%; border-radius: var(--r-lg); overflow: hidden; transform: translateX(-10px); opacity: 0; transition: .3s; }
.panel-image img { width: 100%; height: 100%; object-fit: cover; }
.panel-main {
  width: 62%; display: flex; flex-direction: column;
  background: var(--blue); color: var(--paper); border-radius: var(--r-lg);
  padding: 40px; overflow: hidden; transform: translateX(10px); opacity: 0; transition: .3s;
}
.panel-split.in-view .panel-image, .panel-split.in-view .panel-main { transform: translateX(0); opacity: 1; }
/* el panel es un contenedor flex en columna: sin esto la pildora se estira */
.pill-light { border-color: rgba(255,255,255,.5); align-self: flex-start; }
/* ---- La pieza animada, ya en el hueco del cPanel ----
   Antes ocupaba el hero, que es apaisado; aqui la columna es
   estrecha y alta, asi que la ventana se centra y las fichas
   se recogen para no salirse por los lados. */
.panel-stage { background: var(--blue); }
.panel-stage .stage { border-radius: inherit; padding: 0; }

/* ---- La ventana ocupa la caja entera ----
   No se escala ni se deforma nada: la ventana pasa a medir lo que mide
   su hueco y cada escena reparte el alto sobrante entre sus rejillas,
   asi que lo que crece son las casillas, no la letra ni los iconos. */
.panel-stage .win {
  position: absolute; inset: 0; width: auto;
  display: flex; flex-direction: column;
  border-radius: inherit; box-shadow: none;
  font-size: 12px;
}
.panel-stage .win-body { height: auto; flex: 1; }
/* Cada escena trae mas contenido del que cabe y la ventana lo recorta por
   abajo, igual que un navegador de verdad recorta la pagina que sigue.
   Asi se llena cualquier alto sin tocar el tamano de ninguna pieza. */
.panel-stage .cp-main,
.panel-stage .wp-main,
.panel-stage .sh-body { overflow: hidden; }
.panel-stage .sh-grid { align-content: start; }

/* el escritorio de WordPress continua con el listado de entradas */
.wp-h2 { margin-top: 12px; }
.wp-list { display: flex; flex-direction: column; gap: 1px; }
.wp-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid #c3c4c7; border-top-width: 0;
  padding: 8px 10px; font-size: 9.5px; color: #50575e;
}
.wp-list li:first-child { border-top-width: 1px; }
.wp-list em { font-style: normal; flex: none; color: #2271b1; font-weight: 600; }

/* Entre 861 y 1150 la columna baja de 380px y la tercera tarjeta del
   escritorio de WordPress se sale por el lado. Apilado no pasa: alli la
   ventana vuelve a ser ancha y caben las tres. */
@media (min-width: 861px) and (max-width: 1150px) {
  .panel-stage .wp-cards { grid-template-columns: 1.3fr 1fr; }
  .panel-stage .wp-card.w3 { display: none; }
}
/* Sin fichas flotantes: se disenaron para posarse sobre el campo azul y
   ahora la ventana ocupa la caja entera, asi que solo taparian contenido.
   Lo que decian ya lo cuenta la lista de al lado. */
.panel-stage .chip { display: none; }
/* Apilado la caja necesita proporcion propia: la ventana ya no ocupa
   sitio en el flujo, asi que no puede dictar el alto. */
@media (max-width: 860px) { .panel-image.panel-stage { aspect-ratio: 16/10; } }
@media (max-width: 560px) { .panel-image.panel-stage { aspect-ratio: 5/4; } }

.panel-main h2 { max-width: 620px; margin: 20px 0 0; font-size: clamp(1.75rem, 1.182rem + 1.82vw, 3rem); }
.panel-copy { margin: 24px 0 0; }
.panel-copy > p { max-width: 62ch; }

.panel-list { margin: 26px 0 0; display: grid; gap: 16px; }
@media (min-width: 1250px) { .panel-list { grid-template-columns: repeat(2, 1fr); gap: 18px 34px; } }
.panel-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.32; }
.panel-list .icon { --ico: 17px; width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--chartreuse); stroke-width: 2.6; }
.panel-list strong { font-weight: 600; }

.panel-cta { align-self: flex-start; margin: 34px 0 0; }

@media (max-width: 860px) {
  .panel-cont { flex-direction: column; }
  .panel-image { width: 100%; aspect-ratio: 8/5; transform: translateY(-10px); }
  .panel-main { width: 100%; padding: 24px 20px; transform: translateY(-10px); }
  .panel-split.in-view .panel-image, .panel-split.in-view .panel-main { transform: translateY(0); }
}

/* =========================================================
   BANDA CTA FINAL
   ========================================================= */
.cta-box {
  min-height: 140px; background: var(--forest); color: var(--paper);
  border-radius: var(--r-lg) var(--r-lg) 0 var(--r-lg); overflow: hidden;
}
.cta-box > .surface { position: absolute; inset: 0; }
.cta-box > .surface img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.cta-box .cta-main { height: 100%; z-index: 1; }
.cta-box .cta-main > a { display: block; width: 100%; height: 100%; padding: 30px 120px 40px 30px; }
.cta-box h3 { max-width: 900px; }
.cta-box .cta-sub { margin: 16px 0 0; max-width: 620px; line-height: 1.3; opacity: .85; }
.cta-box:hover .arrow-dot > svg { transform: rotate(-22.5deg) scale(1.4); }
.cta-box:hover .arrow-dot > i { transform: scale(1.16); }
main > section.cta-band + footer, main + footer.after-cta { margin-top: -70px; }

/* =========================================================
   PIE
   ========================================================= */
.site-footer { margin: 10px 0 0; padding: 0 0 20px; }
.site-footer a:hover { text-decoration: underline; }
/* Al quitar las tres columnas de enlaces, la rejilla de dos columnas
   dejaba media mitad vacia. Ahora es una sola columna: la frase arriba y
   una barra inferior con marca, legales y copyright. */
.footer-inner {
  background: var(--slate); border-radius: var(--r-lg); padding: 44px 40px 34px;
  color: var(--paper); display: flex; flex-direction: column;
}
.footer-claim { max-width: 46ch; font-size: clamp(1.25rem, 1.1rem + .45vw, 1.625rem); font-weight: 400; line-height: 1.22; letter-spacing: -.05em; }
.footer-claim strong { font-weight: 600; }
.footer-mark { display: flex; align-items: center; gap: 12px; color: var(--paper); }
.footer-mark .mark { width: 36px; height: 36px; flex: none; }
.footer-mark .word { font-family: var(--font-logo); font-size: 1.7rem; font-weight: 700; letter-spacing: -.045em; }

.footer-right { display: flex; flex-direction: column; }

.locations { max-width: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 50px 0 0; }
.location { font-size: 15px; }
.location strong { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.location strong .icon { --ico: 15px; width: 15px; height: 15px; color: var(--mint); }
.location span { display: block; margin: 4px 0 0; color: rgba(255,255,255,.6); font-size: 14px; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 40px; flex-wrap: wrap;
  margin: 56px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px; color: rgba(255,255,255,.7);
}
.footer-copy { margin-left: auto; }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-socials { display: flex; gap: 20px; }
.footer-socials a { width: 24px; height: 24px; display: grid; place-items: center; transition: opacity .3s; }
.footer-socials a:hover { opacity: .7; }
.footer-socials svg { width: 100%; fill: #fff; stroke: none; }

@media (max-width: 900px) {
  .footer-inner { border-radius: var(--r-md); padding: 28px 22px 24px; }
    .locations { max-width: none; margin: 34px 0 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 22px; margin: 36px 0 0; }
  .footer-copy { margin-left: 0; }
}

/* =========================================================
   PAGINAS LEGALES Y DE AYUDA
   ========================================================= */
.legal-header { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.legal-header-cont { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal-logo { display: flex; align-items: center; gap: 12px; color: var(--brand); }
.legal-logo .mark { width: 34px; height: 34px; flex: none; }
.legal-logo .word { font-family: var(--font-logo); font-size: 1.75rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.legal-back { font-size: 15px; font-weight: 500; padding: 10px 18px; border: 1px solid var(--ink); border-radius: var(--r-md); transition: background-color .25s, color .25s; }
.legal-back:hover { background: var(--ink); color: var(--cream); }

/* la cabecera del sitio va fija, asi que el texto arranca por debajo */
.legal { margin: 132px 0 110px; }
@media (max-width: 860px) { .legal { margin: 132px 0 80px; } }
.legal-cont { max-width: 900px; }
.legal h1 { margin: 20px 0 0; font-size: clamp(2.125rem, 1.557rem + 1.82vw, 3.375rem); }
.legal-updated { margin: 16px 0 0; font-size: 15px; color: var(--ink-soft); }
.legal-body { margin: 44px 0 0; }
.legal-body h2 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; margin: 42px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { line-height: 1.55; max-width: 68ch; }
.legal-body p + p { margin-top: 16px; }
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.legal-list li { display: flex; gap: 12px; line-height: 1.5; }
.legal-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; margin-top: .55em; }

.legal-footer { border-top: 1px solid var(--rule); padding: 30px 0 40px; font-size: 14px; color: var(--ink-soft); }
.legal-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.legal-footer a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .legal { margin: 96px 0 70px; }
  .legal-footer .container { flex-direction: column-reverse; align-items: flex-start; }
}

/* =========================================================
   AVISO DE COOKIES
   ========================================================= */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  max-width: 660px; margin-inline: auto;
  background: var(--ink); color: var(--cream);
  border-radius: var(--r-md); padding: 20px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
  transform: translateY(160%); transition: transform .45s;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: 14px; line-height: 1.35; flex: 1 1 260px; color: rgba(249,248,246,.85); }
.cookie-banner p a { text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions .btn { padding: 10px 18px; font-size: 15px; }

/* =========================================================
   MOVIMIENTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hero-main img { animation: none; }
}

/* =========================================================
   CAPA DE MOVIMIENTO
   Cada animacion responde a una razon: jerarquia (guiar la
   mirada), relato (revelar en orden), respuesta (acusar una
   accion) o cambio de estado. Todo lo decorativo vive dentro
   de "prefers-reduced-motion: no-preference".
   ========================================================= */

/* ---- Barra de lectura: linea de tiempo de scroll nativa ----
   Sustituye al listener de scroll, que recalculaba en cada
   fotograma. Donde el navegador no la soporta, la barra no se
   dibuja en vez de degradar a JavaScript. */
.progress-bar { width: 100%; transform: scaleX(0); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
  .progress-bar { animation: leido linear both; animation-timeline: scroll(root block); }
  @keyframes leido { to { transform: scaleX(1); } }
}
@supports not (animation-timeline: scroll()) { .progress { display: none; } }

/* ---- Cabecera al salir de la portada ----
   Cambio de estado: avisa de que ya no estas arriba del todo. */
.menu > ul { transition: padding .35s var(--ease-out), background-color .35s, box-shadow .35s; }
.wordmark { transition: height .35s var(--ease-out); }
.wordmark .word { transition: font-size .35s var(--ease-out); }
/* Al bajar, detras ya no hay video sino la pagina: el cristal se cierra
   un poco y la sombra se recoge, pero sigue siendo cristal. */
.header-cont.scrolled .menu > ul {
  padding: 0 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 100%);
  box-shadow:
    0 8px 26px -14px rgba(3,20,60,.32),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---- Revelado en cascada ----
   Jerarquia: las piezas de una rejilla entran en orden de
   lectura en vez de aparecer todas de golpe. */
.js .stagger > * { opacity: 0; transform: translateY(18px); }
.js .stagger.in-view > * {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ---- Titulares que se descubren ----
   Relato: el titular se destapa de abajo arriba al entrar. */
.js .reveal-lines { overflow: hidden; }
.js .reveal-lines > * { display: block; transform: translateY(105%); transition: transform .85s cubic-bezier(.16,1,.3,1); }
.js .in-view .reveal-lines > *, .js .reveal-lines.in-view > * { transform: none; }

/* ---- Profundidad en la banda a sangre ----
   Relato: la foto se desplaza mas lento que la pagina y da fondo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .principles-bg img {
      animation: profundidad linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      transition: none;
    }
    @keyframes profundidad {
      from { transform: translateY(-7%) scale(1.16); }
      to   { transform: translateY(7%)  scale(1.16); }
    }
  }
}

/* ---- Respuesta al puntero ----
   Feedback: cada superficie acusa el hover con un gesto propio. */
.btn { transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out), box-shadow .25s; }
.btn-cream:hover, .btn-line:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(3,20,60,.5); }
.btn:active { transform: translateY(0); }

.plan { transition: transform .35s var(--ease-out), box-shadow .35s, opacity .3s; }
@media (hover: hover) {
  .plan:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(3,20,60,.42); }
  /* foco que sigue al puntero sobre la tarjeta de plan */
  .plan::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.16), transparent 62%);
    opacity: 0; transition: opacity .35s;
  }
  .plan:not(.featured)::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(0,70,199,.09), transparent 62%); }
  .plan:hover::before { opacity: 1; }
}

.spec-grid li { transition: background-color .25s, transform .25s var(--ease-out); }
@media (hover: hover) { .spec-grid li:hover { transform: translateX(4px); } }
.chip-icon { transition: transform .3s var(--ease-out), background-color .25s; }
.spec-grid li:hover .chip-icon { transform: scale(1.08) rotate(-4deg); }

.spec-table tbody tr { transition: background-color .2s; }
@media (hover: hover) { .spec-table tbody tr:not(.spec-group):hover { background: #dfe9fa; } }

.pcard { transition: transform .35s var(--ease-out), opacity .3s; }
@media (hover: hover) { .pcard:hover { transform: translateY(-5px); } }
.pcard-icon { transition: transform .35s var(--ease-out); }
.pcard:hover .pcard-icon { transform: scale(1.1) rotate(-6deg); }

/* la pildora de seccion se asienta al entrar */
.js .reveal .pill { transition: transform .6s var(--ease-out) .05s, opacity .6s .05s; }
.js .reveal:not(.in-view) .pill { opacity: 0; transform: translateY(10px); }

/* ---- Cifras que cuentan ----
   Jerarquia: el numero es el mensaje, asi que se gana la mirada. */
.tnum[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Movimiento reducido: todo queda quieto ---- */
@media (prefers-reduced-motion: reduce) {
  .progress-bar { animation: none !important; transform: scaleX(0) !important; }
  .js .stagger > *, .js .reveal-lines > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .principles-bg img { animation: none !important; }
  .plan::before { display: none !important; }
}

/* el catalogo que continua debajo del instalador de Softaculous */
.sf-more { flex: none; padding: 0 14px 14px; border-top: 1px solid #e4eaf3; margin-top: 4px; }
.sf-more .cp-sec { margin: 12px 0 7px; }
.sf-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sf-apps b {
  display: flex; align-items: center; gap: 7px; padding: 8px 9px;
  background: #fff; border: 1px solid #e6ecf5; border-radius: 7px;
  font-size: 9.5px; font-weight: 600; color: #5b6e88;
}
.sf-ico { width: 14px; height: 14px; border-radius: 4px; flex: none; }
/* la celebracion crece con la caja, que ahora es bastante mayor */
.panel-stage .girl { width: min(56%, 300px); }
.panel-stage .party-title { font-size: 22px; }
.panel-stage .party-sub { font-size: 13px; }

/* ---- El distintivo de las reseñas lleva una estrella, no una flecha ----
   Una flecha promete que vas a algún sitio; la estrella solo califica,
   así que tampoco gira al pasar el ratón. */
.btn-arrow.resena .arrow-dot > i.icon { --ico: 22px; }
.hover-arrow:hover .btn-arrow.resena .arrow-dot > i { transform: scale(1.15); }

/* =========================================================
   PREGUNTAS FRECUENTES
   <details> nativo: abre y cierra sin JavaScript, es
   navegable con teclado y el buscador lo indexa como texto.
   El atributo name agrupa el acordeón, así que solo queda
   una abierta a la vez.
   ========================================================= */
.faq { display: flex; }
.faq-cont { display: flex; gap: var(--gap); align-items: flex-start; }
.faq-head {
  width: 38%; flex: none; align-self: stretch;
  background: var(--blue-mist); color: var(--ink);
  border-radius: var(--r-lg); padding: 40px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.faq-head h2 { margin: 20px 0 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); }
.faq-head .copy { margin: 20px 0 0; }
.faq-head .btn { margin-top: auto; }
.faq-head .pill { align-self: flex-start; }

/* boton oscuro sobre el panel azul claro de la cabecera del FAQ */
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--blue); }

.faq-list { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.faq-item {
  background: var(--paper); border-radius: var(--r-md);
  padding: 0 26px; overflow: hidden;
  transition: background-color .3s;
}
.faq-item[open] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--blue); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(1rem, .93rem + .3vw, 1.2rem); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.25;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

/* el signo se convierte en resta al abrir */
.faq-plus { width: 20px; height: 20px; flex: none; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; border-radius: 1px; background: var(--ink);
  transition: transform .3s var(--ease-out);
}
.faq-plus::after { transform: rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: rotate(0); }

.faq-body { padding: 0 0 26px; max-width: 68ch; color: #3f4a5c; }
.faq-body a { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-body { animation: faqAbre .35s var(--ease-out); }
  @keyframes faqAbre { from { opacity: 0; transform: translateY(-6px); } }
}

@media (max-width: 1024px) {
  .faq-cont { flex-direction: column; }
  .faq-head { width: 100%; padding: 28px 24px; }
  .faq-head .btn { margin-top: 26px; }
  .faq-list { width: 100%; }
}
@media (max-width: 560px) {
  .faq-item { padding: 0 20px; }
  .faq-item summary { padding: 20px 0; gap: 16px; }
}

/* =========================================================
   ACCESO A LA PLATAFORMA DE CLIENTE
   Ocupa el sitio del antiguo buscador, arriba a la derecha.
   ========================================================= */
.login-cont { margin-left: auto; }
.login-link {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 18px 0 15px;
  border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  transition: background-color .25s, transform .25s var(--ease-out);
}
.login-link .icon { --ico: .78em; }
@media (hover: hover) {
  .login-link:hover { background: var(--blue); transform: translateY(-2px); }
}

/* ---- Iconos a la izquierda de los enlaces del menú ---- */
.menu-top > a { display: inline-flex; align-items: center; gap: .5em; }
/* Los glifos no llenan igual su caja: medida la tinta, la casa pinta
   1,000 em de alto, la pagina 0,838 y el portatil 0,750. A igual tamano
   de fuente se verian de tres tamanos distintos, asi que cada uno lleva
   el suyo para que los tres pinten la misma altura: la de las mayusculas
   del texto (0,70 em) con un 2% de margen. Va en em, no en px, para que
   la proporcion se mantenga igual en escritorio y en movil. */
.nav-icon { flex: none; opacity: .72; transition: opacity .25s, transform .25s var(--ease-out); }
.menu-top > a:hover .nav-icon,
.menu-top > a.active .nav-icon { opacity: 1; }
@media (hover: hover) { .menu-top > a:hover .nav-icon { transform: translateY(-1px); } }

/* =========================================================
   VOLVER ARRIBA
   Pegado al lado derecho, a media altura. Aparece cuando ya
   hay algo que desandar y desaparece arriba del todo.
   ========================================================= */
.to-top {
  position: fixed; right: 16px; bottom: 26px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 14px 30px -12px rgba(3, 20, 60, .55);
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .3s, visibility .3s, translate .3s var(--ease-out), background-color .25s;
}
.to-top.is-on { opacity: 1; visibility: visible; translate: 0; }
.to-top .icon { --ico: 21px; width: 21px; height: 21px; stroke-width: 2.1; }
@media (hover: hover) {
  .to-top:hover { background: var(--blue); }
  .to-top:hover .icon { transform: translateY(-2px); }
}
.to-top .icon { transition: transform .25s var(--ease-out); }
.to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 560px) { .to-top { right: 12px; bottom: 18px; width: 44px; height: 44px; } }

/* =========================================================
   ENTRADA DEL BLOG
   Columna de lectura estrecha sobre el ancho del sitio: el
   texto largo se lee mal a 1800px, así que el cuerpo se
   limita y solo las tablas se salen para poder desplazarse.
   ========================================================= */
.post { margin: 132px 0 0; }
@media (max-width: 860px) { .post { margin: 104px 0 0; } }
.post-cont { max-width: 860px; }

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.migas a:hover { text-decoration: underline; }

.post-head { margin: 22px 0 0; }
.post-head .pill { display: inline-block; }
.post-head h1 { margin: 18px 0 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.post-entradilla { margin: 22px 0 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.45; color: var(--ink); }
.post-meta {
  margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 14px; color: var(--ink-soft);
  padding-bottom: 24px; border-bottom: 1px solid var(--rule);
}

/* los tres datos de cabecera: tiempo, costo y nivel */
.post-datos { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dato {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue-mist); border-radius: var(--r-md); padding: 16px 18px;
  font-size: 14px; line-height: 1.35;
}
.dato .icon { --ico: 22px; width: 22px; height: 22px; flex: none; color: var(--blue); }
@media (max-width: 620px) { .post-datos { grid-template-columns: 1fr; } }

.post-cuerpo { margin: 44px 0 0; font-size: 1.0625rem; line-height: 1.6; }
.post-cuerpo > p { margin: 0 0 18px; }
.post-cuerpo h2 {
  margin: 52px 0 16px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  scroll-margin-top: 110px;
}
.post-cuerpo h3 { margin: 34px 0 12px; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 600; scroll-margin-top: 110px; }
.post-cuerpo h4 { margin: 24px 0 8px; font-size: 1.05rem; font-weight: 600; }
.post-cuerpo a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post-cuerpo a:hover { text-decoration-thickness: 2px; }
.post-cuerpo strong { font-weight: 600; }

.paso-tiempo {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px 10px; color: var(--ink-soft);
}

/* ---- Tabla de contenidos ---- */
.toc { background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 24px 28px; margin: 0 0 36px; }
.toc h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.toc ol { display: flex; flex-direction: column; gap: 9px; counter-reset: toc; list-style: none; }
.toc li { display: flex; gap: 12px; counter-increment: toc; font-size: 15px; line-height: 1.35; }
.toc li::before { content: counter(toc) "."; color: var(--ink-soft); flex: none; min-width: 18px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Listas ---- */
.lista-check, .lista-puntos, .lista-orden { margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.lista-check li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.45; }
.lista-check .icon { --ico: 17px; width: 17px; height: 17px; flex: none; margin-top: .28em; color: var(--forest); stroke-width: 2.6; }
.lista-puntos li { display: flex; gap: 12px; line-height: 1.45; }
.lista-puntos li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; margin-top: .62em; }
.lista-orden { counter-reset: paso; }
.lista-orden li { display: flex; gap: 12px; line-height: 1.45; counter-increment: paso; }
.lista-orden li::before {
  content: counter(paso); flex: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: .05em;
  background: var(--blue); color: var(--paper);
  font-size: 12px; font-weight: 600; display: grid; place-items: center;
}

/* ---- Cajas de apoyo ---- */
.post-caja { background: var(--blue-mist); border-radius: var(--r-md); padding: 26px 28px; margin: 32px 0; }
.post-caja .caja-titulo { margin: 0 0 16px; font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.post-caja .lista-check { margin: 0; }
.post-tip { background: var(--cream); border-left: 3px solid var(--chartreuse); border-radius: 0 var(--r-sm, 10px) var(--r-sm, 10px) 0; padding: 16px 20px; margin: 22px 0; }

/* ---- Mitos ---- */
.mitos { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; }
.mito { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px 22px; }
.mito p { margin: 0; }
.mito-falso { font-weight: 600; color: var(--ink); }
.mito-falso::before { content: "Mito: "; color: var(--terracotta); }
.mito-cierto { margin-top: 6px !important; color: #3f4a5c; }
.mito-cierto::before { content: "Realidad: "; color: var(--forest); font-weight: 600; }

/* ---- Ficha de cada herramienta ---- */
.herramienta { border-top: 1px solid var(--rule); padding-top: 8px; margin: 34px 0; }
.herr-para { margin: 0 0 16px; color: #3f4a5c; }
.pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.pros, .contras { border-radius: var(--r-md); padding: 18px 20px; }
.pros { background: #eaf6ef; }
.contras { background: #fdeceb; }
.pros h4, .contras h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.pros ul, .contras ul { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.pros li, .contras li { display: flex; gap: 9px; }
.pros li::before { content: "+"; color: var(--forest); font-weight: 700; flex: none; }
.contras li::before { content: "−"; color: var(--terracotta); font-weight: 700; flex: none; }
.herr-cierre { margin: 0; font-size: 15px; color: #3f4a5c; }
@media (max-width: 620px) { .pros-contras { grid-template-columns: 1fr; } }

/* ---- Tablas ---- */
.tabla-scroll { overflow-x: auto; margin: 22px 0 28px; border-radius: var(--r-md); border: 1px solid var(--rule); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.tabla caption { caption-side: top; text-align: left; padding: 16px 18px 0; font-size: 14px; color: var(--ink-soft); }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rule); }
.tabla thead th { background: var(--blue-mist); font-weight: 600; white-space: nowrap; }
.tabla tbody th { font-weight: 600; }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }

/* la FAQ del artículo reutiliza el acordeón de la portada */
.post-faq { margin: 22px 0 8px; }
.post-faq .faq-item { background: var(--paper); border: 1px solid var(--rule); }
.post-faq .faq-item[open] { box-shadow: inset 0 0 0 1.5px var(--blue); border-color: transparent; }

/* ---- Llamada final ---- */
.post-cta { margin: 56px 0 90px; }
.post-cta-inner { background: var(--blue); color: var(--paper); border-radius: var(--r-lg); padding: 40px; }
.post-cta-inner h2 { margin: 18px 0 14px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); }
.post-cta-inner p { max-width: 56ch; }
.post-cta-btns { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .post-cta-inner { padding: 28px 22px; }
  .post-cta-btns .btn { width: 100%; }
}


/* =========================================================
   ICONOS
   Fuente de iconos servida desde el propio dominio, recortada
   a los 29 glifos que el sitio usa: 4 KB y ninguna peticion
   a terceros.
   ========================================================= */
@font-face {
  font-family: "uicons-tr";
  src: url("../fonts/uicons-tr.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: block;
}
i.icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "uicons-tr"; font-style: normal; font-weight: normal;
  font-size: var(--ico, 22px); line-height: 1;
  width: 1em; height: 1em; flex: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
i.icon::before { display: block; }
.fi-tr-angle-small-down::before { content: "\f12c"; }
.fi-tr-blog-text::before { content: "\f1d4"; }
.fi-tr-laptop-code::before { content: "\f525"; }
.fi-tr-arrow-small-right::before { content: "\f164"; }
.fi-tr-arrow-right-to-bracket::before { content: "\f160"; }
.fi-tr-arrow-up::before { content: "\f17c"; }
.fi-tr-binary-lock::before { content: "\f1c6"; }
.fi-tr-bolt::before { content: "\f1d7"; }
.fi-tr-box-open::before { content: "\f209"; }
.fi-tr-calendar-lines::before { content: "\f241"; }
.fi-tr-check-circle::before { content: "\f299"; }
.fi-tr-circle-star::before { content: "\f2e2"; }
.fi-tr-city::before { content: "\f2f1"; }
.fi-tr-clock-three::before { content: "\f30c"; }
.fi-tr-cloud-download-alt::before { content: "\f313"; }
.fi-tr-code-simple::before { content: "\f330"; }
.fi-tr-coins::before { content: "\f337"; }
.fi-tr-comments::before { content: "\f35d"; }
.fi-tr-earth-americas::before { content: "\f3b6"; }
.fi-tr-envelopes::before { content: "\f3c9"; }
.fi-tr-hdd::before { content: "\f4c1"; }
.fi-tr-head-side-headphones::before { content: "\f4c5"; }
.fi-tr-house-chimney::before { content: "\f4ef"; }
.fi-tr-images::before { content: "\f502"; }
.fi-tr-map-pin::before { content: "\f561"; }
.fi-tr-pen-clip::before { content: "\f5e4"; }
.fi-tr-radar::before { content: "\f644"; }
.fi-tr-shield-virus::before { content: "\f699"; }
.fi-tr-shopping-basket::before { content: "\f69d"; }
.fi-tr-table-layout::before { content: "\f753"; }
.fi-tr-tachometer-fast::before { content: "\f75f"; }
.fi-tr-terminal::before { content: "\f778"; }
.fi-tr-truck-moving::before { content: "\f7c8"; }

/* =========================================================
   PLAN PRO · el escalon de arriba
   El problema no era de adornos: el plan caro era la tarjeta
   blanca y sosa, y el barato se llevaba el azul y el
   distintivo. Se invierte la jerarquia con superficie, no con
   purpurina: fondo oscuro, acento lima, cifras destacadas y
   los detalles finos de un objeto caro (filo de luz arriba,
   sombra mas honda, halo tenue detras del precio).
   ========================================================= */
.plan.pro {
  background: var(--slate); color: var(--paper);
  box-shadow:
    0 34px 60px -34px rgba(3, 20, 60, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Brillo en la esquina, no un tinte sobre media tarjeta: recogido y muy
   flojo, para que se lea como luz rozando el canto y no como una mancha
   verdosa sobre el carbon. */
.plan.pro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(46% 34% at 100% -6%, rgba(217, 219, 77, .17), transparent 70%),
    radial-gradient(70% 44% at 100% 0%, rgba(255, 255, 255, .05), transparent 72%);
}
.plan.pro > * { z-index: 1; }

.plan.pro .plan-name { font-size: 1.55rem; }
.plan.pro .plan-tagline,
.plan.pro .plan-renew,
.plan.pro .plan-period { color: rgba(255, 255, 255, .72); }
.plan.pro .plan-amount { font-size: 2.9rem; }

/* el distintivo del escalon de arriba: lima sobre oscuro */
.ribbon-pro {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--chartreuse); color: var(--ink);
}
.ribbon-pro .icon { --ico: 13px; }

/* boton lima: el unico de la seccion con relleno de acento */
.btn-lima { background: var(--chartreuse); color: var(--ink); }
.btn-lima:hover { background: #e6e85e; }

/* las caracteristicas que suben de escalon van en lima y en negrita:
   es lo que justifica la diferencia de precio */
.plan.pro .plan-features .icon { color: rgba(255, 255, 255, .55); opacity: 1; }
.plan.pro .plan-features li.destacada .icon { color: var(--chartreuse); }
.plan.pro .plan-features li.destacada b { font-weight: 600; color: var(--chartreuse); }
.plan.pro .plan-features li.destacada { color: #fff; }

@media (hover: hover) {
  .plan.pro:hover { box-shadow: 0 40px 68px -34px rgba(3, 20, 60, .62), inset 0 1px 0 rgba(255, 255, 255, .18); }
  /* el foco que sigue al puntero, en lima sobre el oscuro */
  .plan.pro::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 219, 77, .13), transparent 62%); }
}

/* ---- Iconos solidos del menu ---------------------------------
   Segunda subfuente, solo con estos cinco glifos. Se cambia la
   familia y el punto de codigo desde aqui: en el HTML las clases
   siguen siendo fi-tr-*, que es lo que llevan los ocho catalogos
   de traduccion. Los iconos acotados al acceso y al cambiador no
   se tocan en el resto del sitio, donde mandan los de trazo. */
@font-face {
  font-family: "uicons-sr";
  src: url("../fonts/uicons-sr.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
.nav-icon.fi-tr-house-chimney::before,
.nav-icon.fi-tr-laptop-code::before,
.nav-icon.fi-tr-blog-text::before,
.login-link > i.fi-tr-arrow-right-to-bracket::before,
.lang-globe > i.fi-tr-earth-americas::before,
.lang-toggle .lang-globe-i::before { font-family: "uicons-sr"; }
.nav-icon.fi-tr-house-chimney::before { content: "\f5b4"; }
.nav-icon.fi-tr-laptop-code::before { content: "\f5fa"; }
.nav-icon.fi-tr-blog-text::before { content: "\f1f6"; }
.login-link > i.fi-tr-arrow-right-to-bracket::before { content: "\f170"; }
.lang-globe > i.fi-tr-earth-americas::before,
.lang-toggle .lang-globe-i::before { content: "\f439"; }
.nav-icon.fi-tr-house-chimney { --ico: .715em; }
.nav-icon.fi-tr-blog-text { --ico: .851em; }
.nav-icon.fi-tr-laptop-code { --ico: .941em; }
.login-link > i.fi-tr-arrow-right-to-bracket { --ico: .72em; }

/* =========================================================
   CAMBIADOR DE IDIOMA
   Mismo patron que el sitio Landing Tour v2: mejora
   progresiva sobre enlaces <a> reales.

   El HTML de cada pagina trae los nueve <a href> de verdad
   dentro de .lang-sw, no generados por JavaScript. Eso es lo
   que necesita el rastreador para llegar a las traducciones
   desde cualquier pagina, y refuerza los hreflang del <head>.
   Sin JavaScript se ve como una fila de pastillas y funciona
   igual; script.js las reestructura en boton + panel al
   cargar, sin nada que mantener a mano por idioma.
   ========================================================= */

/* la pildora del nav ya no recorta: el desplegable tiene que poder salir
   de ella. El reflejo del cristal no lo necesitaba: es un ::before con
   inset:0 que ya se recorta por su propio border-radius heredado. */
.menu > ul { overflow: visible; }

/* ---- estado sin JavaScript: fila de pastillas ---- */
.lang-sw {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 3px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
}
.lang-globe { display: flex; align-items: center; justify-content: center; width: 24px; color: var(--ink); }
.lang-globe .icon { --ico: 10px; }
.lang-opt {
  display: block; padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--ink); white-space: nowrap;
  transition: background-color .25s, color .25s;
}
/* en la fila de pastillas manda el codigo; el nombre propio solo
   aparece dentro del panel, donde hay sitio */
.lang-sw:not(.lang-dd) .lang-opt em { display: none; }
.lang-opt:hover { background: var(--blue-mist); color: var(--blue); }
.lang-opt.active, .lang-opt.active:hover { background: var(--ink); color: var(--cream); }

/* ---- estado reestructurado por script.js: boton + panel ---- */
.lang-sw.lang-dd { position: relative; padding: 0; border: 0; background: none; }
.lang-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px 7px 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.lang-toggle:hover { background: var(--blue-mist); color: var(--blue); border-color: transparent; }
/* los glifos se centran en su propia caja: si no, se apoyan en el
   line-height heredado del boton y quedan mas bajos que el codigo */
.lang-toggle .icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.lang-toggle .lang-globe-i { --ico: 10px; }
.lang-toggle .lang-caret { --ico: 12px; transition: transform .25s var(--ease-out); }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 96px; padding: 6px; z-index: 950;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--r-md);
  box-shadow: 0 22px 48px -18px rgba(3, 20, 60, .48);
  /* con nueve idiomas la lista es larga: se desplaza en vez de desbordar */
  max-height: 340px; overflow-y: auto;
}
.lang-panel[hidden] { display: none; }
/* En el panel manda la abreviatura. El nombre propio se oculta con
   display:none y no se borra del marcado: el rastreador y los lectores
   de pantalla lo siguen leyendo dentro del enlace. */
.lang-panel .lang-opt {
  border-radius: var(--r-sm); padding: 9px 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .6px;
}
.lang-panel .lang-opt em { display: none; }
.lang-panel .lang-opt.active,
.lang-panel .lang-opt.active:hover { background: var(--ink); color: var(--cream); }

@media (max-width: 1024px) {
  /* Dentro del panel amarillo, el cambiador no es una seccion mas del
     sitio: es un control. Si se le deja el mismo cuerpo que a Inicio,
     Planes y Blog, se lee como un cuarto destino y el desplegable
     aparece sin que se entienda de donde sale. Se le da forma de boton,
     y el submenu que abre va enmarcado y colgando de el. */
  /* el separador de fila lo pone .menu > ul > li, mas especifico: hay que
     igualarle para quitarlo. Debajo de un boton enmarcado sobra. */
  .menu > ul > li.lang-li { width: 100%; border-bottom: 0; padding: 16px 0 6px; }
  /* En escritorio el panel flota (position:absolute), asi que da igual
     que .lang-sw sea una fila. Aqui el panel entra en el flujo y, si la
     caja sigue siendo fila, se coloca AL LADO del boton y se sale de la
     pantalla. Tiene que apilarse. */
  .lang-sw, .lang-sw.lang-dd {
    width: 100%; flex-direction: column; align-items: stretch; gap: 0;
  }

  .lang-toggle {
    width: 100%; justify-content: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, .06);
    border: 1.5px solid var(--ink);
    border-radius: var(--r-md);
    font-size: 17px; font-weight: 700; letter-spacing: .6px;
    color: var(--ink);
  }
  .lang-toggle:hover { background: rgba(0, 0, 0, .12); color: var(--ink); border-color: var(--ink); }
  /* abierto se rellena: el boton y su panel se leen como una sola pieza */
  .lang-toggle[aria-expanded="true"] {
    background: var(--ink); color: var(--chartreuse);
    border-color: var(--ink);
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .lang-toggle .lang-globe-i { --ico: 14px; opacity: 1; }
  .lang-toggle .lang-caret { --ico: 15px; margin-left: auto; }

  /* El submenu, enmarcado y colgando del boton, en vertical. El panel
     del menu ya se desplaza solo (max-height + overflow-y en .menu),
     asi que la lista larga no deja el acceso fuera de alcance. */
  .lang-panel {
    position: static; width: 100%; min-width: 0; max-height: none; overflow: visible;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px;
    background: rgba(0, 0, 0, .06);
    border: 1.5px solid var(--ink); border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: none;
  }
  .lang-panel .lang-opt {
    margin-left: 0; padding: 11px 14px; text-align: left;
    border-radius: var(--r-sm);
    font-size: 16px; font-weight: 700; letter-spacing: .6px;
  }
  .lang-opt:hover { background: rgba(0, 0, 0, .1); color: var(--ink); }
  .lang-panel .lang-opt.active,
  .lang-panel .lang-opt.active:hover { background: var(--ink); color: var(--chartreuse); }

  /* sin JavaScript la fila de pastillas se envuelve en vez de desbordar */
  .lang-sw:not(.lang-dd) { flex-wrap: wrap; border: 0; background: none; padding: 12px 0; }
}