/* Cómo comprar: financiacion y pagos, entrega e instalacion.

   La primera version era una columna de texto con vinetas. Se leia bien pero
   no se miraba: en una pagina que tiene que dar confianza antes de una compra
   de millones, el diseno es parte del argumento. Ahora hay encabezado oscuro
   con la marca al fondo, iconos por fila, pasos unidos por una linea y
   grillas de tarjetas.

   Las animaciones son de entrada, cortas y escalonadas. Nada se mueve al
   pasar el mouse salvo lo que se puede tocar. Con prefers-reduced-motion todo
   queda quieto: sitio.css ya apaga transiciones y animaciones globalmente. */

/* ---------- encabezado ---------- */

.cbhero{position:relative;overflow:hidden;background:var(--ink);color:#fff;
border-bottom:1px solid #000}
/* Trama de lineas finas en diagonal: da textura sin competir con el texto. */
.cbhero:before{content:"";position:absolute;inset:0;opacity:.5;
background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px)}
/* Y un resplandor rojo en la esquina, del lado contrario al texto. */
.cbhero:after{content:"";position:absolute;right:-140px;top:-160px;
width:460px;height:460px;border-radius:50%;
background:radial-gradient(circle,rgba(217,28,38,.30),transparent 68%)}

/* El caracter gigante del fondo ($ o 76). Es decoracion, no contenido: va con
   aria-hidden y no se puede seleccionar. */
.cbmarca{position:absolute;right:2%;top:50%;transform:translateY(-50%);
font-family:"Days One",sans-serif;font-size:clamp(150px,22vw,290px);line-height:1;
color:rgba(255,255,255,.045);user-select:none;pointer-events:none}

.cbhero .wrap{position:relative;z-index:1;padding-top:48px;padding-bottom:44px}
.cbhero .eyebrow{color:var(--red)}
.cbhero h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;margin:12px 0 14px;
max-width:19ch}
.cbhero p{font-size:16.5px;line-height:1.6;color:#B4B4BA;max-width:58ch}

/* Los tres datos rapidos. Son el resumen de la pagina en una linea. */
.cbchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.cbchips span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
border:1px solid #3A3A42;border-radius:999px;padding:7px 14px;color:#D8D8DE;
background:rgba(255,255,255,.03)}

/* ---------- cuerpo ---------- */

/* El ancho de lectura manda: mas de 70 caracteres por renglon cansa. */
.cbcuerpo{max-width:760px}

.cbblq{padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
.cbblq:first-child{padding-top:0;margin-top:0;border-top:0}
.cbblq h2{font-family:"Days One",sans-serif;font-size:21px;line-height:1.25}
.cbblq p{font-size:15px;line-height:1.65;color:var(--mut);margin-top:10px;max-width:64ch}

/* El bloque que es el argumento (instalacion incluida) va con fondo y una
   barra roja al costado: sin esto queda como un dato mas de la lista. */
.cbblq.marcado{background:var(--surf);border:1px solid var(--line);
border-left:3px solid var(--red);border-radius:0 14px 14px 0;
padding:26px 26px 28px}

/* ---------- la imagen de formas de pago ----------
   Va en su propio .wrap, fuera de la columna de lectura: toma los 1132px del
   contenido del sitio en vez de los 760 del texto. Una pieza apaisada metida
   en la columna de lectura queda diminuta y no se le lee ni un rotulo.

   El alto se calcula solo (height:auto) porque la imagen la elige Ariel desde
   Supabase y puede tener cualquier proporcion: fijarle una aca la recortaria.
   El fondo claro es el de la pieza actual, para que mientras carga no se vea
   un rectangulo de otro color. */
.cbimgwrap{margin-bottom:30px}
.cbimg{border-radius:16px;overflow:hidden;background:var(--surf);
border:1px solid var(--line);line-height:0}
.cbimg img{width:100%;height:auto;display:block}

/* La tira de medios de pago debajo de la imagen. Chips chicos, en una fila que
   se acomoda sola: son un dato de apoyo, no el titulo del bloque. */
.cbtira{display:flex;flex-wrap:wrap;gap:8px}
.cbtira span{display:inline-flex;align-items:center;gap:8px;
font-size:13.5px;color:var(--mut);
background:var(--surf);border:1px solid var(--line);border-radius:999px;
padding:7px 14px 7px 11px}
.cbtira svg{width:15px;height:15px;color:var(--red);flex:none}

/* ---------- las dos vias de pago (sin imagen cargada) ---------- */

.cbvias{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cbvia{background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:24px 22px 26px;position:relative;overflow:hidden}
/* La destacada es la financiacion propia: es el argumento, no una opcion mas. */
.cbvia.on{background:var(--ink);color:#fff;border-color:var(--ink);
box-shadow:0 22px 46px rgba(17,17,19,.18)}
.cbvia.on:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--red)}
.cbvia .et{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;
letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);margin-bottom:10px}
.cbvia.on .et{color:var(--red)}
.cbvia h2{font-family:"Days One",sans-serif;font-size:19px;line-height:1.22}
.cbvia p{font-size:14px;line-height:1.6;color:var(--mut);margin-top:9px}
.cbvia.on p{color:#B4B4BA}

/* ---------- lista con icono ---------- */

.cblista{list-style:none;margin-top:18px;display:grid;gap:14px}
.cblista li{display:flex;gap:12px;align-items:flex-start}
.cblista .ck{width:30px;height:30px;flex:none;border-radius:9px;
background:var(--surf2);color:var(--red);
display:flex;align-items:center;justify-content:center}
.cblista .ck svg{width:16px;height:16px}
.cbvia.on .cblista .ck{background:#26262B;color:#FF6B72}
.cblista b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.cblista span{display:block;font-size:13.5px;color:var(--mut);line-height:1.55;margin-top:3px}
.cbvia.on .cblista span{color:#9A9AA1}
.cblista.chica{gap:12px;margin-top:16px}
.cblista.chica .ck{width:26px;height:26px;border-radius:8px}
.cblista.chica .ck svg{width:14px;height:14px}
.cblista.chica b{font-size:14px}
.cblista.chica span{font-size:12.5px}

/* ---------- grilla de tarjetas ---------- */

.cbgrilla{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.cbg{background:var(--surf);border:1px solid var(--line);border-radius:12px;
padding:18px 18px 20px}
.cbg .i{display:flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:10px;background:var(--paper);
border:1px solid var(--line);color:var(--red);margin-bottom:12px}
.cbg .i svg{width:18px;height:18px}
.cbg b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.cbg .d{display:block;font-size:13px;color:var(--mut);line-height:1.55;margin-top:5px}

/* ---------- pasos unidos por una linea ---------- */

.cbpasos{list-style:none;margin-top:20px;display:grid;gap:0;position:relative}
.cbpasos li{display:flex;gap:15px;align-items:flex-start;
padding-bottom:20px;position:relative}
.cbpasos li:last-child{padding-bottom:0}
/* La linea que baja de un numero al siguiente. En el ultimo no se dibuja. */
.cbpasos li:not(:last-child):before{content:"";position:absolute;
left:14px;top:30px;bottom:0;width:1.5px;background:var(--line)}
.cbpasos .n{width:29px;height:29px;flex:none;border-radius:50%;
background:var(--red);color:#fff;position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500}
.cbpasos b{display:block;font-size:15px;font-weight:600;line-height:1.4;padding-top:4px}
.cbpasos span{display:block;font-size:13.5px;color:var(--mut);line-height:1.55;margin-top:4px}

/* ---------- el aviso de "hasta la puerta" ----------
   Amarillo y con marco: no es una advertencia legal escondida, es un dato que
   conviene que se lea ANTES de comprar y no el dia de la entrega. */
.cbaviso{display:flex;gap:15px;align-items:flex-start;margin-top:22px;
background:#FDF8EC;border:1px solid #E0CFA4;border-left:3px solid var(--warn);
border-radius:0 12px 12px 0;padding:19px 20px}
.cbaviso .i{width:26px;height:26px;flex:none;color:var(--warn);margin-top:1px}
.cbaviso .i svg{width:26px;height:26px;display:block}
.cbaviso b{display:block;font-size:15.5px;font-weight:600;color:#7A5410}
.cbaviso p{font-size:14px;line-height:1.6;color:#9A6B10;margin-top:6px}

/* ---------- pedir precio ---------- */

.cbcta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:38px;
background:var(--ink);color:#fff;border-radius:14px;padding:24px 26px;
position:relative;overflow:hidden}
.cbcta:before{content:"";position:absolute;left:-60px;bottom:-90px;
width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,rgba(217,28,38,.22),transparent 70%)}
.cbcta div{flex:1;min-width:240px;position:relative;z-index:1}
.cbcta b{display:block;font-family:"Days One",sans-serif;font-size:18px}
.cbcta span{display:block;font-size:14px;color:#B4B4BA;margin-top:6px}
.cbcta .btn{position:relative;z-index:1}

/* ---------- el remate: CLUB76 ----------
   A sangre completa y en negro, para que se lea como el paso siguiente y no
   como el ultimo parrafo de la pagina de entrega. */
.cbclub{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cbclub:before{content:"";position:absolute;inset:0;opacity:.5;
background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 1px,transparent 1px 13px)}
.cbclub .wrap{position:relative;z-index:1;padding-top:52px;padding-bottom:54px;max-width:860px}
.cbclub .eyebrow{color:var(--red)}
.cbclub h2{font-size:clamp(25px,3vw,34px);line-height:1.14;margin:12px 0 16px}
.cbclub p{font-size:15.5px;line-height:1.65;color:#B4B4BA;max-width:62ch}
.cbclub p+p{margin-top:12px}
.cbclub .cbgrilla{margin-top:28px}
.cbclub .cbg{background:#1B1C20;border-color:#2C2D33}
.cbclub .cbg .i{background:#26262B;border-color:#34353B;color:#FF6B72}
.cbclub .cbg b{color:#fff}
.cbclub .cbg .d{color:#9A9AA1}
.cbclub .btn{margin-top:30px}

/* ---------- entrada ----------
   Aparecen de abajo hacia arriba, escalonados. Es corto (.4s) y solo al
   entrar: una pagina que se mueve todo el tiempo cansa y da desconfianza,
   que es justo lo contrario de lo que busca esta seccion. */
@keyframes cbsube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cbhero .wrap>*,.cbvias,.cbimgwrap,.cbtira,.cbblq,.cbaviso,.cbcta,.cbclub .wrap>*{
animation:cbsube .42s cubic-bezier(.22,.7,.3,1) both}
.cbhero .wrap>*:nth-child(2){animation-delay:.05s}
.cbhero .wrap>*:nth-child(3){animation-delay:.1s}
.cbhero .wrap>*:nth-child(4){animation-delay:.15s}
.cbcuerpo>*:nth-child(2){animation-delay:.06s}
.cbcuerpo>*:nth-child(3){animation-delay:.12s}
.cbcuerpo>*:nth-child(n+4){animation-delay:.16s}
.cbclub .wrap>*:nth-child(2){animation-delay:.05s}
.cbclub .wrap>*:nth-child(3){animation-delay:.1s}
.cbclub .wrap>*:nth-child(n+4){animation-delay:.15s}

@media(max-width:900px){
.cbvias{grid-template-columns:1fr}
.cbgrilla{grid-template-columns:1fr}
}
@media(max-width:640px){
.cbhero .wrap{padding-top:34px;padding-bottom:32px}
.cbmarca{font-size:150px;right:-10px;opacity:.7}
.cbblq.marcado{padding:20px 18px 22px}
.cbimg{border-radius:12px}
.cbimgwrap{margin-bottom:24px}
.cbtira span{font-size:12.5px;padding:6px 12px 6px 10px}
.cbcta{padding:20px 18px}
.cbcta .btn{width:100%;justify-content:center;text-align:center}
.cbclub .wrap{padding-top:38px;padding-bottom:40px}
.cbclub .btn{width:100%;text-align:center}
}