/* ====================================================================
   Terrano — sitio publico
   Esquema claro. Fondo blanco, azul solo donde hay que pulsar: en una
   pagina comercial el color debe dirigir la mirada, no decorarla.
   ==================================================================== */

:root {
  --blanco:#FFFFFF;
  --nieve:#F7F9FC;
  --hielo:#EEF3F9;
  --linea:#E2E8F0;
  --linea-fuerte:#CBD5E1;

  --tinta:#0B1729;
  --texto:#334155;
  --gris:#64748B;
  --gris-claro:#94A3B8;

  --azul:#2563EB;
  --azul-oscuro:#1D4ED8;
  --azul-suave:#EFF5FF;
  --azul-linea:#BFDBFE;

  --verde:#16A34A;
  --verde-suave:#F0FDF4;
  --ambar:#D97706;
  --rojo:#DC2626;
  --rojo-suave:#FEF2F2;

  --sombra:0 1px 2px rgba(11,23,41,.04), 0 8px 24px rgba(11,23,41,.06);
  --sombra-alta:0 2px 4px rgba(11,23,41,.05), 0 18px 44px rgba(11,23,41,.10);
  --radio:14px;
  --ancho:1140px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--blanco); color:var(--texto);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--azul); text-decoration:none; }
a:hover { color:var(--azul-oscuro); }
img, svg { max-width:100%; }
.mono { font-family:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,monospace; }
.envoltura { max-width:var(--ancho); margin:0 auto; padding:0 24px; }

h1,h2,h3 { color:var(--tinta); margin:0; }
h1 { font-size:clamp(36px,5.2vw,58px); line-height:1.08; letter-spacing:-.03em;
     font-weight:700; }
h2 { font-size:clamp(26px,3.4vw,38px); line-height:1.18; letter-spacing:-.02em;
     font-weight:700; }
h3 { font-size:18px; font-weight:600; letter-spacing:-.01em; }

/* ---------- cabecera ---------- */
.cabecera {
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--linea);
}
.barra { display:flex; align-items:center; gap:20px; padding:14px 0; }
.marca { display:flex; align-items:center; gap:10px; }
.marca-icono {
  width:32px; height:32px; border-radius:9px; background:var(--azul);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.marca-icono svg { width:18px; height:18px; fill:none; stroke:#fff;
                   stroke-width:1.8; stroke-linecap:round; }
.marca-nombre { font-size:18.5px; font-weight:700; color:var(--tinta);
                letter-spacing:-.02em; }
.nav { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav a:not(.boton) {
  color:var(--gris); font-size:15px; font-weight:500; padding:8px 14px;
  border-radius:8px;
}
.nav a:not(.boton):hover { color:var(--tinta); background:var(--nieve); }
.nav a.on { color:var(--tinta); }

/* Menu de movil: antes los enlaces simplemente se ocultaban y no habia
   forma de llegar a Precios desde un telefono. */
.hamburguesa {
  display:none; background:none; border:1px solid var(--linea);
  border-radius:9px; padding:8px; cursor:pointer; color:var(--tinta);
}
.hamburguesa svg { width:20px; height:20px; display:block; fill:none;
                   stroke:currentColor; stroke-width:1.9;
                   stroke-linecap:round; }

/* ---------- botones ---------- */
.boton {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:10px; font-size:15px; font-weight:600; padding:11px 20px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}
.boton-principal { background:var(--azul); color:#fff;
                   box-shadow:0 1px 2px rgba(37,99,235,.28); }
.boton-principal:hover { background:var(--azul-oscuro); color:#fff;
                         transform:translateY(-1px);
                         box-shadow:0 6px 18px rgba(37,99,235,.28); }
.boton-suave { background:var(--nieve); border-color:var(--linea);
               color:var(--tinta); }
.boton-suave:hover { background:var(--hielo); color:var(--tinta); }
.boton-grande { padding:15px 30px; font-size:16.5px; border-radius:11px; }
.boton-ancho { width:100%; }

/* ---------- portada ---------- */
.portada { padding:78px 0 64px; position:relative; overflow:hidden; }
.portada::before {
  content:""; position:absolute; inset:-40% 30% 40% -20%; z-index:-1;
  background:radial-gradient(closest-side,rgba(37,99,235,.10),transparent 70%);
}
.portada-txt { max-width:720px; }
.pastilla {
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
  border-radius:999px; background:var(--azul-suave);
  border:1px solid var(--azul-linea); color:var(--azul-oscuro);
  font-size:13.5px; font-weight:600; margin-bottom:22px;
}
.pastilla .punto { width:7px; height:7px; border-radius:50%;
                   background:var(--verde); animation:latir 2.4s ease-in-out infinite; }
.entradilla { font-size:19.5px; color:var(--gris); margin:20px 0 30px;
              max-width:620px; }
.acciones { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.nota { color:var(--gris-claro); font-size:14px; margin:18px 0 0; }

/* ---------- secciones ---------- */
.seccion { padding:66px 0; }
.seccion.suave { background:var(--nieve); border-top:1px solid var(--linea);
                 border-bottom:1px solid var(--linea); }
.seccion-cab { max-width:660px; margin-bottom:38px; }
.seccion-cab.centro { margin-left:auto; margin-right:auto; text-align:center; }
.seccion-cab p { color:var(--gris); margin:14px 0 0; font-size:17.5px; }
.etiqueta { display:block; color:var(--azul); font-size:13.5px;
            font-weight:700; letter-spacing:.09em; text-transform:uppercase;
            margin-bottom:12px; }

/* ---------- rejillas y tarjetas ---------- */
.rejilla { display:grid; gap:20px; }
.r2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.r3 { grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.r4 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.tarjeta {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); padding:26px; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.tarjeta p { margin:8px 0 0; color:var(--gris); font-size:15.5px; }
.tarjeta-ico {
  width:42px; height:42px; border-radius:11px; margin-bottom:16px;
  background:var(--azul-suave); color:var(--azul);
  display:flex; align-items:center; justify-content:center;
}
.tarjeta-ico svg { width:21px; height:21px; fill:none; stroke:currentColor;
                   stroke-width:1.8; stroke-linecap:round;
                   stroke-linejoin:round; }
.numero {
  width:32px; height:32px; border-radius:9px; background:var(--tinta);
  color:#fff; font-size:15px; font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- listas ---------- */
.lista { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.lista li { display:flex; gap:11px; align-items:flex-start;
            color:var(--texto); font-size:15.5px; }
.tic { color:var(--verde); flex:none; margin-top:4px; }
.tic svg { width:15px; height:15px; fill:none; stroke:currentColor;
           stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- tabla comparativa ---------- */
.comparativa {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra);
}
.comparativa th, .comparativa td { padding:16px 20px; text-align:left;
                                   border-bottom:1px solid var(--linea); }
.comparativa tr:last-child th, .comparativa tr:last-child td { border-bottom:none; }
.comparativa thead th { background:var(--nieve); font-size:13.5px;
                        letter-spacing:.06em; text-transform:uppercase;
                        color:var(--gris); font-weight:700; }
.comparativa tbody th { font-weight:600; color:var(--tinta); font-size:15.5px; }
.comparativa td { font-size:15.5px; color:var(--texto); }
/* La columna propia se destaca: es la que tiene que ganar la lectura. */
.col-nuestra { background:var(--azul-suave); }
.comparativa thead .col-nuestra { background:var(--azul); color:#fff; }
.si, .no { display:inline-flex; align-items:center; gap:8px; }
.si { color:var(--verde); font-weight:600; }
.no { color:var(--rojo); }
.si svg, .no svg { width:16px; height:16px; flex:none; fill:none;
                   stroke:currentColor; stroke-width:2.4;
                   stroke-linecap:round; stroke-linejoin:round; }
.pie-tabla { color:var(--gris); font-size:15px; margin:16px 0 0; }

/* ---------- precios ---------- */
.precio-caja {
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:18px; padding:34px; box-shadow:var(--sombra-alta);
  max-width:520px; position:relative;
}
.precio-caja::before {
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--azul),#60A5FA);
  border-radius:18px 18px 0 0;
}
.precio-fila { display:flex; align-items:baseline; gap:14px; padding:18px 0;
               border-bottom:1px solid var(--linea); }
.precio-fila:last-of-type { border-bottom:none; }
.precio-etq { flex:1; }
.precio-etq strong { display:block; font-size:17px; color:var(--tinta); }
.precio-etq small { color:var(--gris); font-size:14px; }
.precio-num { font-size:34px; font-weight:700; color:var(--tinta);
              letter-spacing:-.03em; flex:none; }
.precio-num small { font-size:15px; font-weight:500; color:var(--gris); }
.destacado {
  display:inline-flex; align-items:center; gap:9px; margin:16px 0 4px;
  padding:10px 16px; border-radius:999px; background:var(--verde-suave);
  border:1px solid #BBF7D0; color:var(--verde); font-size:14.5px;
  font-weight:600;
}
.nota-pie { color:var(--gris); font-size:14px; margin:16px 0 0; }

/* ---------- preguntas ---------- */
.faq details { border:1px solid var(--linea); border-radius:12px;
               padding:16px 20px; margin-bottom:10px; background:var(--blanco); }
.faq details[open] { border-color:var(--azul-linea);
                     background:var(--azul-suave); }
.faq summary { cursor:pointer; font-size:16.5px; font-weight:600;
               color:var(--tinta); list-style:none; display:flex;
               align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"+"; color:var(--azul); font-size:20px;
                       width:16px; flex:none; }
.faq details[open] summary::before { content:"\2212"; }
.faq p { color:var(--texto); margin:12px 0 0 28px; font-size:15.5px; }

/* ---------- cierre y pie ---------- */
.cierre { padding:74px 24px; text-align:center; background:var(--tinta);
          color:#fff; }
.cierre h2 { color:#fff; }
.cierre p { color:#94A3B8; margin:14px auto 28px; max-width:520px;
            font-size:17.5px; }
.pie { border-top:1px solid var(--linea); padding:28px 0 44px;
       background:var(--nieve); }
.pie-fila { display:flex; align-items:center; gap:22px; flex-wrap:wrap;
            font-size:14.5px; }
.pie-fila a { color:var(--gris); }
.pie-fila a:hover { color:var(--tinta); }
.pie-fila .der { margin-left:auto; color:var(--gris-claro); }

/* ---------- movimiento ---------- */
@keyframes latir { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes entrar { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.anim { opacity:0; animation:entrar .62s cubic-bezier(.22,.9,.3,1) forwards; }
.aparece { opacity:0; transform:translateY(22px);
           transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.aparece.visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .anim, .aparece { opacity:1 !important; transform:none !important; }
}

/* ---------- movil ---------- */
@media (max-width:860px) {
  .hamburguesa { display:block; }
  .nav {
    position:fixed; inset:60px 0 auto; flex-direction:column;
    align-items:stretch; gap:2px; padding:14px 20px 22px;
    background:var(--blanco); border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra-alta); transform:translateY(-140%);
    transition:transform .28s cubic-bezier(.22,.9,.3,1);
  }
  .nav.abierto { transform:none; }
  .nav a:not(.boton) { padding:13px 8px; font-size:16.5px;
                       border-bottom:1px solid var(--linea); }
  .nav .boton { margin-top:12px; justify-content:center; }
  .barra { position:relative; }
  .seccion { padding:48px 0; }
  .portada { padding:52px 0 44px; }
  .comparativa th, .comparativa td { padding:13px 14px; font-size:14.5px; }
}

/* ====================================================================
   SELECTOR DE IDIOMA
   ==================================================================== */

.nav-sep { width:1px; height:22px; background:var(--linea); margin:0 6px; }
.enlace-entrar { font-weight:600 !important; color:var(--tinta) !important; }

.idioma { position:relative; margin-left:6px; }
.idioma-btn {
  display:flex; align-items:center; gap:7px; background:none; border:none;
  cursor:pointer; color:var(--azul); font-size:15px; font-weight:500;
  padding:8px 10px; border-radius:8px; font-family:inherit;
}
.idioma-btn:hover { background:var(--nieve); }
.idioma-btn svg { width:18px; height:18px; fill:none; stroke:currentColor;
                  stroke-width:1.7; flex:none; }
.idioma-btn .flecha { width:14px; height:14px; stroke-width:2.2;
                      color:var(--gris-claro); }

.idioma-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:11px; box-shadow:var(--sombra-alta); padding:6px;
  display:none; z-index:60;
}
.idioma-menu.abierto { display:block; }
.idioma-menu button {
  display:block; width:100%; text-align:left; background:none; border:none;
  cursor:pointer; padding:10px 13px; border-radius:8px; font-family:inherit;
  font-size:15px; color:var(--tinta);
}
.idioma-menu button:hover { background:var(--nieve); }

/* ====================================================================
   PORTADA CON ILUSTRACION
   ==================================================================== */

.portada-arte { padding-bottom:78px; }
.portada-rejilla {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px; align-items:center;
}
.hero-arte { position:relative; }
.hero-arte svg { width:100%; height:auto; overflow:visible; }

/* Ondas de cobertura saliendo del movil principal. */
@keyframes onda { 0%{r:26;opacity:.34} 100%{r:150;opacity:0} }
.ondas circle { animation:onda 5.4s ease-out infinite; }
.ondas circle:nth-child(2) { animation-delay:1.8s; }
.ondas circle:nth-child(3) { animation-delay:3.6s; }

/* Los moviles del fondo flotan desacompasados: acompasados parecerian
   una sola pieza moviendose. */
@keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.satelite { animation:flotar 6s ease-in-out infinite; }
.satelite.s2 { animation-duration:7.2s; animation-delay:.9s; }
.satelite.s3 { animation-duration:6.6s; animation-delay:.4s; }
.satelite.s4 { animation-duration:7.8s; animation-delay:1.4s; }
.principal { animation:flotar 8s ease-in-out infinite; }

/* Las filas del panel entran una a una, como cuando carga de verdad. */
@keyframes fila-entra { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.fila { opacity:0; animation:fila-entra .55s cubic-bezier(.22,.9,.3,1) forwards; }
.f1 { animation-delay:.35s } .f2 { animation-delay:.5s }
.f3 { animation-delay:.65s } .f4 { animation-delay:.8s }
.f5 { animation-delay:.95s }

@keyframes barrer { 0%{transform:translateY(0);opacity:0}
                    12%{opacity:1} 88%{opacity:1}
                    100%{transform:translateY(190px);opacity:0} }
.barrido { animation:barrer 4.6s ease-in-out infinite; animation-delay:1.4s; }

@keyframes flotar-aviso { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.aviso-flota { animation:flotar-aviso 5s ease-in-out infinite;
               animation-delay:1.2s; }

/* ---------- retoques ---------- */
.centro-txt { text-align:center; margin-top:26px !important; }
.parrafo-grande { color:var(--gris); font-size:17.5px; margin-top:14px; }
.cifra-caja { text-align:center; padding:44px; }
.cifra { font-size:66px; font-weight:700; color:var(--azul); line-height:1;
         margin:0; letter-spacing:-.04em; }
.cifra-txt { margin-top:12px !important; font-size:17px !important;
             color:var(--tinta) !important; font-weight:600; }
.etiqueta-corta { margin-bottom:6px; }
.diagrama-caja { background:var(--blanco); border:1px solid var(--linea);
                 border-radius:var(--radio); padding:22px;
                 box-shadow:var(--sombra); overflow-x:auto; }
.diagrama-caja svg { min-width:660px; }

@media (prefers-reduced-motion:reduce) {
  .ondas circle,.satelite,.principal,.fila,.barrido,.aviso-flota
    { animation:none !important; opacity:1 !important; }
}

@media (max-width:960px) {
  .portada-rejilla { grid-template-columns:1fr; gap:26px; }
  .hero-arte { max-width:420px; margin:0 auto; }
}
@media (max-width:860px) {
  .nav-sep { display:none; }
  .idioma { margin:14px 0 0; }
  .idioma-menu { right:auto; left:0; }
}