/* cbltech.com.ar — sistema de diseño confirmado en AR-02 (.docs/diseno.md). */ @font-face { font-family: "Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* Respaldos con métricas ajustadas para que el cambio de fuente no mueva el diseño. */ @font-face { font-family: "Plex Sans Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 106%; ascent-override: 92%; descent-override: 27%; line-gap-override: 0%; } :root { --niebla: #F1F3F5; --grafito: #10151C; --violeta: #3D1F81; --violeta-oscuro: #2E1766; --lavanda: #C5B5EA; --rojo: #D13F31; --rojo-oscuro: #B83227; --acero: #2B6CB0; --verde: #1F9D63; --verde-texto: #167A4C; --plata: #C7CED6; --gris-texto: #5A6572; --blanco: #FFFFFF; --f-titulo: "Space Grotesk", "Space Grotesk Fallback", Arial, sans-serif; --f-cuerpo: "Plex Sans", "Plex Sans Fallback", Arial, sans-serif; --f-mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --radio: 6px; --ancho: 72rem; --wrap-pad: 1.1rem; --wa-tam: 3.5rem; --wa-borde: 1rem; --wa-reserva: 0px; --barra-alto: 4rem; } /* Franja derecha del viewport que ocupa el WhatsApp flotante, con aire. */ .con-wa-float { --wa-reserva: calc(var(--wa-borde) + var(--wa-tam) + .75rem); } *, *::before, *::after { box-sizing: border-box; } /* scroll-padding-top: alto de la barra fija más aire, para que las anclas y el foco no queden debajo. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra-alto) + .75rem); } body { margin: 0; background: var(--niebla); color: var(--grafito); font: 400 1rem/1.6 var(--f-cuerpo); } h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.01em; } h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; } a { color: var(--acero); text-underline-offset: .15em; } a:hover { color: var(--grafito); } :focus-visible { outline: 3px solid var(--acero); outline-offset: 2px; } .wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--wrap-pad); } .narrow { max-width: 44rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--grafito); color: var(--blanco); padding: .6rem 1rem; z-index: 40; } .skip-link:focus { left: 0; } /* Encabezado */ .site-header__bar { position: sticky; top: 0; z-index: 20; background: var(--violeta); color: var(--blanco); } .site-header { display: contents; } .site-header__inner { position: relative; display: flex; align-items: center; min-height: var(--barra-alto); gap: .5rem; } /* En el header el logo va en blanco sobre el violeta (Beto, AR-24); en el pie, en su color real sobre una placa clara. */ .brand { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: var(--radio); flex: none; } .brand__logo { display: block; width: 4.5rem; height: auto; } /* Cabecera (AR-28): símbolo y letras CBL del SVG, con «Cuidamos Datos» como texto debajo. */ .brand--cabecera { flex-direction: column; gap: .2rem; padding: .3rem .1rem; margin-right: auto; color: var(--blanco); text-decoration: none; } .brand--cabecera .brand__logo { width: 5.1rem; } .brand__lema { font: 600 .8rem/1 var(--f-titulo); letter-spacing: .02em; white-space: nowrap; } /* Sobre el violeta, el contorno acero da 2,71:1: en la barra y el menú va blanco. */ .site-header__bar :focus-visible, .site-nav :focus-visible { outline-color: var(--blanco); } /* Servicios: en celular, menú de tres rayas a la derecha del botón; en escritorio, enlaces entre el logo y el botón. */ .site-header__inner .btn--cta { order: 1; } .servicios-nav { order: 2; } .servicios-nav__boton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer; color: var(--blanco); background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: var(--radio); } .servicios-nav__boton:hover { background: rgba(255, 255, 255, .12); } .servicios-nav__rayas, .servicios-nav__rayas::before, .servicios-nav__rayas::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s ease, background-color .2s ease; } .servicios-nav__rayas { position: relative; } .servicios-nav__rayas::before, .servicios-nav__rayas::after { content: ""; position: absolute; left: 0; } .servicios-nav__rayas::before { top: -6px; } .servicios-nav__rayas::after { top: 6px; } .servicios-nav__boton[aria-expanded="true"] .servicios-nav__rayas { background-color: transparent; } .servicios-nav__boton[aria-expanded="true"] .servicios-nav__rayas::before { transform: translateY(6px) rotate(45deg); } .servicios-nav__boton[aria-expanded="true"] .servicios-nav__rayas::after { transform: translateY(-6px) rotate(-45deg); } .servicios-nav__lista { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1; list-style: none; margin: 0; padding: .25rem 0 .5rem; background: var(--violeta-oscuro); border-top: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 10px 24px rgba(16, 21, 28, .35); } .servicios-nav.is-open .servicios-nav__lista { display: block; } .servicios-nav__lista a { display: flex; align-items: center; min-height: 3rem; padding: .5rem var(--wrap-pad); color: var(--blanco); font: 600 1.05rem/1.2 var(--f-cuerpo); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .1); } .servicios-nav__lista li:last-child a { border-bottom: 0; } .servicios-nav__lista a:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); } .servicios-nav__lista a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--lavanda); } .servicios-nav__lista a:focus-visible { outline-offset: -3px; } /* Sin JavaScript el menú no abre: los cuatro enlaces quedan a la vista debajo del logo. */ html:not(.js) .site-header__inner { flex-wrap: wrap; } html:not(.js) .servicios-nav { order: 3; flex-basis: 100%; } html:not(.js) .servicios-nav__boton { display: none; } html:not(.js) .servicios-nav__lista { display: flex; flex-wrap: wrap; gap: 0 1.1rem; position: static; padding: 0 0 .5rem; background: none; border: 0; box-shadow: none; } html:not(.js) .servicios-nav__lista a { min-height: 2.25rem; padding: 0; border: 0; font-size: .95rem; } .site-nav { background: var(--violeta-oscuro); } .site-nav__inner { display: flex; gap: .9rem; min-height: 2.25rem; align-items: center; font-size: .88rem; } .site-nav__enlaces { display: flex; gap: 1.1rem; align-items: center; min-width: 0; min-height: 2.25rem; overflow-x: auto; scrollbar-width: none; } .site-nav a { color: var(--blanco); text-decoration: none; white-space: nowrap; } .site-nav a:hover { color: var(--lavanda); text-decoration: underline; } /* Teléfono: solo el icono mientras el número completo no entra; el nombre accesible es «Llamar a CBL» (más el número cuando se ve). */ .site-nav__tel { display: inline-flex; align-items: center; justify-content: center; flex: none; margin-left: auto; min-width: 2.25rem; min-height: 2.25rem; font-family: var(--f-mono); font-weight: 500; } .site-nav__tel-icono { width: 1.15rem; height: 1.15rem; fill: currentColor; } .site-nav__tel-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-nav__tel-numero { display: none; } .btn--cta { min-height: 2.5rem; padding: .45rem .9rem; background: var(--rojo); color: var(--blanco); font-size: .9rem; white-space: nowrap; flex: none; } .btn--cta:hover { background: var(--rojo-oscuro); color: var(--blanco); } .site-header__inner .btn--cta { padding: .45rem .75rem; font-size: .85rem; } /* Hasta 360 px: logo, botón y tres rayas entran sin pisar el margen, y la segunda barra muestra sus cuatro enlaces junto al icono. */ @media (max-width: 22.5rem) { .site-header__inner { gap: .4rem; } .brand__lema { font-size: .78rem; } .site-header__inner .btn--cta { padding: .45rem .5rem; font-size: .8rem; } .servicios-nav__boton { width: 2.5rem; height: 2.5rem; } .site-nav__inner { gap: .5rem; font-size: .8rem; } .site-nav__enlaces { gap: .6rem; } .site-nav__tel { min-width: 2rem; } } .wa-float { position: fixed; right: var(--wa-borde); bottom: calc(var(--wa-borde) + env(safe-area-inset-bottom, 0px)); z-index: 30; width: var(--wa-tam); height: var(--wa-tam); border-radius: 50%; display: grid; place-items: center; background: var(--verde); box-shadow: 0 4px 14px rgba(16, 21, 28, .35); } .wa-float svg { width: 1.9rem; height: 1.9rem; fill: var(--blanco); } .wa-float:hover { background: var(--verde-texto); } .wa-float:focus-visible { outline: 3px solid var(--violeta); outline-offset: 3px; } .breadcrumb { font-size: .8rem; color: var(--gris-texto); padding-top: .75rem; padding-bottom: .25rem; } .breadcrumb a { color: var(--gris-texto); } /* Primera pantalla */ .hero { padding: .5rem 0 2rem; } .hero__grid { display: grid; gap: 1.5rem; } .eyebrow { font: 500 .78rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--violeta); margin-bottom: .5rem; } .hero h1 { margin-bottom: .45em; } .hero__lead { font-size: 1.02rem; margin-bottom: .75rem; } .hero__badge { display: inline-block; margin: 0 0 1rem; padding: .2rem .6rem; font: 500 .8rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--verde-texto); border: 1.5px solid var(--verde); border-radius: var(--radio); background: var(--blanco); } /* Botones */ .actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.25rem; padding: .55rem .8rem; border-radius: var(--radio); border: 2px solid transparent; font: 600 .95rem/1.2 var(--f-cuerpo); text-decoration: none; cursor: pointer; text-align: center; } .btn__icon { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; } .btn__icon--wa { fill: var(--verde); } .btn--primary { background: var(--violeta); color: var(--blanco); } .btn--primary:hover { background: var(--violeta-oscuro); color: var(--blanco); } .btn--dark { background: var(--grafito); color: var(--blanco); } .btn--dark:hover { background: #242C37; color: var(--blanco); } .btn--outline { background: var(--blanco); color: var(--acero); border-color: var(--acero); } .btn--outline:hover { background: var(--acero); color: var(--blanco); } .actions .btn { flex-direction: column; gap: .2rem; padding: .5rem .3rem; font-size: .9rem; } /* Ficha de diagnóstico */ /* --ficha-borde es la distancia del borde derecho de la ficha al del viewport cuando la ficha llega al borde del .wrap. Si es menor que la franja del flotante, el texto se corre esa diferencia. Si la ficha está más adentro, la reserva sobra pero no rompe. */ .ficha { --ficha-borde: calc(max(0px, (100vw - var(--ancho)) / 2) + var(--wrap-pad)); --ficha-pad-der: max(1rem, calc(var(--wa-reserva) - var(--ficha-borde))); --sello-tam: 5.8rem; --sello-der: .8rem; position: relative; background: var(--blanco); border: 1.5px solid var(--grafito); border-radius: var(--radio); box-shadow: 4px 4px 0 var(--plata); overflow: hidden; } .ficha__head { display: flex; justify-content: space-between; align-items: center; background: var(--grafito); color: var(--blanco); padding: .55rem var(--ficha-pad-der) .55rem 1rem; } .ficha__title { font: 500 .8rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; margin: 0; } .ficha__code { font: 500 .75rem/1 var(--f-mono); color: var(--lavanda); white-space: nowrap; flex: none; } .ficha__list { margin: 0; padding: .25rem var(--ficha-pad-der) .5rem 1rem; } .ficha__row { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px dashed var(--plata); } .ficha__row:last-child { border-bottom: 0; } .ficha dt { font: 500 .72rem/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gris-texto); } .ficha dd { margin: 0; font-size: .95rem; } .ficha dd p { margin: 0 0 .35rem; } .ficha__sintomas, .ficha__precios { list-style: none; margin: 0; padding: 0; } .ficha__sintomas li { padding-left: 1rem; position: relative; } .ficha__sintomas li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; background: var(--violeta); border-radius: 1px; } .ficha__precios li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; } .ficha__monto { font-family: var(--f-mono); font-weight: 500; font-size: .88rem; white-space: nowrap; } .ficha__pago { font-size: .85rem; color: var(--gris-texto); margin-top: .35rem !important; } .ficha__sello { position: absolute; right: var(--sello-der); bottom: .9rem; margin: 0; width: var(--sello-tam); height: var(--sello-tam); border-radius: 50%; display: grid; place-items: center; text-align: center; border: 3px double var(--violeta); color: var(--violeta); background: rgba(255, 255, 255, .9); font: 500 .68rem/1.25 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-12deg); pointer-events: none; } .ficha__sello span { display: block; padding: .3rem; } .ficha__marca { position: absolute; right: var(--sello-der); bottom: .9rem; width: var(--sello-tam); height: var(--sello-tam); pointer-events: none; visibility: hidden; } .ficha__row:last-child dd { padding-right: max(0px, calc(var(--sello-der) + var(--sello-tam) + .4rem - var(--ficha-pad-der))); min-height: 5.4rem; } html.js .ficha__sello:not([data-armed]) { animation: sello-respaldo 0s 3s both; } html.js .ficha__sello[data-armed] { opacity: 0; transform: rotate(-12deg) scale(1.7); transition: opacity .18s ease-out, transform .32s cubic-bezier(.2, 1.4, .4, 1); } html.js .ficha__sello.is-stamped { opacity: 1; transform: rotate(-12deg) scale(1); } @keyframes sello-respaldo { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .ficha__sello, html.js .ficha__sello[data-armed] { opacity: 1; transform: rotate(-12deg); transition: none; animation: none; } } /* Secciones */ .section { padding: 2.5rem 0; scroll-margin-top: 3.5rem; } .section--first { padding-top: 2rem; } .section:nth-of-type(even) { background: var(--blanco); } .section p { max-width: 46rem; } .cards { display: grid; gap: .9rem; margin-top: 1rem; } .card { background: var(--niebla); border-left: 4px solid var(--violeta); border-radius: var(--radio); padding: 1rem 1.1rem; } .section:nth-of-type(odd) .card { background: var(--blanco); } .card h3 { margin-bottom: .35rem; } .card p { margin: 0; } .notice { margin-top: 1.25rem; padding: .8rem 1rem; border-radius: var(--radio); background: var(--grafito); color: var(--blanco); font-weight: 600; } .notice--ficha { margin: 0 0 1rem; } /* Sección con ficha propia (landings con más de un caso, como /recuperar-archivos/). */ .section__grid { display: grid; gap: 1.5rem; } .section__grid > * { min-width: 0; } .section__cuerpo > :last-child { margin-bottom: 0; } .section__subtitulo { margin-top: 1.5rem; } /* Aviso del hero cuando la ficha va en cada sección. */ .alerta { --alerta-borde: calc(max(0px, (100vw - var(--ancho)) / 2) + var(--wrap-pad)); background: var(--grafito); color: var(--blanco); border-radius: var(--radio); box-shadow: 4px 4px 0 var(--plata); padding: 1.1rem max(1.2rem, calc(var(--wa-reserva) - var(--alerta-borde))) 1.1rem 1.2rem; } .alerta__titulo { font: 500 .8rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--lavanda); margin-bottom: .75rem; } .alerta__lista { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; font-weight: 600; } /* Lo que no se hace: mismo formato que .checklist, con cruz roja. */ .xlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 46rem; } .xlist li { position: relative; padding-left: 1.8rem; } .xlist li::before, .xlist li::after { content: ""; position: absolute; left: .1rem; top: .75em; width: 1.05rem; height: 3px; background: var(--rojo-oscuro); border-radius: 1px; } .xlist li::before { transform: rotate(45deg); } .xlist li::after { transform: rotate(-45deg); } /* Fotos del laboratorio (/sobre-cbl-tech/). Ancho y alto van en el HTML: el alto se reserva antes de que cargue la imagen. */ .foto { margin: 0; } .foto img { display: block; width: 100%; height: auto; } /* Las fotos recortadas (fondo transparente) van sin marco: el radio y la sombra dibujarían el cuadrado. */ .foto:not(.foto--transp) img { border-radius: var(--radio); box-shadow: 4px 4px 0 var(--plata); background: var(--plata); } .section__fotos { display: grid; gap: 1rem; } .video { position: relative; aspect-ratio: 16 / 9; max-width: 46rem; margin: 0 0 1rem; background: var(--grafito); border-radius: var(--radio); overflow: hidden; } .video iframe, .video__boton { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__boton { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; color: var(--blanco); text-align: center; text-decoration: none; font-weight: 500; } .video__boton:hover, .video__boton:focus-visible { color: var(--blanco); background: var(--violeta-oscuro); } .video__boton:focus-visible { outline: 3px solid var(--lavanda); outline-offset: -3px; } .video__play { width: 4rem; height: 4rem; border-radius: 50%; background: var(--rojo); position: relative; flex: none; } .video__play::after { content: ""; position: absolute; left: 1.6rem; top: 1.25rem; border-style: solid; border-width: .75rem 0 .75rem 1.25rem; border-color: transparent transparent transparent var(--blanco); } .lema { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--violeta); } /* Muestra del informe de sanitización (/borrado/). Es texto corrido: no reserva la franja del flotante, igual que los párrafos. */ .muestra { margin: 1.75rem 0 0; max-width: 46rem; } .muestra__doc { position: relative; overflow: hidden; background: var(--blanco); color: var(--grafito); border: 1px solid var(--plata); border-top: 5px solid var(--violeta); border-radius: var(--radio); box-shadow: 4px 4px 0 var(--plata); padding: 1.25rem 1.1rem; font-size: .9rem; } .muestra__doc::after { content: "MUESTRA"; content: "MUESTRA" / ""; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font: 500 clamp(3rem, 12vw, 6rem)/1 var(--f-mono); letter-spacing: .2em; color: rgba(61, 31, 129, .07); pointer-events: none; white-space: nowrap; } .muestra__doc p { max-width: none; margin: 0 0 .5rem; } .muestra__doc h4 { font: 500 .75rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--violeta); margin: 1.25rem 0 .5rem; } .muestra__tipo { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-texto); } .muestra__titulo { font-size: 1.05rem; margin-bottom: .35rem; } .muestra__ref { color: var(--gris-texto); font-size: .82rem; } .muestra__datos { margin: 1rem 0 0; border-top: 1px dashed var(--plata); } .muestra__dato { display: grid; gap: 0; padding: .35rem 0; border-bottom: 1px dashed var(--plata); } .muestra__dato dt { font: 500 .72rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto); } .muestra__dato dd { margin: 0; } .muestra__indice, .muestra__herramientas { margin: 0; padding-left: 1.2rem; } .muestra__grupo { margin-bottom: 1rem; } .muestra__grupo-titulo { font: 600 .9rem/1.3 var(--f-mono); color: var(--violeta); } .muestra__tabla { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: .5rem; } .muestra__tabla th, .muestra__tabla td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--plata); vertical-align: top; } .muestra__tabla th { font: 500 .68rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texto); background: var(--niebla); white-space: nowrap; } .muestra__tabla td:first-child, .muestra__tabla td:last-child { font-family: var(--f-mono); font-size: .74rem; white-space: nowrap; } .muestra__firmas { display: grid; gap: 1.25rem; margin-top: 1.5rem; } .muestra__firma { border-top: 1px solid var(--grafito); padding-top: .4rem; } .muestra__firma p { margin: 0; color: var(--gris-texto); font-size: .8rem; } .muestra__firma .muestra__firma-rol { color: var(--grafito); font-weight: 600; } .muestra__nota { margin-top: .75rem; font-size: .82rem; color: var(--gris-texto); } .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 46rem; } .checklist li { position: relative; padding-left: 1.8rem; } .checklist li::before { content: ""; position: absolute; left: .15rem; top: .35em; width: .9rem; height: .5rem; border-left: 3px solid var(--verde-texto); border-bottom: 3px solid var(--verde-texto); transform: rotate(-45deg); } .embalaje { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; max-width: 46rem; } .steps { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: paso; display: grid; gap: 1rem; } .steps__item { counter-increment: paso; position: relative; padding: 0 0 0 3.2rem; } .steps__item::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: var(--radio); background: var(--violeta); color: var(--blanco); font: 500 .9rem/1 var(--f-mono); } .steps__item h3 { margin-bottom: .25rem; } .steps__item p { margin: 0; } .link-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; } .link-grid a { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: var(--niebla); border: 1px solid var(--plata); border-radius: var(--radio); color: var(--grafito); font-weight: 600; text-decoration: none; } .link-grid a::after { content: "→"; color: var(--acero); } .link-grid a:hover { border-color: var(--acero); } .faq { display: grid; gap: .5rem; max-width: 50rem; } .faq__item { background: var(--blanco); border: 1px solid var(--plata); border-radius: var(--radio); } .section:nth-of-type(even) .faq__item { background: var(--niebla); } .faq__item summary { cursor: pointer; padding: .9rem 1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-family: var(--f-mono); color: var(--acero); } .faq__item[open] summary::after { content: "−"; } .faq__item p { padding: 0 1rem 1rem; margin: 0; } .faq__mas { margin: 1rem 0 0; } /* Preguntas frecuentes generales (/faq/): respuestas a la vista, no plegadas. */ .faq-indice { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .35rem; max-width: 46rem; } .faq-indice a { font-weight: 600; } .faq-hub { display: grid; gap: 1.75rem; } .faq-hub__item { max-width: 46rem; padding-top: 1.5rem; border-top: 1px solid var(--plata); scroll-margin-top: 4rem; } .faq-hub__item:first-child { padding-top: 0; border-top: 0; } .faq-hub__item h2 { font-size: 1.3rem; margin-bottom: .5rem; } .faq-hub__item p { margin: 0; } .faq-hub__enlace { margin-top: .6rem !important; } .faq-hub__enlace a::after { content: " →"; } /* Formulario */ .section--form { background: var(--grafito) !important; color: var(--blanco); } .section--form a { color: var(--blanco); } .form-block { display: grid; gap: 1.5rem; } .form-block__pago { font-family: var(--f-mono); font-weight: 500; font-size: .85rem; color: var(--lavanda); } .case-form { background: var(--blanco); color: var(--grafito); border-radius: var(--radio); padding: 1.1rem; } .case-form a { color: var(--acero); } .case-form__grid { display: grid; gap: .9rem; } .field { display: grid; gap: .3rem; } .field__label { font-weight: 600; font-size: .92rem; } .field__optional, .field__hint { font-weight: 400; color: var(--gris-texto); font-size: .85rem; } .field input, .field select, .field textarea, .tel-group select { width: 100%; min-height: 2.9rem; padding: .6rem .7rem; font: inherit; color: var(--grafito); background: var(--blanco); border: 1.5px solid #8A95A3; border-radius: var(--radio); } .field textarea { resize: vertical; min-height: 6rem; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--acero); outline: 2px solid var(--acero); outline-offset: 0; } .tel-group { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: .5rem; } .case-form__privacy { font-size: .85rem; color: var(--gris-texto); margin: 1rem 0; } .case-form__submit { width: 100%; } /* reCAPTCHA va con badge 'inline': fijo abajo a la derecha quedaba debajo del WhatsApp flotante. */ .case-form__captcha:not(:empty) { margin-top: 1rem; } .case-form__status { margin: .6rem 0 0; font-size: .9rem; min-height: 1.4em; } .case-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Confirmación */ /* Home: abre con marca y un CTA al formulario, que va justo después (campana-marca.md). */ /* Hero de la portada (AR-28). Todo cuelga de .hero--home: las landings no cambian. Fondo: el degradé del borde izquierdo de la foto (#18214A arriba, #05060B abajo) con un resplandor violeta. En celular: texto, tarjeta de Google sobre la zona oscura de arriba de la foto, foto y beneficios. En escritorio: la foto ocupa la derecha detrás del texto; el rostro y el disco quedan fuera de la columna del texto. */ .hero.hero--home { position: relative; isolation: isolate; overflow: hidden; color: var(--blanco); display: grid; grid-template-columns: var(--wrap-pad) minmax(0, 1fr) var(--wrap-pad); padding: 0 0 1.5rem; background: radial-gradient(ellipse 70% 60% at 12% 35%, rgba(61, 31, 129, .55), transparent 70%), linear-gradient(180deg, #18214A 0%, #10122C 40%, #0A0915 75%, #05060B 100%); } .home-hero__grid { display: contents; } .hero--home .hero__copy { grid-column: 2; grid-row: 1; padding: 1.5rem 0 1.25rem; } .hero--home .eyebrow { color: var(--lavanda); } #home-titulo { font-family: var(--f-cuerpo); color: var(--blanco); } .hero--home .hero__lead { color: #E4E7EF; max-width: 34rem; } .hero--home :focus-visible { outline-color: var(--blanco); } .home__cta { margin: 0 0 .6rem; } .btn--grande { min-height: 3.25rem; padding: .6rem 1.4rem; font-size: 1.02rem; width: 100%; } .home__acciones .actions { grid-template-columns: repeat(2, 1fr); } .home__acciones [data-evento="ir-formulario"] { display: none; } /* Llamar y WhatsApp sobre fondo oscuro: elevación suave y un giro corto del icono al pasar el mouse o con el foco. */ .hero--home .home__acciones .btn { transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out; } .hero--home .home__acciones .btn--primary { background: var(--blanco); color: var(--violeta); } .hero--home .home__acciones .btn--primary:hover { background: #EEE9FA; color: var(--violeta-oscuro); } .hero--home .home__acciones .btn--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .7); color: var(--blanco); } .hero--home .home__acciones .btn--dark:hover { background: rgba(255, 255, 255, .16); color: var(--blanco); } .hero--home .home__acciones .btn__icon--wa { fill: #3DDC84; } .hero--home .home__acciones .btn:hover, .hero--home .home__acciones .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); } .hero--home .home__acciones .btn:hover .btn__icon, .hero--home .home__acciones .btn:focus-visible .btn__icon { animation: icono-toque .45s ease-out; } @keyframes icono-toque { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg) scale(1.1); } 65% { transform: rotate(8deg); } } /* Foto: en celular, franja completa con el recorte a la derecha (rostro y disco adentro). */ .home-hero__foto { grid-column: 1 / -1; grid-row: 3; margin-top: -2.75rem; } .home-hero__foto img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: 75% 30%; } /* Foto atenuada para que se integre al fondo (AR-30). Solo la imagen: el texto, la tarjeta y los beneficios no llevan filtro. */ .hero--home .home-hero__foto img { filter: brightness(.75) saturate(.8); } /* Tarjeta de Google: enlace liviano a las opiniones de la sede de CABA. */ .google-card { grid-column: 2; grid-row: 2; justify-self: start; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .65rem; max-width: 100%; padding: .55rem .9rem .55rem .7rem; background: var(--blanco); color: var(--grafito); border-radius: 10px; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: box-shadow .18s ease-out; } .google-card:hover { color: var(--grafito); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); } .google-card:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; } .google-card__logo { width: 1.75rem; height: 1.75rem; flex: none; } .google-card__datos { display: grid; gap: .1rem; } .google-card__fila { display: flex; align-items: center; gap: .4rem; } .google-card__nota { font: 600 1.15rem/1 var(--f-cuerpo); } .google-card__estrellas { display: flex; gap: 1px; } .google-card__estrella { display: block; width: 1rem; height: 1rem; fill: #F5B301; } .google-card__estrella--vacia { fill: #D5D9DF; } .google-card__texto { font-size: .82rem; line-height: 1.25; color: var(--gris-texto); } .google-card:hover .google-card__texto { text-decoration: underline; } .google-card:hover .google-card__estrella, .google-card:focus-visible .google-card__estrella { animation: estrella-salto .42s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--i) * 70ms); } @keyframes estrella-salto { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px) scale(1.12); } } /* Beneficios: vidrio oscuro y translúcido, para que el texto blanco se lea también sobre el guardapolvo celeste. */ .beneficios { grid-column: 2; grid-row: 4; position: relative; z-index: 1; list-style: none; margin: -1.5rem 0 0; padding: .85rem 1rem; display: grid; gap: .7rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: rgba(14, 12, 38, .82); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .beneficios { background: rgba(14, 12, 38, .6); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); } } .beneficios__item { display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .95rem; line-height: 1.3; } .beneficios__icono { width: 1.5rem; height: 1.5rem; flex: none; fill: var(--lavanda); } @media (prefers-reduced-motion: reduce) { .hero--home .home__acciones .btn { transition: none; } .hero--home .home__acciones .btn:hover, .hero--home .home__acciones .btn:focus-visible { transform: none; } .hero--home .home__acciones .btn:hover .btn__icon, .hero--home .home__acciones .btn:focus-visible .btn__icon, .google-card:hover .google-card__estrella, .google-card:focus-visible .google-card__estrella { animation: none; } .servicios-nav__rayas, .servicios-nav__rayas::before, .servicios-nav__rayas::after { transition: none; } } /* Reconocimiento editorial de la portada (AR-29), entre el hero y el formulario. Es un