— uses
/ .
* ---------------------------------------------------------- */
/* WR-04 fix: White normal-size text on --gradient-corporate fails AA at the lightest stop
#52AACA (L≈0.347; ratio ≈2.65:1 with white). The token is fixed, so a dark scrim is layered
OVER the gradient to bring the effective luminance down to ≤0.183 (≥4.5:1 with white).
Scrim: rgba(0,40,55,0.52) — L(0,40,55)≈0.0181
Composite over #52AACA: 0.52×0.0181 + 0.48×0.347 = 0.0094 + 0.1666 = 0.176
Contrast: 1.05 / (0.176 + 0.05) = 1.05 / 0.226 ≈ 4.65:1 → passes AA.
The brand gradient remains visible beneath the semi-transparent scrim. */
.verifactu-band {
background-image: linear-gradient(0deg, rgba(0,40,55,0.52), rgba(0,40,55,0.52)), var(--gradient-corporate);
padding-block: var(--space-4);
}
@media (min-width: 1025px) {
.verifactu-band {
padding-block: var(--space-6);
}
}
.verifactu-band .container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
text-align: center;
}
@media (min-width: 1025px) {
.verifactu-band .container {
flex-direction: row;
justify-content: center;
text-align: left;
gap: var(--space-6);
}
}
.verifactu-band-text {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: #ffffff;
}
.verifactu-band-text strong {
font-weight: 600;
}
/* White-outline pill button on gradient background */
.btn-on-gradient {
background: transparent;
color: #ffffff;
border-color: #ffffff;
white-space: nowrap;
flex-shrink: 0;
}
.btn-on-gradient:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
color: #ffffff;
box-shadow: none;
}
.btn-on-gradient:focus-visible {
outline-color: #ffffff;
}
/* =========================================================
* §4.3 PROBLEMA — pain → solution cards
* Soft background (section--soft). 3 cards via .grid-3.
* ========================================================= */
.problema-pain {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
margin-block-end: var(--space-2);
}
.problema-solution {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-muted);
}
/* =========================================================
* §4.4 CÓMO FUNCIONA — 3 numbered steps
* White background. Steps share .grid-3 + .card utilities.
* Step number: Poppins 700, ~40px, color-primary tinted bg.
* ========================================================= */
.step {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.step-number {
font-family: var(--font-heading);
font-size: 40px;
line-height: 1;
font-weight: 700;
color: var(--color-primary);
background: var(--color-tint);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
margin-block-end: var(--space-3);
flex-shrink: 0;
}
.step-title {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin-block-end: var(--space-1);
}
.step-description {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-muted);
}
/* On desktop, display a connector line between steps */
@media (min-width: 1025px) {
.como-funciona .steps {
position: relative;
}
}
/* =========================================================
* §4.5 FUNCIONALIDADES — 9 feature cards + config screenshot
* Soft background (section--soft). Cards via .grid-3.
* Config image: full-width block below the grid (D-01).
* ========================================================= */
.card-title {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin-block-end: var(--space-1);
}
.card-description {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-muted);
}
/* Config screenshot wrapper — below the 3×3 grid */
.funcionalidades-image {
margin-block-start: var(--space-8);
}
.funcionalidades-image img {
border-radius: var(--radius);
box-shadow: var(--shadow-card-hover);
width: 100%;
height: auto;
display: block;
}
/* =========================================================
* §4.6 CUMPLIMIENTO VERIFACTU — compliance badge + 3 pillars
* White background. Badge before H2. 3 pillar cards via .grid-3.
* ========================================================= */
/* "100% conforme" tint pill badge */
.cumplimiento-badge {
display: inline-block;
background: var(--color-tint);
color: var(--color-primary);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
line-height: var(--lh-micro);
padding: 4px 12px;
margin-block-end: var(--space-3);
}
.cumplimiento .section-heading {
margin-block-start: 0;
}
/* =========================================================
* §4.7 POR QUÉ LANTIO — semantic comparison table
* Soft background (section--soft). Table with scopes.
* Lantio column highlighted with color-tint bg + primary border-top.
* Mobile reflow (D-07): CSS display:block stacking — no overflow-x:scroll.
* =========================================================*/
/* Visually hidden utility — for becomes a card; data-label shows the column name.
* Lantio's value is highlighted and visually prominent.
* NEVER overflow-x anywhere — pure block stacking.
* ========================================================= */
@media (max-width: 640px) {
.comparativa,
.comparativa thead,
.comparativa tbody,
.comparativa tr,
.comparativa th,
.comparativa td {
display: block;
}
/* Hide the desktop column header row on mobile */
.comparativa thead tr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Each feature row becomes a card */
.comparativa tbody tr {
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
border: 1px solid var(--color-border);
margin-block-end: var(--space-3);
padding: var(--space-3);
}
.comparativa tbody tr:hover {
box-shadow: var(--shadow-card-hover);
background: var(--color-bg);
}
/* Feature row header = card title */
.comparativa tbody th[scope="row"] {
font-family: var(--font-heading);
font-size: var(--fs-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
padding: 0 0 var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
margin-block-end: var(--space-2);
background: transparent;
}
/* Data cells shown as label: value rows */
.comparativa tbody td {
display: flex;
align-items: center;
justify-content: space-between;
text-align: right;
padding: var(--space-1) 0;
background: transparent;
border: none;
font-size: var(--fs-body);
}
/* Label injected from data-label attribute */
.comparativa tbody td::before {
content: attr(data-label);
font-weight: 500;
color: var(--color-ink);
text-align: left;
flex: 1;
}
/* Lantio cell: visually wins — larger, bold, primary colored */
.comparativa tbody td.comparativa-col-lantio {
background: var(--color-tint);
border-radius: var(--radius);
padding: var(--space-2) var(--space-2);
margin-block-start: var(--space-2);
justify-content: flex-start;
gap: var(--space-2);
font-weight: 700;
font-size: var(--fs-h3);
color: var(--color-success);
}
.comparativa tbody td.comparativa-col-lantio::before {
content: "Lantio";
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-primary);
font-size: var(--fs-body);
flex: none;
}
}
/* =========================================================
* §4.8 CASOS DE USO — 3 use-case cards + section image
* White background. Desktop: 2-column (cards left, image right).
* Mobile: stacked (image below cards).
* ========================================================= */
/* Two-column layout: cards col (left) + image col (right) */
.casos-uso-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
margin-block-start: var(--space-6);
align-items: start;
}
@media (min-width: 1025px) {
.casos-uso-layout {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
}
}
/* Cards column: stacked vertically (1-col grid within the layout col) */
.casos-uso-cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Image column */
.casos-uso-image img {
border-radius: var(--radius);
box-shadow: var(--shadow-card);
width: 100%;
height: auto;
display: block;
}
/* =========================================================
* §4.9 SEÑALES DE CONFIANZA — 4 trust badges
* Soft background (section--soft). 4-col desktop / 2×2 tablet / 1-col mobile.
* No testimonials.
* ========================================================= */
/* 4-column grid for badges: desktop 4-col / tablet 2-col / mobile 1-col */
.grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
margin-block-start: var(--space-6);
}
@media (min-width: 641px) and (max-width: 1024px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
}
@media (min-width: 1025px) {
.grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
}
/* Badge cards inherit .card + .card-title + .card-description + .card-icon */
.senales-card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* =========================================================
* §4.10 PRECIOS — toggle + 2 plan cards + pricing table
* White background. Anchor id=precios. Phase 3 hooks (no JS here).
* Mobile: stacked cards, Pro prominent (D-08).
* ========================================================= */
/* Pricing toggle row */
.pricing-toggle-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin-block-end: var(--space-6);
flex-wrap: wrap;
}
.pricing-toggle-label {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-ink);
}
/* Toggle switch button (Phase 3 wires aria-checked behavior) */
/* WR-03 fix: visual switch is 28px tall; 44px tap target via ::before pseudo-element
overlay — never inflate the switch height itself. */
.pricing-toggle-btn {
display: inline-flex;
align-items: center;
width: 52px;
height: 28px;
/* min-height: 44px removed — was inflating visible switch to near-square (WR-03) */
background: var(--color-border);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
padding: 0 4px;
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
/* Extend hit area to ≥44px without stretching the visible switch */
.pricing-toggle-btn::before {
content: "";
position: absolute;
inset: -8px;
min-height: 44px;
min-width: 44px;
}
.pricing-toggle-btn:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
/* The sliding thumb */
.pricing-toggle-thumb {
display: block;
width: 20px;
height: 20px;
background: var(--color-bg);
border-radius: 50%;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease;
flex-shrink: 0;
}
/* Annual badge pill */
.pricing-annual-badge {
display: inline-block;
background: var(--color-tint);
color: var(--color-success);
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
line-height: var(--lh-micro);
border-radius: var(--radius-pill);
padding: 2px 10px;
white-space: nowrap;
}
/* Annual price hidden by default — Phase 3 JS toggles visibility */
.pricing-annual {
display: none;
}
/* Pro monthly price: hidden in annual mode via JS inline style (WR-01).
The Gratis plan's .pricing-price-monthly ("0 € para siempre") has no
.pricing-price-pro-monthly class and is always visible.
CSS default: visible (monthly is the default starting state). */
.pricing-price-pro-monthly {
display: inline-block;
}
/* Pricing toggle: active (annual) track and thumb states keyed off aria-checked */
.pricing-toggle-btn[aria-checked="true"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.pricing-toggle-btn[aria-checked="true"] .pricing-toggle-thumb {
transform: translateX(24px);
}
/* FAQ chevron: rotated when the item is expanded */
[aria-expanded="true"] .faq-icon {
transform: rotate(180deg);
}
/* Plan cards: desktop 2-col side-by-side, mobile stacked (D-08) */
.pricing-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 1025px) {
.pricing-cards {
grid-template-columns: repeat(2, 1fr);
max-width: 800px;
margin-inline: auto;
gap: var(--space-8);
align-items: start;
}
}
/* Individual plan card layout */
.pricing-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
position: relative;
}
/* Pro card highlighted: 2px primary border */
.pricing-card--pro {
border: 2px solid var(--color-primary);
}
/* "Recomendado" pill badge on Pro card */
.pricing-recommended-pill {
display: inline-block;
background: var(--color-primary);
color: #ffffff;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
line-height: var(--lh-micro);
border-radius: var(--radius-pill);
padding: 2px 12px;
}
/* Plan name */
.pricing-plan-name {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin-block-start: 0;
}
/* Price display */
.pricing-price {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--color-ink);
line-height: 1.2;
}
/* For-whom subtitle */
.pricing-for-whom {
font-family: var(--font-body);
font-size: var(--fs-micro);
color: var(--color-muted);
font-weight: 400;
}
/* Pricing feature table inside each card */
.pricing-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
}
.pricing-table thead tr {
display: none;
}
.pricing-table tbody tr {
border-bottom: 1px solid var(--color-border);
}
.pricing-table tbody tr:last-child {
border-bottom: none;
}
.pricing-table tbody th[scope="row"] {
font-weight: 400;
color: var(--color-muted);
text-align: left;
padding: var(--space-2) 0;
font-size: var(--fs-micro);
}
.pricing-table tbody td {
text-align: right;
padding: var(--space-2) 0;
font-size: var(--fs-micro);
font-weight: 600;
color: var(--color-ink);
}
/* Success check alignment */
.pricing-check {
color: var(--color-success);
}
/* CTA button full-width at bottom of card */
.pricing-cta {
width: 100%;
justify-content: center;
margin-block-start: auto;
}
/* Mobile: Pro card prominent — appears visually first via order
on mobile (stacked). Pro is more prominent with primary border. */
@media (max-width: 640px) {
.pricing-cards {
gap: var(--space-4);
}
.pricing-card--pro {
order: -1;
}
}
/* =========================================================
* §4.11 FAQ — 7-item accordion (static open state)
* Soft background (section--soft). Anchor id=faq (header nav).
* Phase 3 wires aria-expanded collapse behavior — panels visible now.
* Trigger min-height 44px for touch targets (QAL-03).
* Incumplimiento risk text confined to panel id=faq-1-body only.
* ========================================================= */
.faq-list {
margin-block-start: var(--space-6);
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
}
/* Each FAQ item */
.faq-item {
border-bottom: 1px solid var(--color-border);
}
/* Accordion trigger button */
.faq-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
min-height: 44px;
padding: var(--space-3) 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: var(--color-ink);
transition: color 0.15s ease;
}
.faq-trigger:hover {
color: var(--color-primary);
}
.faq-trigger:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: var(--radius);
}
/* Question text inside trigger */
.faq-question {
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: 600;
line-height: var(--lh-body);
color: inherit;
}
/* Chevron icon */
.faq-icon {
width: 20px;
height: 20px;
color: var(--color-muted);
flex-shrink: 0;
transition: transform 0.2s ease;
}
/* Static phase: answer panels visible (Phase 3 will collapse non-default items) */
.faq-body {
padding-block-end: var(--space-4);
}
.faq-body p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-muted);
max-width: 720px;
}
/* Desktop: wider max-width for FAQ content */
@media (min-width: 1025px) {
.faq-list {
max-width: 760px;
margin-inline: auto;
}
}
/* =========================================================
* §4.12 CTA FINAL — closing gradient accent block
* Full-width corporate gradient (D-10). Full section padding.
* All content centered, text block max-width 640px.
* All text and logo in negative (#ffffff).
* Button: white bg, primary text (inverts the normal .btn-primary).
* Microcopy: rgba(255,255,255,0.8) below CTA.
* ========================================================= */
/* WR-04 fix: same dark scrim as verifactu-band to achieve AA contrast for white body text.
See contrast math in .verifactu-band above. ALPHA=0.52 → composite contrast ≈4.65:1. */
.cta-final {
background-image: linear-gradient(0deg, rgba(0,40,55,0.52), rgba(0,40,55,0.52)), var(--gradient-corporate);
padding-block: var(--section-pad-mobile);
}
@media (min-width: 1025px) {
.cta-final {
padding-block: var(--section-pad-desktop);
}
}
/* Centered inner content block, max-width 640px */
.cta-final-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 640px;
margin-inline: auto;
gap: var(--space-3);
}
/* Negative logo */
.cta-final-logo {
height: 32px;
width: auto;
display: block;
margin-block-end: var(--space-2);
}
/* Section H2 — negative (white) text, not using the light-bg section-heading ink color */
.cta-final-heading {
font-family: var(--font-heading);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-h2);
color: #ffffff;
margin-block-end: 0;
}
@media (max-width: 640px) {
.cta-final-heading {
font-size: 28px;
line-height: 36px;
}
}
/* Subtitle paragraph */
.cta-final-subtitle {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: #ffffff;
margin-block-end: var(--space-2);
}
/* CTA button: white background, primary brand color text — inverse of btn-primary */
.cta-final-btn {
background: #ffffff;
color: var(--color-primary);
border-color: #ffffff;
margin-block-start: var(--space-1);
}
.cta-final-btn:hover {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.9);
color: var(--color-primary);
box-shadow: var(--shadow-card-hover);
}
.cta-final-btn:focus-visible {
outline-color: #ffffff;
}
/* Microcopy below CTA — slightly dimmed white */
.cta-final-microcopy {
font-family: var(--font-body);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
color: rgba(255, 255, 255, 0.8);
margin-block-start: 0;
}
/* =========================================================
* COOKIE CONSENT BANNER — CKE-01
* position: fixed; bottom bar, z-index 200 (above sticky header z:100).
* AEPD parity: 3 actions at equal visual weight (D-03).
* ========================================================= */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
/* Entrance animation: slide up from bottom */
animation: cookie-banner-slide-up 0.3s ease-out;
}
@keyframes cookie-banner-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.cookie-banner-inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-3);
padding-block: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
@media (min-width: 641px) {
.cookie-banner-inner {
padding-block: var(--space-4);
flex-direction: row;
align-items: center;
gap: var(--space-4);
}
}
.cookie-banner-text {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.cookie-banner-heading {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin: 0;
}
.cookie-banner-body {
font-family: var(--font-body);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
color: var(--color-muted);
margin: 0;
}
/* 3 buttons at EQUAL visual weight (AEPD parity, D-03):
stacked full-width on mobile (≤640px), inline row on tablet+.
Each button is ≥44px tall via min-height. */
.cookie-banner-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex-shrink: 0;
}
.cookie-banner-actions .btn {
min-height: 44px;
width: 100%;
justify-content: center;
}
@media (min-width: 641px) {
.cookie-banner-actions {
flex-direction: row;
align-items: center;
gap: var(--space-2);
}
.cookie-banner-actions .btn {
width: auto;
}
}
/* =========================================================
* COOKIE PREFERENCES PANEL — CKE-01
* Overlay backdrop + centered dialog card.
* z-index 201 (above the cookie banner at 200).
* ========================================================= */
#cookie-preferences {
position: fixed;
inset: 0;
z-index: 201;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3);
}
/* Honor the `hidden` attribute — the id rule above is more specific than the
* UA `[hidden] { display: none }`, so without this the dialog shows on load
* and the JS (which toggles `hidden`) can't close it. */
#cookie-preferences[hidden] {
display: none;
}
.cookie-prefs-overlay {
position: fixed;
inset: 0;
background: rgba(15, 42, 51, 0.4);
/* Backdrop entrance: fade in */
animation: prefs-overlay-fade 0.2s ease-out;
}
@keyframes prefs-overlay-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.prefs-panel {
position: relative;
z-index: 1;
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-card-hover);
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
/* Entrance: fade + scale */
animation: prefs-panel-enter 0.2s ease-out;
}
@keyframes prefs-panel-enter {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
/* Full-screen on mobile (inset: 0 with padding from parent #cookie-preferences) */
@media (max-width: 640px) {
#cookie-preferences {
padding: 0;
align-items: flex-end;
}
.prefs-panel {
max-width: 100%;
border-radius: var(--radius) var(--radius) 0 0;
max-height: 92vh;
}
}
.prefs-heading {
font-family: var(--font-heading);
font-size: var(--fs-h3);
line-height: var(--lh-h3);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin: 0;
}
.prefs-intro {
font-family: var(--font-body);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
color: var(--color-muted);
margin: 0;
}
.prefs-categories {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
}
/* Each category row: divider, info + toggle */
.prefs-category-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.prefs-category-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.prefs-category-name {
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: var(--fw-h3);
color: var(--color-ink);
margin: 0;
}
.prefs-category-desc {
font-family: var(--font-body);
font-size: var(--fs-micro);
line-height: var(--lh-micro);
color: var(--color-muted);
margin: 0;
}
.prefs-category-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
}
/* "Siempre activo" always-on pill badge */
.prefs-always-on {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--color-primary);
background: var(--color-tint);
border-radius: var(--radius-pill);
padding: 3px 10px;
white-space: nowrap;
}
/* Category toggle switch — role="switch", aria-checked toggles visual state.
Reuses the pricing toggle visual pattern (52×28px track, 20×20px thumb). */
.prefs-toggle-btn {
display: inline-flex;
align-items: center;
width: 52px;
height: 28px;
background: var(--color-border);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
cursor: pointer;
padding: 0 4px;
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
/* Extend hit area to ≥44px */
.prefs-toggle-btn::before {
content: "";
position: absolute;
inset: -8px;
min-height: 44px;
min-width: 44px;
}
.prefs-toggle-btn:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.prefs-toggle-thumb {
display: block;
width: 20px;
height: 20px;
background: var(--color-bg);
border-radius: 50%;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease;
flex-shrink: 0;
}
/* Active (checked) state */
.prefs-toggle-btn[aria-checked="true"] {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.prefs-toggle-btn[aria-checked="true"] .prefs-toggle-thumb {
transform: translateX(24px);
}
/* Panel action buttons */
.prefs-panel-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-2);
}
@media (min-width: 641px) {
.prefs-panel-actions {
flex-direction: row;
justify-content: flex-end;
}
}
.prefs-panel-actions .btn {
min-height: 44px;
justify-content: center;
}
@media (max-width: 640px) {
.prefs-panel-actions .btn {
width: 100%;
}
}
/* Footer cookie prefs link — inherits .footer-links a styles.
No additional styles needed beyond the hover state below. */
.footer-cookie-prefs {
/* Inherits .footer-links a: fs-micro, color-muted, hover color-primary */
}
/* =========================================================
* Reduced motion — INT-04 (D-09)
* Disable smooth scroll and all Phase 3 interaction transitions
* for users who prefer reduced motion.
* ========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
/* Pricing toggle: no track or thumb animation */
.pricing-toggle-btn {
transition: none;
}
.pricing-toggle-thumb {
transition: none;
}
/* FAQ: no chevron rotation animation and no body transition */
.faq-icon {
transition: none;
}
.faq-body {
transition: none;
}
/* Cookie banner: instant appearance, no slide-up */
.cookie-banner {
animation: none;
}
/* Cookie preferences panel: instant appearance, no fade+scale */
.cookie-prefs-overlay {
animation: none;
}
.prefs-panel {
animation: none;
}
/* Category toggle: no thumb slide animation */
.prefs-toggle-btn {
transition: none;
}
.prefs-toggle-thumb {
transition: none;
}
}
/* =========================================================
* LEGAL PAGES — prose document layout (Phase 4)
* Consumed by aviso-legal.html, privacidad.html,
* terminos.html, cookies.html.
* Tokens only — no raw hex values.
* ========================================================= */
.legal {
padding-block: var(--section-pad-mobile);
background-color: var(--color-bg);
}
@media (min-width: 1025px) {
.legal {
padding-block: var(--section-pad-desktop);
}
}
.legal-content {
max-width: 720px;
margin-inline: auto;
}
.legal-title {
font-family: var(--font-heading);
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: var(--fw-h1);
color: var(--color-ink);
margin-block-end: var(--space-6);
}
@media (max-width: 640px) {
.legal-title {
font-size: 34px;
line-height: 42px;
}
}
.legal-content h2 {
font-family: var(--font-heading);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: var(--fw-h2);
color: var(--color-ink);
margin-block-start: var(--space-8);
margin-block-end: var(--space-3);
}
@media (max-width: 640px) {
.legal-content h2 {
font-size: 24px;
line-height: 32px;
margin-block-start: var(--space-6);
}
}
.legal-content p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
margin-block-end: var(--space-3);
}
.legal-content ul {
list-style: disc;
padding-inline-start: var(--space-4);
margin-block-end: var(--space-3);
}
.legal-content ul li {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
margin-block-end: var(--space-1);
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
margin-block-end: var(--space-6);
}
.legal-table thead th {
font-weight: 600;
color: var(--color-ink);
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 2px solid var(--color-border);
background: var(--color-bg-soft);
}
.legal-table tbody tr {
border-bottom: 1px solid var(--color-border);
}
.legal-table tbody tr:last-child {
border-bottom: none;
}
.legal-table tbody th[scope="row"] {
font-weight: 500;
color: var(--color-muted);
text-align: left;
padding: var(--space-2) var(--space-3);
white-space: nowrap;
width: 36%;
}
.legal-table tbody td {
padding: var(--space-2) var(--space-3);
color: var(--color-ink);
}
@media (max-width: 640px) {
.legal-table,
.legal-table thead,
.legal-table tbody,
.legal-table tr,
.legal-table th,
.legal-table td {
display: block;
}
.legal-table thead tr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.legal-table tbody th[scope="row"] {
width: 100%;
font-weight: 600;
color: var(--color-ink);
padding: var(--space-2) 0 0 0;
white-space: normal;
}
.legal-table tbody td {
padding: 0 0 var(--space-2) 0;
}
.legal-table tbody td::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: var(--color-muted);
font-size: var(--fs-micro);
margin-block-end: 2px;
}
}
mark.pendiente-legal {
background-color: var(--color-tint);
color: var(--color-primary);
border-radius: 3px;
padding-inline: 3px;
outline: 1px solid var(--color-secondary);
font-style: normal;
}
.legal-content a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-content a:hover {
color: var(--color-secondary);
}
.legal-content a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 3px;
}