/* Contacto: una grilla de celdas y poco mas.

   Toda la pagina es la misma pieza repetida: la celda-canal (.ctcanal), todas
   del mismo tamaño, bajo un solo titulo. Antes habia dos bloques de distinto
   tamaño (los canales grandes arriba, las redes chicas abajo) y eso hacia que
   la pagina se leyera como dos listas separadas. Escribir, llamar y seguirnos
   son lo mismo desde el lado del que entra: una via para llegar a LASER76.

   Lo unico que se distingue es WhatsApp, que va en negro: no hace falta un
   tamaño distinto para decir cual es el canal principal, alcanza el contraste.

   La cinta de arriba (.cthero) es angosta a proposito: en la primera version
   ocupaba media pantalla y empujaba los botones abajo del pliegue. El que
   entra a Contacto ya decidio escribir; no hay que convencerlo de nuevo.

   Reusa las variables y clases del sitio (--ink, --red, .wrap, .eyebrow,
   .display, .btn, section.blk, h2.sec, p.secsub). */

/* ---- 1. La cinta ---- */
.cthero{background:var(--ink);color:#fff;padding:30px 0 32px;
border-bottom:1px solid #000}
.cthero .wrap{max-width:760px;margin:0}
.cthero .eyebrow{color:var(--red)}
.cthero h1{font-size:30px;line-height:1.12;margin:8px 0 8px}
.cthero p{font-size:15px;line-height:1.55;color:#B4B4BA;max-width:58ch}

/* Las secciones de celdas respiran menos que un bloque de contenido: son
   botones, no lectura. */
.ctblk{padding:34px 0}
.ctblk h2.sec{font-size:24px;margin-bottom:6px}
.ctblk p.secsub{margin-bottom:4px}

/* ---- 2. La celda ----
   Cuatro por fila. Toda la tarjeta es un enlace: se levanta apenas al pasar el
   mouse y el borde toma el negro de la marca. El dato no va en Days One porque
   es un dato (un numero, un usuario), no un titulo. */
.ctcanales{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.ctcanal{display:flex;flex-direction:column;align-items:flex-start;
background:var(--paper);border:1px solid var(--line);border-radius:12px;
padding:20px 18px 18px;color:var(--ink);
transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.ctcanal:hover{transform:translateY(-3px);border-color:var(--ink);
box-shadow:0 18px 40px rgba(17,17,19,.12)}
.ctcanal .i{width:42px;height:42px;border-radius:11px;background:var(--surf2);
color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ctcanal .i svg{width:21px;height:21px}
.ctcanal .et{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mut2)}
.ctcanal b{font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;font-weight:600;
line-height:1.35;margin:5px 0 0;word-break:break-word}
.ctcanal .cta{margin-top:12px;font-size:13px;font-weight:600;color:var(--red);
display:inline-flex;align-items:center;gap:6px}
.ctcanal .cta em{font-style:normal;transition:transform .18s}
.ctcanal:hover .cta em{transform:translateX(3px)}

/* La destacada (WhatsApp): negra de entrada, para que sea la primera opcion
   que el ojo elige sin tener que decirlo con palabras. */
.ctcanal.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ctcanal.on .et{color:#8A8A92}
.ctcanal.on .cta{color:#fff}
.ctcanal.on:hover{background:#000;box-shadow:0 18px 44px rgba(0,0,0,.4)}

/* ---- Los colores de cada logo ----
   Cada red con el color con el que la gente la reconoce: el cuadradito toma la
   marca y el logo va en blanco. El resto queda gris. */
.ctcanal .i.wa{background:#25D366;color:#0B0B0C}
.ctcanal .i.ig{background:linear-gradient(45deg,#F9CE34,#EE2A7B 52%,#6228D7);color:#fff}
.ctcanal .i.fb{background:#1877F2;color:#fff}
.ctcanal .i.yt{background:#FF0000;color:#fff}
.ctcanal .i.tk{background:#0B0B0C;color:#fff}
.ctcanal .i.li{background:#0A66C2;color:#fff}

/* ---- 3. La celda ancha del showroom ----
   Apaisada y no en columna: no es una opcion mas de la grilla, es el desvio a
   otra pantalla. */
.ctshow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--red);
border-radius:0 12px 12px 0;padding:20px 24px;color:var(--ink);
transition:border-color .18s,background .18s}
.ctshow:hover{background:var(--surf2)}
.ctshow .i{width:42px;height:42px;flex:none;border-radius:11px;background:var(--paper);
border:1px solid var(--line);color:var(--red);
display:flex;align-items:center;justify-content:center}
.ctshow .i svg{width:21px;height:21px}
.ctshow .tx{flex:1;min-width:220px}
.ctshow .tx b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.ctshow .tx span{display:block;font-size:14px;color:var(--mut);line-height:1.5;margin-top:3px}
.ctshow .cta{font-size:13.5px;font-weight:600;color:var(--red);
display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ctshow .cta em{font-style:normal;transition:transform .18s}
.ctshow:hover .cta em{transform:translateX(3px)}

@media(max-width:1000px){
.cthero{padding:26px 0 28px}
.cthero h1{font-size:26px}
.ctcanales{grid-template-columns:repeat(3,1fr)}
.ctblk h2.sec{font-size:21px}
}
@media(max-width:640px){
.cthero h1{font-size:23px}
.cthero p{font-size:14.5px}
.ctcanales{grid-template-columns:1fr 1fr;gap:12px}
.ctcanal{padding:16px 14px 15px}
.ctshow{padding:18px 18px;gap:14px}
.ctshow .cta{width:100%}
}