/* Ajustes que pisan a comprar.css, mas los estilos de las dos secciones nuevas
   de la home (reventa y Parametros 76). Vive aparte para no reescribir
   archivos grandes por un par de bloques, y para que quede en un solo lugar
   que se cambio y por que. */

/* ---------- LA LINEA QUE SEPARA NEGRO DE NEGRO ----------

   La barra del menu es negra y varias cintas del sitio tambien: cuando una
   cinta oscura arranca pegada a la barra, las dos se funden en un solo bloque
   y no se entiende donde termina el menu y donde empieza la pagina. Pasaba en
   Contacto ("Hablemos."), en Quienes somos y en Como comprar.

   La solucion es una linea de un pixel, casi transparente: no se lee como un
   borde, se lee como que hay dos cosas distintas. Es la misma separacion que
   ya tenia la barra de rubros de Aplicaciones y que ahi funciona bien.

   Va en un solo lugar y para todas las cintas oscuras del sitio, asi cualquier
   pantalla nueva que use estas clases la hereda sin acordarse de ponerla. */
.cbhero,.cthero,.donhero,.cbclub,.aplibarra{
border-top:1px solid rgba(255,255,255,.14)}
/* La de rubros va debajo de una cinta negra que ya tiene la suya arriba: con
   otra linea al tope quedarian dos rayas juntas. */
.aplihero + .aplibarra{border-top:0}

/* ---------- encabezado de Como comprar: una franja fina ----------

   Cuando esta prendido (hoy solo en /entrega) va lo mas bajo posible: en esas
   paginas lo que importa esta abajo, y una franja alta lo empuja fuera de la
   primera pantalla.

   Se achica todo junto: el aire de arriba y abajo, el titulo, la bajada y el
   simbolo decorativo del fondo, que a 290px pedia una franja alta para no
   quedar cortado. */
.cbhero .wrap{padding-top:22px;padding-bottom:24px}
.cbhero h1{font-size:clamp(23px,2.4vw,31px);line-height:1.14;
margin:7px 0 8px;max-width:26ch}
.cbhero p{font-size:14.5px;line-height:1.55;max-width:66ch}
.cbhero .eyebrow{font-size:11px}
.cbmarca{font-size:clamp(90px,11vw,150px)}
/* Con la franja mas baja, el resplandor de la esquina tambien se achica: si no,
   se desborda y se come el borde de abajo. */
.cbhero:after{right:-110px;top:-190px;width:340px;height:340px}

/* Sin encabezado (clave del titulo vacia) la pantalla arranca directo con el
   contenido, y necesita su propio aire arriba: si no, la imagen queda pegada
   a la barra negra del menu. */
.blk.sintapa{padding-top:30px}

/* ---------- tope de ancho para las piezas de Como comprar ----------

   Las imagenes de "formas de pago" y "sobre los precios" van fuera de la
   columna de lectura para que se les lean los rotulos, pero SIN tope se
   estiraban a lo ancho de toda la pantalla: en un monitor grande quedaban de
   casi mil pixeles de alto y no entraban enteras.

   980px es el punto donde se leen bien los textos chicos de adentro sin que la
   pieza se coma la pantalla. Si algun dia hay que agrandarlas o achicarlas, se
   cambia este numero y vale para las dos.

   El tope va en la figura y no en el contenedor a proposito: asi funciona
   aunque el ancho lo defina otra regla, y la imagen queda centrada sola. */
.cbimg{max-width:980px;margin-left:auto;margin-right:auto}

/* Aire arriba SOLO cuando la pieza viene despues de un bloque de texto.
   La primera imagen de la pagina no lo necesita (ya tiene el padding de la
   seccion), pero la de "sobre los precios" cae justo debajo del parrafo de
   tarjeta de credito y quedaban pegados, como si la imagen fuera parte de ese
   texto. El selector "+" hace la diferencia sola, sin tener que marcarlas. */
.cbcuerpo + .cbimgwrap{margin-top:46px}

/* ---------- excepcion: la pieza de reventa, en la home ----------

   En "Como comprar" la pieza convive con texto de 760px, asi que un tope mas
   angosto la deja proporcionada. En la home no: arriba y abajo tiene bloques
   que ocupan el ancho completo del sitio, y una imagen mas angosta en el medio
   se ve como si estuviera mal puesta. Aca manda alinearse con los vecinos.

   Tampoco lleva el margen de abajo: la seccion ya trae su propio padding y,
   sumados, dejaban un hueco de mas contra el bloque siguiente. */
#reventa .cbimg{max-width:none}
#reventa .cbimgwrap{margin-bottom:0}

/* ---------- reventa: el traspaso en tres pasos ----------
   Esto se usa solo cuando la seccion se arma con texto, es decir cuando la
   clave reventa_img esta vacia. Tres tarjetas encadenadas por una flecha: sin
   la flecha son tres datos sueltos; con ella se lee como una linea de tiempo,
   que es justamente el argumento (empieza cuando comprás y sigue despues de
   que la maquina deja de ser tuya).

   La flecha se dibuja con dos bordes girados 45 grados, no con un caracter:
   asi acompaña el color del sitio y no depende de la tipografia. */
.rvflujo{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:30px}
.rvp{position:relative;background:var(--paper);border:1px solid var(--line);
border-radius:12px;padding:20px 20px 22px}
.rvp .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;
color:var(--red);display:block;margin-bottom:9px}
.rvp b{display:block;font-size:17px;font-weight:600;line-height:1.28;margin-bottom:6px}
.rvp .d{font-size:13.5px;color:var(--mut);line-height:1.55}
.rvp:not(:last-child):after{content:"";position:absolute;
right:-28px;top:50%;width:11px;height:11px;
border-top:2px solid var(--line2);border-right:2px solid var(--line2);
transform:translateY(-50%) rotate(45deg)}

/* La comparacion de abajo es el componente .vs de sitio.css, sin tocar. Solo
   se le da aire para separarla del flujo de arriba. */
#reventa .vs{margin-top:38px}

/* ---------- Parametros 76, en la home ----------
   La captura del portal a todo el ancho del contenido. Es una pantalla real
   con texto chico adentro, asi que necesita ancho: en media columna no se
   leeria ni el nombre de un material.

   Borde y esquinas redondeadas para que se lea como "esto es una pantalla" y
   no como una foto suelta. Fondo claro mientras carga, del mismo tono que la
   captura, para que no aparezca un rectangulo de otro color. */
.pmshot{margin-top:26px;border:1px solid var(--line);border-radius:14px;
overflow:hidden;background:var(--surf2);line-height:0;
box-shadow:0 18px 40px rgba(17,17,19,.10)}
.pmshot img{width:100%;height:auto;display:block}

/* Las tres razones, abajo de la captura. Mismo molde que las de Donde estamos:
   numero rojo sobre linea negra, sin caja. */
.pmtres{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:32px}
.pmt .n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
color:var(--red);display:block;padding-bottom:9px;margin-bottom:11px;
border-bottom:2px solid var(--ink)}
.pmt b{display:block;font-size:16.5px;font-weight:600;line-height:1.3;margin-bottom:5px}
.pmt .d{font-size:14px;color:var(--mut);line-height:1.55}

@media(max-width:900px){
.pmtres{grid-template-columns:1fr;gap:22px}
/* En una columna la flecha pasa de la derecha a abajo: gira 135 grados y
   apunta hacia el paso siguiente. */
.rvflujo{grid-template-columns:1fr;gap:34px}
.rvp:not(:last-child):after{right:auto;left:50%;top:auto;bottom:-23px;
transform:translateX(-50%) rotate(135deg)}
}
@media(max-width:640px){
.cbhero .wrap{padding-top:18px;padding-bottom:20px}
.cbmarca{font-size:90px}
.blk.sintapa{padding-top:22px}
.cbcuerpo + .cbimgwrap{margin-top:34px}
.pmshot{border-radius:10px;margin-top:20px}
}