html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #FBEEE0;
color: #2A1C33;
font-family:
"Instrument Sans",
"Helvetica Neue",
Arial,
sans-serif;
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
}
:focus-visible {
outline:
3px solid #FFB23F;
outline-offset:
3px;
}
/* =========================
TOPBAR
========================= */
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: #1B0F2E;
border-bottom:
1px solid rgba(255,255,255,.1);
}
.topbar-inner {
width: 92%;
max-width: 1180px;
margin: auto;
min-height: 66px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
color: white;
text-decoration: none;
font-family:
"Bricolage Grotesque",
sans-serif;
font-size: 1.35rem;
font-weight: 800;
}
.brand-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #F2456B;
box-shadow:
0 0 0 4px rgba(242,69,107,.25);
}
.back-link {
color:
rgba(255,255,255,.65);
text-decoration: none;
font-size: .9rem;
}
.back-link:hover {
color: white;
}
/* =========================
PAGE
========================= */
.page {
width: 92%;
max-width: 980px;
margin: auto;
padding: 65px 0 90px;
}
/* =========================
PLAN HEADER
========================= */
.plan-header {
display: grid;
grid-template-columns:
1fr 310px;
gap: 50px;
align-items: end;
margin-bottom: 48px;
}
.eyebrow {
margin: 0 0 8px;
color: #6B5B78;
font-family:
"DM Mono",
monospace;
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
}
h1,
h2 {
font-family:
"Bricolage Grotesque",
sans-serif;
letter-spacing: -.035em;
}
h1 {
margin: 0;
font-size:
clamp(2.4rem, 6vw, 4.1rem);
line-height: .96;
}
.intro {
max-width: 600px;
margin: 20px 0 0;
color: #6B5B78;
font-size: 1.08rem;
}
/* =========================
PLAN CARD
========================= */
.plan-card {
padding: 25px;
background: #1B0F2E;
color: white;
border-radius: 18px;
box-shadow:
0 18px 45px rgba(27,15,46,.22);
}
.plan-label {
display: block;
margin-bottom: 8px;
color:
rgba(255,255,255,.45);
font-family:
"DM Mono",
monospace;
font-size: .65rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.plan-card strong {
display: block;
font-family:
"Bricolage Grotesque",
sans-serif;
font-size: 1.55rem;
}
.plan-price {
margin-top: 17px;
color: #FFB23F;
font-family:
"Bricolage Grotesque",
sans-serif;
font-size: 2.35rem;
font-weight: 800;
line-height: 1;
}
.plan-small {
color:
rgba(255,255,255,.45);
font-size: .82rem;
}
/* =========================
FORM SECTION
========================= */
.form-section {
margin-bottom: 24px;
padding: 32px;
background: white;
border:
1px solid rgba(42,28,51,.13);
border-radius: 18px;
box-shadow:
0 10px 30px rgba(42,28,51,.04);
}
.section-heading {
display: grid;
grid-template-columns: 48px 1fr;
gap: 18px;
margin-bottom: 30px;
}
.section-number {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: #FBEEE0;
color: #F2456B;
font-family:
"DM Mono",
monospace;
font-size: .75rem;
font-weight: 500;
}
.section-heading h2 {
margin: 0;
font-size: 1.8rem;
line-height: 1.05;
}
.section-heading p:last-child {
margin: 8px 0 0;
color: #6B5B78;
}
/* =========================
RUT
========================= */
.rut-search {
margin-bottom: 28px;
padding: 18px;
background: #FBEEE0;
border-radius: 13px;
}
.rut-row {
display: grid;
grid-template-columns:
1fr auto;
gap: 10px;
margin-top: 7px;
}
.rut-search small {
display: block;
margin-top: 7px;
color: #6B5B78;
font-size: .8rem;
}
.field-status {
margin-top: 8px;
font-size: .85rem;
}
.field-status.success {
color: #1C7A5A;
}
.field-status.error {
color: #C22B4E;
}
/* =========================
GRID
========================= */
.form-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 19px;
}
.field {
display: flex;
flex-direction: column;
}
.field-full {
grid-column: 1 / -1;
}
.field label,
.rut-search label {
margin-bottom: 6px;
font-size: .86rem;
font-weight: 600;
}
/* =========================
INPUTS / TEXTAREA / SELECT
========================= */
.field input,
.field textarea,
.field select,
.rut-search input {
width: 100%;
padding: 12px 14px;
background: #FFFCF8;
color: #2A1C33;
border:
1px solid rgba(42,28,51,.18);
border-radius: 9px;
outline: none;
transition:
border-color .2s,
box-shadow .2s,
background .2s;
}
.field textarea {
resize: vertical;
min-height: 110px;
}
.field select {
appearance: auto;
min-height: 48px;
cursor: pointer;
}
.field select:disabled {
opacity: .7;
cursor: wait;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.rut-search input:focus {
background: white;
border-color: #F2456B;
box-shadow:
0 0 0 3px rgba(242,69,107,.1);
}
.field.invalid input,
.field.invalid textarea,
.field.invalid select,
.rut-search.invalid input {
border-color: #C22B4E;
}
/* =========================
BUTTONS
========================= */
.primary-button,
.secondary-button {
border: 0;
border-radius: 999px;
font-weight: 600;
transition:
transform .2s,
box-shadow .2s;
}
.primary-button {
padding: 13px 23px;
background: #F2456B;
color: white;
box-shadow:
0 6px 0 #C22B4E;
}
.primary-button:hover {
transform:
translateY(-2px);
box-shadow:
0 8px 0 #C22B4E;
}
.primary-button:active {
transform:
translateY(3px);
box-shadow:
0 2px 0 #C22B4E;
}
.secondary-button {
padding: 0 18px;
background: #1B0F2E;
color: white;
}
.secondary-button:hover {
background: #2E1A4A;
}
/* =========================
ACTION
========================= */
.action-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 30px;
padding: 27px 30px;
background: #2E1A4A;
color: white;
border-radius: 18px;
}
.action-title {
margin: 0;
font-family:
"Bricolage Grotesque",
sans-serif;
font-size: 1.25rem;
font-weight: 700;
}
.action-text {
margin: 3px 0 0;
color:
rgba(255,255,255,.55);
font-size: .9rem;
}
/* =========================
LOADING
========================= */
.loading-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
background:
rgba(27,15,46,.75);
backdrop-filter:
blur(4px);
}
.loading-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 30px;
background: #FBEEE0;
border-radius: 18px;
text-align: center;
}
.loading-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #F2456B;
animation:
pulse 1s infinite;
}
.loading-box span:last-child {
color: #6B5B78;
font-size: .9rem;
}
@keyframes pulse {
50% {
opacity: .3;
transform:
scale(.75);
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 760px) {
.page {
padding-top: 42px;
}
.plan-header {
grid-template-columns: 1fr;
gap: 25px;
}
.form-section {
padding: 22px;
}
.section-heading {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.field-full {
grid-column: auto;
}
.rut-row {
grid-template-columns: 1fr;
}
.secondary-button {
height: 45px;
}
.action-section {
align-items: stretch;
flex-direction: column;
}
.primary-button {
width: 100%;
}
.back-link {
font-size: .8rem;
}
}
/* =====================================================
EMAIL — ICONO DENTRO DEL INPUT
===================================================== */
.email-input-wrapper {
position: relative;
width: 100%;
}
.email-input-wrapper input {
width: 100%;
padding-right: 52px;
}
.input-search-button {
position: absolute;
top: 50%;
right: 8px;
transform:
translateY(-50%);
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #6B5B78;
cursor: pointer;
padding: 0;
margin: 0;
transition:
background-color .2s ease,
color .2s ease;
}
.input-search-button:hover {
background: #F3E0CD;
color: #F2456B;
}
.input-search-button:focus-visible {
outline:
2px solid #F2456B;
outline-offset:
2px;
}
.input-search-button i {
font-size: 16px;
line-height: 1;
}
.input-search-button:disabled {
opacity: .5;
cursor: not-allowed;
}
/* =====================================================
SWITCH EMPRESA
===================================================== */
.switch {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
cursor: pointer;
margin-top: 8px;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
inset: 0;
background-color: #D8C8D9;
border-radius: 999px;
transition:
background-color .25s ease,
box-shadow .25s ease;
}
/* Círculo */
.switch-slider::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 4px;
top: 4px;
background-color: #FFFFFF;
border-radius: 50%;
box-shadow:
0 2px 5px rgba(27,15,46,.25);
transition:
transform .25s ease;
}
/* =====================================================
ACTIVADO
===================================================== */
.switch input:checked + .switch-slider {
background-color: #F2456B;
}
.switch input:checked + .switch-slider::before {
transform:
translateX(24px);
}
/* =====================================================
HOVER
===================================================== */
.switch:hover .switch-slider {
box-shadow:
0 0 0 4px rgba(242,69,107,.10);
}
/* =====================================================
FOCUS
===================================================== */
.switch input:focus-visible + .switch-slider {
outline:
2px solid #F2456B;
outline-offset:
3px;
}