/* ========================================================= DESIGN SYSTEM BASE — Generado por Constructor de Base de Sitio Web Plataforma: Joomla Requiere: Bootstrap 5 (CSS/JS) + jQuery — ver / scripts del HTML generado. Este archivo se carga DESPUÉS de bootstrap.min.css para poder sobreescribirlo con las variables de marca. Se usan clases de Bootstrap en el HTML siempre que es posible; aquí solo se definen los tokens y las piezas que Bootstrap no puede resolver por tratarse de valores dinámicos (colores, tipografía, tamaños fluidos y contenedores a medida). ========================================================= */ @import url("https://use.typekit.net/kfq4frw.css"); :root{ /* Tipografía */ --font-heading: 'Interstate', sans-serif; --font-body: 'Interstate', sans-serif; --font-button: 'Interstate', sans-serif; /* Fondos */ --color-bg-light: #ffffff; --color-bg-dark: #0D1140; --color-bg-neutral: #EBF3FF; /* Texto */ --color-text-heading: #0D1140; --color-text-body: #363636; --color-text-accent: #4664FF; --color-text-extra: #1927BA; --color-on-bg-dark: #ffffff; --color-on-bg-accent: #ffffff; --color-accent: #4664FF; --color-on-bg-extblue2: #ffffff; --color-extblue2: #1927BA; --color-on-bg-extblue7: #ffffff; --color-extblue7: #93B7FF; --color-on-bg-guinda: #ffffff; --color-guinda: #7A2148; /* Tamaños tipográficos (fluidos) */ --fs-h1: clamp(2.000rem, 1.6479rem + 1.5023vw, 3.000rem); --fs-h2: clamp(1.625rem, 1.4049rem + 0.9390vw, 2.250rem); --fs-h3: clamp(1.375rem, 1.2430rem + 0.5634vw, 1.750rem); --fs-h4: clamp(1.125rem, 1.0370rem + 0.3756vw, 1.375rem); --fs-h5: clamp(1.000rem, 0.9560rem + 0.1878vw, 1.125rem); --fs-h6: clamp(0.875rem, 0.8310rem + 0.1878vw, 1.000rem); --fs-text: clamp(0.938rem, 0.9155rem + 0.0939vw, 1.000rem); --fs-text-secondary: clamp(0.813rem, 0.7905rem + 0.0939vw, 0.875rem); --fs-text-small: 0.750rem; --fs-button: clamp(0.938rem, 0.9155rem + 0.0939vw, 1.000rem); /* Contenedores */ --container-padding-x: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); /* Espaciado (escala tipo Bootstrap: Pequeño/Mediano/Grande, fluida) */ --gap-x: clamp(1.500rem, 0.9718rem + 2.2535vw, 3.000rem); --gap-y: clamp(2.500rem, 1.6197rem + 3.7559vw, 5.000rem); /* Botones — estructura compartida */ --btn-border-width: 1px; --btn-radius: 8px; --btn-height: 48px; --btn-padding-x: 24px; --btn-padding-y: 12px; --btn-font-size: var(--fs-button); --btn-font-weight: 600; --btn-transition-duration: 0.3s; /* Botones — uno por cada llave de btnColors (dark/neutral/accent siempre, más un bloque extra por cada color adicional con button:true) */ --btn-dark-bg: #0D1140; --btn-dark-text: #ffffff; --btn-dark-border: #0D1140; --btn-dark-hover-bg: #393c62; --btn-dark-hover-text: #ffffff; --btn-dark-hover-border: #393c62; --btn-neutral-bg: #EBF3FF; --btn-neutral-text: #111111; --btn-neutral-border: #EBF3FF; --btn-neutral-hover-bg: #c1c7d1; --btn-neutral-hover-text: #111111; --btn-neutral-hover-border: #c1c7d1; --btn-accent-bg: #4664FF; --btn-accent-text: #ffffff; --btn-accent-border: #4664FF; --btn-accent-hover-bg: #6780ff; --btn-accent-hover-text: #ffffff; --btn-accent-hover-border: #6780ff; --btn-extblue2-bg: #1927BA; --btn-extblue2-text: #ffffff; --btn-extblue2-border: #1927BA; --btn-extblue2-hover-bg: #424ec6; --btn-extblue2-hover-text: #ffffff; --btn-extblue2-hover-border: #424ec6; --btn-guinda-bg: #7A2148; --btn-guinda-text: #ffffff; --btn-guinda-border: #7A2148; --btn-guinda-hover-bg: #924969; --btn-guinda-hover-text: #ffffff; --btn-guinda-hover-border: #924969; /* Bullets */ --bullet-color: #f0b429; --bullet-gap: 0.6rem; } /* ---------- Base (complementa el reset de Bootstrap) ---------- */ body{ font-family: var(--font-body); color: var(--color-text-body); background-color: var(--color-bg-light); font-size: var(--fs-text); } h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); color: var(--color-text-heading); } h1{ font-size: var(--fs-h1); } h2{ font-size: var(--fs-h2); } h3{ font-size: var(--fs-h3); } h4{ font-size: var(--fs-h4); } h5{ font-size: var(--fs-h5); } h6{ font-size: var(--fs-h6); } p{ font-size: var(--fs-text); } .text-secondary{ font-size: var(--fs-text-secondary); color: var(--color-text-extra) !important; } .text-small{ font-size: var(--fs-text-small); } /* ---------- Espaciado vertical fluido (usar junto a las utilidades de Bootstrap) ---------- */ .section-py{ padding-block: var(--gap-y); } /* ---------- Fondos y texto de marca (evita repetir estilo en línea) ---------- */ .bg-light{ background-color: var(--color-bg-light); color: var(--color-text-body); } .bg-dark{ background-color: var(--color-bg-dark); color: var(--color-on-bg-dark); } .bg-neutral{ background-color: var(--color-bg-neutral); color: var(--color-text-body); } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6{ color: inherit; } .text-heading{ color: var(--color-text-heading); } /* Uno por cada color de marca: el accent principal siempre, más un bloque por cada color adicional definido en colors.extras (los que existan de verdad en la referencia — no hay un número fijo). */ .text-accent{ color: var(--color-accent); } .bg-accent{ background-color: var(--color-accent); color: var(--color-on-bg-accent); } .bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6{ color: inherit; } .badge-accent{ background-color: var(--color-accent); color: var(--color-on-bg-accent); } .text-extblue2{ color: var(--color-extblue2); } .bg-extblue2{ background-color: var(--color-extblue2); color: var(--color-on-bg-extblue2); } .bg-extblue2 h1, .bg-extblue2 h2, .bg-extblue2 h3, .bg-extblue2 h4, .bg-extblue2 h5, .bg-extblue2 h6{ color: inherit; } .badge-extblue2{ background-color: var(--color-extblue2); color: var(--color-on-bg-extblue2); } .text-extblue7{ color: var(--color-extblue7); } .bg-extblue7{ background-color: var(--color-extblue7); color: var(--color-on-bg-extblue7); } .bg-extblue7 h1, .bg-extblue7 h2, .bg-extblue7 h3, .bg-extblue7 h4, .bg-extblue7 h5, .bg-extblue7 h6{ color: inherit; } .badge-extblue7{ background-color: var(--color-extblue7); color: var(--color-on-bg-extblue7); } .text-guinda{ color: var(--color-guinda); } .bg-guinda{ background-color: var(--color-guinda); color: var(--color-on-bg-guinda); } .bg-guinda h1, .bg-guinda h2, .bg-guinda h3, .bg-guinda h4, .bg-guinda h5, .bg-guinda h6{ color: inherit; } .badge-guinda{ background-color: var(--color-guinda); color: var(--color-on-bg-guinda); } .card-step-bg{ background-color: color-mix(in srgb, var(--color-bg-dark) 80%, white 20%); } /* ---------- Contenedores a medida (usar con .row/.col-* de Bootstrap adentro) ---------- */ .container-full{ width:100%; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container-1400{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1400px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container-1200{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1200px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1200px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } /* alias por defecto, sobreescribe .container de Bootstrap */ /* ---------- Botones de marca (usar junto con .btn de Bootstrap: class="btn btn-brand btn-dark|btn-neutral|btn-accent|btn-extra") ---------- */ .btn-brand{ border-width: var(--btn-border-width); border-style: solid; border-radius: var(--btn-radius); min-height: var(--btn-height); padding: var(--btn-padding-y) var(--btn-padding-x); font-family: var(--font-button); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); transition: background-color var(--btn-transition-duration) ease, color var(--btn-transition-duration) ease, border-color var(--btn-transition-duration) ease; } .btn-dark{ background-color: var(--btn-dark-bg); color: var(--btn-dark-text); border-color: var(--btn-dark-border); } .btn-dark:hover, .btn-dark.hover-preview{ background-color: var(--btn-dark-hover-bg); color: var(--btn-dark-hover-text); border-color: var(--btn-dark-hover-border); } .btn-neutral{ background-color: var(--btn-neutral-bg); color: var(--btn-neutral-text); border-color: var(--btn-neutral-border); } .btn-neutral:hover, .btn-neutral.hover-preview{ background-color: var(--btn-neutral-hover-bg); color: var(--btn-neutral-hover-text); border-color: var(--btn-neutral-hover-border); } .btn-accent{ background-color: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-border); } .btn-accent:hover, .btn-accent.hover-preview{ background-color: var(--btn-accent-hover-bg); color: var(--btn-accent-hover-text); border-color: var(--btn-accent-hover-border); } .btn-extblue2{ background-color: var(--btn-extblue2-bg); color: var(--btn-extblue2-text); border-color: var(--btn-extblue2-border); } .btn-extblue2:hover, .btn-extblue2.hover-preview{ background-color: var(--btn-extblue2-hover-bg); color: var(--btn-extblue2-hover-text); border-color: var(--btn-extblue2-hover-border); } .btn-guinda{ background-color: var(--btn-guinda-bg); color: var(--btn-guinda-text); border-color: var(--btn-guinda-border); } .btn-guinda:hover, .btn-guinda.hover-preview{ background-color: var(--btn-guinda-hover-bg); color: var(--btn-guinda-hover-text); border-color: var(--btn-guinda-hover-border); } /* Sin estilo adicional */ /* ---------- Listas (usar junto con .list-unstyled de Bootstrap: class="list-unstyled list-check|list-numero|...") ---------- */ .list-check li{ position:relative; padding-left: calc(18px + var(--bullet-gap)); margin-bottom:.5rem; } .list-check li::before{ content:""; position:absolute; left:0; top:.25em; width:18px; height:18px; background-color: var(--bullet-color); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---------- Utilidades de color (nomenclatura genera-base-css-site) ---------- */ .bg-white{ background-color: #ffffff; } .white{ color: #ffffff; } .borde--white{ border-color: #ffffff; } .bg-midnightblue{ background-color: #0D1140; } .midnightblue{ color: #0D1140; } .borde--midnightblue{ border-color: #0D1140; } .bg-aliceblue{ background-color: #EBF3FF; } .aliceblue{ color: #EBF3FF; } .borde--aliceblue{ border-color: #EBF3FF; } .bg-darkslategray{ background-color: #363636; } .darkslategray{ color: #363636; } .borde--darkslategray{ border-color: #363636; } .bg-royalblue{ background-color: #4664FF; } .royalblue{ color: #4664FF; } .borde--royalblue{ border-color: #4664FF; } .bg-mediumblue{ background-color: #1927BA; } .mediumblue{ color: #1927BA; } .borde--mediumblue{ border-color: #1927BA; } .bg-lightskyblue{ background-color: #93B7FF; } .lightskyblue{ color: #93B7FF; } .borde--lightskyblue{ border-color: #93B7FF; } .bg-brown{ background-color: #7A2148; } .brown{ color: #7A2148; } .borde--brown{ border-color: #7A2148; }