/* Alquie · Sitio completo — extensiones sobre landing-v2.css Reutiliza todos los componentes aq-* de la landing y añade: sub-hero de página, footer 4 columnas, menú móvil, bloque "Qué es", feature blocks, pricing 3-tier, FAQ acordeón, contacto, legal prose. */ /* ─── Reveal robusto ───────────────────────────────────────────────── Estado base = VISIBLE. La animación de entrada sólo se activa cuando (lo pone el HTML; JS la quita si detecta que el entorno estrangula las transiciones). Garantiza que el contenido nunca quede oculto (sin JS, reduced-motion, o iframes offscreen). */ .aq-reveal { opacity: 1; transform: none; } html.aq-anim .aq-reveal { opacity: 0; transform: translateY(20px); transition: opacity 800ms cubic-bezier(.2,.7,.3,1), transform 800ms cubic-bezier(.2,.7,.3,1); } html.aq-anim .aq-reveal.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.aq-anim .aq-reveal { opacity: 1; transform: none; transition: none; } } /* ─── Nav: menú móvil + activo ──────────────────────────────────────── */ .aq-nav__links a.is-active { color: var(--navy); font-weight: 600; } .aq-nav__burger { display: none; width: 42px; height: 42px; border: 1px solid rgba(0,53,88,0.12); border-radius: 12px; background: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .aq-nav__burger span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 240ms ease, opacity 200ms ease; } .aq-nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .aq-nav__burger.is-open span:nth-child(2) { opacity: 0; } .aq-nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .aq-mobile-menu { position: fixed; inset: 0; z-index: 70; background: #012a48; display: flex; flex-direction: column; padding: 80px 28px 28px; gap: 0; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity 0.26s ease, transform 0.42s cubic-bezier(.16,.84,.3,1), visibility 0s linear 0.42s; } .aq-mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 0.26s ease, transform 0.5s cubic-bezier(.16,.84,.3,1), visibility 0s; } .aq-mobile-menu > * { position: relative; z-index: 1; } .aq-mobile-menu > a { font-family: var(--f-sans); font-weight: 500; font-size: 20px; color: #fff; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.1); letter-spacing: -0.01em; } .aq-mobile-menu > a i { font-family: var(--f-serif); font-style: italic; color: var(--peach); } /* Aparición escalonada del contenido al abrir */ .aq-mobile-menu > a, .aq-mobile-menu__lang, .aq-mobile-menu__cta { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.16,.84,.3,1); } .aq-mobile-menu.is-open > a, .aq-mobile-menu.is-open .aq-mobile-menu__lang, .aq-mobile-menu.is-open .aq-mobile-menu__cta { opacity: 1; transform: translateY(0); } .aq-mobile-menu.is-open > a:nth-of-type(1) { transition-delay: 0.05s; } .aq-mobile-menu.is-open > a:nth-of-type(2) { transition-delay: 0.09s; } .aq-mobile-menu.is-open > a:nth-of-type(3) { transition-delay: 0.13s; } .aq-mobile-menu.is-open > a:nth-of-type(4) { transition-delay: 0.17s; } .aq-mobile-menu.is-open > a:nth-of-type(5) { transition-delay: 0.21s; } .aq-mobile-menu.is-open > a:nth-of-type(6) { transition-delay: 0.25s; } .aq-mobile-menu.is-open > a:nth-of-type(7) { transition-delay: 0.29s; } .aq-mobile-menu.is-open > a:nth-of-type(8) { transition-delay: 0.33s; } .aq-mobile-menu.is-open > a:nth-of-type(9) { transition-delay: 0.37s; } .aq-mobile-menu.is-open > a:nth-of-type(10) { transition-delay: 0.41s; } .aq-mobile-menu.is-open .aq-mobile-menu__lang { transition-delay: 0.46s; } .aq-mobile-menu.is-open .aq-mobile-menu__cta { transition-delay: 0.52s; } /* Toggle de idioma en el menú móvil */ .aq-mobile-menu__lang { display: flex; gap: 10px; margin-top: 16px; } .aq-mobile-menu__lang a { flex: 1; text-align: center; font-size: 15px; font-weight: 500; padding: 12px 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; color: rgba(255,255,255,0.82); } .aq-mobile-menu__lang a.is-active { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; } .aq-mobile-menu__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .aq-mobile-menu__close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 22px; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background 0.18s, transform 0.18s; } .aq-mobile-menu__close:hover { background: rgba(255,255,255,0.16); transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .aq-mobile-menu, .aq-mobile-menu > a, .aq-mobile-menu__lang, .aq-mobile-menu__cta { transition: opacity 0.2s ease; transform: none; } } /* ─── Sub-hero de página (navy compacto) ────────────────────────────── */ .aq-pagehero { /* Mismo fondo que el hero del home (.aq-hero): degradado + textura + aurora */ background: radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.18), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.18), transparent 55%), radial-gradient(700px 400px at 65% 30%, rgba(74,169,117,0.10), transparent 60%), linear-gradient(170deg, #003558 0%, #002844 60%, #001f37 100%); color: #fff; position: relative; overflow: hidden; border-radius: 0 0 36px 36px; margin-top: -120px; padding-top: 120px; } /* Capa de textura (igual que .aq-hero__texture del home) */ .aq-pagehero::before { content: ''; position: absolute; inset: 0; background: url('assets/headers-bg.webp') center / cover no-repeat; opacity: 0.35; pointer-events: none; z-index: 0; mix-blend-mode: luminosity; } /* Aurora animada (igual que .aq-hero__aurora del home) */ .aq-pagehero__aurora { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0.55; filter: blur(48px); } .aq-pagehero__aurora::before, .aq-pagehero__aurora::after { content: ''; position: absolute; border-radius: 50%; } .aq-pagehero__aurora::before { width: 70%; height: 70%; top: -10%; left: -10%; background: radial-gradient(circle, rgba(255,198,145,0.55), transparent 60%); animation: aqAurora1 18s ease-in-out infinite; } .aq-pagehero__aurora::after { width: 60%; height: 60%; bottom: -15%; right: -10%; background: radial-gradient(circle, rgba(255,168,166,0.5), transparent 60%); animation: aqAurora2 22s ease-in-out infinite; } /* Variantes de color del header por página (base oscura para texto blanco). */ .aq-pagehero--teal { background: radial-gradient(1200px 600px at 12% 15%, rgba(74,169,117,0.22), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(255,198,145,0.14), transparent 55%), linear-gradient(170deg, #014a43 0%, #013029 60%, #01231d 100%); } .aq-pagehero--mint { background: radial-gradient(1200px 600px at 12% 15%, rgba(74,169,117,0.28), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(0,122,108,0.20), transparent 55%), linear-gradient(170deg, #155a4e 0%, #0c3a31 60%, #082a23 100%); } .aq-pagehero--coral { background: radial-gradient(1200px 600px at 12% 15%, rgba(255,168,166,0.26), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(255,198,145,0.18), transparent 55%), linear-gradient(170deg, #5e2630 0%, #3e1922 60%, #2a1019 100%); } .aq-pagehero--peach { background: radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.28), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.16), transparent 55%), linear-gradient(170deg, #5b3a1c 0%, #3f2713 60%, #2a1a0d 100%); } .aq-pagehero--navy { background: radial-gradient(1200px 600px at 12% 15%, rgba(255,198,145,0.18), transparent 55%), radial-gradient(900px 500px at 92% 90%, rgba(255,168,166,0.18), transparent 55%), radial-gradient(700px 400px at 65% 30%, rgba(74,169,117,0.10), transparent 60%), linear-gradient(170deg, #003558 0%, #002844 60%, #001f37 100%); } .aq-pagehero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 76px var(--pad) 84px; /* Altura consistente entre páginas + contenido centrado */ min-height: 340px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .aq-pagehero__inner--narrow { max-width: 820px; } .aq-pagehero__h1 { margin-left: auto; margin-right: auto; } .aq-pagehero__lead { margin-left: auto; margin-right: auto; } .aq-pagehero__ctas { justify-content: center; } .aq-pagehero .aq-crumb { justify-content: center; } .aq-pagehero__eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); padding: 7px 14px 7px 8px; border-radius: 999px; margin-bottom: 24px; backdrop-filter: blur(8px); font-family: var(--f-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--peach); } .aq-pagehero__eyebrow-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--peach); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-style: normal; } .aq-pagehero__h1 { color: #fff; font-size: clamp(34px, 4.4vw, 58px); max-width: 16ch; } .aq-pagehero__h1 i { font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--peach); font-size: 1.05em; } .aq-pagehero__lead { color: rgba(255,255,255,0.72); max-width: 580px; margin-top: 22px; font-size: 19px; line-height: 1.55; } .aq-pagehero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 32px; } .aq-pagehero__aurora { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0.5; filter: blur(48px); } .aq-pagehero__aurora::before, .aq-pagehero__aurora::after { content: ''; position: absolute; border-radius: 50%; } .aq-pagehero__aurora::before { width: 60%; height: 70%; top: -10%; left: -8%; background: radial-gradient(circle, rgba(255,198,145,0.5), transparent 60%); animation: aqAurora1 18s ease-in-out infinite; } .aq-pagehero__aurora::after { width: 55%; height: 60%; bottom: -15%; right: -8%; background: radial-gradient(circle, rgba(255,168,166,0.45), transparent 60%); animation: aqAurora2 22s ease-in-out infinite; } /* breadcrumb */ .aq-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 22px; font-weight: 500; } .aq-crumb a { color: rgba(255,255,255,0.6); } .aq-crumb a:hover { color: #fff; } .aq-crumb span { opacity: 0.45; } /* ─── Bloque "Qué es Alquie" (texto descriptivo, requisito Google) ──── */ .aq-about { background: var(--bg-warm); } .aq-about__wrap { max-width: var(--maxw); margin: 0 auto; padding: 88px var(--pad); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } .aq-about__copy h2 { margin-bottom: 22px; } .aq-about__copy p { margin-bottom: 16px; font-size: 17px; line-height: 1.7; color: var(--ink); } .aq-about__copy p.aq-lead { color: var(--ink-soft); } .aq-about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .aq-about__fact { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow-sm); } .aq-about__fact-k { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 30px; color: var(--navy); line-height: 1; letter-spacing: -0.01em; } .aq-about__fact-l { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; font-weight: 500; } /* ─── Feature blocks (página Funciones) ─────────────────────────────── */ .aq-featgroup__head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line); } .aq-featgroup__num { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--coral); flex-shrink: 0; } .aq-featgroup__head h2 { font-size: clamp(26px, 3vw, 38px); } .aq-featgroup__head p { color: var(--ink-soft); margin-left: auto; max-width: 360px; text-align: right; font-size: 14.5px; } .aq-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 80px; } .aq-feat-grid--2 { grid-template-columns: repeat(2, 1fr); } .aq-feat-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; position: relative; overflow: hidden; } .aq-feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--coral); } .aq-feat-card__icon { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .aq-feat-card__icon img { width: 100%; height: 100%; object-fit: contain; } .aq-feat-card__icon--glyph { border-radius: 14px; background: linear-gradient(160deg, var(--peach-soft), var(--coral-soft)); font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--coral); } .aq-feat-card__plan { align-self: flex-start; font-family: var(--f-sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-top: auto; } .aq-feat-card__plan--free { background: var(--teal-soft); color: var(--teal-dark, #005a51); } .aq-feat-card__plan--pro { background: var(--navy-soft); color: var(--navy); } .aq-feat-card__plan--proplus { background: var(--peach-soft); color: #b06a1e; } .aq-feat-card h3 { font-size: 19px; } /* big feature (with screenshot) */ .aq-feat-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 28px; } .aq-feat-hero--flip { direction: rtl; } .aq-feat-hero--flip > * { direction: ltr; } .aq-feat-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* ─── Pricing 3-tier ────────────────────────────────────────────────── */ .aq-pricing3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; align-items: stretch; } .aq-price-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); position: relative; } .aq-price-card--featured { background: radial-gradient(circle at 100% 0%, rgba(255,168,166,0.16), transparent 52%), #fff; border-color: var(--navy); box-shadow: var(--shadow-lg); } .aq-price-card__badge { position: absolute; top: -12px; left: 28px; background: var(--coral); color: var(--navy); font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em; padding: 5px 13px; border-radius: 999px; box-shadow: 0 6px 18px rgba(255,168,166,0.5); } .aq-price-card__name { font-family: var(--f-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 4px; } .aq-price-card__tagline { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; min-height: 38px; } .aq-price-card__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .aq-price-card__amount { font-family: var(--f-sans); font-weight: 600; font-size: 42px; letter-spacing: -0.025em; color: var(--navy); line-height: 1; } .aq-price-card__per { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; } .aq-price-card__note { font-size: 12.5px; color: var(--ink-mute); margin: 0 0 22px; min-height: 18px; } .aq-price-card__list { list-style: none; margin: 0 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; flex-grow: 1; } .aq-price-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); line-height: 1.4; } .aq-price-card__list li.is-head { font-weight: 600; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; gap: 0; margin-top: 4px; } .aq-price-card__check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .aq-price-card .aq-btn { width: 100%; margin-top: auto; } /* billing toggle */ .aq-billing { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto 44px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; position: relative; left: 50%; transform: translateX(-50%); box-shadow: var(--shadow-sm); } .aq-billing button { border: none; background: transparent; font-family: var(--f-sans); font-weight: 500; font-size: 14px; color: var(--ink-soft); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background 200ms ease, color 200ms ease; } .aq-billing button.is-active { background: var(--navy); color: #fff; font-weight: 600; } .aq-billing__save { color: var(--teal); font-weight: 600; font-size: 12px; margin-left: 4px; } /* comparison table */ .aq-compare { max-width: 1080px; margin: 64px auto 0; overflow-x: auto; } .aq-compare table { width: 100%; border-collapse: collapse; min-width: 640px; } .aq-compare th, .aq-compare td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .aq-compare thead th { font-family: var(--f-sans); font-weight: 600; color: var(--navy); font-size: 15px; } .aq-compare thead th:not(:first-child), .aq-compare td:not(:first-child) { text-align: center; } .aq-compare tbody td:first-child { color: var(--ink); font-weight: 500; } .aq-compare .aq-compare__yes { color: var(--teal); font-weight: 700; } .aq-compare .aq-compare__no { color: var(--ink-mute); } .aq-compare tr.aq-compare__group td { background: var(--bg-warm); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } /* ─── FAQ acordeón ──────────────────────────────────────────────────── */ .aq-faq { max-width: 820px; margin: 0 auto; } .aq-faq__cat { margin-bottom: 44px; } .aq-faq__cat-title { font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 16px; color: var(--coral); margin-bottom: 16px; } .aq-faq__item { border-bottom: 1px solid var(--line); } .aq-faq__q { width: 100%; text-align: left; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--f-sans); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; } .aq-faq__q:hover { color: var(--navy); } .aq-faq__icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; border-radius: 50%; border: 1.5px solid var(--line); transition: background 200ms ease, border-color 200ms ease; } .aq-faq__icon::before, .aq-faq__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink-soft); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 240ms ease, background 200ms ease; } .aq-faq__icon::before { width: 11px; height: 1.5px; } .aq-faq__icon::after { width: 1.5px; height: 11px; } .aq-faq__item.is-open .aq-faq__icon { background: var(--coral); border-color: var(--coral); } .aq-faq__item.is-open .aq-faq__icon::before, .aq-faq__item.is-open .aq-faq__icon::after { background: var(--navy); } .aq-faq__item.is-open .aq-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .aq-faq__a { max-height: 0; overflow: hidden; transition: max-height 360ms cubic-bezier(.2,.7,.3,1), opacity 280ms ease, padding 280ms ease; opacity: 0; } .aq-faq__item.is-open .aq-faq__a { max-height: 400px; opacity: 1; padding-bottom: 22px; } .aq-faq__a p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; margin: 0; } .aq-faq__a a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ─── Trust / privacy cards ─────────────────────────────────────────── */ .aq-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .aq-trust-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease; } .aq-trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .aq-trust-card__badge { width: 46px; height: 46px; border-radius: 13px; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 20px; } .aq-trust-card h3 { font-size: 19px; } .aq-compliance { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .aq-compliance__chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--navy); box-shadow: var(--shadow-sm); } .aq-compliance__chip::before { content: '✓'; color: var(--teal); font-weight: 800; } /* ─── Contact ───────────────────────────────────────────────────────── */ .aq-contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .aq-form { display: flex; flex-direction: column; gap: 18px; } .aq-field { display: flex; flex-direction: column; gap: 7px; } .aq-field label { font-family: var(--f-sans); font-weight: 600; font-size: 13.5px; color: var(--ink); } .aq-field input, .aq-field textarea, .aq-field select { font-family: var(--f-sans); font-size: 15px; color: var(--ink); padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color 200ms ease, box-shadow 200ms ease; } .aq-field input:focus, .aq-field textarea:focus, .aq-field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,53,88,0.08); } .aq-field textarea { resize: vertical; min-height: 130px; } .aq-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .aq-contact-side { display: flex; flex-direction: column; gap: 20px; } .aq-contact-card { background: var(--bg-warm); border: 1px solid var(--line); border-radius: 20px; padding: 26px; } .aq-contact-card h4 { margin-bottom: 6px; } .aq-contact-card a { color: var(--navy); font-weight: 600; } .aq-contact-card__row { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; } .aq-contact-card__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .aq-contact-card__ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 17px; } /* ─── Legal / prose (reembolsos, etc.) ──────────────────────────────── */ .aq-prose { max-width: 760px; margin: 0 auto; } .aq-prose h2 { font-size: 26px; margin: 44px 0 14px; } .aq-prose h2:first-child { margin-top: 0; } .aq-prose h3 { font-size: 19px; margin: 28px 0 10px; } .aq-prose p { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 0 0 16px; } .aq-prose ul { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 0 0 16px; padding-left: 22px; } .aq-prose li { margin-bottom: 8px; } .aq-prose strong { font-weight: 700; color: var(--navy); } .aq-prose__updated { font-size: 13.5px; color: var(--ink-mute); margin-bottom: 32px; font-weight: 500; } .aq-prose__callout { background: var(--bg-warm); border: 1px solid var(--line); border-left: 3px solid var(--coral); border-radius: 14px; padding: 20px 24px; margin: 24px 0; } .aq-prose__callout p { margin: 0; font-size: 15px; color: var(--ink-soft); } /* ─── Steps row (cómo funciona compacto) ────────────────────────────── */ .aq-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .aq-step3 { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 30px 26px; position: relative; box-shadow: var(--shadow-sm); } .aq-step3__num { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 19px; margin-bottom: 18px; } .aq-step3 h3 { font-size: 19px; margin-bottom: 8px; } /* ─── Footer 4-col ──────────────────────────────────────────────────── */ .aq-footer__top--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } .aq-footer__lang { display: inline-flex; gap: 6px; margin-top: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 4px; } .aq-footer__lang a { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; color: rgba(255,255,255,0.7); } .aq-footer__lang a.is-active { background: rgba(255,255,255,0.14); color: #fff; } .aq-footer__company { font-size: 13px; color: rgba(255,255,255,0.5); } /* ─── CTA band reuse (in-page) ──────────────────────────────────────── */ .aq-ctaband { max-width: var(--maxw); margin: 0 auto; padding: 40px var(--pad) 80px; } @media (max-width: 1080px) { .aq-about__wrap { grid-template-columns: 1fr; gap: 36px; } .aq-feat-grid, .aq-feat-grid--2 { grid-template-columns: repeat(2, 1fr); } .aq-feat-hero, .aq-feat-hero--flip { grid-template-columns: 1fr; gap: 32px; direction: ltr; } .aq-pricing3 { grid-template-columns: 1fr; max-width: 460px; } .aq-trust-grid { grid-template-columns: 1fr; } .aq-contact-split { grid-template-columns: 1fr; gap: 36px; } .aq-steps3 { grid-template-columns: 1fr; } .aq-featgroup__head { flex-direction: column; gap: 8px; } .aq-featgroup__head p { margin-left: 0; text-align: left; } .aq-footer__top--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .aq-nav__links { display: none; } .aq-nav__cta .aq-lang, .aq-nav__cta a:not(.aq-btn) { display: none; } .aq-nav__burger { display: flex; } } @media (max-width: 720px) { .aq-feat-grid, .aq-feat-grid--2 { grid-template-columns: 1fr; } .aq-about__facts { grid-template-columns: 1fr 1fr; } .aq-field--row { grid-template-columns: 1fr; } .aq-footer__top--4 { grid-template-columns: 1fr; } .aq-pagehero__inner { padding: 56px 20px 64px; } } /* ── Desplegables de navegación (Cómo funciona / Para quién) ── */ .aq-navdd { position: relative; display: flex; align-items: center; } .aq-navdd__btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; padding: 0; } .aq-navdd__btn:hover, .aq-navdd__btn.is-active { color: var(--navy); } .aq-navdd__caret { font-size: 14px; line-height: 1; opacity: 0.85; transition: transform 0.18s; } .aq-navdd:hover .aq-navdd__caret, .aq-navdd.is-open .aq-navdd__caret { transform: rotate(180deg); } .aq-navdd__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,53,88,0.14)); padding: 8px; z-index: 200; opacity: 0; visibility: hidden; transition: opacity 0.16s, transform 0.16s, visibility 0s linear 0.16s; } /* Puente invisible para no perder el hover al bajar del botón al menú */ .aq-navdd__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .aq-navdd:hover .aq-navdd__menu, .aq-navdd:focus-within .aq-navdd__menu, .aq-navdd.is-open .aq-navdd__menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); transition: opacity 0.16s, transform 0.16s, visibility 0s; } .aq-navdd__menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; } .aq-navdd__menu a:hover { background: var(--bg-warm); color: var(--navy); } /* Íconos de línea (Iconoir) dentro de badges de tarjetas de confianza */ .aq-trust-card__badge .ic { display: inline-flex; align-items: center; justify-content: center; } .aq-trust-card__badge .ic svg { width: 26px; height: 26px; display: block; }