/* ============================================================================ CHEKAR — PÁGINA DE SERVICIOS ============================================================================ Hoja aparte y no dentro de styles.css a propósito: acá vive lo que es solo de esta página, y se puede tocar sin riesgo de romper el resto. Se apoya en los tokens de styles.css. No define ni un color nuevo. ORGANIZACIÓN 1. Navegación 2. Portada y cabeceras de área 3. Lista editorial — la usa SOLO servicios-respaldo-a.html 4. Tarjetas — la estructura elegida 5. Cierre de página 6. Responsive ============================================================================ */ /* ============================================================================ 1. NAVEGACIÓN ============================================================================ En la home la barra flota sobre el hero oscuro. Acá la portada también es oscura, así que la barra sigue igual — pero el logo es el de tinta oscura porque esta página, apenas se scrollea, es crema. La variante existe para el resto de las páginas internas. ============================================================================ */ /* La portada de esta página también es oscura y la barra es absoluta —se va con el scroll—, así que el logo es el mismo archivo claro que usa el resto del sitio. Antes acá se invertía el logo oscuro con un filtro: mismo resultado, pero dos maneras distintas de resolver lo mismo. */ /* ============================================================================ 2. PORTADA Y CABECERAS DE ÁREA ============================================================================ */ .sv-portada{ position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); color: var(--tinta); padding: clamp(130px, 20vh, 190px) 0 clamp(50px, 8vh, 80px); } .sv-portada-fondo{ position: absolute; inset: 0; z-index: -1; background-color: var(--navy-900); } .sv-portada-fondo::before{ content: ""; position: absolute; inset: 0; background-image: image-set( url("assets/hero-fondo-1600.webp") type("image/webp"), url("assets/hero-fondo-1600.jpg") type("image/jpeg")); background-size: cover; background-position: center; opacity: 0.35; mix-blend-mode: luminosity; } /* La de 3000 px solo en pantallas grandes Y retina. Antes se elegía por densidad de píxeles: un celular 3x bajaba la de 3000 (131 KB) cuando la de 1600 le sobra. Con este criterio el celular baja 60 KB, y el precarga la que corresponde con el mismo media query, así arranca antes que el CSS. */ @media (min-width: 1200px) and (min-resolution: 1.5dppx){ .sv-portada-fondo::before{ background-image: image-set( url("assets/hero-fondo-3000.webp") type("image/webp"), url("assets/hero-fondo-3000.jpg") type("image/jpeg")); } } .sv-portada-fondo::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 40rem at 82% 10%, rgba(102,153,255,.26), transparent 60%), radial-gradient(42rem 32rem at 8% 96%, rgba(255,102,51,.14), transparent 62%), linear-gradient(168deg, rgba(3,15,44,0.8) 0%, rgba(5,25,72,0.6) 58%, rgba(3,15,44,0.95) 100%); } .sv-portada h1{ color: var(--tinta); max-width: 17ch; margin-bottom: 20px; } .sv-bajada{ max-width: 52ch; font-size: var(--t-1); color: var(--tinta-2); margin-bottom: 34px; } /* Enlaces contextuales dentro de la bajada (17/9/2026): sobre navy, en tinta clara con subrayado naranja, igual que los del cuerpo sobre crema. */ .sv-bajada a{ color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--naranja); } .sv-bajada a:hover{ text-decoration-color: var(--tinta); } /* El índice: cuatro accesos directos. Es lo primero que busca alguien que ya sabe qué necesita, y le ahorra scrollear toda la página. */ .sv-indice{ display: flex; flex-wrap: wrap; gap: 10px; } .sv-indice a{ display: inline-flex; align-items: baseline; gap: 9px; padding: 11px 18px; border: 1px solid var(--linea-osc); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: .9375rem; font-weight: 500; transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); } .sv-indice a span{ font-size: .75rem; font-weight: 700; color: var(--turquesa); font-variant-numeric: tabular-nums; } .sv-indice a:hover{ border-color: var(--tinta); background: rgba(245,245,245,.06); } /* --- Cabecera de cada área --- */ .sv-area{ background: var(--crema); padding: clamp(64px, 10vh, 108px) 0 clamp(50px, 8vh, 84px); /* Compensa la barra fija: sin esto, saltar a un ancla deja el título tapado */ /* El colchón del salto vive en html{scroll-padding-top} de styles.css: una sola fuente para todas las anclas del sitio. */ } .sv-area + .sv-area{ border-top: 1px solid var(--linea-cla); } .sv-area-cab{ margin-bottom: clamp(34px, 5vh, 54px); padding-bottom: 26px; border-bottom: 2px solid var(--navy); } /* UN SOLO SISTEMA DE NUMERACIÓN (17/9/2026). Antes convivían tres: acá una cifra gigante naranja, en la home un "01" chico turquesa y en Método "Fase 01" en versalitas. Una auditoría lo marcó y tenía razón: son la misma idea con tres caras. Ahora los tres son el mismo rótulo — chico, versalitas, con la palabra adelante — y solo cambia el color según el fondo. */ .sv-num{ display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-texto); /* 5.94:1 sobre crema */ margin-bottom: 10px; font-variant-numeric: tabular-nums; } .sv-area-cab h2{ margin: 0 0 4px; } .sv-sub{ margin: 0; font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(5,25,72,.72); } .sv-entrada{ margin: 18px 0 0; max-width: 58ch; font-family: var(--display); font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem); line-height: 1.35; color: rgba(5,25,72,.82); } /* --- Lo compartido dentro de cada servicio --- */ /* "QUÉ RECIBÍS" es la parte que vende. Estaba escrita igual que "DESDE 20 DÍAS HÁBILES", que es un dato administrativo — las dos en mayúsculas chiquitas y grises, indistinguibles. La lista de entregables es lo único concreto que se lleva el cliente: tiene que verse como el premio y no como una etiqueta de formulario. */ .sva-rotulo{ display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: rgba(102,204,204,.24); padding: 6px 12px 6px 10px; border-radius: 999px; margin-bottom: 14px; } /* El tilde de marca delante, dibujado con dos bordes */ .sva-rotulo::before{ content: ""; width: 10px; height: 5px; border-left: 2.5px solid var(--naranja); border-bottom: 2.5px solid var(--naranja); transform: rotate(-45deg); margin-top: -3px; } .sva-der ul, .svc-cuerpo ul{ list-style: none; margin: 0 0 16px; padding: 0; } .sva-der li, .svc-cuerpo li{ position: relative; padding-left: 22px; margin-bottom: 7px; font-size: .9375rem; line-height: 1.45; color: rgba(5,25,72,.78); } /* El tilde otra vez, ahora como viñeta. Es el mismo gesto de todo el sitio, dibujado con dos bordes en vez de con un ícono: pesa cero y hereda el color. */ .sva-der li::before::before, .svc-cuerpo li::before{ content: ""; position: absolute; left: 2px; top: .42em; width: 9px; height: 5px; border-left: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(-45deg); } /* El plazo es un dato administrativo y ahora se ve como tal: sin mayúsculas, sin negrita, chiquito. Antes competía con "qué recibís" por la misma atención y las dos perdían. */ .sva-plazo{ margin: 14px 0 4px; font-size: .8125rem; font-weight: 500; color: rgba(5,25,72,.72); } /* --- La lista del resto del área --- */ .sv-resto{ margin-top: clamp(34px, 5vh, 52px); } .sv-resto h3{ font-family: var(--texto); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(5,25,72,.62); margin: 0 0 16px; } .sv-resto ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); column-gap: 40px; } .sv-resto li{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 13px 0; border-top: 1px solid var(--linea-cla); } .sv-resto li b{ font-weight: 700; color: var(--navy); font-size: .9375rem; } .sv-resto li span{ font-size: .875rem; color: rgba(5,25,72,.74); } .sv-nota-area{ margin: 26px 0 0; padding: 16px 20px; border-left: 3px solid var(--naranja); background: var(--crema-2); border-radius: 0 var(--r-chico) var(--r-chico) 0; font-size: .9375rem; color: rgba(5,25,72,.78); max-width: 62ch; } /* ============================================================================ 3. LISTA EDITORIAL — solo para servicios-respaldo-a.html ============================================================================ Filas anchas separadas por una línea. A la izquierda qué es y qué problema resuelve; a la derecha qué te llevás. Se lee como un catálogo profesional y evita la grilla de tarjetas iguales, que es la señal más delatora de página hecha con IA. ============================================================================ */ .sva-fila{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vh, 40px) 0; border-top: 1px solid var(--linea-cla); } .sva-fila:last-child{ border-bottom: 1px solid var(--linea-cla); } .sva-izq h3{ margin: 0 0 12px; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); } /* El problema va antes que la descripción y en bastardilla: primero que el visitante se reconozca, después qué le vendemos. */ .sva-problema{ margin: 0 0 14px; font-family: var(--display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--naranja-texto); } .sva-que{ margin: 0; max-width: 52ch; color: rgba(5,25,72,.78); } .sva-der{ padding-top: 6px; } /* ============================================================================ 4. TARJETAS — la página en uso ============================================================================ */ .svc-grilla{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .svc-tarjeta{ display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linea-cla); border-radius: var(--r-panel); background: #FBFAF8; transition: box-shadow var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } .svc-tarjeta:hover{ border-color: rgba(5,25,72,.24); box-shadow: 0 20px 44px -24px rgba(3,15,44,.34); } .svc-foto{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--crema-2); filter: saturate(.62) contrast(1.03); } /* Carga diferida (17/9/2026): en vez de fondo CSS. Ver el comentario equivalente en styles.css (.bloque-foto). */ .svc-foto img{ display: block; width: 100%; height: 100%; object-fit: cover; } /* La tarjeta es una columna flexible y el cuerpo se estira: así el "Pedir presupuesto" de las tres cae a la misma altura aunque los textos midan distinto. Sin esto, cada botón queda donde termina su propio párrafo y la fila se ve desprolija. */ .svc-cuerpo{ padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; } .svc-cuerpo > .link{ margin-top: auto; align-self: flex-start; } .svc-cuerpo h3{ margin: 0 0 10px; font-size: 1.25rem; } /* Altura minima en lineas para que "QUÉ RECIBÍS" arranque a la misma altura en las tres tarjetas de una fila. Los textos miden distinto y sin esto cada tarjeta empieza su lista donde termina su propio parrafo: se leen como tres cajas sueltas en vez de una fila. Si un texto es mas largo, empuja igual; esto fija el piso, no el techo. */ .svc-problema{ min-height: calc(2 * 1.38em); margin: 0 0 12px; font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.38; color: var(--naranja-texto); } .svc-que{ min-height: calc(4 * 1.6em); margin: 0 0 18px; font-size: .9375rem; color: rgba(5,25,72,.78); } /* ============================================================================ 5. CIERRE DE PÁGINA ============================================================================ */ .sv-crm{ background: var(--crema); padding: 0 0 clamp(50px, 8vh, 80px); } .sv-crm .container{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 22px; border-top: 1px solid var(--linea-cla); border-bottom: 1px solid var(--linea-cla); } .sv-crm p{ margin: 0; color: rgba(5,25,72,.78); } /* El cierre vuelve a oscuro: es la otra rebanada del sándwich. */ /* ---------------------------------------------------------------------------- EL CIERRE, EN HORIZONTAL ---------------------------------------------------------------------------- Estaba apilado —título, párrafo, botones— y con ese padding la caja navy terminaba midiendo casi una pantalla entera de alto para decir tres cosas. Un cierre que ocupa más que una sección de contenido pesa más de lo que vale. En horizontal: a la izquierda lo que decimos, a la derecha lo que hay que hacer. La caja baja a la mitad de alto y el botón queda a la altura del ojo en vez de al final de una caída. ---------------------------------------------------------------------------- */ .sv-cierre{ background: var(--navy-800); /* un tono más claro que el pie, para que no se fundan */ color: var(--tinta); padding: clamp(48px, 8vh, 76px) 0; } .sv-cierre .container{ display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px){ .sv-cierre .container{ grid-template-columns: minmax(0, 1.35fr) auto; } .sv-cierre-acciones{ margin-top: 0; } } .sv-cierre h2{ color: var(--tinta); max-width: 22ch; margin-bottom: 12px; } .sv-cierre p{ max-width: 54ch; color: var(--tinta-2); margin-bottom: 0; } .sv-cierre-acciones{ display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; } .sv-cierre .link{ color: var(--tinta); } .sv-nota{ margin: 18px 0 0; font-size: .875rem; color: rgba(245,245,245,.55); } /* ============================================================================ 6. RESPONSIVE ============================================================================ */ @media (max-width: 900px){ .sva-fila{ grid-template-columns: 1fr; gap: 20px; } .sva-der{ padding-top: 0; } } @media (max-width: 620px){ .sv-resto ul{ grid-template-columns: 1fr; } } /* --- FOTOS DE LAS TARJETAS ------------------------------------------------ Generadas con tools/generar-imagen.ps1 y procesadas con tools/procesar-tarjetas.py. Para cambiar una: se genera el reemplazo con el mismo nombre en assets/originales/ y se vuelve a correr el procesador. Dos resoluciones por foto. En un monitor comun baja la de 600px; la de 1200 solo la piden las pantallas retina. ------------------------------------------------------------------------ */ /* ============================================================================ LA PRIMERA FICHA DE CADA ÁREA PESA MÁS ============================================================================ Las cuatro áreas presentaban sus tres servicios con el mismo molde: foto, título, problema, párrafo, "qué recibís", plazo, enlace. Doce tarjetas idénticas seguidas. Es el mismo criterio que ya está escrito para la Pantalla 4 del inicio —"una grilla de cosas idénticas es de las señales que delatan una página hecha con IA"— pero ahí se aplicó y acá no. No es un patrón nuevo: es el que el sitio ya usa, aplicado donde faltaba. Y no es solo estético: la primera de cada área es la puerta de entrada, la que más gente contrata. Que pese lo mismo que las otras dos obliga al visitante a comparar tres cosas cuando lo que necesita es que le señalen por dónde empezar. ============================================================================ */ @media (min-width: 860px){ .svc-grilla{ grid-template-columns: 1fr 1fr; } /* La primera ocupa el ancho y se acuesta: foto a la izquierda, texto a la derecha. Las otras dos quedan a la par debajo. */ .svc-grilla > .svc-tarjeta:first-child{ grid-column: 1 / -1; flex-direction: row; align-items: stretch; } .svc-grilla > .svc-tarjeta:first-child .svc-foto{ flex: 0 0 42%; aspect-ratio: auto; /* lo manda el alto del texto, no una proporción */ } .svc-grilla > .svc-tarjeta:first-child .svc-cuerpo{ padding: clamp(26px, 3vw, 38px); } /* El título de la primera crece: es la jerarquía dicha en tamaño, no solo en superficie. */ .svc-grilla > .svc-tarjeta:first-child h3{ font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); } /* Las alturas mínimas que igualaban las tres filas no aplican acá: esta tarjeta tiene otro ancho y otro ritmo de línea. */ .svc-grilla > .svc-tarjeta:first-child .svc-problema, .svc-grilla > .svc-tarjeta:first-child .svc-que{ min-height: 0; } } .sv-cierre-lado{ display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 900px){ .sv-cierre-lado{ align-items: flex-start; } } /* ============================================================================ LAS PIEZAS POR UNIDAD ============================================================================ Estaban en una sección propia al final, después del cierre, y ahí se leían como un agregado: algo que sobró y se puso al final. Ahora viven adentro del área de marca y comunicación, que es de donde salen — un carrusel o un reel no es "otra cosa", es una pieza de esa área contratada suelta. Y llevan fondo propio: sin él quedaban como un pie de página del área en vez de como una oferta. ============================================================================ */ .sv-piezas{ margin-top: clamp(36px, 5vh, 56px); padding: clamp(28px, 4vw, 40px); background: var(--navy-800); border-radius: var(--r-panel); display: grid; gap: clamp(22px, 3vw, 40px); } @media (min-width: 860px){ .sv-piezas{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } } .sv-piezas-rotulo{ display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turquesa); /* 8.9:1 sobre navy, medido */ margin-bottom: 10px; } .sv-piezas h3{ margin: 0 0 10px; color: var(--tinta); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); } .sv-piezas-txt p{ margin: 0; color: var(--tinta-2); font-size: .9375rem; } .sv-piezas-lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .sv-piezas-lista li span{ display: inline-block; padding: 10px 16px; border: 1px solid var(--linea-osc); border-radius: 999px; font-size: .875rem; color: var(--tinta); background: rgba(245,245,245,.05); } /* ============================================================================ EL ORIENTADOR ============================================================================ Abre la página de servicios porque acá hay 31 y el visitante no sabe por cuál empezar. Va sobre oscuro y antes de la primera área: se lee como una pregunta que hacemos nosotros, no como un contenido más de la página. ============================================================================ */ /* EL AZUL, DEGRADADO. Un navy plano detrás de un módulo que se toca lo hace parecer una sección más de la página. El degradado con las manchas de luz le da profundidad y lo separa: se lee como un artefacto apoyado sobre la página, no como parte del fondo. */ .orientador{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 9vh, 96px) 0; background: radial-gradient(58rem 40rem at 78% 12%, rgba(102,153,255,.30), transparent 62%), radial-gradient(44rem 34rem at 6% 92%, rgba(255,102,51,.16), transparent 64%), radial-gradient(38rem 30rem at 96% 88%, rgba(102,204,204,.16), transparent 60%), linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 52%, var(--navy-900) 100%); } /* LA CAJA ES EL ARTEFACTO. Tiene borde, fondo propio y sombra: se apoya sobre el degradado en vez de estar impresa encima. Es la misma idea que el panel del hero — algo que se puede tocar tiene que verse como un objeto, no como texto sobre un color. */ .or-caja{ max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 44px); background: rgba(3,15,44,.62); border: 1px solid rgba(245,245,245,.14); border-radius: var(--r-panel); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); } @supports (backdrop-filter: blur(10px)){ .or-caja{ backdrop-filter: blur(6px); } } /* El rótulo de arriba, que dice qué es esto */ .or-cabecera{ display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(245,245,245,.12); } .or-cabecera .tilde{ border-color: var(--naranja); } .or-titulo{ font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--durazno); /* 11.6:1 sobre navy */ } /* Los tres puntos del progreso: dicen cuánto falta sin escribirlo. */ .or-pasos{ display: flex; gap: 6px; margin-left: auto; } .or-punto{ width: 22px; height: 4px; border-radius: 999px; background: rgba(245,245,245,.18); transition: background-color var(--t-panel) var(--ease-out); } .or-punto.activo{ background: var(--naranja); } .or-rotulo{ display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turquesa); /* 8.9:1 sobre navy */ margin-bottom: 10px; } .or-caja h2, .or-caja h3{ color: var(--tinta); margin: 0 0 22px; max-width: 24ch; } .or-caja h2:focus-visible, .or-caja h3:focus-visible{ outline: 3px solid var(--turquesa); outline-offset: 6px; } .or-opciones{ display: grid; gap: 10px; } /* Los rubros son cortos: entran de a varios por fila. Los síntomas son frases y van uno por línea, que es como se leen. */ .or-rubros{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .or-btn{ text-align: left; padding: 16px 20px; min-height: 46px; border: 1px solid var(--linea-osc); border-radius: var(--r-chico); background: rgba(245,245,245,.05); color: var(--tinta); font-family: var(--texto); font-size: .9375rem; line-height: 1.4; cursor: pointer; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .or-btn:hover{ background: rgba(245,245,245,.11); border-color: var(--tinta); } .or-btn:active{ transform: scale(.99); } .or-volver{ margin-top: 22px; padding: 8px 0; min-height: 44px; background: none; border: 0; color: var(--tinta-2); font-family: var(--texto); font-size: .875rem; cursor: pointer; transition: color var(--t-hover) var(--ease-out); } #or-paso2 .or-volver{ margin: 0 0 18px; display: block; } .or-volver:hover{ color: var(--tinta); } .or-resultado p{ color: var(--tinta-2); max-width: 54ch; } .or-acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; } .or-acciones .link{ color: var(--tinta); } /* ============================================================================ EL PORQUÉ, AL LADO DEL MINI DIAGNÓSTICO ============================================================================ Sin esto el módulo quedaba colgado: aparecía un cuestionario sin que nadie hubiera explicado para qué. Y retoma el argumento del inicio — "primero comprobamos qué te frena" — así las dos pantallas se leen como una sola idea en vez de dos páginas sueltas. El titular usa blanco y naranja, igual que el del inicio: es la misma voz diciendo lo mismo en otra página. ============================================================================ */ .or-fila{ display: grid; gap: clamp(30px, 5vw, 60px); align-items: start; } @media (min-width: 1000px){ .or-fila{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .or-caja{ margin-inline: 0; } } .or-porque-tit{ font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); line-height: 1.14; color: var(--tinta); margin: 0 0 18px; max-width: 18ch; } /* El naranja sobre navy da 5.8:1 y pasa. Es el mismo recurso que los verbos del titular del inicio: la parte que importa, en color. */ .or-porque-tit span{ display: block; color: var(--naranja); } .or-porque p{ color: var(--tinta-2); max-width: 46ch; } .or-porque-cierre{ margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(245,245,245,.16); color: var(--tinta) !important; font-size: .9375rem; }