/* ==========================================================================
   Clip Sistemas — hoja de estilos principal
   Todo el sitio usa esta única hoja. No se carga nada de servidores externos
   (ni tipografías, ni iconos, ni analítica), así que la web es rápida y no
   envía datos de los visitantes a terceros.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de color y medidas

   La web tiene fondo claro. Todo el color sale de aquí: para subir o bajar el
   tono del fondo, de las tarjetas o del texto, se cambian estas líneas y ya
   está. Los que se usan como color de letra (--texto, --titulo, --cian,
   --verde, --amarillo) tienen que quedar oscuros para que se lean bien sobre
   blanco.
   -------------------------------------------------------------------------- */
:root {
  --fondo:        #e9eef8;
  --fondo-alt:    #f6f9fd;
  --tarjeta:      #ffffff;
  --tarjeta-alta: #eaf0fa;
  --borde:        rgba(12, 26, 54, .12);
  --borde-fuerte: rgba(12, 26, 54, .22);
  --texto:        #3c4a63;
  --titulo:       #0b1a36;
  --apagado:      #5b6a80;
  --azul:         #2b5cf6;
  --cian:         #0b7f96;
  --verde:        #0a7f5a;
  --amarillo:     #b45309;
  --rojo:         #cf3b3b;
  --violeta:      #6d28d9;
  --naranja:      #c2410c;
  --degradado:    linear-gradient(135deg, #2b5cf6 0%, #22d3ee 100%);
  /* El mismo degradado, pero algo mas profundo: se usa donde hay que leer
     texto o iconos encima (botones, burbujas, cintas). */
  --degradado-fuerte: linear-gradient(135deg, #2b5cf6 0%, #0a7fa6 100%);
  --radio:        18px;
  --radio-g:      26px;
  --sombra:       0 14px 34px rgba(12, 26, 54, .11);
  --sombra-cian:  0 0 50px rgba(34, 211, 238, .16);

  /* Sombras de las tarjetas: una corta pegada al borde y otra amplia, que es
     la que hace que la tarjeta parezca levantada del fondo. */
  --sombra-tarjeta:      0 1px 2px rgba(12, 26, 54, .07), 0 12px 26px rgba(12, 26, 54, .14);
  --sombra-tarjeta-alta: 0 3px 6px rgba(12, 26, 54, .09), 0 22px 42px rgba(12, 26, 54, .22);
  /* Veladuras suaves sobre fondo claro (antes eran blancos translucidos). */
  --velo:         rgba(12, 26, 54, .045);
  --velo-fuerte:  rgba(12, 26, 54, .09);

  /* La barra de arriba y el pie van en oscuro, aunque el resto sea claro. */
  --oscuro:        #0b1a36;
  --oscuro-titulo: #ffffff;
  --oscuro-texto:  rgba(255, 255, 255, .80);
  --oscuro-suave:  rgba(255, 255, 255, .64);
  --oscuro-velo:   rgba(255, 255, 255, .10);
  --oscuro-borde:  rgba(255, 255, 255, .16);
  --cian-claro:    #22d3ee;
  --max:          1140px;
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                 Consolas, monospace;
  --cabecera-alto: 68px;
}

/* --------------------------------------------------------------------------
   2. Reinicio y bases
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: dejamos hueco para que los enlaces no queden debajo. */
  scroll-padding-top: calc(var(--cabecera-alto) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--cian);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  color: var(--titulo);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(34px, 5.4vw, 62px); }
h2 { font-size: clamp(27px, 3.8vw, 44px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

::selection {
  background: rgba(34, 211, 238, .3);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--cian);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Estructura general
   -------------------------------------------------------------------------- */
.contenedor {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.seccion {
  padding: 88px 0;
  position: relative;
}

.seccion--alt {
  background: var(--fondo-alt);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.centrado { text-align: center; }

.etiqueta {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cian);
  background: rgba(34, 211, 238, .09);
  border: 1px solid rgba(34, 211, 238, .25);
  border-radius: 50px;
  padding: 7px 18px;
  margin-bottom: 20px;
}

.etiqueta--verde {
  color: var(--verde);
  background: rgba(52, 211, 153, .09);
  border-color: rgba(52, 211, 153, .25);
}

.etiqueta--amarilla {
  color: var(--amarillo);
  background: rgba(251, 191, 36, .09);
  border-color: rgba(251, 191, 36, .25);
}

.subtitulo {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--apagado);
  max-width: 680px;
  margin: 0 auto;
}

.apagado { color: var(--apagado); }
.cian   { color: var(--cian); }
.verde  { color: var(--verde); }
.fuerte { color: var(--titulo); font-weight: 700; }

.degradado-texto {
  background: var(--degradado-fuerte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 17px 30px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease;
}



.boton--principal {
  background: var(--degradado-fuerte);
  color: #fff;
  box-shadow: 0 12px 34px rgba(43, 92, 246, .35);
}

.boton--secundario {
  background: var(--velo);
  border: 1px solid var(--borde-fuerte);
  color: var(--titulo);
}

.boton--secundario:hover {
  background: var(--velo-fuerte);
}

.boton--pequeno {
  padding: 12px 20px;
  font-size: 14.5px;
  border-radius: 10px;
}

.boton--ancho { width: 100%; }

.boton--fantasma {
  background: transparent;
  border: 2px solid var(--borde-fuerte);
  color: var(--titulo);
}

.boton__nota {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--apagado);
}

/* --------------------------------------------------------------------------
   5. Cabecera fija
   -------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 26, 54, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}

.cabecera--con-fondo {
  border-bottom-color: var(--oscuro-borde);
  background: rgba(11, 26, 54, .98);
}

.cabecera__interior {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--cabecera-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cabecera__marca {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cabecera__marca img {
  height: 38px;
  width: auto;
}

.cabecera__menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.cabecera__menu a {
  display: block;
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 600;
  color: var(--oscuro-texto);
  border-radius: 9px;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}

.cabecera__menu a:hover {
  color: var(--oscuro-titulo);
  background: var(--oscuro-velo);
  text-decoration: none;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Botón hamburguesa (solo en móvil). */
.cabecera__hamburguesa {
  display: none;
  width: 44px; height: 44px;
  background: var(--oscuro-velo);
  border: 1px solid var(--oscuro-borde);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.cabecera__hamburguesa span {
  display: block;
  width: 20px; height: 2px;
  background: #ffffff;
  position: relative;
  border-radius: 2px;
  transition: background-color .2s ease;
}

.cabecera__hamburguesa span::before,
.cabecera__hamburguesa span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease;
}

.cabecera__hamburguesa span::before { top: -6px; }
.cabecera__hamburguesa span::after  { top: 6px; }

.cabecera__hamburguesa[aria-expanded="true"] span { background: transparent; }
.cabecera__hamburguesa[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.cabecera__hamburguesa[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .cabecera__hamburguesa { display: flex; }

  .cabecera__menu {
    position: absolute;
    top: var(--cabecera-alto);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 18px 22px;
    background: rgba(11, 26, 54, .99);
    border-bottom: 1px solid var(--oscuro-borde);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .35s ease, opacity .25s ease, visibility .25s;
  }

  .cabecera__menu--abierto {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
  }

  .cabecera__menu a {
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--oscuro-borde);
  }

  .cabecera__menu li:last-child a { border-bottom: none; }

  .cabecera__acciones .boton { display: none; }
}

/* --------------------------------------------------------------------------
   6. Portada (hero)
   -------------------------------------------------------------------------- */
.portada {
  position: relative;
  padding: calc(var(--cabecera-alto) + 78px) 0 88px;
  overflow: hidden;
}

/* Halos de luz del fondo. */
.portada::before,
.portada::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.portada::before {
  width: 620px; height: 620px;
  top: -240px; left: -160px;
  background: rgba(43, 92, 246, .16);
}

.portada::after {
  width: 520px; height: 520px;
  top: -120px; right: -180px;
  background: rgba(34, 211, 238, .12);
}

.portada__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 60px;
  align-items: center;
}

.portada__texto h1 { margin-bottom: 22px; }

.portada__entrada {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--texto);
  max-width: 560px;
  margin-bottom: 32px;
}

.portada__botones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.portada__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  font-size: 14.5px;
  color: var(--apagado);
}

.portada__garantias li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.portada__garantias li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 12px rgba(52, 211, 153, .8);
  flex-shrink: 0;
}

@media (max-width: 940px) {
  .portada__interior {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .portada { padding-top: calc(var(--cabecera-alto) + 52px); }
  .portada__entrada { max-width: none; }
}

/* --------------------------------------------------------------------------
   7. Maqueta de chat (portada y demo)
   -------------------------------------------------------------------------- */
.chat {
  background: linear-gradient(165deg, #ffffff, #f1f6fd);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra), var(--sombra-cian);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.chat__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: var(--velo);
  border-bottom: 1px solid var(--borde);
}

.chat__punto {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--degradado);
  box-shadow: 0 0 14px rgba(34, 211, 238, .7);
  flex-shrink: 0;
}

.chat__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--titulo);
}

.chat__estado {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--verde);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat__estado::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 10px var(--verde);
}

.chat__cuerpo {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 330px;
  max-height: 430px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(12,26,54,.25) transparent;
}

.chat__cuerpo::-webkit-scrollbar { width: 8px; }
.chat__cuerpo::-webkit-scrollbar-thumb {
  background: rgba(12, 26, 54, .22);
  border-radius: 8px;
}

.mensaje {
  max-width: 88%;
  padding: 13px 17px;
  border-radius: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  animation: aparecer-mensaje .35s ease both;
}

@keyframes aparecer-mensaje {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mensaje--visitante {
  align-self: flex-end;
  background: var(--degradado-fuerte);
  color: #fff;
  border-bottom-right-radius: 5px;
  font-weight: 600;
}

.mensaje--asistente {
  align-self: flex-start;
  background: var(--velo-fuerte);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 5px;
  color: var(--texto);
}

.mensaje__fuente {
  display: block;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--cian);
}

.mensaje__fuente::before {
  content: "Fuente: ";
  color: var(--apagado);
}

.mensaje--no-sabe {
  background: rgba(251, 191, 36, .08);
  border-color: rgba(251, 191, 36, .3);
}

.chat__escribiendo {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 15px 18px;
  background: var(--velo-fuerte);
  border: 1px solid var(--borde);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
}

.chat__escribiendo i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--apagado);
  animation: puntito 1.1s infinite ease-in-out;
}

.chat__escribiendo i:nth-child(2) { animation-delay: .16s; }
.chat__escribiendo i:nth-child(3) { animation-delay: .32s; }

@keyframes puntito {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

.chat__pie {
  border-top: 1px solid var(--borde);
  padding: 16px 20px 20px;
  background: var(--velo);
}

.chat__pie-titulo {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apagado);
  font-weight: 700;
  margin-bottom: 11px;
}

.chat__sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat__sugerencia {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  background: var(--velo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50px;
  padding: 9px 15px;
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.chat__sugerencia:hover {
  background: rgba(34, 211, 238, .14);
  border-color: rgba(34, 211, 238, .45);
  color: var(--titulo);
}

.chat__sugerencia[disabled] {
  opacity: .4;
  cursor: default;
}

.chat__reiniciar {
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--apagado);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
}

.chat__reiniciar:hover { color: var(--cian); }

/* Selector de sector para la demo. */
.sectores {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-bottom: 28px;
}

.sector {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto);
  background: var(--velo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 50px;
  padding: 11px 22px;
  cursor: pointer;
  transition: all .2s ease;
}

.sector:hover { background: var(--velo-fuerte); }

.sector[aria-pressed="true"] {
  background: var(--degradado-fuerte);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(43, 92, 246, .35);
}

/* --------------------------------------------------------------------------
   8. Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.rejilla {
  display: grid;
  gap: 20px;
}

.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Dos columnas fijas: las dos tarjetas ocupan todo el ancho de la web. */
.rejilla--dos { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 780px) {
  .rejilla--dos { grid-template-columns: 1fr; }
}

/* En las tarjetas anchas el dibujo puede ser mas grande. */
.rejilla--dos .tarjeta__icono {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.rejilla--dos .tarjeta__icono svg { width: 28px; height: 28px; }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 30px;
  box-shadow: var(--sombra-tarjeta);
}

.tarjeta__icono {
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .22);
  color: var(--cian);
  margin-bottom: 18px;
}

.tarjeta__icono svg { width: 23px; height: 23px; }

/* Barra de color a la izquierda, como en las tarjetas del catalogo.
   Se elige con una clase: tarjeta--azul, tarjeta--verde, tarjeta--ambar o
   tarjeta--cian (esta ultima es la del color de la marca). */
.tarjeta--azul  { border-left: 4px solid var(--azul); }
.tarjeta--verde { border-left: 4px solid var(--verde); }
.tarjeta--ambar { border-left: 4px solid var(--amarillo); }
.tarjeta--cian  { border-left: 4px solid var(--cian); }
.tarjeta--violeta { border-left: 4px solid var(--violeta); }
.tarjeta--naranja { border-left: 4px solid var(--naranja); }
.tarjeta--rojo    { border-left: 4px solid var(--rojo); }

.ficha--violeta { border-left-color: var(--violeta); }
.ficha--naranja { border-left-color: var(--naranja); }
.ficha--rojo    { border-left-color: var(--rojo); }

.tarjeta--azul .tarjeta__icono {
  background: rgba(43, 92, 246, .12);
  border-color: rgba(43, 92, 246, .22);
  color: var(--azul);
}

.tarjeta--verde .tarjeta__icono {
  background: rgba(10, 127, 90, .12);
  border-color: rgba(10, 127, 90, .24);
  color: var(--verde);
}

.tarjeta--ambar .tarjeta__icono {
  background: rgba(180, 83, 9, .12);
  border-color: rgba(180, 83, 9, .24);
  color: var(--amarillo);
}

.tarjeta--violeta .tarjeta__icono {
  background: rgba(109, 40, 217, .12);
  border-color: rgba(109, 40, 217, .22);
  color: var(--violeta);
}

.tarjeta--naranja .tarjeta__icono {
  background: rgba(194, 65, 12, .12);
  border-color: rgba(194, 65, 12, .24);
  color: var(--naranja);
}

.tarjeta--rojo .tarjeta__icono {
  background: rgba(207, 59, 59, .12);
  border-color: rgba(207, 59, 59, .24);
  color: var(--rojo);
}

.tarjeta h3 { margin-bottom: 10px; font-size: 19px; }

.tarjeta p {
  font-size: 15.5px;
  color: var(--apagado);
}

/* Tarjetas de problema (dolor del cliente). */
.dolor {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--velo);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--rojo);
  border-radius: 14px;
  padding: 22px 24px;
}

.dolor__icono {
  flex-shrink: 0;
  color: var(--rojo);
  margin-top: 2px;
}

.dolor__icono svg { width: 22px; height: 22px; }

.dolor p {
  font-size: 15.5px;
  margin: 0;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   9. Pasos numerados
   -------------------------------------------------------------------------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  counter-reset: paso;
}

.paso {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian);
  border-radius: var(--radio-g);
  padding: 34px 28px 28px;
  box-shadow: var(--sombra-tarjeta);
}

/* Los pasos van cambiando de color en orden: se ve que son una secuencia y no
   quedan todos del mismo color. */
.pasos .paso:nth-child(2) { border-left-color: var(--azul); }
.pasos .paso:nth-child(3) { border-left-color: var(--violeta); }
.pasos .paso:nth-child(4) { border-left-color: var(--naranja); }
.pasos .paso:nth-child(5) { border-left-color: var(--verde); }

.paso__numero {
  position: absolute;
  top: -20px; left: 28px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--degradado-fuerte);
  color: #fff;
  font-weight: 900;
  font-size: 19px;
  box-shadow: 0 8px 22px rgba(43, 92, 246, .4);
}

.paso h3 {
  font-size: 18px;
  margin: 14px 0 9px;
}

.paso p {
  font-size: 15px;
  color: var(--apagado);
}

/* --------------------------------------------------------------------------
   10. Lista de ventajas con marca de visto
   -------------------------------------------------------------------------- */
.ventajas {
  list-style: none;
  display: grid;
  gap: 13px;
}

.ventajas li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
}

.ventajas li::before {
  content: "";
  flex-shrink: 0;
  width: 21px; height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(52, 211, 153, .14)
              url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
              center / 13px no-repeat;
}

.ventajas--cruz li::before {
  background-color: rgba(248, 113, 113, .14);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   11. Comparativa
   -------------------------------------------------------------------------- */
.comparativa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}

.comparativa__col {
  border-radius: var(--radio-g);
  padding: 32px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
}

.comparativa__col--bien {
  border-color: rgba(52, 211, 153, .35);
  background: linear-gradient(165deg, rgba(52, 211, 153, .07), var(--tarjeta));
}

.comparativa__col--mal {
  border-color: rgba(248, 113, 113, .28);
  background: linear-gradient(165deg, rgba(248, 113, 113, .06), var(--tarjeta));
}

.comparativa__titulo {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comparativa__col--bien .comparativa__titulo { color: var(--verde); }
.comparativa__col--mal  .comparativa__titulo { color: var(--rojo); }

/* --------------------------------------------------------------------------
   12. Imágenes del panel de WordPress (maquetas)
   -------------------------------------------------------------------------- */
.maqueta {
  background: #ffffff;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.maqueta__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #eef3fa;
  border-bottom: 1px solid var(--borde);
}

.maqueta__circulos {
  display: flex;
  gap: 6px;
}

.maqueta__circulos i {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: block;
}

.maqueta__circulos i:nth-child(1) { background: #ff5f57; }
.maqueta__circulos i:nth-child(2) { background: #febc2e; }
.maqueta__circulos i:nth-child(3) { background: #28c840; }

.maqueta__direccion {
  flex: 1;
  margin-left: 8px;
  font-family: var(--fuente-mono);
  font-size: 11.5px;
  color: var(--apagado);
  background: #ffffff;
  border-radius: 6px;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maqueta__cuerpo {
  display: grid;
  grid-template-columns: 178px 1fr;
  min-height: 330px;
}

.maqueta__lateral {
  background: #f7faff;
  border-right: 1px solid var(--borde);
  padding: 16px 0;
  font-size: 13.5px;
}

.maqueta__lateral-titulo {
  padding: 0 18px 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
  font-weight: 700;
}

.maqueta__menu {
  list-style: none;
}

.maqueta__menu li {
  padding: 9px 18px;
  color: var(--apagado);
  border-left: 3px solid transparent;
}

.maqueta__menu li.activo {
  color: var(--titulo);
  background: rgba(34, 211, 238, .08);
  border-left-color: var(--cian);
  font-weight: 600;
}

.maqueta__panel {
  padding: 24px;
}

.maqueta__panel h4 {
  font-size: 19px;
  margin-bottom: 6px;
}

.maqueta__panel > p {
  font-size: 14px;
  color: var(--apagado);
  margin-bottom: 20px;
}

.fichero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: var(--velo);
  border: 1px solid var(--borde);
  border-radius: 11px;
  margin-bottom: 9px;
  font-size: 14.5px;
}

.fichero__tipo {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(43, 92, 246, .16);
  color: var(--cian);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
}

.fichero__nombre { flex: 1; min-width: 0; }
.fichero__nombre strong { color: var(--titulo); font-weight: 600; display: block; }
.fichero__nombre small { color: var(--apagado); font-size: 12.5px; }

.fichero__estado {
  font-size: 12px;
  font-weight: 700;
  color: var(--verde);
  background: rgba(52, 211, 153, .12);
  border-radius: 50px;
  padding: 4px 11px;
  white-space: nowrap;
}

.fichero__estado--espera {
  color: var(--amarillo);
  background: rgba(251, 191, 36, .12);
}

.boton-maqueta {
  display: inline-block;
  margin-top: 14px;
  background: var(--degradado-fuerte);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 9px;
}

.campo-maqueta {
  margin-bottom: 18px;
}

.campo-maqueta label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--titulo);
  margin-bottom: 7px;
}

.campo-maqueta__caja {
  background: var(--velo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 9px;
  padding: 11px 15px;
  font-family: var(--fuente-mono);
  font-size: 13.5px;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.campo-maqueta__ayuda {
  font-size: 12.5px;
  color: var(--apagado);
  margin-top: 6px;
}

.insignia-ok {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--verde);
  background: rgba(52, 211, 153, .12);
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}

.aviso-maqueta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(52, 211, 153, .08);
  border: 1px solid rgba(52, 211, 153, .25);
  border-radius: 11px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 12px;
}

.aviso-maqueta--ambar {
  background: rgba(251, 191, 36, .07);
  border-color: rgba(251, 191, 36, .25);
}

.aviso-maqueta--azul {
  background: rgba(43, 92, 246, .08);
  border-color: rgba(43, 92, 246, .28);
}

@media (max-width: 700px) {
  .maqueta__cuerpo { grid-template-columns: 1fr; }
  .maqueta__lateral { display: none; }
}

/* --------------------------------------------------------------------------
   13. Precios
   -------------------------------------------------------------------------- */
.precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}

.precio {
  position: relative;
  background: var(--tarjeta);
  border: 2px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 38px 34px;
  box-shadow: var(--sombra-tarjeta);
}

.precio--destacado {
  border-color: rgba(34, 211, 238, .45);
  background: linear-gradient(165deg, rgba(43, 92, 246, .12), var(--tarjeta));
  box-shadow: var(--sombra-tarjeta-alta), var(--sombra-cian);
}

.precio__cinta {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--degradado-fuerte);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 7px 20px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(43, 92, 246, .4);
}

.precio__nombre {
  font-size: 20px;
  font-weight: 800;
  color: var(--titulo);
  margin-bottom: 6px;
}

.precio__importe {
  font-size: 60px;
  font-weight: 900;
  color: var(--titulo);
  line-height: 1;
  margin: 20px 0 4px;
  letter-spacing: -.03em;
}

.precio__importe sup {
  font-size: 26px;
  top: -.55em;
  color: var(--apagado);
  font-weight: 700;
  margin-right: 2px;
}

.precio__importe--texto {
  font-size: 38px;
  letter-spacing: -.02em;
}

.precio__condiciones {
  font-size: 13.5px;
  color: var(--apagado);
  margin-bottom: 28px;
}

.precio__lista {
  margin-bottom: 30px;
}

.precio__lista.ventajas li { font-size: 15px; }

/* Aviso de condiciones que conviene dejar claro antes de comprar. */
.precio__aviso {
  margin-top: 18px;
  padding: 13px 16px;
  background: rgba(251, 191, 36, .07);
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--apagado);
}

/* --------------------------------------------------------------------------
   14. Galería de impresión 3D
   -------------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.pieza {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  background: linear-gradient(150deg, #eef3fa, #e2eaf6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-tarjeta);
}

.pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pieza__vacio {
  text-align: center;
  padding: 24px;
  color: var(--apagado);
}

.pieza__vacio svg {
  width: 40px; height: 40px;
  margin: 0 auto 12px;
  color: rgba(34, 211, 238, .45);
}

.pieza__vacio span { font-size: 13.5px; display: block; }

.pieza__nombre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 13px;
  background: linear-gradient(to top, rgba(6, 11, 22, .96), transparent);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--titulo);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   15. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq__item {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 15px;
  overflow: hidden;
  transition: border-color .25s ease;
}

.faq__item--abierto { border-color: rgba(34, 211, 238, .3); }

.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: none;
  border: none;
  color: var(--titulo);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  text-align: left;
  padding: 21px 24px;
  cursor: pointer;
  transition: background-color .2s ease;
}

.faq__pregunta:hover { background: var(--velo); }

.faq__flecha {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--cian);
  transition: transform .3s ease;
}

.faq__item--abierto .faq__flecha { transform: rotate(180deg); }

.faq__respuesta {
  display: none;
  padding: 0 24px 22px;
  font-size: 15.5px;
  color: var(--apagado);
  line-height: 1.72;
}

.faq__item--abierto .faq__respuesta { display: block; }

.faq__respuesta p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   16. Formulario de contacto
   -------------------------------------------------------------------------- */
.contacto__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .contacto__rejilla { grid-template-columns: 1fr; gap: 42px; }
}

.formulario {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian);
  border-radius: var(--radio-g);
  padding: 34px;
  box-shadow: var(--sombra-tarjeta);
}

.campo { margin-bottom: 20px; }

.campo label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--titulo);
  margin-bottom: 8px;
}

.campo label .obligatorio { color: var(--cian); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--borde-fuerte);
  border-radius: 11px;
  padding: 14px 16px;
  color: var(--titulo);
  font-family: inherit;
  /* 16 px justo: por debajo de eso, Safari en el iPhone agranda la pagina al
     tocar un campo. */
  font-size: 16px;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.campo input::placeholder,
.campo textarea::placeholder { color: #64748b; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: rgba(34, 211, 238, .6);
  background: #ffffff;
}

.campo textarea {
  resize: vertical;
  min-height: 128px;
}

.campo select option { background: var(--fondo-alt); color: var(--texto); }

.campo__error {
  display: none;
  margin-top: 7px;
  font-size: 13px;
  color: var(--rojo);
}

.campo--error input,
.campo--error textarea,
.campo--error select { border-color: rgba(248, 113, 113, .65); }

.campo--error .campo__error { display: block; }

.consentimiento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--apagado);
  margin-bottom: 22px;
  line-height: 1.55;
}

.consentimiento input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--azul);
  cursor: pointer;
}

.consentimiento a { color: var(--cian); }

.formulario__nota {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--apagado);
  text-align: center;
}

.formulario__ok {
  display: none;
  background: rgba(52, 211, 153, .09);
  border: 1px solid rgba(52, 211, 153, .3);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}

.formulario__ok h3 { color: var(--verde); margin-bottom: 10px; }

/* Aviso de que el mensaje no se ha podido enviar. */
.formulario__mal {
  display: none;
  background: rgba(248, 113, 113, .08);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}

.formulario__mal h3 { color: var(--rojo); margin-bottom: 10px; }

/* Mientras se está enviando, el botón se ve apagado. */
.boton[aria-busy="true"] {
  opacity: .65;
  pointer-events: none;
}

.datos-contacto {
  list-style: none;
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.datos-contacto li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian);
  border-radius: var(--radio);
  padding: 18px 20px;
  box-shadow: var(--sombra-tarjeta);
}

.datos-contacto li:nth-child(2) { border-left-color: var(--azul); }
.datos-contacto li:nth-child(3) { border-left-color: var(--verde); }
.datos-contacto li:nth-child(4) { border-left-color: var(--amarillo); }

.datos-contacto li:nth-child(2) .datos-contacto__icono {
  background: rgba(43, 92, 246, .12);
  border-color: rgba(43, 92, 246, .22);
  color: var(--azul);
}

.datos-contacto li:nth-child(3) .datos-contacto__icono {
  background: rgba(10, 127, 90, .12);
  border-color: rgba(10, 127, 90, .24);
  color: var(--verde);
}

.datos-contacto li:nth-child(4) .datos-contacto__icono {
  background: rgba(180, 83, 9, .12);
  border-color: rgba(180, 83, 9, .24);
  color: var(--amarillo);
}

.datos-contacto__icono {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .22);
  color: var(--cian);
}

.datos-contacto__icono svg { width: 20px; height: 20px; }

.datos-contacto strong {
  display: block;
  color: var(--titulo);
  font-size: 14.5px;
  margin-bottom: 3px;
}

.datos-contacto span { font-size: 15px; color: var(--apagado); }

/* --------------------------------------------------------------------------
   16.bis Banda «¿Ya lo has probado? Pide tu licencia»
   Va justo debajo de la cabecera del Separador: quien ha probado el programa
   y le ha servido, lo ve sin buscar el botón.
   -------------------------------------------------------------------------- */
.aviso-licencia {
  background: linear-gradient(150deg, rgba(43, 92, 246, .10), rgba(34, 211, 238, .06));
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 26px 0;
}

.aviso-licencia__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.aviso-licencia__texto {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--titulo);
}

.aviso-licencia__texto span {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--texto);
}

@media (max-width: 700px) {
  .aviso-licencia__interior { justify-content: center; text-align: center; }
  .aviso-licencia .boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Llamada final
   -------------------------------------------------------------------------- */
.llamada {
  position: relative;
  padding: 78px 0;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(43, 92, 246, .14), rgba(34, 211, 238, .07));
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.llamada h2 { margin-bottom: 18px; }

.llamada p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: var(--texto);
  font-size: 18px;
}

.llamada__botones {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   18. Pie de página
   -------------------------------------------------------------------------- */
.pie {
  background: var(--oscuro);
  border-top: 1px solid var(--oscuro-borde);
  padding: 34px 0 20px;
  font-size: 14.5px;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 26px;
}

@media (max-width: 820px) {
  .pie__rejilla { grid-template-columns: 1fr; gap: 34px; }
}

.pie__marca img {
  height: 30px;
  width: auto;
  margin-bottom: 12px;
}

.pie__marca p {
  color: var(--oscuro-suave);
  font-size: 14px;
  max-width: 320px;
}

.pie h4 {
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--oscuro-titulo);
  margin-bottom: 12px;
}

.pie__lista {
  list-style: none;
  display: grid;
  gap: 8px;
}

.pie__lista a {
  color: var(--oscuro-texto);
  font-size: 14.5px;
}

.pie__lista a:hover { color: var(--cian-claro); text-decoration: none; }

.pie__legal {
  border-top: 1px solid var(--oscuro-borde);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  color: var(--oscuro-suave);
  font-size: 13px;
}

.pie__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.pie__legal-enlaces a { color: rgba(255, 255, 255, .76); }
.pie__legal-enlaces a:hover { color: var(--cian-claro); }

.pie__legal a { color: var(--apagado); }
.pie__legal a:hover { color: var(--cian); }

/* --------------------------------------------------------------------------
   19. Páginas legales
   -------------------------------------------------------------------------- */
.legal {
  padding: calc(var(--cabecera-alto) + 56px) 0 80px;
}

.legal__caja {
  max-width: 780px;
  margin: 0 auto;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 48px;
}

@media (max-width: 700px) {
  .legal__caja { padding: 30px 24px; }
}

.legal__caja h1 {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 10px;
}

.legal__caja h2 {
  font-size: 20px;
  margin: 34px 0 12px;
}

.legal__caja p,
.legal__caja li {
  font-size: 15.5px;
  color: var(--texto);
}

.legal__caja ul,
.legal__caja ol {
  margin: 0 0 16px 22px;
  display: grid;
  gap: 8px;
}

.legal__caja a { word-break: break-word; }

/* Tablas (listas de cookies y de destinatarios de datos) */
.legal__tabla {
  overflow-x: auto;
  margin: 0 0 22px;
  -webkit-overflow-scrolling: touch;
}

.legal__tabla table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.legal__caja table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14.5px;
}

.legal__caja th,
.legal__caja td {
  border: 1px solid var(--borde);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}

.legal__caja th {
  background: var(--fondo-alt);
  color: var(--titulo);
  font-weight: 600;
}

.legal__caja tbody tr:nth-child(even) { background: rgba(12, 26, 54, .02); }

.legal__caja hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 28px 0;
}

.legal__caja code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 1px 5px;
}

.legal__fecha {
  font-size: 13.5px;
  color: var(--apagado);
  margin-bottom: 30px;
}

.legal__pendiente {
  background: rgba(251, 191, 36, .09);
  border: 1px solid rgba(251, 191, 36, .3);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14.5px;
  margin: 20px 0;
}

.legal__pendiente strong { color: var(--amarillo); }

/* --------------------------------------------------------------------------
   20. Animación de entrada al hacer scroll — RETIRADA

   Aquí había una animación que ocultaba los bloques hasta que se veía un 12 %
   de ellos. Dio un problema serio: el bloque del catálogo de plugins es más
   alto que la pantalla, así que ese 12 % no se alcanzaba nunca y la sección
   se quedaba invisible para siempre. El visitante veía una página en blanco
   y un scroll interminable.

   Se ha quitado. El contenido se ve siempre, sin depender de JavaScript.
   Las clases `revelar` que quedan en el HTML no hacen nada; se irán
   limpiando a medida que se toquen las páginas.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* El selector debe llevar el prefijo html.js para tener la misma
     prioridad que la regla de arriba; si no, no ganaría y el contenido
     seguiría oculto para quien tiene las animaciones reducidas. */
  html.js .revelar,
  .revelar {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   22. Piezas propias de la página de 3dPro
   -------------------------------------------------------------------------- */

/* Calculadora de ejemplo. */
.calculadora {
  background: var(--tarjeta);
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: var(--radio-g);
  padding: 34px;
  box-shadow: var(--sombra);
}

.calculadora__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 16px;
}

.calculadora__fila strong { color: var(--titulo); font-weight: 700; }

.calculadora__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 2px solid rgba(34, 211, 238, .3);
  font-size: 17px;
  font-weight: 700;
  color: var(--titulo);
}

.calculadora__total strong {
  font-size: 44px;
  font-weight: 900;
  color: var(--cian);
  letter-spacing: -.02em;
}

.calculadora__nota {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--apagado);
}

/* Versión reducida, para la maqueta de la portada. */
.calc-mini {
  border-top: 1px solid var(--borde);
  margin-top: 6px;
}

.calc-mini__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13.5px;
  color: var(--apagado);
}

.calc-mini__fila strong { color: var(--texto); }

.calc-total-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--texto);
}

.calc-total-mini strong {
  font-size: 26px;
  font-weight: 900;
  color: var(--cian);
}

/* Vídeo: no se carga nada hasta que el visitante lo pulsa. */
.video {
  position: relative;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, .25);
  box-shadow: var(--sombra-cian);
  background: linear-gradient(150deg, #f4f8fd, #e6edf8);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--titulo);
}

.video__play {
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--degradado-fuerte);
  color: #fff;
  box-shadow: 0 0 50px rgba(34, 211, 238, .45);
  transition: transform .25s ease;
}

.video__poster:hover .video__play { transform: scale(1.08); }

.video__titulo { font-size: 21px; font-weight: 800; }

.video__pie { font-size: 14px; color: var(--apagado); }

/* Aviso destacado (por ejemplo, la garantía). */
.aviso-grande {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: rgba(52, 211, 153, .07);
  border: 1px solid rgba(52, 211, 153, .28);
  border-radius: var(--radio-g);
  padding: 32px;
  box-shadow: var(--sombra-tarjeta);
}

.aviso-grande__icono {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(52, 211, 153, .12);
  color: var(--verde);
}

.aviso-grande h3 { margin-bottom: 10px; font-size: 21px; }

.aviso-grande p { font-size: 15.5px; color: var(--texto); }

@media (max-width: 600px) {
  .aviso-grande { flex-direction: column; padding: 26px; }
  .calculadora { padding: 24px; }
  .calculadora__total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .calculadora__total strong { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   23. Utilidades de espaciado y anchura

   Sirven para no tener que escribir estilos dentro del HTML. La política de
   seguridad del contenido bloquea los atributos `style`, y además así el
   diseño queda todo en esta hoja.
   -------------------------------------------------------------------------- */
.mt-14 { margin-top: 14px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-34 { margin-top: 34px; }
.mt-40 { margin-top: 40px; }
.mt-44 { margin-top: 44px; }
.mt-48 { margin-top: 48px; }
.mt-52 { margin-top: 52px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }

.mb-10 { margin-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-22 { margin-bottom: 22px; }

.mx-auto { margin-left: auto; margin-right: auto; }

.max-620 { max-width: 620px; }
.max-720 { max-width: 720px; }
.max-800 { max-width: 800px; }

.nota-pequena  { font-size: 14px; }
.texto-pequeno { font-size: 13.5px; }

/* El chat dentro de la maqueta del navegador no necesita su propio marco. */
.chat--sin-marco {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Aviso de la casilla de privacidad del formulario. */
.aviso-consentimiento {
  margin-top: -12px;
  margin-bottom: 16px;
}

.mini-etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto);
  background: var(--velo);
  border: 1px solid var(--borde);
  border-radius: 50px;
  padding: 5px 13px;
  white-space: nowrap;
}

.mini-etiqueta--precio {
  color: var(--cian);
  background: rgba(34, 211, 238, .1);
  border-color: rgba(34, 211, 238, .28);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   25. Páginas interiores (web de varias páginas)

   La web dejó de ser una sola página larga. Ahora cada cosa tiene su página,
   y estas piezas son las que usan esas páginas interiores.
   -------------------------------------------------------------------------- */

/* Página actual marcada en el menú. */
.cabecera__menu a[aria-current="page"] {
  color: var(--cian-claro);
  background: rgba(34, 211, 238, .14);
}

/* Portada corta: para las páginas que no son la de inicio. */
.portada--corta {
  padding: calc(var(--cabecera-alto) + 62px) 0 14px;
}

.portada--corta::before,
.portada--corta::after { opacity: .55; }

.portada--corta .portada__interior {
  grid-template-columns: 1fr;
  gap: 0;
  text-align: center;
}

.portada--corta .portada__entrada {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

.portada--corta .portada__botones { justify-content: center; }

.portada--corta .portada__garantias { justify-content: center; }

/* Tarjeta que además es un enlace a otra página. */
.tarjeta--enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tarjeta__mas {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cian);
}

.tarjeta__mas svg { width: 17px; height: 17px; }

/* Migas de pan, para saber dónde estás. */
.migas {
  font-size: 14px;
  color: var(--apagado);
  margin-bottom: 18px;
}

.migas a { color: var(--apagado); }

.migas a:hover { color: var(--cian); }

.migas span { margin: 0 8px; opacity: .6; }

/* Ficha de plugin dentro de la lista de la página de plugins. */
/* Tarjetas del catálogo (la lista de plugins y la de apps).
   Son compactas: en una pantalla de ordenador entran cuatro por fila y, si hay
   menos, quedan centradas. */
/* La lista de plugins y la de apps: dos tarjetas por fila, como los servicios. */
.rejilla-fichas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .rejilla-fichas { grid-template-columns: 1fr; }
}

.ficha {
  display: flex;
  flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian);
  border-radius: var(--radio-g);
  padding: 30px;
  box-shadow: var(--sombra-tarjeta);
}

.ficha--azul  { border-left-color: var(--azul); }
.ficha--verde { border-left-color: var(--verde); }
.ficha--ambar { border-left-color: var(--amarillo); }

.ficha__icono {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 16px;
  background: rgba(11, 127, 150, .12);
  border: 1px solid rgba(11, 127, 150, .22);
  color: var(--cian);
}

.ficha__icono svg { width: 25px; height: 25px; }

.ficha--azul .ficha__icono {
  background: rgba(43, 92, 246, .12);
  border-color: rgba(43, 92, 246, .22);
  color: var(--azul);
}

.ficha--verde .ficha__icono {
  background: rgba(10, 127, 90, .12);
  border-color: rgba(10, 127, 90, .24);
  color: var(--verde);
}

.ficha--ambar .ficha__icono {
  background: rgba(180, 83, 9, .12);
  border-color: rgba(180, 83, 9, .24);
  color: var(--amarillo);
}

.ficha--violeta .ficha__icono {
  background: rgba(109, 40, 217, .12);
  border-color: rgba(109, 40, 217, .22);
  color: var(--violeta);
}

.ficha--naranja .ficha__icono {
  background: rgba(194, 65, 12, .12);
  border-color: rgba(194, 65, 12, .24);
  color: var(--naranja);
}

.ficha--rojo .ficha__icono {
  background: rgba(207, 59, 59, .12);
  border-color: rgba(207, 59, 59, .24);
  color: var(--rojo);
}

.ficha h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.ficha > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto);
  margin-bottom: 16px;
}

.ficha__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.ficha__etiquetas .mini-etiqueta {
  font-size: 11.5px;
  padding: 4px 10px;
}

@media (max-width: 560px) {
  .ficha { max-width: none; flex-basis: 100%; }
}

/* Reproductor de la demo de audio (antes llevaba los estilos en línea,
   que la propia política de la web no quiere). */
.demo-audio {
  width: 100%;
  max-width: 520px;
  margin-top: 18px;
}

/* El botón queda abajo del todo y del tamaño de su texto. */
.ficha .boton {
  margin-top: auto;
  align-self: flex-start;
}

/* Elegir sistema en la ficha (Mac / Windows / Linux): los tres botones en
   fila, cada uno con su icono, y con aire entre ellos. Antes eran dos botones
   sueltos dentro de un párrafo: al partirse en dos líneas quedaban pegados. */
.ficha__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  margin-bottom: 16px;
}

/* Ficha del escáner: el cuadro «Úsala gratis» va al lado de los botones.
   Si no caben en la misma línea, el cuadro se pone encima y los botones
   debajo; en el móvil, cada cosa en su línea. */
.ficha__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.ficha__acciones .boton {
  margin-top: 0;
  align-self: center;
}

.ficha__gratis {
  flex: none;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: var(--verde);
  border-radius: 12px;
  padding: 11px 16px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(10, 127, 90, .26);
  white-space: nowrap;
}

.boton--sistema {
  padding: 13px 20px;
  font-size: 15px;
  gap: 9px;
}

/* Cualquier icono dentro de un botón mide lo suyo y no se estira. */
.boton svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* En el móvil, un botón por línea y a lo ancho: se pulsa mucho mejor. */
@media (max-width: 560px) {
  .ficha__botones .boton--sistema { flex: 1 1 100%; }
}

/* Tarjeta apagada, para decir que todavia no hay nada mas. */
.ficha--proximamente {
  border-style: dashed;
  border-left: 4px solid var(--borde-fuerte);
  background: var(--velo);
  box-shadow: none;
  justify-content: center;
}

.ficha--proximamente .ficha__icono {
  background: var(--velo-fuerte);
  border-color: var(--borde);
  color: var(--apagado);
}

.ficha--proximamente h3 { color: var(--apagado); }
.ficha--proximamente p { color: var(--apagado); }

/* Aviso de "todavía no hay nada más". */
.nota-vacia {
  background: var(--velo);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-g);
  padding: 30px;
  text-align: center;
  color: var(--apagado);
  font-size: 15.5px;
  box-shadow: var(--sombra-tarjeta);
}

.nota-vacia strong { color: var(--titulo); }

/* --------------------------------------------------------------------------
   26. Llavero con código de Spotify (página de impresión 3D)

   El vídeo que explica el producto es vertical, así que se enseña dentro de
   un marco de teléfono. No se descarga hasta que el visitante pulsa el botón.
   -------------------------------------------------------------------------- */
.producto {
  margin-top: 56px;
}

/* La foto y el vídeo, uno al lado del otro y centrados.
   La altura se fija una sola vez en `--alto-producto` para que la foto y el
   marco del teléfono queden exactamente a la misma altura. */
.producto__visuales {
  --alto-producto: 520px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 46px;
}

.producto__foto {
  height: var(--alto-producto);
  width: auto;
  object-fit: cover;
  border-radius: 30px;
  border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra);
}

.producto__video { text-align: center; }

.producto__pie {
  margin-top: 16px;
  font-size: 13px;
  color: var(--apagado);
}

/* Marco de teléfono. El alto es el mismo que el de la foto; el ancho sale de
   la proporción del vídeo para que no haya que recortarlo. */
.telefono {
  position: relative;
  width: 300px;
  height: var(--alto-producto, 520px);
  margin: 0 auto;
  border-radius: 38px;
  border: 10px solid #1a2334;
  background: #000;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 70px rgba(30, 215, 96, .16);
}

/* La muesca de la parte de arriba. */
.telefono::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 8px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .16);
  z-index: 3;
}

.telefono video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.telefono__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px;
  background: rgba(6, 11, 22, .5);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  transition: opacity .3s ease;
}

.telefono__play-icono {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1ed760;
  color: #06120a;
  box-shadow: 0 0 40px rgba(30, 215, 96, .55);
  transition: transform .25s ease;
}

.telefono__play:hover .telefono__play-icono { transform: scale(1.08); }

.telefono__play-icono svg { width: 30px; height: 30px; }

.telefono--reproduciendo .telefono__play {
  opacity: 0;
  pointer-events: none;
}

.producto__texto {
  max-width: 900px;
  margin: 54px auto 0;
}

/* Los dos casos de uso, en dos columnas. */
.producto__casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 46px;
}

.producto__texto h3 {
  font-size: 20px;
  margin: 0 0 10px;
}

.producto__texto p {
  font-size: 15.5px;
  color: var(--apagado);
}

/* Recuadro con el precio y el mínimo de unidades. */
.oferta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 38px;
  background: rgba(30, 215, 96, .07);
  border: 1px solid rgba(30, 215, 96, .26);
  border-radius: var(--radio);
  padding: 20px 24px;
  margin-top: 34px;
  box-shadow: var(--sombra-tarjeta);
}

.oferta__dato {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.oferta__cifra {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #1ed760;
  letter-spacing: -.02em;
}

.oferta__texto {
  font-size: 14.5px;
  color: var(--texto);
}

.oferta__nota {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--apagado);
}

@media (max-width: 900px) {
  /* En pantallas estrechas los dos visuales se apilan, pero siguen teniendo
     la misma altura entre ellos. */
  .producto__visuales {
    --alto-producto: 346px;
    flex-direction: column;
    gap: 28px;
  }

  .telefono {
    width: 200px;
    border-width: 7px;
    border-radius: 28px;
  }

  .telefono__play { font-size: 12.5px; gap: 12px; }

  .telefono__play-icono { width: 54px; height: 54px; }

  .telefono__play-icono svg { width: 24px; height: 24px; }

  .producto__foto {
    max-width: 100%;
    border-radius: 24px;
  }

  .producto__texto { margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   27. Banda de trabajos que se desplaza sola

   Va debajo de la galería y pasa imágenes sin parar, para enseñar más
   trabajos. Se detiene al pasar el ratón por encima, y si el visitante tiene
   las animaciones desactivadas se puede desplazar a mano.
   -------------------------------------------------------------------------- */
.cinta {
  overflow: hidden;
  padding: 8px 0;
  /* Los bordes se difuminan para que las imágenes no corten de golpe. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.cinta__pista {
  display: flex;
  width: max-content;
  animation: desfilar 80s linear infinite;
}

.cinta:hover .cinta__pista { animation-play-state: paused; }

/* El hueco se hace con relleno y no con «gap»: así las dos copias miden
   exactamente lo mismo y el bucle no da un salto al reiniciarse. */
.cinta__pieza { padding-right: 16px; }

.cinta__pieza img {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
}

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Aviso de que los personajes con marca registrada son solo una muestra. */
.cinta__nota {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--apagado);
}

@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta { overflow-x: auto; }
}

@media (max-width: 700px) {
  .cinta__pieza { padding-right: 12px; }
  .cinta__pieza img { width: 150px; height: 150px; border-radius: 14px; }
}

/* --------------------------------------------------------------------------
   28. Aviso destacado y chat en directo (demo)
   -------------------------------------------------------------------------- */

/* Recuadro para señalar algo importante dentro de la portada. */
.destacado {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* Arriba separa del texto de encima; abajo, de los botones. El de abajo
     faltaba y los botones quedaban pegados al cuadro. */
  margin: 24px 0 28px;
  padding: 14px 18px;
  border: 1px solid rgba(52, 211, 153, .32);
  border-left: 3px solid var(--verde);
  border-radius: 12px;
  background: rgba(52, 211, 153, .07);
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto);
}

.destacado svg {
  flex: none;
  margin-top: 3px;
  color: var(--verde);
}

.destacado strong { color: var(--titulo); }

.destacado a {
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.destacado a:hover { color: var(--titulo); }

/* Fila con el botón de «hablar con una persona» y el de reiniciar. */
.chat__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
}

.chat__acciones .chat__reiniciar { margin-top: 0; }

.chat__persona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--verde);
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .38);
  border-radius: 50px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.chat__persona:hover {
  background: rgba(52, 211, 153, .2);
  border-color: rgba(52, 211, 153, .6);
  color: var(--titulo);
}

.chat__persona[disabled] { opacity: .45; cursor: default; }

/* Cuando la persona ya está atendiendo, el botón avisa de que puede salir. */
.chat__persona--activo {
  color: var(--amarillo);
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .42);
}

/* Aviso dentro de la conversación («ahora atiendes tú»). */
.chat__separador {
  align-self: center;
  max-width: 92%;
  padding: 7px 14px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 50px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--apagado);
}

/* Mensajes que escribe la persona que atiende. */
.mensaje--agente {
  align-self: flex-start;
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .32);
  border-bottom-left-radius: 5px;
  color: var(--texto);
}

.mensaje__autor {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   29. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .cabecera,
  .chat__pie,
  .portada__botones,
  .llamada__botones { display: none; }

  body { background: #fff; color: #111; }
  h1, h2, h3, h4 { color: #000; }
  .seccion { padding: 20px 0; }
}

/* Logo de REAPER en la tarjeta del Separador de Pistas */
.ficha__icono img { width: 28px; height: 28px; display: block; }

/* Capturas del Separador de Pistas */
.captura { width: 100%; height: auto; border-radius: 14px; display: block;
  box-shadow: 0 18px 40px rgba(11, 26, 54, .18); }
.captura--ancha { max-width: 940px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   30. El pase de lo que hacemos (tarjeta de la portada)
   Sustituye al ejemplo del chat, que se confundía con el asistente de verdad
   que va abajo a la derecha. Cada app se va iluminando por turno.
   -------------------------------------------------------------------------- */
.pase {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-tarjeta);
  padding: 26px 24px 20px;
}

.pase__etiqueta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--cian);
}

.pase__titulo {
  margin: 8px 0 6px;
  font-size: 25px;
  line-height: 1.2;
  color: var(--titulo);
}

.pase__entrada {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
}

.pase__app {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  animation: pase-turno 25s infinite;
}

/* Cinco turnos, uno cada 5 segundos: nunca se iluminan dos a la vez. */
.pase__app:nth-of-type(1) { animation-delay: 0s; }
.pase__app:nth-of-type(2) { animation-delay: 5s; }
.pase__app:nth-of-type(3) { animation-delay: 10s; }
.pase__app:nth-of-type(4) { animation-delay: 15s; }
.pase__app:nth-of-type(5) { animation-delay: 20s; }

@keyframes pase-turno {
  0%, 20%  { background: #eef3fa; border-color: #d7e0ee; }
  25%, 100% { background: transparent; border-color: transparent; }
}

/* Quien pide menos movimiento, lo ve quieto y con la primera resaltada. */
@media (prefers-reduced-motion: reduce) {
  .pase__app { animation: none; }
  .pase__app:nth-of-type(1) { background: #eef3fa; border-color: #d7e0ee; }
}

.pase__app:hover { background: #eef3fa; border-color: #d7e0ee; }

.pase__icono {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #eef3fa;
  color: var(--azul);
  display: grid;
  place-items: center;
}

.pase__icono svg { width: 20px; height: 20px; }

.pase__icono--servicios { background: #eafaf3; color: #0a7f5a; }

.pase__texto { min-width: 0; }

.pase__nombre {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--titulo);
}

/* Etiqueta pequeña en las apps que se pueden probar antes de comprar. */
.pase__marca {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: middle;
  background: #eafaf3;
  color: #0a7f5a;
}

.pase__marca--web { background: #eef3fa; color: var(--azul); }

.pase__frase {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto);
}

.pase__flecha {
  margin-left: auto;
  flex: none;
  color: var(--azul);
  opacity: .55;
}

.pase__flecha svg { width: 16px; height: 16px; }

.pase__app--servicios { margin-top: 8px; }

.pase__pie {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .pase { padding: 22px 18px 16px; }
  .pase__titulo { font-size: 22px; }
}

/* ======================================================================
   La muestra del correo (página del plugin «Informes de Test para Masteriyo»)
   ----------------------------------------------------------------------
   Estos estilos estaban escritos dentro del HTML, uno a uno. Se han pasado a
   clases para que la página cumpla la norma del proyecto (ninguna página con
   style="..."), que es lo que hace falta para poder activar algún día la
   política de seguridad estricta que está preparada en el .htaccess.

   Las declaraciones son EXACTAMENTE las mismas: el aspecto no cambia.
   ====================================================================== */
.mc-marco { mc-marco }
.mc-marco .mc-cabecera { padding:14px 18px;background:#f7f9fd;border-bottom:1px solid rgba(20,35,70,.08);font-size:12px;line-height:1.5;color:#5b6b85; }
.mc-marco .mc-fuerte { color:#142346; }
.mc-marco .mc-cuerpo { padding:20px 18px;font-size:13px;color:#33415c; }
.mc-marco .mc-remitente { font-size:17px;font-weight:800;color:#0a7f5a;border-bottom:2px solid #0a7f5a;padding-bottom:8px; }
.mc-marco .mc-asunto { font-size:11.5px;color:#8a97ab;margin:6px 0 14px; }
.mc-marco .mc-nota { background:#f7f9fd;border-left:4px solid #0a7f5a;border-radius:8px;padding:12px 14px;margin-bottom:12px; }
.mc-marco .mc-nota-etiqueta { font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5b6b85; }
.mc-marco .mc-nota-valor { font-size:21px;font-weight:800;color:#142346;line-height:1.3; }
.mc-marco .mc-nota-pct { font-size:12.5px;font-weight:400;color:#5b6b85; }
.mc-marco .mc-nota-detalle { font-size:11.5px;color:#5b6b85;margin-top:3px; }
.mc-marco .mc-cuando { font-size:11px;color:#8a97ab;line-height:1.6;margin-bottom:14px; }
.mc-marco .mc-desglose { font-size:12px;font-weight:700;color:#0a7f5a;margin-bottom:8px; }
.mc-marco .mc-tabla { border:1px solid rgba(20,35,70,.10);border-radius:10px;overflow:hidden; }
.mc-marco .mc-tabla-cabecera { display:grid;grid-template-columns:1.1fr 1.4fr;gap:0;background:#f1f4f9;font-size:10.5px;font-weight:700;color:#5b6b85;text-transform:uppercase;letter-spacing:.04em; }
.mc-marco .mc-celda-cabecera { padding:8px 10px; }
.mc-marco .mc-fila { display:grid;grid-template-columns:1.1fr 1.4fr;border-top:1px solid rgba(20,35,70,.08); }
.mc-marco .mc-fila-alterna { display:grid;grid-template-columns:1.1fr 1.4fr;border-top:1px solid rgba(20,35,70,.08);background:#fafbfd; }
.mc-marco .mc-pregunta { padding:10px;font-weight:700;color:#b8860b;font-size:12px; }
.mc-marco .mc-respuestas { padding:10px;font-size:12px;line-height:1.8; }
.mc-marco .mc-etiqueta-respuesta { color:#8a97ab;font-size:11px; }
.mc-marco .mc-correcta { color:#1a7f37; }
.mc-marco .mc-acertada { color:#1c4e80; }
.mc-marco .mc-fallada { color:#b32d2e; }
.mc-marco .mc-pie-fila { margin-top:6px; }
.mc-marco .mc-insignia-ok { display:inline-block;background:#28a745;color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700; }
.mc-marco .mc-insignia-mal { display:inline-block;background:#dc3545;color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700; }
.mc-marco .mc-puntos { color:#142346;font-size:13px; }
.mc-marco .mc-final { font-size:10.5px;color:#a3aebf;margin-top:10px; }