/* ========================================================================== Políticas de Privacidad – Brithers Industria de Software Hoja de estilos unificada para el índice y todas las políticas del portal. ========================================================================== */ :root { --accent: #0b5ea8; /* Ground: papel frío de registro, no crema ni casi-negro */ --papel: #e9edf4; --hoja: #ffffff; --tinta: #10141f; --tinta-profunda: #141a2b; --tinta-suave: #586075; --tinta-tenue: #858da3; --linea: #d7dce7; --linea-fina: #e9ecf3; --radio-lg: 18px; --radio-md: 10px; --radio-sm: 6px; --sombra: 0 1px 2px rgba(16, 20, 31, .04), 0 12px 32px -18px rgba(16, 20, 31, .28); --sombra-alta: 0 2px 6px rgba(16, 20, 31, .06), 0 22px 44px -24px rgba(16, 20, 31, .34); --fuente: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fuente-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace; --ancho: 1080px; --ancho-lectura: 760px; } /* Paleta por marca (mismos colores originales de cada producto). Se aplica tanto al de cada política como a cada ficha del índice. */ [data-brand="cardiomed"], [data-brand="cuentos-magicos"], [data-brand="garage-carben"], [data-brand="infonova"], [data-brand="intelica"] { --accent: #005792; } [data-brand="coleccion-monedas-napoleon"], [data-brand="coleccion-monedas-zeus"], [data-brand="mucore"], [data-brand="trii"] { --accent: #008BD0; } [data-brand="comidex"] { --accent: #1b5629; } [data-brand="conecta-figuritas"], [data-brand="druida"] { --accent: #1A5831; } [data-brand="el-juego-del-prode"], [data-brand="el-juego-del-prode-mundial"], [data-brand="guia-comercial-san-luis"], [data-brand="gula"], [data-brand="itec"], [data-brand="ramos-app"], [data-brand="reclamos-rio-cuarto"] { --accent: #6d6a66; } [data-brand="elvis"], [data-brand="il-cabure"], [data-brand="todo-motores"] { --accent: #1a1a1a; } [data-brand="estudiantes-de-rio-cuarto"] { --accent: #008BD0; } [data-brand="lujan-market"], [data-brand="nombre-mascotas"] { --accent: #6b6b6b; } [data-brand="mega-mercado-ganadero"] { --accent: #005792; } [data-brand="mercurio-basic"], [data-brand="mercurio-premium"] { --accent: #666666; } [data-brand="piinversiones"] { --accent: #2260BF; } [data-brand="presupuesto-mensual"] { --accent: #0264C7; } [data-brand="resultados-mundial-2018"], [data-brand="san-francisco-app"] { --accent: #7d7d7d; } [data-brand="santa-lucia-agro"], [data-brand="santa-lucia-alimentos"], [data-brand="solucion-al-vecino"] { --accent: #3f6f47; } [data-brand="srrc"] { --accent: #2b2b2b; } [data-brand="todo-led"] { --accent: #037bce; } [data-brand="brithers"] { --accent: #0070f3; } /* ---- Base ---- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--fuente); color: var(--tinta); background: var(--papel); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 20px 56px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* Etiqueta técnica reutilizable: mono, sólo donde codifica un dato */ .etiqueta { font-family: var(--fuente-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-tenue); } /* ---- Loader ---- */ #pantalla-carga { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--papel); color: var(--tinta-suave); font-size: .9rem; letter-spacing: .04em; transition: opacity .3s ease, visibility .3s ease; } #pantalla-carga .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea); border-top-color: var(--accent); animation: girar .8s linear infinite; } body.cargado #pantalla-carga { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes girar { to { transform: rotate(360deg); } } /* ========================================================================== Masthead – banda tinta a sangre completa con el logo de Brithers ========================================================================== */ .masthead { align-self: stretch; margin: 0 -20px clamp(28px, 5vw, 52px); padding: clamp(30px, 5vw, 60px) 0 clamp(28px, 4vw, 44px); background: var(--tinta-profunda); border-bottom: 3px solid var(--accent); color: #fff; } .masthead__interior { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; } /* El logo va centrado, como el escudo del portal */ .masthead__logo { display: block; width: fit-content; margin: 0 auto clamp(26px, 4vw, 40px); border-radius: 4px; } .masthead__logo img { height: clamp(38px, 5.5vw, 54px); width: auto; opacity: .95; transition: opacity .18s ease; } .masthead__logo:hover img { opacity: 1; } .masthead__titulo { font-size: clamp(2.1rem, 6.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; color: #fff; margin-bottom: clamp(24px, 3.5vw, 36px); text-wrap: balance; } /* Bajada a todo el ancho, con el conteo real anclado a la derecha */ .masthead__pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .14); } .masthead__lema { color: rgba(255, 255, 255, .78); font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.62; letter-spacing: -.005em; max-width: 58ch; text-wrap: pretty; } .masthead__dato { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid rgba(255, 255, 255, .14); text-align: right; } .masthead__numero { font-size: clamp(2.4rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; } .masthead .etiqueta { color: rgba(255, 255, 255, .5); } .masthead :focus-visible { outline-color: #fff; } /* ---- Variante reducida: páginas de política de cada marca ---- */ .masthead--slim { padding: 16px 0; margin-bottom: clamp(24px, 4vw, 40px); } .masthead--slim .masthead__interior { max-width: var(--ancho-lectura); } .masthead--slim .masthead__logo { margin-bottom: 0; } .masthead--slim .masthead__logo img { height: 30px; } /* ========================================================================== Índice general – pliego de marcas ========================================================================== */ .portada { width: 100%; max-width: var(--ancho); } /* ---- Buscador ---- */ .buscador { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 0 16px; margin-bottom: 6px; background: linear-gradient(180deg, var(--papel) 72%, rgba(233, 237, 244, 0)); } .buscador__campo { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--hoja); border: 1px solid var(--linea); border-radius: 999px; padding: 0 18px; height: 48px; box-shadow: var(--sombra); transition: border-color .18s ease, box-shadow .18s ease; } .buscador__campo:focus-within { border-color: var(--accent); box-shadow: var(--sombra-alta); } .buscador__campo svg { flex: none; width: 17px; height: 17px; stroke: var(--tinta-tenue); fill: none; stroke-width: 2; } .buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .98rem; color: var(--tinta); height: 100%; } .buscador input:focus { outline: none; } .buscador input::placeholder { color: var(--tinta-tenue); } .buscador__conteo { flex: none; } .buscador__conteo strong { color: var(--tinta); font-weight: 700; } /* ---- Grilla de marcas ---- */ .pliego { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; } /* El lomo izquierdo lleva el color propio de cada marca, no un azul genérico */ .pliego__ficha { background: var(--hoja); border: 1px solid var(--linea); border-left: 4px solid var(--accent); border-radius: var(--radio-md); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } .pliego__ficha:hover { border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); box-shadow: var(--sombra-alta); } .pliego__ficha[hidden] { display: none; } .pliego__ficha a { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 14px; min-height: 78px; padding: 14px 16px; color: var(--tinta); text-decoration: none; transition: background-color .18s ease; } .pliego__ficha a:hover, .pliego__ficha a:focus-visible { background: color-mix(in srgb, var(--accent) 7%, #fff); } .pliego__logo { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radio-sm); background: #fff; } .pliego__nombre { font-weight: 600; font-size: .97rem; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; } /* ---- Estado vacío ---- */ .pliego-vacio { display: none; padding: 48px 8px; color: var(--tinta-suave); } .pliego-vacio[data-visible="si"] { display: block; } .pliego-vacio p { margin-bottom: 6px; } .pliego-vacio strong { color: var(--tinta); } /* ---- Pie mínimo (índice y políticas) ---- */ .pie-minimo { width: 100%; max-width: var(--ancho); margin-top: clamp(36px, 6vw, 60px); padding-top: 22px; border-top: 1px solid var(--linea); text-align: center; color: var(--tinta-suave); font-size: .87rem; } /* En las políticas el filete acompaña el ancho de la tarjeta, no el de la grilla */ .masthead--slim ~ .pie-minimo { max-width: var(--ancho-lectura); } .pie-minimo span { margin: 0 6px; color: var(--tinta-tenue); } .pie-minimo a { color: var(--tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--linea); } .pie-minimo a:hover { border-bottom-color: var(--accent); } /* ========================================================================== Página de política de una marca ========================================================================== */ .tarjeta { width: 100%; max-width: var(--ancho-lectura); background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio-lg); box-shadow: var(--sombra); overflow: hidden; } /* Cabecera: el color de la marca gobierna la franja, el logo va sobre papel */ .tarjeta__marca { display: flex; align-items: center; gap: 18px; padding: clamp(22px, 4vw, 32px) clamp(22px, 5vw, 44px); border-bottom: 1px solid var(--linea-fina); background: color-mix(in srgb, var(--accent) 5%, #fff); border-top: 4px solid var(--accent); } .tarjeta__logo { width: 62px; height: 62px; flex: none; object-fit: contain; border-radius: var(--radio-md); background: #fff; border: 1px solid var(--linea-fina); padding: 5px; } .tarjeta__identidad { min-width: 0; } .tarjeta__identidad h1 { font-size: clamp(1.25rem, 3.4vw, 1.65rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; margin-bottom: 6px; overflow-wrap: anywhere; } .tarjeta__contenido { padding: clamp(24px, 5vw, 44px); } /* ---- Cláusulas: numeradas porque son citables por número ---- */ .clausulas { list-style: none; counter-reset: clausula; } .clausulas__item { counter-increment: clausula; display: grid; grid-template-columns: 42px 1fr; gap: 0 12px; padding: 24px 0; border-top: 1px solid var(--linea-fina); } .clausulas__item:first-child { border-top: none; padding-top: 4px; } .clausulas__item::before { content: counter(clausula, decimal-leading-zero); font-family: var(--fuente-mono); font-size: .78rem; letter-spacing: .08em; color: var(--accent); padding-top: .34em; } .clausulas__titulo { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.4; letter-spacing: -.01em; color: var(--tinta); margin-bottom: 8px; } .clausulas__texto { color: var(--tinta-suave); line-height: 1.75; font-size: .96rem; } /* Texto extenso con subsecciones (p. ej. la política de Brithers) */ .clausulas__texto p, .clausulas__texto li { margin-bottom: 8px; } .clausulas__texto ul.lista-simple { padding-left: 18px; margin: 10px 0; } .clausulas__texto ul.lista-simple li::marker { color: var(--accent); } .clausulas__texto strong { color: var(--tinta); font-weight: 600; } .tarjeta__contenido h2 { font-size: 1.02rem; margin: 24px 0 10px; letter-spacing: -.01em; } .tarjeta__contenido p { color: var(--tinta-suave); line-height: 1.75; margin-bottom: 10px; } /* ---- Responsive ---- */ @media (max-width: 720px) { .masthead__pie { grid-template-columns: 1fr; gap: 22px; } .masthead__dato { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 12px; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); text-align: left; } .masthead__numero { font-size: 2.1rem; } } @media (max-width: 560px) { .buscador { padding-top: 10px; } .pliego { grid-template-columns: 1fr; } .tarjeta__marca { gap: 14px; } .tarjeta__logo { width: 50px; height: 50px; } .clausulas__item { grid-template-columns: 32px 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }