/* ==================================================================
   constelacion.css — PORTADA de pixeliacomsoluciones.es
   Papel texturizado claro + anillo de sistemas que gira sin salir
   de la pantalla. Depende de tipografia.css, componentes.css (la
   cabecera en su variante "papel") y web.css.
   El markup lo arma index.php; el movimiento, assets/js/constelacion.js
   ================================================================== */

/* La paleta "papel" se define UNA vez, en componentes.css, porque la comparten
   la portada y el resto de la web publica. Aqui solo se le ponen nombres cortos
   y se anaden las dos medidas que solo existen en esta pantalla. */
:root {
  --tw-papel:   var(--px-papel);
  --tw-tinta:   var(--px-noche);
  --tw-teal:    var(--px-teal);
  --tw-vivo:    var(--px-vivo);
  --tw-teal-o:  var(--px-teal-o);
  --tw-teal-cl: var(--px-teal-cl);
  --tw-menta:   var(--px-menta);
  --tw-precio:  var(--px-precio);
  --tw-linea:   var(--px-linea);
  --tw-gris:    #5F6D6A;
  --tw-top:     74px;      /* alto de la cabecera */
  --tw-pie:     54px;      /* alto del pie */
}

body.cn-body {
  margin: 0;
  background: var(--tw-papel);
  color: var(--tw-tinta);
  overflow: hidden;
}

/* ---------------- Lienzo ---------------- */
.cn {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  background: var(--tw-papel);
  /* El dedo se lo reparten el anillo y la pagina. pan-y le dice al navegador:
     el desplazamiento VERTICAL es tuyo (la pagina baja con normalidad), el
     HORIZONTAL es mio (gira el anillo).
     Sin esto, en cuanto el navegador decidia que el gesto era un scroll ya no
     soltaba el dedo, y el giro en movil no llegaba a funcionar: se quedaba a
     medias o no respondia. No cambia nada de como se ve. */
  touch-action: pan-y;
}
.cn.es-arrastrando { cursor: grabbing; }

/* -- Fondo: manchas suaves + grano. Nada de esto se puede tocar ni leer. -- */
/* z-index explicito: en movil .tw-main deja de ser absoluto y, sin esto, el
   fondo (que si lo es) se pintaria ENCIMA del reclamo y lo velaria. */
.tw-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tw-mancha { position: absolute; border-radius: 50%; }
/* La mancha grande se coloca por su centro (detras del anillo) y se apaga
   pronto: si el borde del circulo se nota, parece una pelota pegada. */
.tw-mancha-1 { width: 64vw; height: 64vw; max-width: 820px; max-height: 820px; left: 33%; top: 22%;
               background: radial-gradient(circle at 50% 50%, var(--tw-menta) 0%, var(--tw-menta) 42%, rgba(215,237,228,0) 100%); }
.tw-mancha-2 { width: 44vw; height: 44vw; max-width: 520px; max-height: 520px; right: 0%; top: -16%;
               background: radial-gradient(circle at 50% 50%, rgba(215,237,228,.85) 0%, rgba(215,237,228,0) 70%); }
.tw-mancha-3 { width: 34vw; height: 34vw; max-width: 400px; max-height: 400px; left: 6%; bottom: -12%;
               background: radial-gradient(circle at 50% 50%, rgba(215,237,228,.45) 0%, rgba(215,237,228,0) 72%); }

/* El grano: una teselacion de ruido en SVG (feTurbulence). Sin imagenes que
   descargar y sin degradados de color: solo textura de papel. */
.tw-grano {
  position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-size: 170px 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

/* Flechas de trazo discontinuo, reticulas de puntos y destellos. */
.tw-trazos { position: absolute; top: var(--tw-top); left: 0; right: 0; bottom: 0; }

/* ---------------- Rejilla general ---------------- */
.tw-main {
  position: absolute;
  top: var(--tw-top); bottom: var(--tw-pie);
  /* Acotada y centrada: sin tope, en un monitor de 2560px el anillo quedaba
     diminuto en medio de un vacio enorme. */
  left: 50%; transform: translateX(-50%);
  width: min(100%, 1720px);
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(336px, 31%) 1fr;
  align-items: center;
}

/* ---------------- Columna del reclamo ---------------- */
.tw-hero { padding: 0 10px 0 34px; max-width: 470px; }

.tw-rotulo {
  font-family: var(--px-mano); font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1;
  color: var(--tw-teal-o); margin: 0 0 10px; transform: rotate(-1.5deg);
  transform-origin: left bottom;
}

.tw-h1 {
  font-family: var(--px-texto);           /* aqui NO va la serif: es un titular de peso */
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(29px, 3.55vw, 45px); line-height: .95; letter-spacing: -.025em;
  color: var(--tw-tinta); margin: 0 0 18px;
}
.tw-h1 span { display: block; color: var(--tw-vivo); }

.tw-lead { font-size: 14.5px; line-height: 1.6; color: var(--tw-gris); margin: 0 0 20px; max-width: 34ch; }
.tw-lead b { color: var(--tw-tinta); font-weight: 700; }

.tw-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.tw-checks li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--tw-tinta); }
.tw-checks .ico { color: var(--tw-teal-o); flex-shrink: 0; }

.tw-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--tw-tinta); color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; padding: 9px 9px 9px 24px; border-radius: 99px;
  box-shadow: 0 6px 18px rgba(0, 36, 84, .18);
}
.tw-cta:hover { background: #075A52; text-decoration: none; color: #fff; }
.tw-cta i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
            background: rgba(255, 255, 255, .16); }

/* ---------------- Escenario del anillo ---------------- */
.tw-escena { position: relative; height: 100%; }
.cn-anillo { position: absolute; inset: 0; z-index: 10; perspective: 1700px; perspective-origin: 50% 42%; }

.cn-item {
  position: absolute; top: 0; left: 0;
  width: 330px; transform-origin: 50% 50%;
  will-change: transform, opacity; text-decoration: none;
}
.cn-item:hover { text-decoration: none; }
.cn-item-img {
  position: relative; display: block; overflow: hidden;
  border-radius: 10px; background: #fff;
  box-shadow: 0 24px 46px rgba(0, 36, 84, .20), 0 3px 10px rgba(0, 36, 84, .12);
}
.cn-item-img img { display: block; width: 100%; height: auto; aspect-ratio: 8/5;
                   object-fit: cover; object-position: top left; }
/* Velo SOLO en la esquina de abajo a la izquierda: es donde va el nombre en
   blanco. El precio queda a la derecha, sobre claro, y se pinta en verde. */
.cn-item-vel {
  position: absolute; inset: 0;
  /* Dos capas: el degradado de esquina da el peso, y la banda inferior asegura
     un minimo por debajo del nombre aunque este sea largo y se salga de la esquina. */
  background: radial-gradient(135% 78% at 0% 100%,
              rgba(0, 20, 44, .84) 0%, rgba(0, 20, 44, .46) 40%, rgba(0, 20, 44, 0) 72%),
              linear-gradient(to top, rgba(0, 20, 44, .62) 0, rgba(0, 20, 44, .58) 30px,
                              rgba(0, 20, 44, 0) 64px);
}
.cn-item-pie {
  position: absolute; left: 11px; right: 11px; bottom: 8px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.cn-item-n { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.15;
             text-shadow: 0 1px 5px rgba(0, 20, 44, .7); }
/* El precio lleva su propia pastilla clara: debajo hay una captura, y no se
   puede dar por supuesto que ahi el fondo sea claro (habia barras azules y
   teal detras, con contrastes de 1.05:1). */
.cn-item-p { font-size: 12.5px; font-weight: 800; color: var(--tw-precio); flex-shrink: 0;
             background: rgba(255, 255, 255, .93); padding: 1px 7px; border-radius: 5px; }
/* --fv lo escribe el JS: el contorno va dentro del scale() de la tarjeta, asi
   que hay que compensarlo o en las del fondo se queda en menos de 1px. */
.cn-item:focus-visible { outline: var(--fv, 2px) solid var(--tw-teal);
                         outline-offset: 5px; border-radius: 12px; }

/* ---------------- Ficha del sistema en foco ---------------- */
.cn-ficha {
  position: absolute; z-index: 50; left: 50%; bottom: calc(var(--tw-pie) + 18px);
  width: min(366px, 86vw); padding: 13px 22px 15px;
  transform: translateX(-50%) translateY(10px); opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none; text-align: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid #C4DED5;
  box-shadow: 0 12px 34px rgba(0, 36, 84, .09);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.cn-ficha.es-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* La ficha tiene que medir SIEMPRE lo mismo, tenga el contenido que tenga.
   Su altura entra en el calculo vertical del anillo (constelacion.js lee donde
   empieza la ficha para saber cuanto sitio le queda), asi que si encoge, se
   recoloca todo -y el logo 3D del centro da un salto de unos pixeles-. Eso es
   el destello que se ve al pasar por la tarjeta del catalogo.
   Medido antes de reservar el hueco: Sistema Dental 168px, CRM Tatuajes 150px
   (su texto cabe en UNA linea) y Ver el catalogo completo 151px (no tiene
   categoria, asi que esa linea desaparecia entera). 18px de diferencia.
   Se reserva el alto de una linea de categoria y el de dos de texto. */
.cn-ficha-cat { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
                color: var(--tw-teal-o);
                line-height: 1.55; min-height: 1.55em; }
.cn-ficha-n { font-family: var(--px-titular); font-weight: 400; letter-spacing: 0; line-height: 1.05;
              font-size: clamp(21px, 3.1vh, 28px); margin: 3px 0 5px; color: var(--tw-tinta); }
.cn-ficha-t { font-size: 12.5px; line-height: 1.45; color: var(--tw-gris); margin: 0;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
              /* line-clamp pone el TECHO en dos lineas; esto pone el SUELO. Sin
                 el, un texto corto ocupa una sola y la ficha encoge 18px. */
              min-height: 2.9em; }
.cn-ficha-mas {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 11px;
  font-size: 12px; font-weight: 700; color: var(--tw-teal-o); text-decoration: none;
  border: 1px solid #A9D6CE; border-radius: 99px; padding: 8px 17px; pointer-events: auto;
}
.cn-ficha-mas:hover { background: rgba(11, 132, 120, .07); text-decoration: none; }

/* ---------------- Pie ---------------- */
.cn-pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  height: var(--tw-pie); padding: 0 34px;
  border-top: 1px solid var(--tw-linea);
  background: rgba(242, 246, 243, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--tw-gris);
}
.cn-pie > span { display: flex; align-items: center; gap: 9px; }
.cn-pie b { color: var(--tw-teal-o); font-weight: 800; }
.cn-pie .ico { color: var(--tw-teal-cl); }
.cn-pie > .cn-pista { margin: 0 auto; }
.cn-contador { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tw-tinta);
               font-weight: 700; letter-spacing: .1em; }

/* Coletilla del titulo para buscadores y lectores de pantalla: el <h1> visible
   ya dice el reclamo, aqui solo se anade el precio y lo que incluye. */
.cn-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------- Pantallas medianas y moviles ---------------- */
@media (max-width: 1080px) {
  .tw-main { grid-template-columns: minmax(280px, 36%) 1fr; }
  .tw-hero { padding-left: 24px; }
}

/* Por debajo de 900px ya no caben las dos columnas: se apilan y la pagina
   se desplaza. El anillo sigue girando con el dedo. */
@media (max-width: 900px) {
  body.cn-body { overflow: auto; }
  .cn { height: auto; min-height: 100dvh; }
  /* La cabecera deja de flotar: aqui la pagina se desplaza de verdad y flotando
     solo tapaba. Asi .tw-main ya no necesita reservarle sitio con top ni padding.
     OJO: hay que anular el `top` de la regla base; con position:relative seguia
     desplazando la caja pintada pero NO la de flujo, y la ficha (que pasa a
     static) se maquetaba 74px mas arriba y quedaba debajo del anillo. */
  .px-top--papel.px-top--flota { position: relative; z-index: 60;
      background: rgba(242, 246, 243, .92);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      border-bottom: 1px solid var(--px-linea); }
  .tw-main { position: relative; top: auto; bottom: auto; left: auto; transform: none;
             width: auto; display: block; padding: 20px 0 0; }
  .tw-hero { max-width: none; padding: 0 20px 26px; text-align: center; }
  .tw-lead { margin-left: auto; margin-right: auto; }
  .tw-checks li { justify-content: center; }
  .tw-rotulo { transform: none; }
  .tw-escena { height: 42vh; min-height: 300px; }
  .cn-ficha { position: static; transform: none; width: auto;
              margin: 18px 20px calc(var(--tw-pie) + 24px); opacity: 1; }
  .cn-ficha.es-visible { transform: none; }
  /* EL PIE, EN DOS RENGLONES.
     `.cn-legal` llevaba `width: 100%` para bajarse a su propia linea, pero
     `.cn-pie` es un flex SIN `flex-wrap`: un hijo al 100% ahi no baja, APLASTA
     a los de al lado. Por eso «hosting y dominio el primer año» se partia en
     columna y el contador quedaba espachurrado.
     Y el alto del pie no es decorativo: `--tw-pie` lo usan otros cuatro sitios
     para reservar hueco (la escena, la ficha, el boton). Si el pie crece y la
     variable no, el contenido de arriba se le mete debajo. Crecen los dos. */
  .cn-pie { position: fixed; }
  .tw-trazos { display: none; }   /* en movil solo estorban */
  .tw-mancha-3 { display: none; }
}
@media (max-width: 560px) {
  .cn-pie { padding: 0 16px; gap: 12px; font-size: 9.5px; }
  .tw-hero { padding-left: 16px; padding-right: 16px; }
}

/* Escritorio BAJO (portatiles de 1366x768 con barras, ventanas a media altura):
   el reclamo no cabia y el pie fijo se comia el boton. Se aprieta todo. */
@media (min-width: 901px) and (max-height: 700px) {
  .tw-hero { padding-left: 26px; }
  .tw-rotulo { font-size: 22px; margin-bottom: 6px; }
  .tw-h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
  .tw-lead { font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
  .tw-checks { gap: 7px; margin-bottom: 16px; }
  .tw-checks li { font-size: 13px; }
  .tw-cta { font-size: 13px; padding: 7px 7px 7px 18px; }
  .tw-cta i { width: 26px; height: 26px; }
  .cn-ficha { padding: 10px 20px 12px; }
  .cn-ficha-t { -webkit-line-clamp: 1; }
}
@media (min-width: 901px) and (max-height: 560px) {
  .tw-checks li:nth-child(n+3) { display: none; }   /* dos ventajas o no cabe nada */
}

@media (prefers-reduced-motion: reduce) {
  .cn-ficha { transition: none; }
}

/* Los tres documentos legales en el pie de la portada. Discretos: en la
   portada manda el anillo, esto solo tiene que estar y ser alcanzable. */
.cn-legal { display: flex; gap: 4px 14px; flex-wrap: wrap; }
.cn-legal a { color: inherit; opacity: .72; text-decoration: none;
              border-bottom: 1px solid transparent; }
.cn-legal a:hover { opacity: 1; border-bottom-color: currentColor; }
/* EL PIE SE PARTE MUCHO ANTES DE LOS 760px.
   Su contenido —precio, tres enlaces legales, la pista y el contador— va en
   MAYUSCULAS con letter-spacing .15em: medido, pide mas de 900px en una sola
   linea. Entre 760 y 1100 (tablet, o una ventana a media pantalla) se apretaba
   hasta partir «hosting y dominio el primer año» en columna.

   Dos decisiones:
   - `.cn-legal` al 100% solo funciona si el contenedor ENVUELVE. Estaba puesto
     sin `flex-wrap`, y un hijo al 100% en un flex que no envuelve no baja:
     aplasta a los de al lado. Ese era el fallo original.
   - La pista («desplaza para girar el anillo») se esconde: es la unica de las
     cuatro que es prescindible, y libera el ancho que necesitan las otras.

   `--tw-pie` sube con el, porque otros cuatro sitios lo usan para reservar
   hueco. Si el pie crece y la variable no, el contenido de arriba se le mete
   debajo. */
@media (max-width: 1100px) {
  :root { --tw-pie: 84px; }
  .cn-pie { flex-wrap: wrap; align-content: center; row-gap: 7px; }
  .cn-pie > .cn-pista { display: none; }
  .cn-legal { width: 100%; order: 3; justify-content: center; }
}

/* El logo 3D del centro del anillo. left/top los pone girar() en px (el centro
   de la elipse cambia con la ventana); aqui solo el anclaje, la capa y el
   recentrado. z 29 = entre las tarjetas traseras (10) y la del frente (48).
   pointer-events: none ya lo trae su propio CSS: no bloquea clics ni arrastre. */
.cn-anillo .pixelia-logo-3d {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 29;
  margin: 0;
}


/* --- La decima tarjeta: la puerta al catalogo completo --- */
/* Misma caja y mismo giro que las demas (hereda .cn-item): solo cambia lo de
   dentro. Si tuviera otro tamano, el anillo se descuadraria al pasar por ella. */
.cn-item-cat .cn-item-img {
  background: linear-gradient(160deg, var(--px-noche) 0%, #0A3A57 100%);
  display: grid; place-items: center;
  /* La MISMA caja que las demas. El alto de una tarjeta normal se lo da su
     <img> (aspect-ratio 8/5); esta no lleva imagen, asi que sin esto salia mas
     baja y el anillo la colocaba distinto: el JS posiciona por offsetHeight. */
  aspect-ratio: 8 / 5;
}
.cn-cat-cuerpo {
  display: grid; justify-items: center; gap: 6px;
  padding: 0 18px; text-align: center; color: #fff;
}
.cn-cat-cuerpo svg { color: var(--px-teal-cl); }
.cn-cat-cuerpo strong { font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; letter-spacing: -.01em; }
.cn-cat-cuerpo em { font-style: normal; font-size: clamp(11.5px, 1.1vw, 13px); color: #BFD9D3; }