/* ========================================================================== terminos.css — Estilos de /terminos (Términos y Condiciones). Diseño "Términos y condiciones Grupotriada" (Claude Design) integrado al chrome del sitio. El marcado conserva sus estilos EN LÍNEA (permitidos por la CSP: style-src 'unsafe-inline'); aquí van solo las reglas que un atributo style no puede expresar: pseudo-clases (:hover/:focus),
, media queries, keyframes y el tema CLARO del nav (esta página tiene hero crema, no oscuro como el home). La interacción vive en /assets/js/terminos.js. Todo se escopa bajo .page-legal (clase en ) para no tocar otras páginas. ========================================================================== */ /* ----- Acordeones nativos
(chevron + tarjeta activa) ----- */ .page-legal details summary { list-style: none; cursor: pointer; } .page-legal details summary::-webkit-details-marker { display: none; } .page-legal [data-chev] { transition: transform .3s ease; } .page-legal details[open] [data-chev] { transform: rotate(180deg); } .page-legal details[open] [data-acc-card] { border-color: #D9D1BC; background: #FFFFFF; } /* ----- Buscador ----- */ #tc-search::placeholder { color: #9aa0a8; } #tc-search:focus { border-color: #1C7A82; box-shadow: 0 0 0 3px rgba(127, 208, 204, .35); background: #fff; } /* ----- Estados :hover (sustituyen los style-hover del diseño dc) ----- */ .tc-cta:hover { transform: translateY(-2px); } .tc-ghost:hover { transform: translateY(-2px); border-color: #D9D1BC; } .tc-contact:hover { border-color: #1C7A82; } #tc-accept:hover { transform: translateY(-2px); } #tc-top:hover { background: #fff; } /* ----- Nav en tema CLARO (el hero de esta página es crema) ----- El nav del sitio es transparente con texto blanco (pensado para heros oscuros). Aquí lo volvemos crema translúcido con texto oscuro, como el nav del propio diseño, para que sea legible sobre el fondo claro. */ .page-legal .nav { background: rgba(244, 241, 233, .82); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid #E9E3D4; } .page-legal .nav.is-scrolled { background: rgba(244, 241, 233, .92); } .page-legal .nav__brand-name { color: #14222E; } /* Mismo botón teal del resto del sitio: apunta a los tokens en vez de repetir el gradiente y una sombra de una capa a .8 de alpha. */ .page-legal .nav__cta { background: var(--g-teal); color: #fff; box-shadow: var(--edge-light), var(--edge-dark), var(--sh-cta); } .page-legal .nav__toggle { color: #14222E; border-color: #E9E3D4; background: #FBF9F3; } /* Los enlaces oscuros solo en la barra de escritorio. En móvil el menú es un panel desplegable OSCURO, así que ahí conservan el blanco por defecto. */ @media (min-width: 821px) { .page-legal .nav__link { color: #46555F; } .page-legal .nav__link:hover { color: #14222E; } } /* ----- Responsivo (heredado del diseño) ----- */ @media (max-width: 960px) { /* `minmax(0,1fr)` y NO `1fr`: `1fr` = `minmax(auto,1fr)`, y ese `auto` deja que el min-content de un hijo "ancho" infle la columna por sobre el viewport. El culpable acá es la tabla de Pagos (`min-width:520px`): con `1fr` empujaba la grilla a ~558px → desborde horizontal en teléfono (el footer, que mide el viewport, quedaba más corto que el contenido). Con `minmax(0,1fr)` la columna se queda en el ancho disponible y la tabla scrollea dentro de su contenedor `overflow-x:auto`. (El diseño ya usaba `minmax(0,1fr)` en escritorio.) */ #tc-grid { grid-template-columns: minmax(0, 1fr) !important; } #tc-sidebar { display: none !important; } #tc-hero-grid { grid-template-columns: 1fr !important; } #tc-hero-art { order: -1; max-width: 380px; margin: 0 auto; } [data-cols2] { grid-template-columns: 1fr !important; } [data-cols3] { grid-template-columns: 1fr !important; } [data-comgrid] { grid-template-columns: 1fr !important; } [data-timeline] { grid-template-columns: 1fr !important; gap: 18px !important; } #tc-timeline-rail { display: none !important; } [data-tl-item] { display: flex !important; text-align: left !important; gap: 16px !important; align-items: flex-start; } /* El círculo numerado traía `margin:0 auto 14px` (centrado para el layout en COLUMNA del diseño). En FILA, ese `auto` reparte el espacio libre —que varía según el largo del texto de cada paso— así que cada número caía a una sangría distinta = "desordenados". Lo anclamos a la izquierda: todos alineados. */ [data-tl-item] > div:first-child { margin: 0 !important; } } /* ----- Teléfono (≤600px) ----- El diseño original solo traía UN corte a 960px (colapsa rejillas y oculta el índice), pensado para tablet. En teléfono quedaban dos problemas: (1) ESPACIO MAL APROVECHADO: los paddings anidados (página #tc-grid + cada tarjeta de sección) se comían ~1/4 del ancho útil (a 375px el contenido caía a ~283px). (2) HERO SOBREDIMENSIONADO: la ilustración (340px de alto) empujaba el título fuera de pantalla y el H1 dominaba. Aquí afinamos ese tramo: recuperamos ancho y bajamos el peso visual del hero. Los estilos del diseño van EN LÍNEA, así que estas reglas necesitan !important para ganar la cascada. Todo escopado a .page-legal (no toca otras páginas). */ @media (max-width: 600px) { /* Padding de página: menos margen lateral → el contenido respira a lo ancho. (antes ~20-30px/lado; ahora 13-20px → recupera ~10-15px por lado) */ .page-legal #tc-grid { padding-top: 20px !important; padding-right: clamp(13px, 4vw, 20px) !important; padding-bottom: 56px !important; padding-left: clamp(13px, 4vw, 20px) !important; } /* Tarjetas de sección: padding interno proporcional al teléfono (antes fijo en 26px; ahora 18-26px según ancho → +8px de contenido a 375px) */ .page-legal #tc-grid [data-sec] > div { padding: clamp(18px, 5vw, 26px) !important; } /* Buscador: un punto más bajo, sin tanto aire vertical */ .page-legal #tc-search { padding-top: 14px !important; padding-bottom: 14px !important; } /* Hero: menos alto muerto arriba/abajo y la rejilla más junta */ .page-legal #tc-hero-grid { padding-top: clamp(30px, 11vw, 64px) !important; padding-bottom: clamp(28px, 8vw, 56px) !important; gap: 24px !important; } /* Título del hero: que no domine la pantalla del teléfono (~37px → ~32px) */ .page-legal #tc-root header h1 { font-size: clamp(2rem, 8.5vw, 2.6rem) !important; } /* Ilustración del hero: compacta para que NO empuje el título hacia abajo (alto ~340px → ~220px; el halo decorativo también se reduce) */ .page-legal #tc-hero-art { min-height: 0 !important; max-width: 240px !important; } .page-legal #tc-hero-art > svg { max-width: 240px !important; } .page-legal #tc-hero-art > div:first-child { width: 210px !important; height: 210px !important; } } /* ----- Menos movimiento (WCAG 2.3.3) ----- */ @media (prefers-reduced-motion: reduce) { .page-legal [data-chev], .page-legal *[style*="animation"] { animation: none !important; } } /* ----- Keyframes de la ilustración del hero ----- */ @keyframes tcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes tcFloatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes tcGlow { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }