.pricing-section { --p-terracota: #B07850;
--p-terracota-osc: #8E5F3F;
--p-terracota-bg: #FFFFFF; --p-rosa: #BF6068;
--p-rosa-osc: #9D4A52;
--p-rosa-bg: #FBE9EA;
--p-rosa-card: #F2C6CA; --p-aguamarina: #3D9A93;
--p-aguamarina-osc: #2C7A74;
--p-aguamarina-bg: #E0F0EE;
--p-aguamarina-card: #C5E0DC; --p-fondo-claro: #FAF6EF;
--p-fondo-osc: #E8DFD0;
--p-section-bg: #FCFAF5; --p-tinta: #1A1A18;
--p-tinta-suave: #5A4A3A;
--p-tinta-tenue: #9A8A78;
--p-gris: #6B6860;
--p-blanco: #FFFFFF;
--p-serif: 'IBM Plex Serif', Georgia, serif;
--p-sans: 'Inter', -apple-system, sans-serif; background: var(--p-section-bg);
color: var(--p-tinta);
font-family: var(--p-sans);
line-height: 1.6;
padding: clamp(48px, 7vw, 96px) 24px;
overflow-x: hidden;
}
.pricing-section *,
.pricing-section *::before,
.pricing-section *::after {
box-sizing: border-box;
} .pricing-hero {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.pricing-hero-eyebrow {
display: inline-block;
font-family: var(--p-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-terracota);
margin-bottom: 18px;
}
.pricing-hero-title {
font-family: var(--p-serif);
font-size: clamp(28px, 5vw, 42px);
font-weight: 500;
line-height: 1.15;
color: var(--p-tinta);
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.pricing-hero-title em {
font-style: italic;
color: var(--p-terracota);
}
.pricing-hero-desc {
font-size: 16px;
color: var(--p-tinta-suave);
line-height: 1.6;
max-width: 540px;
margin: 0 auto;
} .pricing-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
max-width: 1280px;
margin: 0 auto;
align-items: stretch;
} .pricing-section[data-pricing-no-free="1"] .pricing-cards {
grid-template-columns: repeat(3, 1fr);
max-width: 1100px;
gap: 24px;
}
.pricing-section[data-pricing-no-free="1"] .pricing-card--semestral {
transform: translateY(-8px);
}
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--p-fondo-claro);
border-radius: 22px;
padding: 36px 28px 28px;
border: 2px solid transparent;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
} .pricing-card--mensual {
background: linear-gradient(165deg, var(--p-blanco) 0%, #F8DCDE 100%);
border-color: rgba(191, 96, 104, 0.32);
box-shadow: 0 6px 20px rgba(191, 96, 104, 0.10);
}
.pricing-card--semestral {
border-color: var(--p-terracota);
background: linear-gradient(180deg, var(--p-blanco) 0%, var(--p-terracota-bg) 100%);
transform: translateY(-8px);
box-shadow: 0 12px 32px rgba(176, 120, 80, 0.20);
}
.pricing-card--anual {
background: linear-gradient(165deg, var(--p-blanco) 0%, #D5E9E7 100%);
border-color: rgba(61, 154, 147, 0.32);
box-shadow: 0 6px 20px rgba(61, 154, 147, 0.10);
}
.pricing-card:hover,
.pricing-card:focus-within {
transform: translateY(-12px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
}
.pricing-card--semestral:hover,
.pricing-card--semestral:focus-within {
transform: translateY(-14px);
box-shadow: 0 18px 42px rgba(176, 120, 80, 0.28);
} .pricing-card-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--p-terracota);
color: var(--p-blanco);
font-family: var(--p-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(176, 120, 80, 0.35);
}
.pricing-card-name {
font-family: var(--p-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--p-tinta);
margin-bottom: 4px;
}
.pricing-card-variant {
font-family: var(--p-serif);
font-style: italic;
font-size: 16px;
color: var(--p-tinta-suave);
margin-bottom: 22px;
}
.pricing-card-amount {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 4px;
font-family: var(--p-serif);
font-weight: 700;
color: var(--p-tinta);
}
.pricing-card-amount-value {
font-size: clamp(36px, 5vw, 48px);
line-height: 1;
letter-spacing: -0.02em;
}
.pricing-card-amount-currency {
font-size: 18px;
font-weight: 500;
color: var(--p-tinta-suave);
}
.pricing-card-amount-asterisk {
font-size: 22px;
font-weight: 500;
color: var(--p-terracota);
margin-left: -4px;
}
.pricing-card-amount-period {
font-size: 15px;
font-weight: 400;
color: var(--p-tinta-suave);
margin-left: 2px;
}
.pricing-card-amount-note {
font-size: 12px;
font-weight: 400;
color: var(--p-tinta-tenue);
letter-spacing: 0.04em;
margin-bottom: 22px;
} .pricing-card-features {
list-style: none;
margin: 0 0 28px;
padding: 0;
flex: 1;
}
.pricing-card-features li {
font-size: 14px;
color: var(--p-tinta);
padding: 7px 0;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.pricing-card-features li svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 2px;
stroke-width: 2.5;
}
.pricing-card--mensual .pricing-card-features li svg { color: var(--p-rosa); }
.pricing-card--semestral .pricing-card-features li svg { color: var(--p-terracota); }
.pricing-card--anual .pricing-card-features li svg { color: var(--p-aguamarina); } .pricing-card-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 52px;
padding: 14px 22px;
border: none;
border-radius: 999px;
font-family: var(--p-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--p-blanco);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card--mensual .pricing-card-cta {
background: var(--p-rosa);
box-shadow: 0 4px 14px rgba(191, 96, 104, 0.28);
}
.pricing-card--mensual .pricing-card-cta:hover,
.pricing-card--mensual .pricing-card-cta:focus-visible {
background: var(--p-rosa-osc);
outline: none;
transform: translateY(-2px);
}
.pricing-card--semestral .pricing-card-cta {
background: var(--p-terracota);
box-shadow: 0 4px 16px rgba(176, 120, 80, 0.32);
}
.pricing-card--semestral .pricing-card-cta:hover,
.pricing-card--semestral .pricing-card-cta:focus-visible {
background: var(--p-terracota-osc);
outline: none;
transform: translateY(-2px);
}
.pricing-card--anual .pricing-card-cta {
background: var(--p-aguamarina);
box-shadow: 0 4px 14px rgba(61, 154, 147, 0.28);
}
.pricing-card--anual .pricing-card-cta:hover,
.pricing-card--anual .pricing-card-cta:focus-visible {
background: var(--p-aguamarina-osc);
outline: none;
transform: translateY(-2px);
} .pricing-footnote {
max-width: 720px;
margin: 36px auto 0;
text-align: center;
font-size: 13px;
color: var(--p-tinta-tenue);
line-height: 1.55;
}
.pricing-footnote-asterisk {
color: var(--p-terracota);
font-weight: 700;
margin-right: 2px;
} .pricing-cards-loading,
.pricing-cards-error {
grid-column: 1 / -1;
text-align: center;
padding: 56px 20px;
font-size: 15px;
color: var(--p-tinta-tenue);
}
.pricing-cards-error {
color: var(--p-rosa-osc);
} .pricing-card--gratis {
background: linear-gradient(165deg, var(--p-blanco) 0%, #F3E8C7 100%);
border-color: rgba(198, 170, 98, 0.40);
box-shadow: 0 6px 20px rgba(198, 170, 98, 0.12);
}
.pricing-card--gratis .pricing-card-features li svg {
color: #B89538;
}
.pricing-card--gratis .pricing-card-cta {
background: #B89538;
box-shadow: 0 4px 14px rgba(184, 149, 56, 0.28);
}
.pricing-card--gratis .pricing-card-cta:hover,
.pricing-card--gratis .pricing-card-cta:focus-visible {
background: #8C7333;
outline: none;
transform: translateY(-2px);
}
.pricing-card--gratis .pricing-card-amount-asterisk {
display: none;
} .pricing-weekly {
max-width: 1100px;
margin: clamp(72px, 9vw, 112px) auto 0;
}
.pricing-weekly-hero {
text-align: center;
margin-bottom: 40px;
}
.pricing-weekly-eyebrow {
display: inline-block;
font-family: var(--p-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--p-terracota);
margin-bottom: 16px;
}
.pricing-weekly-title {
font-family: var(--p-serif);
font-size: clamp(26px, 4.5vw, 36px);
font-weight: 500;
line-height: 1.2;
color: var(--p-tinta);
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.pricing-weekly-title em {
font-style: italic;
color: var(--p-terracota);
}
.pricing-weekly-desc {
font-size: 15px;
color: var(--p-tinta-suave);
line-height: 1.6;
max-width: 560px;
margin: 0 auto;
}
.pricing-weekly-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.pricing-weekly-card {
background: var(--p-blanco);
border-radius: 18px;
padding: 28px 26px;
position: relative;
}
.pricing-weekly-card-dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-bottom: 18px;
}
.pricing-weekly-card--rosa .pricing-weekly-card-dot { background: var(--p-rosa); }
.pricing-weekly-card--aguamarina .pricing-weekly-card-dot { background: var(--p-aguamarina); }
.pricing-weekly-card--terracota .pricing-weekly-card-dot { background: var(--p-terracota); }
.pricing-weekly-card h3 {
font-family: var(--p-serif);
font-size: 19px;
font-weight: 700;
color: var(--p-tinta);
margin: 0 0 10px;
line-height: 1.3;
}
.pricing-weekly-card p {
font-size: 14px;
color: var(--p-tinta-suave);
line-height: 1.55;
margin: 0;
} .pricing-guarantee {
max-width: 1100px;
margin: clamp(48px, 6vw, 80px) auto 0;
background: var(--p-blanco);
border: 1px solid var(--p-fondo-osc);
border-radius: 16px;
padding: 16px 28px;
display: flex;
flex-wrap: nowrap; align-items: center;
justify-content: space-between;
gap: 18px 24px;
}
.pricing-guarantee-items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 26px;
}
.pricing-guarantee-item {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 13px;
color: var(--p-tinta);
font-weight: 600;
}
.pricing-guarantee-item svg {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--p-terracota);
stroke-width: 2;
}
.pricing-guarantee-item strong {
font-weight: 700;
color: var(--p-tinta);
}
.pricing-guarantee-logos {
display: inline-flex;
align-items: flex-end;
gap: 22px;
}
.pricing-guarantee-logo {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.pricing-guarantee-logo svg {
height: 26px;
width: auto;
flex-shrink: 0;
}
.pricing-guarantee-logo-label {
font-family: var(--p-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--p-tinta-tenue);
line-height: 1;
} .pricing-modal-overlay { --p-terracota: #003CD2;
--p-terracota-osc: #002FA8;
--p-terracota-bg: #FFFFFF;
--p-rosa: #E85A6E;
--p-rosa-osc: #C04558;
--p-rosa-bg: #FEE8EB;
--p-aguamarina: #0FAFA0;
--p-aguamarina-osc: #0B9088;
--p-fondo-claro: #F1F5F9;
--p-fondo-osc: #CBD5E1;
--p-tinta: #0F172A;
--p-tinta-suave: #475569;
--p-tinta-tenue: #94A3B8;
--p-blanco: #FFFFFF;
--p-serif: 'IBM Plex Serif', Georgia, serif;
--p-sans: 'Inter', -apple-system, sans-serif;
position: fixed;
inset: 0;
background: rgba(26, 26, 24, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
overflow-y: auto;
}
.pricing-modal-overlay.is-open {
display: flex;
animation: pricing-modal-fade 0.2s ease-out;
}
@keyframes pricing-modal-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
.pricing-modal {
position: relative;
background: var(--p-blanco);
border-radius: 22px;
max-width: 460px;
width: 100%;
padding: 36px 32px 30px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
font-family: var(--p-sans);
color: var(--p-tinta);
animation: pricing-modal-slide 0.25s ease-out;
}
@keyframes pricing-modal-slide {
from { transform: translateY(20px); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
}
.pricing-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: 26px;
color: var(--p-tinta-tenue);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background-color 0.2s ease;
}
.pricing-modal-close:hover,
.pricing-modal-close:focus-visible {
background: var(--p-fondo);
color: var(--p-tinta);
outline: none;
}
.pricing-modal-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p-terracota);
margin-bottom: 8px;
}
.pricing-modal-title {
font-family: var(--p-serif);
font-size: 24px;
font-weight: 500;
line-height: 1.2;
color: var(--p-tinta);
margin: 0 0 10px;
}
.pricing-modal-subtitle {
font-size: 14px;
color: var(--p-tinta-suave);
line-height: 1.55;
margin: 0 0 22px;
}
.pricing-modal-form .form-group {
margin-bottom: 16px;
}
.pricing-modal-form label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--p-tinta);
margin-bottom: 6px;
} .pricing-modal-form input[type="text"],
.pricing-modal-form input[type="email"],
.pricing-modal-form input[type="password"],
.pricing-modal-form input[type="tel"] {
width: 100%;
min-height: 48px;
padding: 12px 14px;
font-family: var(--p-sans);
font-size: 15px;
color: var(--p-tinta);
background: var(--p-fondo-claro);
border: 1px solid var(--p-fondo-osc);
border-radius: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none;
appearance: none;
}
.pricing-modal-form input:focus {
border-color: var(--p-terracota);
outline: none;
box-shadow: 0 0 0 3px rgba(0, 60, 210, 0.18);
}
.pricing-modal-form input::placeholder {
color: var(--p-tinta-tenue);
opacity: 1;
}
.pricing-modal-form .form-hint-sm {
font-size: 12px;
color: var(--p-tinta-tenue);
margin-top: 4px;
line-height: 1.5;
}
.pricing-modal-terms {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0 20px;
font-size: 13px;
color: var(--p-tinta-suave);
line-height: 1.5;
cursor: pointer;
}
.pricing-modal-terms input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--p-terracota);
cursor: pointer;
}
.pricing-modal-terms a {
color: var(--p-terracota);
text-decoration: underline;
}
.pricing-modal-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
padding: 14px 24px;
border: none;
border-radius: 999px;
background: var(--p-terracota);
color: var(--p-blanco);
font-family: var(--p-sans);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0, 60, 210, 0.28);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.pricing-modal-submit:hover:not(:disabled),
.pricing-modal-submit:focus-visible:not(:disabled) {
background: var(--p-terracota-osc);
transform: translateY(-1px);
outline: none;
}
.pricing-modal-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.pricing-modal-error {
margin-top: 14px;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
background: var(--p-rosa-bg);
color: var(--p-rosa-osc);
border-left: 3px solid var(--p-rosa);
display: none;
}
.pricing-modal-error.is-visible {
display: block;
}
.pricing-modal-error--info {
background: var(--p-terracota-bg);
color: var(--p-terracota-osc);
border-left-color: var(--p-terracota);
}
.pricing-modal-error a {
color: inherit;
font-weight: 700;
text-decoration: underline;
}
.pricing-modal-privacy {
margin-top: 14px;
font-size: 12px;
color: var(--p-tinta-tenue);
text-align: center;
line-height: 1.5;
}  @media (max-width: 1023px) {
.pricing-cards {
grid-template-columns: 1fr 1fr;
gap: 20px;
} .pricing-card--semestral {
grid-column: auto;
transform: none;
}
.pricing-card--semestral:hover,
.pricing-card--semestral:focus-within {
transform: translateY(-6px);
}
.pricing-weekly-grid {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.pricing-weekly-card--terracota {
grid-column: 1 / -1;
}
} @media (max-width: 640px) {
.pricing-section {
padding: 48px 16px;
}
.pricing-hero {
margin-bottom: 32px;
}
.pricing-cards {
grid-template-columns: 1fr;
gap: 20px;
} .pricing-card {
padding: 32px 22px 24px;
transform: none !important; }
.pricing-card--semestral {
transform: none !important;
}
.pricing-card:hover,
.pricing-card:focus-within {
transform: none !important;
}
.pricing-card-badge {
top: -12px;
font-size: 10px;
padding: 5px 14px;
}
.pricing-weekly {
margin-top: 64px;
}
.pricing-weekly-grid {
grid-template-columns: 1fr;
}
.pricing-weekly-card--terracota {
grid-column: auto;
}
.pricing-guarantee {
flex-direction: column;
align-items: stretch;
padding: 22px 22px;
text-align: center;
}
.pricing-guarantee-items {
justify-content: center;
gap: 12px 20px;
}
.pricing-guarantee-logos {
justify-content: center;
margin-top: 6px;
}
.pricing-modal {
padding: 30px 22px 24px;
border-radius: 18px;
margin: 20px auto;
}
.pricing-modal-title {
font-size: 22px;
} .pricing-modal-form input[type="text"],
.pricing-modal-form input[type="email"],
.pricing-modal-form input[type="password"],
.pricing-modal-form input[type="tel"] {
font-size: 16px;
}
} @media (prefers-reduced-motion: reduce) {
.pricing-section *,
.pricing-section *::before,
.pricing-section *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.pricing-card,
.pricing-card--semestral,
.pricing-card:hover {
transform: none !important;
}
}