/* =========================================================== CALIFAI, sistema de diseño Grupo paraguas y marcas: Avanta, Séneca, Axioma, Olea =========================================================== */ :root { /* Marca CALIFAI */ --navy: #1B2A8E; --navy-bright: #3A4AB0; --gold: #F6C61C; --midnight-1: #0A1020; --midnight-2: #16203A; --cream: #F6F2E9; --gray: #4A505C; --ink: #131726; --white: #ffffff; --line: #D4CBB8; --line-strong: #767C8A; /* Grises sobre fondo oscuro, tres niveles y ninguno más. #DCE2ED 12,42:1 sobre #16203A · #AAB3C4 7,65:1 · #9AA3B4 7,47:1 */ --on-dark-1: #DCE2ED; --on-dark-2: #AAB3C4; --on-dark-3: #9AA3B4; /* Solo para el degradado de marca */ --navy-deep-grad: #141f63; /* Acento por defecto = CALIFAI (lo sobrescribe cada marca). --accent: barras, bordes, iconos decorativos y fondos oscuros. --accent-ink: cualquier TEXTO de acento sobre fondo claro (contraste AA). --accent-rgb: el mismo acento en canales sueltos, para sombras con alfa. */ --accent: #E07B1E; --accent-rgb: 224 123 30; --accent-soft: rgba(224, 123, 30, .12); --accent-ink: #A34E0B; --accent-ink-strong: #8A400A; --brand-grad: linear-gradient(135deg, #22338f 0%, var(--navy-deep-grad) 100%); /* Colores de las cuatro marcas. Aviso: el de cada página de marca repite estos hex a mano, si cambias uno aquí actualiza también el meta. */ --c-avanta: #C9912B; --c-seneca: #2647C4; --c-axioma: #7A5AF8; --c-olea: #1F9D63; /* Variantes para texto sobre fondo claro */ --c-avanta-ink: #8A5F14; --c-seneca-ink: #2647C4; --c-axioma-ink: #5A36E0; --c-olea-ink: #146B43; --maxw: 1180px; /* Escala tipográfica */ --fs-display: clamp(2.5rem, 1.45rem + 3.35vw, 4rem); --fs-h2: clamp(2rem, 1.55rem + 1.55vw, 2.75rem); --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.25rem); --fs-body: 1.0625rem; --fs-sm: .9375rem; --fs-xs: .8125rem; --fs-2xs: .75rem; /* Escala de espaciado */ --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem; --sp-6: 3rem; --sp-7: 4rem; --sp-8: 5rem; --sp-9: 7rem; /* Radios: 8 / 12 / 20 / 28 / 999, más la proporción de los cuadrados */ --radius-xs: 8px; --radius-sm: 12px; --radius: 20px; --radius-lg: 28px; --radius-tile: 28%; --header-h: 76px; /* Elevación: dos capas, una sola tinta */ --shadow-sm: 0 1px 2px rgba(19, 24, 64, .06), 0 2px 6px rgba(19, 24, 64, .05); --shadow: 0 2px 6px rgba(19, 24, 64, .06), 0 14px 34px rgba(19, 24, 64, .10); --shadow-lg: 0 4px 10px rgba(19, 24, 64, .08), 0 30px 64px rgba(19, 24, 64, .16); --font-head: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); } /* La sombra de acento se declara en el a propósito: las var() de dentro de una custom property se resuelven en el elemento donde se declara, y la clase de marca vive justo ahí, así que hereda el --accent-rgb correcto. */ body { --shadow-accent: 0 2px 6px rgb(var(--accent-rgb) / .18), 0 12px 28px -10px rgb(var(--accent-rgb) / .45); } /* Acentos por marca (se aplican con class en ) */ .brand-avanta { --accent:#C9912B; --accent-rgb:201 145 43; --accent-soft:rgba(201,145,43,.12); --accent-ink:#8A5F14; --accent-ink-strong:#6E4B10; --brand-grad:linear-gradient(135deg,#22338f,var(--navy-deep-grad)); } .brand-seneca { --accent:#2647C4; --accent-rgb:38 71 196; --accent-soft:rgba(38,71,196,.12); --accent-ink:#2647C4; --accent-ink-strong:#1a328f; --brand-grad:linear-gradient(135deg,#274ad0,#16308f); } .brand-axioma { --accent:#7A5AF8; --accent-rgb:122 90 248; --accent-soft:rgba(122,90,248,.14); --accent-ink:#5A36E0; --accent-ink-strong:#4526B8; --brand-grad:linear-gradient(135deg,#5A36E0,#4526B8); } .brand-olea { --accent:#1F9D63; --accent-rgb:31 157 99; --accent-soft:rgba(31,157,99,.13); --accent-ink:#146B43; --accent-ink-strong:#0F5334; --brand-grad:linear-gradient(135deg,#15784c,#0F5334); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.25rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; font-size: var(--fs-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } img, svg { max-width: 100%; display: block; height: auto; } a { color: var(--navy); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: normal; margin: 0 0 .4em; font-weight: 600; } h1, h2 { text-wrap: balance; } p { margin: 0 0 1rem; } .container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } /* Cualquier texto de acento, también los titulares grandes: el --accent puro se queda en 2,79:1 sobre la crema del hero y no llega ni al 3:1 de texto grande. Con --accent-ink son 5,37:1 sobre #F9F7F1. */ .accent { color: var(--accent-ink); } .accent-ink { color: var(--accent-ink); } /* para texto normal sobre fondo claro */ .text-balance { text-wrap: balance; } /* Único hueco extra que hace falta: separar un bloque suelto de lo que tiene encima */ .mt-gap { margin-top: var(--sp-5); } /* ---------- Accesibilidad ---------- */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 1000; } /* El radio va en :focus porque el skip link solo se ve enfocado y la regla genérica :focus-visible, de la misma especificidad, iría después. */ .skip-link:focus { left: 0; border-radius: 0 0 var(--radius-sm) 0; } :focus-visible { outline: 3px solid #0A1020; outline-offset: 3px; border-radius: var(--radius-xs); box-shadow: 0 0 0 6px #FFFFFF; } .section--dark :focus-visible, .brandhero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 6px rgba(10,16,32,.85); } /* La tarjeta del formulario es blanca aunque cuelgue de .section--dark, así que recupera el anillo oscuro. Va después para ganar a igual especificidad. */ .form :focus-visible { outline-color: #0A1020; box-shadow: 0 0 0 6px #FFFFFF; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: .85rem 1.55rem; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn svg { width: 1.05em; height: 1.05em; stroke-width: 2.55; } .btn--primary { background: var(--accent-ink); color: #fff; box-shadow: var(--shadow-accent); } .btn--primary:hover { background: var(--accent-ink-strong); transform: translateY(-2px); box-shadow: 0 4px 10px rgb(var(--accent-rgb) / .22), 0 18px 34px -12px rgb(var(--accent-rgb) / .4); } .btn--ghost { background: transparent; color: var(--navy); border-color: rgba(27,42,142,.25); } .btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); } .btn--light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); } .btn--light:hover { background: #fff; color: var(--midnight-1); transform: translateY(-2px); } .btn--small { padding: .6rem 1.15rem; font-size: var(--fs-sm); background: var(--navy); color: #fff; } .btn--small:hover { background: var(--navy-bright); transform: translateY(-2px); } .btn--block { width: 100%; } /* ---------- Header / Navbar ---------- */ .site-header { position: sticky; top: 0; z-index: 100; /* sticky ya sirve de referencia al menu movil */ background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); } @media (min-width: 861px) { @supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(255,255,255,.72); backdrop-filter: saturate(150%) blur(14px); } } } .nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 1rem; } .nav__logo { display: inline-flex; } .nav__logo img { height: 40px; width: auto; } .nav__menu { display: flex; align-items: center; gap: 1.7rem; } .nav__menu a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--fs-sm); position: relative; } .nav__menu a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--accent-ink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .nav__menu a:not(.btn):hover::after { transform: scaleX(1); } .nav__menu a.btn { color: #fff; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; } .nav__toggle span { width: 26px; height: 2.5px; background: var(--navy); border-radius: 3px; transition: .25s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- Utilidades de sección ---------- */ .section { padding: clamp(var(--sp-7), 8vw, var(--sp-9)) 0; } /* Abre y cierra en blanco: la costura con la sección vecina queda a delta 0 */ .section--cream { background: linear-gradient(180deg, #fff 0%, var(--cream) 18%, var(--cream) 82%, #fff 100%); } .section--dark { background: radial-gradient(900px 500px at 80% -10%, rgba(246,198,28,.10), transparent 60%), linear-gradient(165deg, var(--midnight-2) 0%, var(--midnight-1) 100%); color: var(--on-dark-1); } .section__head { max-width: none; margin-bottom: var(--sp-6); } .section__head--center { text-align: center; } .section__head--center .section__title, .section__head--center .section__lead { margin-inline: auto; } /* Antetítulos: un solo lenguaje, la píldora del hero solo cambia el fondo */ .eyebrow, .brandhero__kicker, .hero__eyebrow { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-2xs); color: var(--accent-ink); margin-bottom: var(--sp-3); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .eyebrow--center::before { display: none; } .eyebrow--light { color: var(--gold); } .section__title { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; color: var(--navy); max-width: 20ch; } .section__title--light { color: #fff; } .section__lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--gray); max-width: 58ch; } .section--dark .section__lead { color: var(--on-dark-2); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(var(--sp-7), 8vw, var(--sp-9)) 0; background: linear-gradient(180deg, #fff 0%, var(--cream) 45%, var(--cream) 72%, #fff 100%); } /* La capa blanca final apaga el halo azul justo en el borde inferior, para que el hero cierre en blanco puro y la costura con la franja quede a delta 0. */ .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 88%, #fff 100%), radial-gradient(720px 360px at 88% 0%, rgba(246,198,28,.22), transparent 62%), radial-gradient(640px 420px at 5% 110%, rgba(27,42,142,.08), transparent 60%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; background: rgba(27,42,142,.06); border: 1px solid rgba(27,42,142,.12); color: var(--navy); padding: .4rem 1rem; border-radius: 999px; font-size: var(--fs-xs); margin-bottom: var(--sp-4); } .hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(246,198,28,.25); } .hero__title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; color: var(--navy); } .hero__subtitle { font-size: var(--fs-lead); line-height: 1.45; color: var(--gray); max-width: 34ch; margin-top: .4rem; text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: var(--sp-5) 0 var(--sp-4); } .hero__note { font-size: var(--fs-sm); color: var(--gray); max-width: 50ch; border-left: 3px solid var(--accent-ink); padding-left: 1rem; } .hero__art { position: relative; } .hero__art img { width: 100%; max-width: 440px; margin-inline: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .hero__badge { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.2rem; font-size: var(--fs-xs); font-weight: 600; color: var(--navy); white-space: nowrap; } /* ---------- Trust strip ---------- */ /* La línea de abajo cierra la franja: sin ella los cuatro items flotan sueltos en el blanco. Arriba no lleva nada, para que la costura con el hero sea plana. */ .trust { background: var(--white); border-bottom: 1px solid var(--line); } .trust__inner { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: center; padding: var(--sp-3) 0; } .trust__item { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); font-weight: 500; color: var(--gray); } .trust__item svg { width: 20px; height: 20px; stroke-width: 2.15; color: var(--accent-ink); } /* ---------- Iconos ---------- */ .icon-badge { width: 56px; height: 56px; border-radius: var(--radius-tile); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: var(--sp-3); } .icon-badge svg { width: 28px; height: 28px; stroke-width: 1.55; } /* ---------- Marcas del grupo (tarjetas-enlace) ---------- */ .brands { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 600px) { .brands { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .brands { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .brand-card { --c: var(--navy); --c-ink: var(--navy); position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-decoration: none; color: inherit; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } @media (min-width: 1100px) { .brand-card { padding: 1.75rem 1.6rem; } } .brand-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c); } .brand-card:hover::before { transform: scaleX(1); } .brand-card[data-c="avanta"] { --c: var(--c-avanta); --c-ink: var(--c-avanta-ink); } .brand-card[data-c="seneca"] { --c: var(--c-seneca); --c-ink: var(--c-seneca-ink); } .brand-card[data-c="axioma"] { --c: var(--c-axioma); --c-ink: var(--c-axioma-ink); } .brand-card[data-c="olea"] { --c: var(--c-olea); --c-ink: var(--c-olea-ink); } .brand-card__mark { width: 64px; height: 64px; border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-4); } .brand-card__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--navy); margin-bottom: .15rem; } .brand-card__name b { color: var(--c-ink); font-weight: 700; } .brand-card__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); margin-bottom: .9rem; } .brand-card__desc { color: var(--gray); font-size: var(--fs-sm); flex: 1; text-wrap: pretty; } .brand-card__cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--sp-4); font-weight: 600; color: var(--c-ink); } .brand-card__cta svg { width: 1.05em; height: 1.05em; stroke-width: 2.55; transition: transform .25s var(--ease); } .brand-card:hover .brand-card__cta svg { transform: translateX(4px); } /* ---------- Tarjetas de servicios ---------- */ .cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } .card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--navy); } .card__what { color: var(--gray); font-size: var(--fs-sm); text-wrap: pretty; } .card__list { margin: auto 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); list-style: none; } .card__list li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: var(--fs-sm); } .card__list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background-color: var(--accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat; } /* ---------- Por qué (dark) ---------- */ .porque { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3.5rem; align-items: center; } .porque__media img { width: 100%; max-width: 380px; margin-inline: auto; filter: drop-shadow(0 24px 48px rgba(0,0,0,.32)); } .features { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: var(--sp-4); } .features li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; max-width: 62ch; } .features .f-ico { width: 42px; height: 42px; border-radius: var(--radius-tile); display: grid; place-items: center; background: rgba(246,198,28,.14); color: var(--gold); } .features .f-ico svg { width: 22px; height: 22px; stroke-width: 2; } .features h3 { color: #fff; font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; margin-bottom: .35em; } .features p { color: var(--on-dark-2); margin: 0; font-size: var(--fs-sm); max-width: 62ch; } /* ---------- Proceso ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 600px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; background: #fff; border-radius: var(--radius); padding: 2rem 1.7rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .step__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-tile); background: var(--brand-grad); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); margin-bottom: var(--sp-3); } .step__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; color: var(--navy); margin-bottom: .35em; } .step p { color: var(--gray); margin: 0; font-size: var(--fs-sm); } /* ---------- Nosotros ---------- */ .nosotros { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: center; } .photo-placeholder { aspect-ratio: 4/5; max-width: 340px; margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-grad); display: grid; place-items: center; padding: var(--sp-5); box-shadow: var(--shadow-lg); } .photo-placeholder img { width: 72%; } .nosotros p { max-width: 62ch; } .nosotros__name { font-size: var(--fs-sm); color: var(--gray); border-left: 3px solid var(--accent-ink); padding-left: 1rem; max-width: 62ch; } /* ---------- Contacto ---------- */ .contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .contacto__lead { color: var(--on-dark-2); line-height: 1.45; max-width: 62ch; } .contacto__list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1rem; } .contacto__list li { display: flex; align-items: center; gap: .8rem; color: var(--on-dark-1); } .contacto__list svg { width: 20px; height: 20px; stroke-width: 2.15; color: var(--gold); flex-shrink: 0; } .contacto__list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); } .contacto__list a:hover { border-color: var(--gold); color: var(--gold); } .form { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-lg); } .form__notice { background: var(--cream); border-left: 3px solid var(--accent-ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .9rem 1.1rem; font-size: var(--fs-sm); color: var(--gray); margin-bottom: var(--sp-4); } .form__row { margin-bottom: var(--sp-3); } .form label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: .45rem; } .form input, .form select, .form textarea { width: 100%; font-family: inherit; font-size: 1rem; padding: .8rem .95rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: #fbfaf6; color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; } /* Flecha propia del desplegable, en SVG, porque appearance:none quita la nativa */ .form select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A505C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; background-size: 18px 18px; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid #0A1020; outline-offset: 2px; border-color: #0A1020; background-color: #fff; } .form textarea { resize: vertical; } /* Inactivo sin opacity: el día que se active, los bordes no dan un salto de peso */ .form :disabled { background-color: #F2F0EA; border-color: #B9BEC7; color: #5B6270; cursor: not-allowed; } .form .btn:disabled { box-shadow: none; } .form__check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: var(--fs-sm); margin-bottom: var(--sp-4); padding: .4rem 0; } .form__check input { width: 20px; height: 20px; margin-top: .3rem; } .form__check a { color: var(--navy); } /* Atenuado con color sólido, no con opacity: el enlace legal se queda en var(--navy) a 12,0:1 y el texto que lo acompaña en #5B6270 a 6,13:1. */ .form__check:has(:disabled) { color: #5B6270; } .form__check:has(:disabled) a { color: var(--navy); } /* ---------- CTA band ---------- */ .cta-band { background: var(--brand-grad); border-radius: var(--radius-lg); padding: clamp(var(--sp-5), 5vw, 3.5rem); text-align: center; color: #fff; box-shadow: var(--shadow-lg); } .cta-band h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; max-width: 24ch; margin-inline: auto; } .cta-band p { color: var(--on-dark-1); max-width: 50ch; margin-inline: auto; line-height: 1.45; text-wrap: pretty; } .cta-band .btn { margin-top: var(--sp-4); } /* Es la llamada a la acción de cierre de la página: sólida, como el botón principal del hero de marca. El botón fantasma daba 2,93:1 de borde. */ .cta-band .btn--light { background: #fff; border-color: #fff; color: var(--accent-ink-strong); } .cta-band .btn--light:hover { background: var(--cream); color: var(--accent-ink-strong); } /* ---------- Footer ---------- */ .site-footer { background: var(--midnight-1); color: var(--on-dark-2); padding-top: 3.5rem; border-top: 1px solid rgba(255,255,255,.10); } .section--dark + .site-footer { padding-top: 2.5rem; } .footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-5); } .footer__brand img { height: 38px; width: auto; margin-bottom: 1rem; } .footer__brand p { max-width: 40ch; font-size: var(--fs-sm); } .footer h2, .footer h3, .footer h4 { color: #fff; font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .footer__col a { color: var(--on-dark-1); text-decoration: none; font-size: var(--fs-sm); } .footer__col a:hover { color: var(--gold); } .footer__legal { font-size: var(--fs-sm); } .footer__legal strong { color: #fff; } .footer__legal ul { margin-top: .8rem; } .placeholder { color: var(--on-dark-3); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-3) 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; } .footer__bottom p { margin: 0; font-size: var(--fs-xs); color: var(--on-dark-3); } /* Pie corto de las páginas legales */ .footer__links a { color: var(--on-dark-1); text-decoration: none; } .footer__links a:hover { color: var(--gold); } /* ---------- Páginas de marca: hero ---------- */ .brandhero { position: relative; overflow: hidden; color: #fff; padding: clamp(var(--sp-7), 8vw, var(--sp-9)) 0; background: var(--brand-grad); } .brandhero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 320px at 85% -10%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; } .brandhero__inner { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; } .brandhero__mark { width: 96px; height: 96px; border-radius: var(--radius-tile); margin-top: .35em; box-shadow: 0 10px 30px rgba(10,16,32,.28), 0 0 0 2px rgba(255,255,255,.85); } .brandhero__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: #fff; max-width: 18ch; margin-bottom: var(--sp-3); } .brandhero__kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); } .brandhero__kicker a:hover { border-color: #fff; } .brandhero h1 { font-size: clamp(2.75rem, 1.9rem + 2.7vw, 4rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; max-width: 18ch; } .brandhero p { color: #fff; font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; text-wrap: pretty; } .brandhero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; } /* Jerarquía de los dos botones: el primero es el principal */ .brandhero__actions .btn--light { border-color: rgba(255,255,255,.9); } .brandhero__actions .btn--light:first-child { background: #fff; border-color: #fff; color: var(--accent-ink-strong); } .brandhero__actions .btn--light:first-child:hover { background: var(--cream); } .backlink { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--accent-ink); margin-bottom: var(--sp-4); } .backlink svg { width: 1.05em; height: 1.05em; stroke-width: 2.55; } .backlink:hover { color: var(--accent-ink-strong); } /* ---------- Páginas legales ---------- */ .legal { padding: clamp(2.5rem, 5vw, 4rem) 0; } .legal .container { max-width: 780px; } .legal h1 { color: var(--navy); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; } .legal h2 { color: var(--navy); font-size: var(--fs-h3); margin-top: var(--sp-5); } /* El recuadro .note de estas páginas es el mismo componente que el del resto del sitio, declarado más arriba. No hace falta repetirlo aquí. */ /* ---------- Lista de marcas de la página 404 ---------- */ .marca-links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: .75rem; } .marca-links li { --c: var(--navy); --c-ink: var(--navy); } .marca-links li[data-c="avanta"] { --c: var(--c-avanta); --c-ink: var(--c-avanta-ink); } .marca-links li[data-c="seneca"] { --c: var(--c-seneca); --c-ink: var(--c-seneca-ink); } .marca-links li[data-c="axioma"] { --c: var(--c-axioma); --c-ink: var(--c-axioma-ink); } .marca-links li[data-c="olea"] { --c: var(--c-olea); --c-ink: var(--c-olea-ink); } .marca-links a { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; padding: .95rem 1.15rem; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius-sm); background: #fff; text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .marca-links a:hover { border-color: var(--c); background: var(--cream); transform: translateX(3px); } .marca-links b { color: var(--c-ink); font-family: var(--font-head); font-size: var(--fs-h4); } .marca-links span { color: var(--gray); font-size: var(--fs-sm); } /* =========================================================== Componentes de las páginas largas de servicio (Avanta: asesoría, tercer sector y fondos europeos) =========================================================== */ /* ---------- Migas ---------- */ .crumbs { font-size: var(--fs-xs); color: var(--gray); margin-bottom: var(--sp-3); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0; padding: 0; } .crumbs li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--line-strong); } .crumbs a { color: var(--gray); text-decoration: none; border-bottom: 1px solid transparent; } .crumbs a:hover { color: var(--accent-ink); border-bottom-color: currentColor; } .crumbs [aria-current] { color: var(--ink); font-weight: 600; } /* ---------- Subnavegación de página larga ---------- Se pega justo debajo de la cabecera. Scroll horizontal en móvil, porque partirla en dos líneas descoloca el resto de la página. */ .pagenav { position: sticky; top: var(--header-h); z-index: 90; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); } @supports (backdrop-filter: blur(1px)) { .pagenav { background: rgba(255,255,255,.82); backdrop-filter: saturate(150%) blur(12px); } } .pagenav__inner { display: flex; gap: 1.6rem; align-items: center; overflow-x: auto; scrollbar-width: none; padding: .7rem 0; } .pagenav__inner::-webkit-scrollbar { display: none; } .pagenav a { white-space: nowrap; text-decoration: none; color: var(--gray); font-size: var(--fs-sm); font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; } .pagenav a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } /* La sección en pantalla la marca script.js. Sin JavaScript no se marca ninguna y la barra sigue siendo un índice perfectamente utilizable. */ .pagenav a.is-current { color: var(--accent-ink); border-bottom-color: var(--accent-ink); font-weight: 600; } .pagenav__label { flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); padding-right: .4rem; border-right: 1px solid var(--line); margin-right: .2rem; } @media (max-width: 860px) { .pagenav__label { display: none; } } /* Cuando hay subnav, el ancla debe dejar sitio a las dos barras */ .has-pagenav { scroll-padding-top: calc(var(--header-h) + 60px); } /* ---------- Hero de marca con datos ---------- */ .brandhero__facts { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .brandhero__facts li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: .4rem .9rem; } .brandhero__facts svg { width: 15px; height: 15px; stroke-width: 2.3; flex: 0 0 auto; } /* El hero de las páginas de servicio va a ancho completo, sin la marca al lado */ .brandhero--wide .brandhero__inner { grid-template-columns: 1fr; } .brandhero--wide h1 { max-width: 22ch; } .brandhero--wide p { max-width: 62ch; } /* ---------- Perfiles de cliente ---------- */ .audience { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 800px) { .audience { grid-template-columns: repeat(3, 1fr); } } .audience__item { position: relative; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.9rem 1.7rem; box-shadow: var(--shadow-sm); } .audience__item h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--navy); margin-bottom: .5rem; } .audience__item p { color: var(--gray); font-size: var(--fs-sm); margin-bottom: .9rem; text-wrap: pretty; } .audience__tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .6rem; } .audience__item ul { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: .45rem; } .audience__item li { font-size: var(--fs-sm); padding-left: 1.15rem; position: relative; color: var(--ink); } .audience__item li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); } /* ---------- Bloques de servicio en detalle ---------- Dos columnas: el enunciado a la izquierda, el detalle a la derecha. Es la retícula que usan los despachos, y aguanta mucho texto sin cansar. */ .svc { display: grid; gap: 0; border-top: 1px solid var(--line); } .svc__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: start; } @media (max-width: 860px) { .svc__row { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; } } .svc__head { position: sticky; top: calc(var(--header-h) + 72px); } @media (max-width: 860px) { .svc__head { position: static; } } .svc__num { display: block; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--accent-ink); margin-bottom: .4rem; } .svc__title { font-size: var(--fs-h3); color: var(--navy); margin-bottom: .5rem; } .svc__intro { color: var(--gray); font-size: var(--fs-sm); margin: 0; max-width: 40ch; text-wrap: pretty; } .svc__body > p:first-child { margin-top: 0; } /* El margen inferior no es decorativo: sin él, el párrafo que sigue a la lista arranca pegado a la última fila y se lee como si fuera un ítem más. */ .svc__grid { display: grid; grid-template-columns: 1fr; gap: .5rem 2rem; list-style: none; margin: 0 0 var(--sp-4); padding: 0; } .svc__body > :last-child { margin-bottom: 0; } @media (min-width: 620px) { .svc__grid { grid-template-columns: 1fr 1fr; } } .svc__grid li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); line-height: 1.5; } .svc__grid li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background-color: var(--accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat; } .svc__grid li b { font-weight: 600; } /* ---------- Avisos: nota, riesgo y dato ---------- Tres tonos y ninguno más. El de riesgo usa un rojo propio porque el naranja de Avanta se confunde con una advertencia y pierde fuerza. */ .note, .risk, .datum { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.1rem 1.3rem; margin: var(--sp-4) 0; font-size: var(--fs-sm); line-height: 1.55; } .note { background: var(--cream); border-left: 3px solid var(--accent-ink); color: var(--ink); } .risk { background: #FDF2F0; border-left: 3px solid #B3261E; color: #4A1512; } .datum { background: #F1F4FB; border-left: 3px solid var(--navy); color: #1A2340; } .note > :last-child, .risk > :last-child, .datum > :last-child { margin-bottom: 0; } .note__label, .risk__label, .datum__label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; } .note__label { color: var(--accent-ink-strong); } .risk__label { color: #8C1D18; } .datum__label { color: var(--navy); } .note__label svg, .risk__label svg, .datum__label svg { width: 15px; height: 15px; stroke-width: 2.3; } /* El aviso admite dos formas:
con el rótulo y párrafos dentro, o un

suelto con el rótulo delante. En el segundo caso inline-flex dejaría el rótulo pegado al texto, así que ahí pasa a flex, que sí ocupa su propia línea. */ p.note > .note__label, p.risk > .risk__label, p.datum > .datum__label { display: flex; } .section--dark .note { background: rgba(246,198,28,.10); border-left-color: var(--gold); color: var(--on-dark-1); } .section--dark .note__label { color: var(--gold); } /* ---------- Tabla de especificaciones ---------- En móvil se convierte en fichas: cada celda lleva su etiqueta en ::before. */ .table-wrap { overflow-x: auto; margin: var(--sp-4) 0; -webkit-overflow-scrolling: touch; } .spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .spec caption { text-align: left; font-size: var(--fs-xs); color: var(--gray); padding-bottom: .7rem; } .spec th, .spec td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .spec thead th { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--navy); background: var(--cream); border-bottom: 2px solid var(--accent); white-space: nowrap; } .spec tbody th { font-weight: 600; color: var(--ink); } .spec tbody tr:hover { background: rgba(0,0,0,.015); } .spec code { font-size: .92em; background: var(--cream); padding: .1rem .35rem; border-radius: 4px; } @media (max-width: 720px) { .spec, .spec tbody, .spec tr, .spec td, .spec th { display: block; } .spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .spec tbody tr { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: .85rem; padding: .35rem .2rem; background: #fff; } .spec tbody th, .spec tbody td { border-bottom: 0; padding: .45rem 1rem; } .spec tbody td::before { content: attr(data-th) ""; display: block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); margin-bottom: .15rem; } .spec tbody th { font-size: var(--fs-body); color: var(--navy); font-family: var(--font-head); padding-top: .8rem; } } /* ---------- Calendario de obligaciones ---------- */ .cal { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 0; } .cal li { display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-4); padding: 1.1rem 0; border-top: 1px solid var(--line); align-items: baseline; } .cal li:last-child { border-bottom: 1px solid var(--line); } @media (max-width: 620px) { .cal li { grid-template-columns: 1fr; gap: .3rem; } } .cal__when { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-body); color: var(--accent-ink); line-height: 1.25; } .cal__what { margin: 0; } .cal__what b { display: block; font-weight: 600; color: var(--ink); } .cal__what span { display: block; color: var(--gray); font-size: var(--fs-sm); margin-top: .15rem; } .section--dark .cal li { border-color: rgba(255,255,255,.12); } .section--dark .cal__when { color: var(--gold); } .section--dark .cal__what b { color: #fff; } .section--dark .cal__what span { color: var(--on-dark-2); } /* ---------- Qué te entregamos ---------- Va arriba del todo en las páginas de especialidad. Es lo primero que necesita entender quien llega: qué compra, no qué dice la ley. */ .deliver { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); } @media (min-width: 700px) { .deliver { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1050px) { .deliver { grid-template-columns: repeat(4, 1fr); } } .deliver__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.4rem 1.35rem; } .deliver__item h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .35rem; line-height: 1.3; } .deliver__item p { margin: 0; font-size: var(--fs-sm); color: var(--gray); line-height: 1.5; text-wrap: pretty; } .deliver__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: .8rem; } .deliver__ico svg { width: 19px; height: 19px; stroke-width: 2; } /* Resumen rápido: la respuesta en veinte segundos, antes de cualquier norma */ .gist { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 1.6rem 1.7rem; max-width: 74ch; } .gist p { margin: 0 0 .7rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); text-wrap: pretty; } .gist p:last-child { margin-bottom: 0; } .gist strong { color: var(--accent-ink-strong); } /* ---------- Secciones plegables ---------- El detalle normativo vive aquí. Quien quiere el servicio no lo ve; quien quiere comprobar que sabemos del tema, lo abre. Al ir en

el contenido sigue en el HTML, así que los buscadores lo leen igual. */ .disclose { display: grid; gap: var(--sp-3); } .disclose > details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .disclose > details[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); } .disclose > details:hover { border-color: var(--line-strong); } .disclose > details[open]:hover { border-color: var(--accent); } .disclose summary { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; } .disclose summary::-webkit-details-marker { display: none; } .disclose summary::after { content: ""; width: 22px; height: 22px; background-color: var(--accent-ink); transition: transform .25s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px no-repeat; } .disclose details[open] > summary::after { transform: rotate(180deg); } .disclose__title { font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700; color: var(--navy); line-height: 1.3; display: block; } .disclose__hint { display: block; font-size: var(--fs-sm); color: var(--gray); margin-top: .2rem; font-weight: 400; font-family: var(--font-body); text-wrap: pretty; } .disclose__body { padding: 0 1.4rem 1.5rem; border-top: 1px solid var(--line); margin-top: -1px; padding-top: 1.4rem; } .disclose__body > :first-child { margin-top: 0; } .disclose__body > :last-child { margin-bottom: 0; } .disclose__body h4 { font-size: var(--fs-body); font-weight: 700; color: var(--navy); margin: var(--sp-4) 0 .4rem; font-family: var(--font-head); } .disclose__body ul, .disclose__body ol { padding-left: 1.25rem; margin: 0 0 1rem; } .disclose__body li { margin-bottom: .4rem; font-size: var(--fs-sm); line-height: 1.55; } .disclose__body p { font-size: var(--fs-sm); line-height: 1.6; } .disclose__body .svc__grid li { font-size: var(--fs-sm); } /* Los avisos dentro de un plegable se ajustan al ancho reducido */ .disclose__body .note, .disclose__body .risk, .disclose__body .datum { margin: var(--sp-3) 0; } /* ---------- Preguntas frecuentes ---------- */ .faq { max-width: 76ch; margin-inline: auto; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.15rem .25rem; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; color: var(--navy); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: .3em; background-color: var(--accent-ink); transition: transform .25s var(--ease); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat; } .faq details[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--accent-ink); } .faq__answer { padding: 0 .25rem 1.35rem; color: var(--gray); max-width: 70ch; } .faq__answer > :last-child { margin-bottom: 0; } .faq__answer strong { color: var(--ink); } /* ---------- Planes / modelo de precio ---------- */ .plans { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; } @media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } } .plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); height: 100%; } .plan--feature { border-color: var(--accent); box-shadow: var(--shadow); position: relative; } .plan__flag { position: absolute; top: -13px; left: 1.8rem; background: var(--accent-ink); color: #fff; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; } .plan__name { font-size: var(--fs-h4); font-weight: 700; color: var(--navy); margin-bottom: .3rem; } .plan__for { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--sp-3); } .plan__price { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: .2rem; } .plan__price small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--gray); margin-top: .3rem; } .plan ul { list-style: none; margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; flex: 1; } .plan li { position: relative; padding-left: 1.55rem; font-size: var(--fs-sm); line-height: 1.5; } .plan li::before { content: ""; position: absolute; left: 0; top: .3em; width: 15px; height: 15px; background-color: var(--accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat; } .plan li.is-off { color: var(--gray); } .plan li.is-off::before { background-color: var(--line-strong); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } /* ---------- Cifras ---------- */ .stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-5); } @media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stats li { border-left: 3px solid var(--accent); padding-left: 1.1rem; } .stats b { display: block; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--navy); } .stats span { display: block; font-size: var(--fs-sm); color: var(--gray); margin-top: .25rem; text-wrap: pretty; } .section--dark .stats li { border-left-color: var(--gold); } .section--dark .stats b { color: #fff; } .section--dark .stats span { color: var(--on-dark-2); } /* ---------- Qué no hacemos ---------- */ .scope { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 860px) { .scope { grid-template-columns: 1fr 1fr; } } .scope__col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.7rem; } .scope__col--out { background: var(--cream); } .scope__col h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--navy); margin-bottom: var(--sp-3); } .scope__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .scope__col li { position: relative; padding-left: 1.7rem; font-size: var(--fs-sm); line-height: 1.5; } .scope__col li::before { content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .scope__col--in li::before { background-color: #146B43; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .scope__col--out li::before { background-color: #8C1D18; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); } .scope__note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--gray); margin: 0; } /* ---------- Glosario ---------- */ .glossary { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); margin: 0; } @media (min-width: 800px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); } } .glossary > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .glossary dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-body); color: var(--navy); margin-bottom: .25rem; } .glossary dt span { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .15rem; } .glossary dd { margin: 0; font-size: var(--fs-sm); color: var(--gray); line-height: 1.55; } /* ---------- Enlaces entre páginas hermanas ---------- */ .next-pages { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-5); } @media (min-width: 760px) { .next-pages { grid-template-columns: 1fr 1fr; } } .next-pages a { display: block; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .next-pages a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); } .next-pages b { display: block; font-family: var(--font-head); font-size: var(--fs-h4); color: var(--navy); margin-bottom: .2rem; } .next-pages span { display: block; font-size: var(--fs-sm); color: var(--gray); } .next-pages em { display: block; font-style: normal; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .45rem; } /* ---------- Oferta destacada ---------- */ .offer { background: var(--brand-grad); color: #fff; border-radius: var(--radius-lg); padding: clamp(var(--sp-5), 5vw, 3.25rem); box-shadow: var(--shadow-lg); } .offer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } @media (min-width: 900px) { .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } } .offer h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; max-width: 18ch; } .offer p { color: var(--on-dark-1); max-width: 52ch; line-height: 1.5; } .offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .offer__list li { position: relative; padding-left: 1.75rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--on-dark-1); } .offer__list li b { color: #fff; font-weight: 600; } .offer__list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 17px; height: 17px; background-color: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat; } .offer__fine { font-size: var(--fs-xs); color: var(--on-dark-2); margin: var(--sp-4) 0 0; max-width: 60ch; } .offer .btn { margin-top: var(--sp-4); } .offer .btn--light { background: #fff; border-color: #fff; color: var(--accent-ink-strong); } .offer .btn--light:hover { background: var(--cream); color: var(--accent-ink-strong); } /* ---------- Proceso en línea (vertical) ---------- */ .flow { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: 0; counter-reset: flow; } .flow li { position: relative; padding: 0 0 var(--sp-5) 3.25rem; counter-increment: flow; } .flow li::before { content: counter(flow); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-ink); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); } .flow li::after { content: ""; position: absolute; left: 16.5px; top: 40px; bottom: 6px; width: 1px; background: var(--line); } .flow li:last-child { padding-bottom: 0; } .flow li:last-child::after { display: none; } .flow h3 { font-size: var(--fs-h4); font-weight: 700; color: var(--navy); margin-bottom: .3rem; } .flow p { color: var(--gray); font-size: var(--fs-sm); margin: 0; max-width: 62ch; } .section--dark .flow li::before { background: var(--gold); color: var(--midnight-1); } .section--dark .flow li::after { background: rgba(255,255,255,.14); } .section--dark .flow h3 { color: #fff; } .section--dark .flow p { color: var(--on-dark-2); } /* ---------- Prosa larga ---------- */ .prose { max-width: 70ch; } .prose--wide { max-width: 78ch; } .prose h3 { font-size: var(--fs-h3); color: var(--navy); margin-top: var(--sp-5); } .prose h4 { font-size: var(--fs-h4); color: var(--navy); margin-top: var(--sp-4); font-weight: 700; } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; } .prose li { margin-bottom: .45rem; } .prose > :first-child { margin-top: 0; } /* Sobre fondo oscuro el cuerpo baja a --on-dark-2 y los titulares suben a blanco. Los avisos .note/.risk/.datum llevan su propio color y se dejan fuera. */ .section--dark .prose { color: var(--on-dark-2); } .section--dark .prose h3, .section--dark .prose h4 { color: #fff; } .section--dark .prose strong { color: #fff; } .section--dark .prose a { color: #fff; } .section--dark .prose .note, .section--dark .prose .risk, .section--dark .prose .datum { color: var(--on-dark-1); } .section--dark .prose .note strong, .section--dark .prose .risk strong, .section--dark .prose .datum strong { color: #fff; } /* ---------- Animación de entrada ---------- Sin JavaScript el contenido se ve. La clase .js la pone el . */ .reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 860px) { body { font-size: 1rem; } .section { padding: clamp(3rem, 9vw, 4.5rem) 0; } .section__head { margin-bottom: var(--sp-5); } .hero__inner, .porque, .nosotros, .contacto { grid-template-columns: 1fr; } .hero__inner { gap: var(--sp-5); } .hero__title { font-size: clamp(1.95rem, 5.6vw + .7rem, 2.85rem); } .hero__art { order: 0; margin-top: 2.25rem; } .hero__art img { max-width: 260px; } .porque__media, .nosotros__photo { display: none; } .footer { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } /* Al colapsar a una columna el hueco pasa a ser vertical, si no el icono se pega al antetítulo */ .brandhero__inner { grid-template-columns: 1fr; row-gap: var(--sp-5); } .brandhero__mark { width: 76px; height: 76px; margin-top: 0; } /* Franja de capacidades en dos columnas */ .trust__inner { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.25rem; padding: var(--sp-3) 0; } .trust__item { align-items: flex-start; line-height: 1.35; } .trust__item svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: .15rem; } /* Dianas táctiles de 44 px */ .nav__toggle { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0; } .nav__logo { min-height: 44px; align-items: center; } .footer__col ul { gap: .25rem; } .footer__col a { display: inline-flex; align-items: center; min-height: 44px; } .backlink { min-height: 44px; align-items: center; margin-bottom: 1rem; } .nav__menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow); display: none; } .nav__menu.is-open { display: flex; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } /* Cortina sin JavaScript: se pinta por detrás del panel y por delante de la página */ .nav__menu.is-open::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h); background: rgba(10,16,32,.5); z-index: -1; pointer-events: none; } .nav__menu a { padding: .9rem 0; border-bottom: 1px solid var(--line); } .nav__menu a:not(.btn)::after { display: none; } .nav__menu a.btn { margin-top: .8rem; text-align: center; border-bottom: 0; } /* Cabecera de las páginas legales, sin botón hamburguesa */ .nav__menu--simple { position: static; display: flex; flex-direction: row; padding: 0; border: 0; box-shadow: none; background: none; } .nav__menu--simple a.btn { margin-top: 0; border-bottom: 0; padding: .6rem 1.15rem; } } @media (max-width: 520px) { .footer { grid-template-columns: 1fr; } .btn { white-space: normal; text-align: center; padding-inline: 1.1rem; } /* En dos líneas y anclada por abajo, la píldora crecía hacia arriba y tapaba el logotipo. Aquí sale del flujo absoluto y cuelga debajo de la tarjeta. */ .hero__badge { position: static; transform: none; display: block; width: fit-content; margin: 1.25rem auto 0; white-space: normal; max-width: calc(100% - 2rem); text-align: center; } .trust__inner { grid-template-columns: 1fr; } }