/* Correo profesional v4 · sólo lo propio de esta página (lo común está en estilo-v4.css) */

/* Hero: el sobre de cristal a la derecha */
.co-hero .hero-ft{left:auto;right:0;width:68%;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.co-dir{margin-top:clamp(22px,3.4vh,34px);display:inline-flex;align-items:baseline;flex-wrap:wrap;max-width:100%;font:500 clamp(18px,2.3vw,30px)/1.2 var(--mono);letter-spacing:-.02em;padding:14px 18px;border:1px solid var(--linea-2);background:color-mix(in srgb,var(--fondo) 60%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-self:flex-start}
.co-usr{color:var(--tinta);min-width:1ch}
.co-cur{display:inline-block;width:.55em;height:1em;background:var(--tinta);margin:0 2px 0 1px;vertical-align:-.12em;animation:latido 1s steps(1) infinite}
.co-dom{color:var(--tinta-3)}

.co-arroba{font-family:var(--mono)!important}

/* Bandeja (ejemplo): sin borde doble, filas filtradas tachadas */
.co-bandeja .eventos{border:0}
.co-bandeja{background:var(--fondo-2)}
.co-ev tr.fuera td:nth-child(2),.co-ev tr.fuera td:nth-child(3){text-decoration:line-through;text-decoration-color:var(--tinta-3);color:var(--tinta-3)}
.co-ev tr.fuera .est{color:var(--tinta-3);border-style:dashed}

/* Clientes compatibles */
.co-clientes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.co-clientes .tec{aspect-ratio:auto;min-height:220px;padding:22px}
.co-clientes .tec svg{width:40px;height:40px}
.co-clientes .tec .n{font-size:clamp(20px,2vw,26px);letter-spacing:-.025em}
.co-proto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--linea);border-top:0}
.co-proto>div{padding:22px 24px;border-right:1px solid var(--linea);display:grid;gap:8px;align-content:start}
.co-proto>div:last-child{border-right:0}
.co-proto .k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.co-proto b{font:500 30px/1 var(--disp);letter-spacing:-.035em}
.co-proto>div>span:last-child{color:var(--tinta-2);font-size:14.5px}

/* Planes: tres columnas y medidor de espacio */
.co-planes{grid-template-columns:repeat(3,minmax(0,1fr))}
.co-planes .plan{padding:34px 30px}
.co-planes .desc{min-height:0}
.co-planes .num{font-size:clamp(52px,5vw,68px)}
.co-medidor{margin-top:22px;height:3px;background:color-mix(in srgb,currentColor 16%,transparent);position:relative;overflow:hidden}
.co-medidor i{position:absolute;inset:0 auto 0 0;width:var(--v);background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .3s}
.dentro .co-medidor i{transform:none}
.co-nota{margin-top:10px;font-size:14px;color:var(--tinta-3)}
.co-nota a{color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .co-clientes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .co-planes,.co-proto{grid-template-columns:1fr}
  .co-proto>div{border-right:0;border-bottom:1px solid var(--linea)}
  .co-proto>div:last-child{border-bottom:0}
  .co-hero .hero-ft{width:100%;object-position:62% 50%;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:560px){
  .co-clientes .tec{min-height:160px;padding:18px}
  .co-dir{padding:12px 14px}
  .co-ev table{min-width:0;font-size:12px}
  .co-ev th:nth-child(2),.co-ev td:nth-child(2),.co-ev th:nth-child(4),.co-ev td:nth-child(4){display:none}
  .co-ev th,.co-ev td{padding:12px 14px}
  .co-ev td:nth-child(3){white-space:normal}
}
@media (prefers-reduced-motion:reduce){.co-medidor i{transform:none}}

/* Cabecera de la bandeja de ejemplo: no tenía estilo (salía como texto suelto y partido en
   móvil). Es la misma cabecera mono que el registro de eventos del anti-DDoS de la home. */
.co-bandeja{border:1px solid var(--linea)}
.consola-cab{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--linea);font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.consola-cab .vivo b{color:var(--tinta);font-weight:500}
@media (max-width:560px){.consola-cab{padding:14px;flex-wrap:wrap;gap:8px 16px}}