/* ==========================================================================
   Estilos de las páginas de producto (productos/*.html).

   Va DESPUÉS de site.css y reusa sus variables y sus componentes: el nav, el
   pie, los botones y la tipografía son los mismos. Acá sólo está lo que el
   home no necesita.

   Las mismas reglas que el resto del sitio: nada de color-mix() ni anidamiento
   (el techo es Chrome 109, el de las PC con Windows 7/8 de varias clínicas), y
   toda imagen nueva con loading="lazy".
   ========================================================================== */

/* ── Portada del producto ────────────────────────────────────────────────── */

.pp {
  position: relative;
  margin-top: var(--nav-alto);
  padding-block: clamp(2.6rem, 5vw, 4.2rem) clamp(3rem, 5vw, 4.6rem);
  background: var(--azul-profundo);
  color: #FFFFFF;
  overflow: hidden;
}
.pp__velo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 88% 10%, rgba(34,169,218,.30) 0%, rgba(34,169,218,0) 70%),
    linear-gradient(115deg, rgba(10,42,84,.0) 40%, rgba(20,68,126,.55) 100%);
}
.pp__interior {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
}

.pp__volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(190,220,245,.85);
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.pp__volver:hover { color: #FFFFFF; }

.pp h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: .9rem;
}
.pp__bajada {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.65;
  color: rgba(226,239,250,.92);
  max-width: 34rem;
  margin-bottom: 1.6rem;
}
.pp__sellos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.pp__sello {
  font-size: .78rem;
  font-weight: 600;
  padding: .32rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.93);
}

.pp__pantalla {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

/* ── Cifras ──────────────────────────────────────────────────────────────── */

.datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: -2.4rem;
  position: relative;
  z-index: 5;
}
.dato {
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--sombra-alta);
}
.dato b {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--azul-profundo);
  letter-spacing: -.01em;
  margin-bottom: .2rem;
}
.dato span { font-size: .9rem; color: var(--tinta-suave); line-height: 1.45; }

/* ── Beneficios ──────────────────────────────────────────────────────────── */

.beneficios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
.beneficio {
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--cian);
  border-radius: var(--radio-chico);
  padding: 1.3rem 1.4rem;
}
.beneficio h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--azul-profundo);
  margin-bottom: .4rem;
  letter-spacing: -.015em;
}
.beneficio p { font-size: .96rem; color: var(--tinta-media); }

/* ── Bloque con figura al costado ────────────────────────────────────────── */

.conFigura {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}
.conFigura.alReves { direction: rtl; }
.conFigura.alReves > * { direction: ltr; }
.conFigura img {
  width: 100%;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
}
.conFigura ul { list-style: none; display: grid; gap: .7rem; margin-top: 1.1rem; }
.conFigura li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .98rem;
  color: var(--tinta-media);
  line-height: 1.55;
}
.conFigura li::before {
  content: '';
  position: absolute;
  left: .2rem; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cian);
}
.conFigura li b { color: var(--tinta); font-weight: 600; }
.conFigura__accion { margin-top: 1.5rem; }

/* ── Diagrama ────────────────────────────────────────────────────────────── */

.diagrama { width: 100%; height: auto; display: block; }

/* ── Lista de "qué incluye" ──────────────────────────────────────────────── */

.incluye {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem 2rem;
  list-style: none;
}
.incluye li {
  position: relative;
  padding-left: 1.9rem;
  font-size: .97rem;
  color: var(--tinta-media);
  line-height: 1.55;
}
/* el tilde, dibujado con dos lados de un borde y girado 45 grados */
.incluye li::before {
  content: '';
  position: absolute;
  left: .25rem; top: .28em;
  width: 6px; height: 11px;
  border: solid var(--cian);
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}
.incluye li b { color: var(--tinta); font-weight: 600; }

/* ── Pasos de la migración ───────────────────────────────────────────────── */

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; counter-reset: paso; }
.paso {
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 1.3rem 1.4rem;
  position: relative;
}
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--azul-profundo);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: .8rem;
}
.paso h3 { font-size: 1rem; font-weight: 700; color: var(--azul-profundo); margin-bottom: .35rem; }
.paso p { font-size: .94rem; color: var(--tinta-media); }

/* Cuatro pasos en fila en vez de tres (turnos online) */
.pasos--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Se combina con: tarjetas que llevan a otro brochure ─────────────────── */

.relacionados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.relacionado {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.relacionado b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul-profundo);
  margin-bottom: .25rem;
}
.relacionado b::after { content: ' \2192'; color: var(--cian); }
.relacionado span { font-size: .9rem; color: var(--tinta-media); line-height: 1.45; }
.relacionado:hover { border-color: var(--cian); box-shadow: var(--sombra-alta); transform: translateY(-2px); }

/* ── Bloque de código: cómo se invoca visorJST ───────────────────────────── */

.invocacion { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.invocacion__caso {
  min-width: 0;                /* sin esto la URL larga ensancha la grilla */
  overflow-x: auto;
  background: #0B1F36;
  border-radius: var(--radio-chico);
  padding: 1rem 1.2rem 1.2rem;
}
.invocacion__rotulo {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7FD3E0;
  margin-bottom: .6rem;
}
.invocacion pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .86rem;
  line-height: 1.65;
  color: #D6E6F5;
  white-space: pre;
}
.invocacion mark { background: rgba(199,154,46,.28); color: #F2C75C; border-radius: 3px; padding: 0 .15rem; }
.invocacion__nota { margin-top: 1rem; font-size: .95rem; color: var(--tinta-media); }

/* ── Cierre ──────────────────────────────────────────────────────────────── */

.cierre {
  background: linear-gradient(115deg, #0A2A54 0%, #14447E 100%);
  color: #FFFFFF;
  border-radius: var(--radio);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.cierre h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: .8rem; }
.cierre p { color: rgba(222,236,249,.9); max-width: 46rem; margin: 0 auto 1.8rem; }
.cierre .vias { margin-top: 0; }
.cierre .via { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #FFFFFF; }
.cierre .via:hover { background: rgba(255,255,255,.18); border-color: #FFFFFF; }
.cierre .via svg { stroke: #7FD3E0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .pp__interior { grid-template-columns: 1fr; }
  .conFigura { grid-template-columns: 1fr; }
  .conFigura.alReves { direction: ltr; }
  .datos { grid-template-columns: 1fr; margin-top: -1.6rem; }
  .pasos { grid-template-columns: 1fr; }
  .pasos--4 { grid-template-columns: repeat(2, 1fr); }
  .relacionados { grid-template-columns: repeat(2, 1fr); }
  .invocacion { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .beneficios { grid-template-columns: 1fr; }
  .incluye { grid-template-columns: 1fr; }
  .pasos--4 { grid-template-columns: 1fr; }
  .relacionados { grid-template-columns: 1fr; }
}