/* MIRABILENET — hoja de estilos del sitio publico.
   Sin recursos externos: tipografias del sistema e iconos SVG en linea. */

:root {
  --azul: #0b4fd6;
  --azul-claro: #3b82f6;
  --azul-tenue: #eff5ff;
  --turquesa: #0fb5a4;
  --ambar: #f59e0b;

  --tinta: #0d1526;
  --texto: #1f2937;
  --suave: #5b6675;
  --linea: #e2e8f0;
  --fondo: #ffffff;
  --panel: #ffffff;
  --panel-alt: #f7f9fc;

  /* Mismos radios que el panel: --radio-sm es el `--radius` de shadcn (10px)
     y --radio el de sus tarjetas (radius x 1.4 = 14px). */
  --radio: 14px;
  --radio-sm: 10px;
  --sombra: 0 1px 2px rgba(13, 21, 38, .06), 0 8px 24px -12px rgba(13, 21, 38, .18);
  --sombra-alta: 0 2px 4px rgba(13, 21, 38, .06), 0 24px 48px -20px rgba(13, 21, 38, .28);
  --ancho: 1140px;
  --transicion: 180ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --azul: #4d8bff;
    --azul-claro: #7aa9ff;
    --azul-tenue: #131c30;
    --turquesa: #2dd4bf;
    --tinta: #e8eef8;
    --texto: #d3dbe8;
    --suave: #93a1b5;
    --linea: #22304a;
    --fondo: #0a0f1a;
    --panel: #101828;
    --panel-alt: #0d1424;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--tinta); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }
.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccion-alt { background: var(--panel-alt); }
.centrado { text-align: center; }
.limite { max-width: 680px; margin-left: auto; margin-right: auto; }

.sobretitulo {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
  margin-bottom: .6rem;
}
.bajada { font-size: 1.08rem; color: var(--suave); }

/* ---------- Barra superior ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .contenedor {
  display: flex; align-items: center; gap: 1.5rem; min-height: 68px;
}
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; font-size: 1.12rem; }
.marca:hover { text-decoration: none; }
.marca svg { width: 30px; height: 30px; flex: 0 0 auto; }

.navegacion { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.navegacion a {
  color: var(--texto); font-size: .93rem; font-weight: 500;
  padding: .5rem .7rem; border-radius: var(--radio-sm);
  transition: background var(--transicion), color var(--transicion);
}
.navegacion a:hover { background: var(--azul-tenue); color: var(--azul); text-decoration: none; }
.navegacion a.activo { color: var(--azul); font-weight: 600; }

.menu-boton {
  display: none; margin-left: auto; background: none; border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: .45rem .55rem; cursor: pointer; color: var(--tinta);
}
.menu-boton svg { width: 22px; height: 22px; display: block; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--radio-sm); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.boton:hover { text-decoration: none; transform: translateY(-1px); }
.boton svg { width: 18px; height: 18px; }
.boton-principal { background: var(--azul); color: #fff; box-shadow: 0 6px 18px -8px var(--azul); }
.boton-principal:hover { background: color-mix(in srgb, var(--azul) 88%, #000); color: #fff; }
.boton-secundario { background: var(--panel); color: var(--tinta); border-color: var(--linea); }
.boton-secundario:hover { border-color: var(--azul); color: var(--azul); }
.boton-fantasma { background: transparent; color: var(--azul); }
.boton-wa { background: #25d366; color: #06331a; }
.boton-wa:hover { background: #1fb857; color: #06331a; }
.boton-bloque { width: 100%; }

/* ---------- Portada ---------- */
.portada {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(1200px 500px at 15% -10%, color-mix(in srgb, var(--azul) 16%, transparent), transparent 60%),
    radial-gradient(900px 420px at 95% 10%, color-mix(in srgb, var(--turquesa) 15%, transparent), transparent 60%);
}
.portada::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--suave) 24%, transparent) 1px, transparent 0);
  background-size: 26px 26px; opacity: .35; mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.portada .contenedor { position: relative; z-index: 1; }
.portada-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.portada h1 { margin-bottom: .4em; }
.portada .bajada { font-size: 1.15rem; max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.insignias { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.insignia { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--suave); }
.insignia svg { width: 18px; height: 18px; color: var(--turquesa); flex: 0 0 auto; }

/* Ilustracion de red */
.ilustracion { position: relative; }
.ilustracion svg { width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(11, 79, 214, .18)); }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.tarjeta {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.6rem; box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--azul) 35%, var(--linea)); }
.tarjeta h3 { margin-bottom: .35em; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta-enlace { display: block; color: inherit; }
.tarjeta-enlace:hover { text-decoration: none; }

.icono-caja {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--azul-tenue); color: var(--azul); margin-bottom: 1rem;
}
.icono-caja svg { width: 24px; height: 24px; }

.lista-check { list-style: none; padding: 0; margin: 1rem 0 0; }
.lista-check li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: .93rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: 1rem;
  background: var(--turquesa); border-radius: 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ---------- Planes ---------- */
.plan { display: flex; flex-direction: column; position: relative; }
.plan.destacado { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), var(--sombra-alta); }
.plan .etiqueta-plan {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 999px;
}
.precio { display: flex; align-items: baseline; gap: .3rem; margin: .6rem 0 .2rem; }
.precio .moneda { font-size: 1rem; color: var(--suave); font-weight: 600; }
.precio .cifra { font-size: 2.4rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; }
.precio .periodo { font-size: .9rem; color: var(--suave); }
.velocidad { display: flex; gap: 1.25rem; margin: 1rem 0; padding: .8rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.velocidad div { flex: 1; }
.velocidad .valor { font-size: 1.3rem; font-weight: 700; color: var(--tinta); }
.velocidad .etiqueta { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.plan .boton { margin-top: auto; }

/* ---------- Cobertura ---------- */
.localidad {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--panel);
}
.punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.punto-disponible { background: var(--turquesa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--turquesa) 22%, transparent); }
.punto-parcial { background: var(--ambar); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ambar) 22%, transparent); }
.punto-proximamente { background: var(--suave); box-shadow: 0 0 0 4px color-mix(in srgb, var(--suave) 18%, transparent); }
.localidad .detalle { font-size: .82rem; color: var(--suave); }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.25rem; }
.cifra-item { text-align: center; padding: 1.25rem; }
.cifra-item .numero { font-size: 2.2rem; font-weight: 800; color: var(--azul); letter-spacing: -.03em; line-height: 1.1; }
.cifra-item .texto { font-size: .88rem; color: var(--suave); }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 1rem; }
.campo-grupo { display: grid; gap: .3rem; }
.campo-grupo label { font-size: .85rem; font-weight: 600; color: var(--tinta); }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=tel],
.formulario select, .formulario textarea {
  width: 100%; padding: .68rem .8rem; font: inherit; font-size: .95rem;
  color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}
.formulario textarea { resize: vertical; min-height: 110px; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ayuda { font-size: .8rem; color: var(--suave); }
.error { font-size: .82rem; color: #dc2626; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--suave); }
.casilla input { margin-top: .3rem; flex: 0 0 auto; }

.aviso {
  padding: .9rem 1.1rem; border-radius: var(--radio-sm); font-size: .92rem;
  border: 1px solid var(--linea); border-left: 3px solid var(--azul); background: var(--panel-alt);
}
.aviso-error { border-left-color: #dc2626; }
.aviso-ok { border-left-color: var(--turquesa); }

/* ---------- Preguntas ---------- */
.pregunta { border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--panel); margin-bottom: .6rem; }
.pregunta summary {
  cursor: pointer; padding: 1rem 1.1rem; font-weight: 600; color: var(--tinta);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; font-size: 1.4rem; color: var(--azul); font-weight: 400; line-height: 1; }
.pregunta[open] summary::after { content: "\2212"; }
.pregunta .respuesta { padding: 0 1.1rem 1.1rem; color: var(--suave); }

/* ---------- Llamado final ---------- */
.llamado {
  border-radius: var(--radio); padding: clamp(2rem, 5vw, 3.25rem);
  background: linear-gradient(135deg, var(--azul), color-mix(in srgb, var(--turquesa) 70%, var(--azul)));
  color: #fff; text-align: center;
}
.llamado h2, .llamado p { color: #fff; }
.llamado p { opacity: .92; }
.llamado .boton-secundario { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.llamado .boton-secundario:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.llamado .boton-principal { background: #fff; color: var(--azul); box-shadow: none; }
.llamado .boton-principal:hover { background: #f1f5f9; color: var(--azul); }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: #aab6c8; padding: 3.5rem 0 1.5rem; margin-top: 0; }
@media (prefers-color-scheme: dark) { .pie { background: #070c15; } }
.pie h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem; }
.pie a { color: #aab6c8; font-size: .92rem; }
.pie a:hover { color: #fff; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .5rem; }
.pie .marca { color: #fff; margin-bottom: .8rem; }
.pie .legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem;
}
.contacto-item { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .92rem; }
.contacto-item svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .25em; color: var(--turquesa); }

/* ---------- Boton flotante de WhatsApp ---------- */
.flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25d366; color: #06331a; font-weight: 700; font-size: .9rem;
  padding: .75rem 1.05rem; border-radius: 999px;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6);
}
.flotante:hover { text-decoration: none; color: #06331a; transform: translateY(-2px); }
.flotante svg { width: 20px; height: 20px; }

/* ---------- Migas ---------- */
.migas { font-size: .85rem; color: var(--suave); padding: 1.25rem 0 0; }
.migas a { color: var(--suave); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .portada-rejilla { grid-template-columns: 1fr; gap: 2rem; }
  .ilustracion { order: -1; max-width: 460px; margin: 0 auto; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
  .menu-boton { display: block; }
  .navegacion {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--fondo); border-bottom: 1px solid var(--linea);
    padding: .75rem 1.25rem 1.25rem;
  }
  .navegacion.abierto { display: flex; }
  .navegacion .boton { margin-top: .5rem; }
  .formulario .fila { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .flotante span { display: none; }
  .flotante { padding: .85rem; }
}

@media print {
  .cabecera, .pie, .flotante, .acciones { display: none; }
}

/* ==========================================================================
   Marca animada
   --------------------------------------------------------------------------
   El isotipo hereda el color de su contenedor (`currentColor`), asi que la
   misma marca sirve sobre fondo claro y sobre el pie oscuro.

   Todo lo que se mueve esta agrupado al final del bloque, bajo
   `prefers-reduced-motion`, para poder apagarlo de una sola vez.
   ========================================================================== */

.isotipo { width: 100%; height: 100%; overflow: visible; }
.marca .isotipo { width: 30px; height: 30px; }

/* El logo late despacio; al pasar el raton el pulso se acelera un poco */
.marca .nodo { transform-box: fill-box; transform-origin: center; }

/* --- Logotipo 3D de la portada ---------------------------------------
   El volumen es real: dieciocho capas del mismo simbolo separadas en el eje
   Z. Al girar la escena se ve el canto, que es lo que distingue un objeto
   con grosor de una sombra pintada.

   Detras hay tres planos (cuadricula, anillos y halo) y debajo la sombra de
   contacto: son los que hacen que el logotipo este *dentro* de un espacio y
   no pegado sobre el fondo.
   -------------------------------------------------------------------- */
.marca-3d {
  perspective: 1500px;
  perspective-origin: 50% 42%;
  width: 100%;
  /* El arrastre horizontal gira la pieza; el vertical sigue haciendo scroll,
     que es lo que espera quien esta leyendo la portada en el telefono. */
  touch-action: pan-y;
}

/* La definicion del simbolo no se dibuja: solo la referencian los <use> */
.marca-3d__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.marca-3d__escena {
  position: relative;
  transform-style: preserve-3d;
  /* Sin JS se queda en esta posicion; el bucle del script la sobreescribe */
  transform:
    rotateX(var(--rx, 6deg))
    rotateY(var(--ry, -14deg))
    rotateZ(var(--rz, 0deg))
    translateY(var(--ty, 0px));
  transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}

/* Con JS el bucle escribe las variables cuadro a cuadro: la transicion
   arrastraria cada valor y la orbita en keyframes sobraria. */
.marca-3d[data-js="1"] .marca-3d__escena { transition: none; animation: none; }
.marca-3d[data-arrastrando="1"] .marca-3d__escena { will-change: transform; }

@media (hover: hover) and (pointer: fine) {
  .marca-3d[data-js="1"] { cursor: grab; }
  .marca-3d[data-arrastrando="1"] { cursor: grabbing; }
}

/* Todas las capas ocupan el mismo hueco: la primera manda en el alto */
.marca-3d__capa,
.marca-3d__logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.marca-3d__capa {
  position: absolute;
  inset: 0;
  /* El canto se hunde hacia atras, se aclara y se desvanece.
     Las tres cosas juntas, y no solo la profundidad: con 18 capas opacas a
     4px el grosor sumaba 72px de tinta maciza y el simbolo se leia como una
     mancha negra con patas. A 2px, aclarando y bajando la opacidad hacia el
     fondo, el borde se disuelve y se lee como un objeto con volumen. */
  transform: translateZ(calc(var(--z) * -2px));
  color: color-mix(in srgb, var(--tinta) calc(100% - var(--z) * 4.2%), #7fa3bb);
  opacity: calc(1 - var(--z) * 0.035);
  pointer-events: none;
}

.marca-3d__logo {
  position: relative;
  color: var(--tinta);
  transform: translateZ(8px);
  filter: drop-shadow(0 30px 46px rgba(0, 33, 47, .28));
}

/* Resplandor, anillos y cuadricula, en planos cada vez mas atras */
.marca-3d__halo {
  position: absolute;
  inset: 8% 6% 14%;
  transform: translateZ(-120px);
  background:
    radial-gradient(closest-side, rgba(0, 161, 214, .30), transparent 72%),
    radial-gradient(closest-side at 30% 70%, rgba(11, 79, 214, .18), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

/* Dos orbitas en un plano casi horizontal. Al girar la escena se abren y se
   cierran solas, que es lo que delata la profundidad real. */
.marca-3d__anillos {
  position: absolute;
  inset: 0;
  transform: translateZ(-160px) rotateX(74deg);
  transform-style: preserve-3d;
  pointer-events: none;
}
.marca-3d__anillos .anillo {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--azul) 38%, transparent);
  /* Centrado con `translate` y no con `transform`, que queda libre para el
     giro de la orbita */
  translate: -50% -50%;
}
.marca-3d__anillos .a1 { width: 74%; }
.marca-3d__anillos .a2 { width: 100%; border-style: dashed; opacity: .55; }
/* El satelite: un punto que recorre la orbita */
.marca-3d__anillos .anillo::after {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--turquesa);
  box-shadow: 0 0 14px color-mix(in srgb, var(--turquesa) 80%, transparent);
}

.marca-3d__malla {
  position: absolute;
  inset: -8%;
  transform: translateZ(-220px) rotateX(10deg);
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side, #000 32%, transparent 78%);
          mask-image: radial-gradient(closest-side, #000 32%, transparent 78%);
  opacity: .5;
  pointer-events: none;
}

/* Sombra de contacto: el objeto se apoya en algo */
.marca-3d__piso {
  position: absolute;
  left: 14%; right: 14%; bottom: 1%;
  height: 13%;
  transform: translateZ(-40px) rotateX(78deg);
  background: radial-gradient(closest-side, rgba(3, 30, 48, .38), transparent 74%);
  filter: blur(10px);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  /* Sobre fondo oscuro una sombra no se ve: lo que apoya la pieza es el brillo */
  .marca-3d__piso {
    background: radial-gradient(closest-side, rgba(0, 161, 214, .30), transparent 74%);
  }
}

.marca-3d .nodo,
.marca-3d .onda { transform-box: fill-box; transform-origin: center; }
.marca-3d .onda { opacity: 0; }

/* Trafico por la malla: halo ancho y tenue con un nucleo brillante encima,
   los dos sobre el mismo trazado. Quieto no se dibuja: un guion suelto en
   mitad de un enlace se leeria como un error de trazado, no como adorno. */
.hero-flujo { opacity: 0; }
.hero-flujo .flujo-halo   { stroke: #3fd0ff; stroke-width: 26; opacity: .16; }
.hero-flujo .flujo-nucleo { stroke: #c4f1ff; stroke-width: 7; }
.hero-flujo use { stroke-dasharray: 30 470; stroke-dashoffset: 500; }

/* Reflejo especular de los nodos */
.hero-lustre { opacity: .28; }

/* En pantallas chicas se apagan las diez capas mas profundas y las orbitas:
   el grosor se sigue leyendo con ocho, y el telefono no tiene que rasterizar
   dieciocho copias del simbolo. */
@media (max-width: 760px) {
  .marca-3d__escena > .marca-3d__capa:nth-of-type(-n+10) { display: none; }
  .marca-3d__anillos { display: none; }
}

/* --- Tarjetas con relieve al pasar el raton --- */
.tarjeta-3d {
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 260ms cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta-3d:hover {
    transform: translateY(-4px) rotateX(3deg) rotateY(-3deg);
    box-shadow: var(--sombra-alta);
  }
}

/* ==========================================================================
   Movimiento
   Nada de esto es informacion: si el visitante pidio menos animacion, se
   apaga entero y la marca se ve igual, quieta.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Los nodos laten desfasados, como trafico pasando por la red */
  .nodo { animation: mn-latido 3.4s ease-in-out infinite; }
  .nodo.n1 { animation-delay: 0s; }
  .nodo.n2 { animation-delay: .18s; }
  .nodo.n3 { animation-delay: .9s; }
  .nodo.n4 { animation-delay: 1.08s; }
  .nodo.n5 { animation-delay: .45s; }
  .nodo.n6 { animation-delay: 1.5s; }
  .nodo.n7 { animation-delay: 1.9s; }
  .nodo.n8 { animation-delay: 2.05s; }

  @keyframes mn-latido {
    0%, 68%, 100% { transform: scale(1);    opacity: 1; }
    80%           { transform: scale(1.13); opacity: .88; }
  }

  /* Trafico recorriendo los enlaces de la malla. Cada pulso sale con su
     propio retraso: si salieran a la vez pareceria un parpadeo, no trafico. */
  .hero-flujo { opacity: 1; }
  .hero-flujo use { animation: mn-flujo 3.4s cubic-bezier(.55, 0, .45, 1) infinite; }
  .hero-flujo .pulso.p1 { animation-delay: 0s;    }
  .hero-flujo .pulso.p2 { animation-delay: .28s;  }
  .hero-flujo .pulso.p3 { animation-delay: 1.15s; }
  .hero-flujo .pulso.p4 { animation-delay: 1.42s; }
  .hero-flujo .pulso.p5 { animation-delay: .62s;  }
  .hero-flujo .pulso.p6 { animation-delay: 2.05s; }
  .hero-flujo .pulso.p7 { animation-delay: 2.5s;  }
  .hero-flujo .pulso.p8 { animation-delay: 1.78s; }

  @keyframes mn-flujo { to { stroke-dashoffset: 0; } }

  /* Los nodos brillan un poco mas cuando les llega el pulso */
  .hero-lustre { animation: mn-lustre 6s ease-in-out infinite; }
  @keyframes mn-lustre {
    0%, 100% { opacity: .22; }
    50%      { opacity: .48; }
  }

  /* Ondas de senal saliendo de cada torre, en dos tandas desfasadas */
  .onda { animation: mn-onda 4.6s ease-out infinite; }
  .onda.o1 { animation-delay: .2s; }
  .onda.o2 { animation-delay: 1.5s; }
  .onda.o3 { animation-delay: 2.7s; }
  .onda.o4 { animation-delay: 2.5s; }
  .onda.o5 { animation-delay: 3.8s; }
  .onda.o6 { animation-delay: 5.0s; }

  @keyframes mn-onda {
    0%        { transform: scale(.35); opacity: 0;   stroke-width: 10; }
    12%       { opacity: .55; }
    60%, 100% { transform: scale(2.1); opacity: 0;   stroke-width: 3; }
  }

  /* El halo respira al ritmo del trafico */
  .marca-3d__halo { animation: mn-halo 7s ease-in-out infinite; }
  @keyframes mn-halo {
    0%, 100% { opacity: .8;  transform: translateZ(-120px) scale(1);    }
    50%      { opacity: 1;   transform: translateZ(-120px) scale(1.06); }
  }

  /* Las orbitas giran a distinta velocidad y en sentidos contrarios */
  .marca-3d__anillos .a1 { animation: mn-orbita 26s linear infinite; }
  .marca-3d__anillos .a2 { animation: mn-orbita 40s linear infinite reverse; }
  @keyframes mn-orbita { to { transform: rotate(360deg); } }

  /* Giro lento de ida y vuelta: es lo que deja ver el canto de la extrusion
     y lo que hace que se lea como un objeto y no como un dibujo. Solo actua
     sin JS; con JS lo gobierna el bucle, que ademas mezcla puntero y
     arrastre sin el salto que habia al cambiar de una cosa a la otra. */
  .marca-3d__escena { animation: mn-girar 14s ease-in-out infinite; }

  @keyframes mn-girar {
    0%, 100% { transform: rotateX(5deg)  rotateY(-12deg) translateY(0); }
    50%      { transform: rotateX(1deg)  rotateY(11deg)  translateY(-12px); }
  }

  /* Entrada de las secciones al aparecer en pantalla */
  .aparece {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(.2, .7, .3, 1),
                transform 620ms cubic-bezier(.2, .7, .3, 1);
  }
  .aparece.visible { opacity: 1; transform: none; }
}

/* ==========================================================================
   AeroLab Oruro
   --------------------------------------------------------------------------
   El apartado de capacitacion usa la misma paleta y los mismos radios que el
   resto del sitio; lo unico propio es el verde de la marca formativa y las
   piezas que no existen en otras paginas: la ficha del curso y la barra de
   cupos.
   ========================================================================== */

.aerolab { --acento: var(--turquesa); }

.aerolab-portada { padding-bottom: 2rem; }
.aerolab-portada .sobretitulo { color: var(--acento); }

/* Cifras de la cabecera: cursos abiertos y cupos libres */
.aerolab-cifras {
  display: flex; flex-wrap: wrap; gap: 2rem;
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.aerolab-cifras .numero { font-size: 1.8rem; font-weight: 800; color: var(--acento); line-height: 1.1; }
.aerolab-cifras .texto { font-size: .85rem; color: var(--suave); }

/* ---------- Tarjeta de curso ---------- */
.curso { display: flex; flex-direction: column; }
.curso .encabezado { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.curso h3 { margin-bottom: .3em; }
.curso .resumen { color: var(--suave); font-size: .93rem; }
.curso .boton { margin-top: auto; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--suave);
}
.etiqueta-nivel { background: var(--azul-tenue); color: var(--azul); border-color: transparent; }
.etiqueta-abierto { background: color-mix(in srgb, var(--turquesa) 16%, transparent); color: var(--turquesa); border-color: transparent; }
.etiqueta-ultimos { background: color-mix(in srgb, var(--ambar) 18%, transparent); color: #b45309; border-color: transparent; }
.etiqueta-lleno, .etiqueta-cerrado { background: var(--panel-alt); }
@media (prefers-color-scheme: dark) { .etiqueta-ultimos { color: var(--ambar); } }

/* ---------- Ficha de datos: horario, sede, cupos ---------- */
.ficha { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.ficha li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.ficha svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: .2em; color: var(--acento); }
.ficha .etiqueta-dato { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.ficha strong { color: var(--tinta); font-weight: 600; }

/* ---------- Cupos ---------- */
.cupos { margin: .2rem 0 1.1rem; }
.cupos-texto { display: flex; justify-content: space-between; font-size: .82rem; color: var(--suave); margin-bottom: .35rem; }
.cupos-texto strong { color: var(--tinta); }
.cupos-barra { height: 7px; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--linea); overflow: hidden; }
.cupos-barra span { display: block; height: 100%; background: var(--turquesa); border-radius: 999px; }
.cupos-barra.casi span { background: var(--ambar); }
.cupos-barra.lleno span { background: var(--suave); }

/* ---------- Detalle del curso ---------- */
.curso-detalle { display: grid; grid-template-columns: 1.35fr .95fr; gap: 2.5rem; align-items: start; }
.curso-detalle .lateral { position: sticky; top: 90px; display: grid; gap: 1.25rem; }
.modulo { counter-increment: modulo; display: flex; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.modulo:last-child { border-bottom: none; }
.modulo::before {
  content: counter(modulo, decimal-leading-zero); flex: 0 0 auto;
  font-size: .8rem; font-weight: 700; color: var(--acento);
  font-variant-numeric: tabular-nums; padding-top: .15em;
}
.temario { counter-reset: modulo; margin: .5rem 0 0; }

.precio-curso { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.precio-curso .cifra { font-size: 2rem; font-weight: 800; color: var(--tinta); letter-spacing: -.03em; }
.precio-curso .moneda { font-size: .95rem; color: var(--suave); font-weight: 600; }
.precio-curso .antes { font-size: .95rem; color: var(--suave); text-decoration: line-through; }

@media (max-width: 900px) {
  .curso-detalle { grid-template-columns: 1fr; gap: 1.75rem; }
  .curso-detalle .lateral { position: static; }
}

/* ==========================================================================
   Portada 2026
   --------------------------------------------------------------------------
   La cabecera separa navegar de contactar; la portada pasa a texto + panel
   con la imagen, y debajo se apoya la tarjeta de cifras. Todo lo que se lee
   aqui viene del panel: si una pieza no tiene contenido cargado, no se dibuja
   en vez de mostrar un marcador.
   ========================================================================== */

/* --- Cabecera: marca | menu centrado | boton --- */
.navegacion { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex: 1; }
.navegacion-enlaces { display: flex; align-items: center; gap: .15rem; margin: 0 auto; }
.boton-pildora { border-radius: 999px; padding: .62rem 1.3rem; }
.boton-pildora svg { width: 17px; height: 17px; }

/* --- Portada --- */
.portada { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; overflow: hidden; }
.portada-rejilla { grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.portada-texto h1 { margin-bottom: .35em; }
/* Lo que va *entre asteriscos* en el titular sale en el azul de la marca */
.portada-texto .resalte { color: var(--azul); }
.portada .acciones .boton svg { width: 17px; height: 17px; }

/* Tinte muy tenue detras del texto. En la maqueta el peso visual lo lleva el
   panel de la foto, no el fondo: un degradado fuerte aqui ensucia el titular. */
.portada-fondo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  pointer-events: none;
  background: radial-gradient(60% 70% at 10% 0%,
    color-mix(in srgb, var(--azul) 7%, transparent), transparent 70%);
}

.portada-panel {
  position: relative;
  /* Sale del contenedor y llega al borde de la ventana: en la maqueta la foto
     no termina en el margen, se va del encuadre. */
  margin-right: calc(50% - 50vw);
}
.panel-medio {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  /* El corte diagonal es lo que separa el bloque de texto del de imagen sin
     necesidad de una linea */
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, var(--azul), #082a63);
  box-shadow: var(--sombra-alta);
  border-radius: 0;
}

/* El rincon azul macizo del angulo inferior derecho. En la maqueta ocupa un
   cuarto del panel y es donde se apoya la frase; antes era una pastilla
   pequena y se leia como una etiqueta pegada encima de la foto. */
.panel-medio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--azul);
  clip-path: polygon(52% 100%, 100% 30%, 100% 100%);
  z-index: 1;
}
.panel-medio img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tinte de marca sobre la foto: la portada se lee como una sola pieza */
.panel-medio::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, color-mix(in srgb, var(--azul) 34%, transparent), transparent 46%);
  pointer-events: none;
}
/* Sin foto cargada el hueco lo llena la marca. El panel deja de ser azul: la
   tinta del logotipo es azul marino y sobre el degradado no se leia. */
.panel-medio:has(.panel-marca) {
  background: linear-gradient(150deg, var(--panel-alt), color-mix(in srgb, var(--azul) 9%, var(--panel)));
}
.panel-medio:has(.panel-marca)::after { display: none; }
.panel-marca { display: grid; place-items: center; height: 100%; padding: 8%; }

.panel-frase {
  position: absolute; right: 6%; bottom: 16%;
  z-index: 2;
  display: flex; align-items: center; gap: .8rem;
  max-width: 40%;
  color: #fff;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
}
.panel-frase span { width: 26px; height: 2px; background: rgba(255, 255, 255, .8); flex: 0 0 auto; }

/* --- Pie de la portada: ventajas y cifras --- */
.portada-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; flex: 1 1 380px; }
.ventaja { display: flex; gap: .8rem; align-items: flex-start; }
.ventaja svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--azul); margin-top: .15em; }
.ventaja strong { display: block; color: var(--tinta); font-size: .95rem; }
.ventaja span { display: block; color: var(--suave); font-size: .85rem; line-height: 1.5; }

.tarjeta-cifras {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  padding: 1.25rem 1.6rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.cifra-portada { display: flex; align-items: center; gap: .8rem; }
.cifra-portada + .cifra-portada { border-left: 1px solid var(--linea); padding-left: 1.75rem; }
.cifra-portada svg { width: 30px; height: 30px; color: var(--azul); flex: 0 0 auto; }
.cifra-portada .valor { font-size: 1.45rem; font-weight: 800; color: var(--azul); letter-spacing: -.02em; line-height: 1.1; }
.cifra-portada .etiqueta { font-size: .8rem; color: var(--suave); line-height: 1.35; }

/* --- Tarjetas de servicio --- */
.icono-solido { background: var(--azul); color: #fff; }
.tarjeta-servicio { display: flex; flex-direction: column; }
.tarjeta-servicio .resumen { color: var(--suave); font-size: .92rem; }
.tarjeta-servicio .ver-mas {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto; padding-top: .6rem;
  color: var(--azul); font-size: .88rem; font-weight: 600;
}
.tarjeta-servicio .ver-mas svg { width: 15px; height: 15px; transition: transform var(--transicion); }
.tarjeta-servicio:hover .ver-mas svg { transform: translateX(3px); }

/* --- Banda de tecnologias --- */
.seccion-banda { padding: 0 0 clamp(3rem, 7vw, 5.5rem); }
.banda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem;
  padding: 1.6rem 1.9rem;
  background: var(--panel-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.banda-texto { display: flex; gap: 1rem; align-items: center; flex: 1 1 320px; }
.banda-texto .icono-caja { margin-bottom: 0; flex: 0 0 auto; }
.banda-texto strong { color: var(--tinta); font-size: 1rem; }
.banda-texto p { margin: .2rem 0 0; color: var(--suave); font-size: .9rem; line-height: 1.5; }
.banda-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 2.5rem; margin-left: auto; }
.marca-aliada { text-align: center; }
.marca-aliada .nombre {
  display: block; font-weight: 800; font-size: 1.02rem; color: var(--tinta);
  letter-spacing: .02em; text-transform: uppercase;
}
.marca-aliada .detalle { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }

@media (max-width: 1040px) {
  .navegacion-enlaces { gap: 0; }
  .navegacion-enlaces a { padding: .5rem .5rem; font-size: .9rem; }
}

@media (max-width: 900px) {
  .portada-rejilla { grid-template-columns: 1fr; }
  .portada-panel { order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
  .panel-medio { clip-path: none; aspect-ratio: 16 / 10; }
  .tarjeta-cifras { width: 100%; }
}

@media (max-width: 760px) {
  /* En columna, el menu vuelve a ser una lista y el boton, el ultimo elemento.
     El `display: none` se repite aqui a proposito: la regla de arriba lo pone
     en flex para todas las anchuras y, por orden de aparicion, ganaria a la
     del bloque responsivo original y dejaria el menu siempre desplegado. */
  .navegacion { display: none; flex-direction: column; align-items: stretch; gap: .15rem; }
  .navegacion.abierto { display: flex; }
  .navegacion-enlaces { flex-direction: column; align-items: stretch; margin: 0; }
  .cifra-portada + .cifra-portada { border-left: none; padding-left: 0; }
  .tarjeta-cifras { gap: 1rem 1.75rem; }
  .banda-marcas { margin-left: 0; gap: 1.25rem 2rem; }
  .panel-frase { max-width: 80%; font-size: .74rem; }
}

/* ==========================================================================
   Paginas legales y aviso de cookies
   ========================================================================== */

.legal-cuerpo { max-width: 760px; margin: 0 auto; }
.legal-seccion + .legal-seccion { margin-top: 2.25rem; }
.legal-seccion h2 {
  font-size: 1.15rem; margin-bottom: .6em;
  padding-bottom: .45rem; border-bottom: 1px solid var(--linea);
}
.legal-seccion h3 { font-size: 1rem; margin-bottom: .5em; }
.legal-seccion p { color: var(--texto); line-height: 1.75; }
.legal-seccion .lista-check { margin: .5rem 0 0; }

/* Tablas anchas: se desplazan dentro de su caja y no empujan el ancho de la
   pagina. La clase se usaba en el marcado y no tenia regla. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla-legal {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  border: 1px solid var(--linea); border-radius: var(--radio-sm); overflow: hidden;
}
.tabla-legal th, .tabla-legal td {
  padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tabla-legal th {
  background: var(--panel-alt); color: var(--tinta);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.tabla-legal tr:last-child td { border-bottom: none; }
.tabla-legal code { font-size: .84rem; color: var(--azul); }

.legal-pie {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--suave); font-size: .88rem;
}
.legal-pie p { margin: 0 0 .4rem; }
.legal-otros { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .8rem; }

/* --- Aviso de cookies ---
   Abajo y a la izquierda, para no taparse con el boton flotante de WhatsApp,
   que va a la derecha. */
.aviso-cookies {
  position: fixed; z-index: 60;
  left: 1rem; bottom: 1rem; max-width: 30rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__texto {
  flex: 1 1 16rem;
  font-size: .86rem; line-height: 1.55; color: var(--suave);
}
.aviso-cookies__texto strong { display: block; color: var(--tinta); }
.aviso-cookies .boton { flex: 0 0 auto; padding: .5rem 1rem; font-size: .86rem; }

@media (prefers-reduced-motion: no-preference) {
  .aviso-cookies { animation: mn-asoma .4s cubic-bezier(.2, .7, .3, 1); }
  @keyframes mn-asoma {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 640px) {
  .aviso-cookies { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}