/* ============================================================
   tecnomedia.pe - capa propia sobre nucleo.css
   Marca Tecnomedia: azul #005088 + cian #0098e0 + naranja #f89800
   Misma capa de componentes que sophiasoft.pe: cambia solo el color.
   ============================================================ */

:root{
  --marca:        #005088;
  --marca-claro:  #0098e0;
  --marca-oscuro: #003a63;
  --acento:       #f89800;
  --acento-suave: #ffb648;
  --fondo-2: #f5f8fb;
  --fondo-3: #e9eff6;
  --borde:   #dde6ef;
  --borde-2: #c5d4e2;
}
:root[data-tema="oscuro"]{
  --marca-claro: #4fc3f7;
  --fondo-2: #08111a;
  --fondo-3: #0f1c29;
  --panel:   #0b1622;
  --borde:   #17283a;
  --borde-2: #23394f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marca-claro:#4fc3f7; --fondo-2:#08111a; --fondo-3:#0f1c29;
    --panel:#0b1622; --borde:#17283a; --borde-2:#23394f;
  }
}

/* ---------- portada partida ---------- */
.hero{display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
.hero__puntos{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.7rem}
.hero__punto{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--texto-2)}
.hero__punto svg{flex:none;color:#1f8a4c}

/* ---------- las dos versiones, cara a cara ---------- */
.versiones{display:grid;gap:clamp(1.1rem,2.4vw,1.9rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.version{
  position:relative;display:flex;flex-direction:column;gap:1.1rem;
  padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-xl);
  background:var(--panel);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  overflow:hidden;isolation:isolate;
  transition:transform var(--v-2) var(--sal), box-shadow var(--v-2) var(--sal), border-color var(--v-2) var(--sal);
}
.version::before{ /* franja de color arriba */
  content:"";position:absolute;inset:0 0 auto;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--v-color,var(--marca)),var(--acento));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--sal);
}
.version.visto::before,.version:hover::before{transform:scaleX(1)}
.version::after{ /* halo de fondo */
  content:"";position:absolute;z-index:-1;width:320px;height:320px;border-radius:50%;
  top:-150px;right:-130px;filter:blur(60px);opacity:.16;
  background:radial-gradient(circle,var(--v-color,var(--marca)),transparent 70%);
  transition:opacity var(--v-3) var(--sal), transform var(--v-3) var(--sal);
}
.version:hover{transform:translateY(-6px);box-shadow:var(--sombra-3);border-color:var(--v-color,var(--marca))}
.version:hover::after{opacity:.3;transform:scale(1.18)}
.version__cabeza{display:flex;align-items:flex-start;gap:1rem}
.version__sigla{
  flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--v-color,var(--marca)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--v-color,var(--marca)) 22%,transparent);
  color:var(--v-color,var(--marca));
  transition:transform var(--v-2) var(--muelle)}
.version:hover .version__sigla{transform:scale(1.07) rotate(-5deg)}
.version__tit{font-size:var(--t-xl);letter-spacing:-.03em;line-height:1.12}
.version__para{font-size:var(--t-sm);color:var(--texto-3);margin-top:.2rem}
.version__lista{display:flex;flex-direction:column;gap:.68rem;margin-block:.3rem}
.version__lista li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-sm);color:var(--texto-2)}
.version__lista svg{flex:none;margin-top:.28em;color:var(--v-color,var(--marca))}
.version__pie{margin-top:auto;padding-top:.6rem}

/* ---------- bloque partido texto | visual ---------- */
.partida{display:grid;gap:clamp(2rem,5vw,4.2rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.partida--invertida > *:first-child{order:2}
@media (max-width:860px){.partida--invertida > *:first-child{order:0}}
.lista-check{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem}
.lista-check li{display:flex;gap:.72rem;align-items:flex-start;color:var(--texto-2);font-size:var(--t-sm)}
.lista-check svg{flex:none;margin-top:.24em;color:var(--marca)}
.lista-check b{color:var(--texto);font-weight:650}

/* ---------- maqueta de pantalla ---------- */
.maqueta{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--panel);border:1px solid var(--borde);box-shadow:var(--sombra-3);
}
.maqueta__barra{display:flex;align-items:center;gap:.42rem;padding:.72rem .9rem;
  background:var(--fondo-3);border-bottom:1px solid var(--borde)}
.maqueta__pt{width:9px;height:9px;border-radius:50%;background:var(--borde-2)}
.maqueta__pt:nth-child(1){background:#ff5f57}
.maqueta__pt:nth-child(2){background:#febc2e}
.maqueta__pt:nth-child(3){background:#28c840}
.maqueta__url{margin-left:.7rem;font-family:var(--mono);font-size:11px;color:var(--texto-3);
  background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r-full);padding:.18rem .7rem}
.maqueta__cuerpo{padding:clamp(.9rem,2vw,1.3rem);display:flex;flex-direction:column;gap:.75rem}
.maqueta--3d{transform:perspective(1500px) rotateY(-5deg) rotateX(2.5deg);transform-origin:right center;
  transition:transform var(--v-3) var(--sal)}
.maqueta--3d:hover{transform:perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-5px)}
@media (max-width:980px){.maqueta--3d{transform:none}.maqueta--3d:hover{transform:translateY(-4px)}}

/* filas de la maqueta */
.mq-fila{display:flex;align-items:center;gap:.7rem;padding:.62rem .78rem;border-radius:var(--r-sm);
  background:var(--fondo-2);border:1px solid var(--borde)}
.mq-fila__ico{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--marca-06);color:var(--marca)}
.mq-fila__txt{flex:1;min-width:0}
.mq-fila__t{display:block;font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-fila__s{display:block;font-size:var(--t-xs);color:var(--texto-3)}
.mq-eti{flex:none;font-family:var(--mono);font-size:10px;font-weight:500;padding:.2rem .55rem;
  border-radius:var(--r-full);background:var(--acento-10);color:var(--acento);
  border:1px solid var(--acento-24)}
.mq-eti--ok{background:rgba(31,138,76,.12);color:#1f8a4c;border-color:rgba(31,138,76,.28)}
.mq-eti--info{background:var(--marca-06);color:var(--marca);border-color:var(--marca-12)}

/* barra de progreso dentro de la maqueta */
.mq-barra{height:6px;border-radius:99px;background:var(--fondo-3);overflow:hidden}
.mq-barra span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--marca),var(--marca-claro));
  width:0;transition:width 1.4s var(--sal) .3s}
.visto .mq-barra span{width:var(--pct,68%)}

/* ---------- modulos en rejilla compacta ---------- */
.mods{display:grid;gap:.72rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.mod{
  display:flex;align-items:center;gap:.68rem;padding:.78rem .9rem;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--borde);font-size:var(--t-sm);font-weight:550;
  transition:transform var(--v-1) var(--sal), border-color var(--v-1) var(--sal), background var(--v-1) var(--sal);
}
.mod:hover{transform:translateX(3px);border-color:var(--marca);background:var(--marca-06)}
.mod svg{flex:none;color:var(--marca)}

/* ---------- cierre con fondo de marca ---------- */
.cierre{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(2.4rem,6vw,4.6rem) clamp(1.4rem,4vw,3.4rem);
  background:linear-gradient(135deg,var(--marca) 0%,var(--marca-oscuro) 62%,#001b2e 100%);
  color:#fff;text-align:center;isolation:isolate;
}
.cierre::before{
  content:"";position:absolute;z-index:-1;width:640px;height:640px;border-radius:50%;
  top:-320px;right:-180px;filter:blur(90px);opacity:.42;
  background:radial-gradient(circle,var(--acento),transparent 68%);
  animation:flota-2 22s ease-in-out infinite;
}
.cierre::after{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.13;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:30px 30px;
}
.cierre h2{color:#fff}
.cierre p{color:#c9d2f2}
.cierre .btn--marco{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4)}
.cierre .btn--marco:hover{--btn-bd:#fff;background:rgba(255,255,255,.12);--btn-fg:#fff}

/* ---------- comparativa ---------- */
.tabla-env{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--borde);background:var(--panel)}
.tabla{width:100%;border-collapse:collapse;min-width:560px;font-size:var(--t-sm)}
.tabla th,.tabla td{padding:.92rem 1.1rem;text-align:left;border-bottom:1px solid var(--borde)}
.tabla thead th{background:var(--fondo-3);font-weight:650;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.07em;color:var(--texto-3)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background var(--v-1) var(--sal)}
.tabla tbody tr:hover{background:var(--marca-06)}
.tabla td:first-child{font-weight:600;color:var(--texto)}
.si{color:#1f8a4c;font-weight:650}
.no{color:var(--texto-3)}

/* ---------- nota al pie de seccion ---------- */
.nota{font-size:var(--t-xs);color:var(--texto-3);border-left:2px solid var(--borde-2);
  padding-left:.9rem;max-width:66ch}

/* ============================================================
   ANADIDO 2026-09-10 - fichas de producto (colegio / instituto / crm-yaru).
   Solo piezas que no existian. No se redefine nada de lo anterior.
   ============================================================ */

/* ---------- limite honesto: acompana a cada promesa fuerte ---------- */
.limite{display:flex;gap:.8rem;align-items:flex-start;
  padding:.95rem 1.15rem;border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--texto-2);
  background:var(--acento-10);border:1px solid var(--acento-24)}
.limite svg{flex:none;margin-top:.18em;color:var(--acento)}
.limite b{color:var(--texto);font-weight:650}

/* ---------- maqueta con forma de movil (pantallas de las apps) ---------- */
.maqueta--movil{max-width:300px;margin-inline:auto;border-radius:34px;padding:9px;
  background:var(--fondo-3);border-color:var(--borde-2)}
.maqueta--movil .maqueta__cuerpo{background:var(--panel);border:1px solid var(--borde);
  border-radius:26px;padding:.9rem .8rem 1.1rem}
.maqueta__muesca{width:88px;height:16px;border-radius:0 0 11px 11px;background:var(--fondo-3);
  margin:-.9rem auto .55rem}
.maqueta__titulo{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-size:var(--t-sm);font-weight:650;letter-spacing:-.02em;padding:0 .15rem .15rem}
.maqueta__titulo svg{color:var(--texto-3)}

/* ---------- burbujas de conversacion dentro de una maqueta ---------- */
.mq-burbuja{max-width:88%;padding:.6rem .8rem;border-radius:14px;font-size:var(--t-xs);
  line-height:1.5;background:var(--fondo-2);border:1px solid var(--borde);color:var(--texto-2)}
.mq-burbuja--mia{margin-left:auto;background:var(--marca-06);border-color:var(--marca-12);color:var(--texto)}
.mq-burbuja b{display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);margin-bottom:.22rem}

/* ---------- precio de un plan (reutiliza .version) ---------- */
.precio{font-size:var(--t-2xl);font-weight:750;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
.precio small{font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--texto-3)}
.version--destacada{border-color:var(--acento);box-shadow:var(--sombra-2)}
/* cuatro planes caben en una fila: columnas mas estrechas que las de .versiones */
.versiones--planes{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}

/* ---------- pestanas: en pantalla estrecha se apilan, no desbordan ---------- */
@media (max-width:560px){
  .pest{display:flex;flex-wrap:wrap;width:100%;border-radius:var(--r-md)}
  .pest__btn{flex:1 1 100%;text-align:center}
}

/* ============================================================
   ANADIDO 2026-09-10 para index.html: las dos unicas piezas que
   faltaban en el sistema - la cabecera de seccion (eyebrow + h2 +
   parrafo) y la banda que envuelve a la cinta que corre.
   ============================================================ */
.cab{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
  max-width:var(--ancho-txt);margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.cab--centro{align-items:center;text-align:center;margin-inline:auto}
.cinta-banda{padding-block:clamp(1.1rem,3vw,1.7rem);
  border-block:1px solid var(--borde);background:var(--fondo-2)}

/* ============================================================
   ANADIDO 2026-09-10 - paginas legales (privacidad.html / terminos.html).
   El nucleo quita margenes a <p> y vinetas a <ul> porque la web es de
   bloques; un documento largo si los necesita. Todo cuelga de .legal,
   asi que ninguna otra pagina se ve afectada.
   ============================================================ */
.legal{max-width:760px}
/* el enlace usa el azul fuerte en claro y el claro en oscuro: al reves no contrasta */
.legal{--legal-enlace:var(--marca)}
:root[data-tema="oscuro"] .legal{--legal-enlace:var(--marca-claro)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .legal{--legal-enlace:var(--marca-claro)}
}

.legal__fecha{margin-top:1.1rem;font-family:var(--mono);font-size:var(--t-xs);color:var(--texto-3)}

/* indice de apartados */
.legal__indice{margin-top:2.4rem;padding:1.25rem 1.5rem;background:var(--fondo-2);
  border:1px solid var(--borde);border-radius:var(--r-md)}
.legal__indice h2{margin-bottom:.9rem;font-family:var(--mono);font-size:var(--t-xs);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.legal__indice ol{counter-reset:ind;display:grid;gap:.5rem}
@media (min-width:620px){.legal__indice ol{grid-template-columns:1fr 1fr;gap:.5rem 1.8rem}}
.legal__indice li{counter-increment:ind;font-size:var(--t-sm);line-height:1.45}
.legal__indice li::before{content:counter(ind) ". ";font-family:var(--mono);color:var(--texto-3)}
.legal__indice a{color:var(--texto-2);border-bottom:1px solid transparent;
  transition:color var(--v-1) var(--sal),border-color var(--v-1) var(--sal)}
.legal__indice a:hover{color:var(--legal-enlace);border-bottom-color:currentColor}

/* cuerpo del documento: los apartados se numeran solos */
.legal__cuerpo{counter-reset:ap}
.legal__cuerpo h2{counter-increment:ap;margin:3rem 0 1rem;font-size:var(--t-xl);line-height:1.2}
.legal__cuerpo h2::before{content:counter(ap) ". ";color:var(--legal-enlace);
  font-family:var(--mono);font-weight:500}
.legal__cuerpo h3{margin:1.9rem 0 .7rem;font-size:var(--t-lg)}
.legal__cuerpo p{margin:0 0 1rem;color:var(--texto-2)}
.legal__cuerpo ul{margin:0 0 1.2rem;padding-left:1.3rem;list-style:disc;color:var(--texto-2)}
.legal__cuerpo li{margin-bottom:.5rem}
.legal__cuerpo li::marker{color:var(--borde-2)}
.legal__cuerpo strong{color:var(--texto);font-weight:600}
.legal__cuerpo a{color:var(--legal-enlace);border-bottom:1px solid var(--marca-20)}
.legal__cuerpo a:hover{border-bottom-color:currentColor}
.legal__cuerpo hr{margin:2.6rem 0;height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--borde-2),transparent)}

/* ============================================================
   ANADIDO 2026-09-10 - calendario del ano escolar (#calendario, colegio.html).
   El nucleo no trae ninguna fila con rotulo de mes a la izquierda: son
   veinte lineas, no un componente nuevo. Todo cuelga de .hitos.
   ============================================================ */
.hitos{display:grid;gap:.7rem;--hito-ico:var(--marca)}
/* en oscuro el azul base #005088 no despega del panel: se usa el claro */
:root[data-tema="oscuro"] .hitos{--hito-ico:var(--marca-claro)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .hitos{--hito-ico:var(--marca-claro)}
}
.hito{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1rem;align-items:start;
  padding:1.15rem 1.25rem;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  transition:border-color var(--v-2) var(--sal), transform var(--v-2) var(--sal)}
.hito:hover{border-color:var(--borde-2);transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.hito:hover{transform:none}}
.hito__mes{grid-column:1/-1;
  font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto-2)}
.hito__ico{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--marca-06);border:1px solid var(--marca-12);color:var(--hito-ico)}
.hito__t{font-size:var(--t-md);font-weight:650;letter-spacing:-.02em}
.hito__p{margin-top:.35rem;font-size:var(--t-sm);color:var(--texto-2);line-height:1.62}
.hito__p b{color:var(--texto);font-weight:650}
@media (min-width:820px){
  .hito{grid-template-columns:10.5rem 38px 1fr;gap:0 1.35rem;align-items:center;
    padding:1.3rem 1.6rem}
  .hito__mes{grid-column:1}
}

/* ============================================================
   ANADIDO 2026-09-10 - el menu de index.html paso a 9 enlaces
   (#implantacion y #soporte). En escritorio caben apretando el
   relleno; por debajo de 921px ya es hamburguesa y no le afecta.
   ============================================================ */
@media (min-width:1081px){
  .nav__enlaces{gap:0}
  .nav__enlace{padding-inline:.58rem}
}