@font-face {
font-family: SystemUI;
src: local(".SFNSDisplay-Regular"), local("Segoe UI"), local(Roboto),
local(Ubuntu), local("Helvetica Neue");
}
:root {
--bg: #f6f8fa;
--card: #f0f6ff;
--title: #0f1724;
--muted: #8a94a6;
--accent: #08315a;
--selected: #ff8443;
--white: #fff;
--shadow: 0 6px 18px rgba(8, 49, 90, 0.08);
--nav-offset: 70px;
--sheet-lift: 10px;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: "Eina03-300", SystemUI, -apple-system, system-ui, Segoe UI,
Roboto, Arial, sans-serif;
background: var(--bg);
color: #1f2937;
padding-bottom: calc(var(--nav-offset, 70px) + 24px);
}
/* Headings use bold family */
.header-title__main {
font-family: "Eina03-600", SystemUI, -apple-system, system-ui, Segoe UI,
Roboto, Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 16px;
/* reserve space at the bottom so the fixed nav doesn't overlap final content/footer */
padding-bottom: 12px;
}
.page-shell {
width: 100%;
}
.page-shell__body {
width: 100%;
position: relative;
}
/* En escritorio, limita más el ancho para mejorar legibilidad */
@media (min-width: 1024px) {
body {
display: flex;
justify-content: center;
padding: 32px 0 calc(var(--nav-offset, 70px) + 24px);
min-height: 100vh;
}
.page-shell {
width: 700px;
max-width: 700px;
height: 1270px;
max-height: 1270px;
margin: 0 auto;
border: 1px solid #dbe7ff;
border-radius: 18px;
background: var(--white);
box-shadow: 0 20px 45px rgba(8, 49, 90, 0.12);
overflow: hidden;
position: relative;
}
.page-shell__body {
height: calc(100% - var(--nav-offset, 70px));
overflow-y: auto;
padding-bottom: calc(var(--nav-offset, 70px) + 24px);
}
.container {
max-width: 100%;
margin: 0 auto;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Header should not have box styling, just centered content */
.site-header .container {
border: none;
background: transparent;
box-shadow: none;
max-width: 100%;
width: 100%;
margin: 0 auto;
padding-left: 16px;
padding-right: 16px;
}
/* Push site title to the right on desktop */
.header-content {
justify-content: space-between;
}
.header-title {
margin-left: auto;
align-items: flex-end;
text-align: left;
}
/* Align progress text with container width on desktop */
.site-header .progress {
max-width: none;
margin: 0 auto;
padding: 6px 0;
width: calc(100% - 32px);
}
/* Progress bar del header con el mismo ancho que el contenido */
.site-header .progress-bar {
max-width: none;
margin-left: auto;
margin-right: auto;
width: calc(100%);
}
/* Header title styling on desktop */
.header-title__main {
font-size: 1.1rem;
text-align: left;
}
.header-logo {
height: 36px;
}
.progress-bar {
max-width: none;
width: calc(100% - 32px);
}
.nav {
max-width: 700px;
width: 100%;
}
}
/* Desktop: keep the bottom nav centered within the 700px frame */
@media (min-width: 1024px) {
.nav {
left: 50%;
right: auto;
transform: translateX(-50%);
width: 700px !important;
max-width: 700px !important;
justify-content: center;
}
}
.site-header {
position: sticky;
top: 0;
background: linear-gradient(135deg, #ffd7b6 40%, #ffe2ae 60%, #f1ffa7 100%);
border-bottom: 1px solid #e5e7eb;
z-index: 5;
}
.header-content {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.header-logo {
height: 40px;
width: auto;
flex-shrink: 0;
}
.header-title {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-title__main {
margin: 0;
font-size: 1.15rem;
color: #000000;
font-weight: 900;
text-align: left;
line-height: 1.15;
}
.site-header .brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--title);
}
.brand-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--selected);
display: inline-block;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Top progress bar under header - FULL WIDTH */
.progress-bar {
height: 8px;
background: linear-gradient(90deg, #eef4fb, #f6f9fe);
border-radius: 0;
margin: 0 auto;
overflow: hidden;
border: none;
width: 100%;
max-width: none;
display: block;
box-sizing: border-box;
}
.progress-bar__fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--selected), #ffd023);
transition: width 260ms ease;
border-radius: 0;
}
/* Progress text below progress bar - GRAY BACKGROUND, RIGHT ALIGNED, SMALL */
.progress {
color: rgb(32, 29, 28);
font-weight: 500;
font-size: 0.85rem;
padding: 6px 16px;
background: transparent;
text-align: right;
width: 100%;
box-sizing: border-box;
}
/* Make the step text align to the same right edge as the progress bar */
.site-header .progress {
max-width: 500px;
width: calc(100% - 24px);
margin-left: auto;
margin-right: auto;
}
h1 {
color: var(--title);
font-size: 1.3rem;
margin: 16px 0 16px;
text-transform: uppercase;
}
h2 {
color: var(--accent);
margin: 0;
}
h3 {
margin: 0;
color: var(--accent);
}
.sub {
color: var(--muted);
margin: 0 0 16px;
}
.muted {
color: var(--muted);
}
.info-card {
display: flex;
gap: 12px;
align-items: flex-start;
background: var(--card);
padding: 14px 16px;
border-radius: 12px;
box-shadow: var(--shadow);
border: 1px solid #e2e8f0;
}
.info-card .i {
width: 20px;
height: 20px;
color: var(--selected);
fill: currentColor;
stroke: currentColor;
}
/* Make the assistant info card more compact */
.info-card {
padding: 10px 12px;
gap: 8px;
}
.info-card .i {
width: 18px;
height: 18px;
}
.info-card__content h3 {
margin: 0 0 4px;
font-size: 0.95rem;
}
.info-card__content p {
margin: 0;
font-size: 0.85rem;
line-height: 1.35;
}
.card {
background: var(--white);
border-radius: 8px;
box-shadow: var(--shadow);
border: 1px solid #e5e7eb;
}
.card--section {
padding: 16px;
}
.card__head {
margin-bottom: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--tall .opt {
min-height: 84px;
}
/* Step 3: force single column (one option per row) */
#step3Options {
grid-template-columns: 1fr;
}
/* Step 3: layout cards horizontally: icon (left) + content (right) */
#step3Options .opt {
flex-direction: row;
align-items: center;
gap: 12px;
}
/* Make the icon appear inside a white rounded square for step3 */
#step3Options .opt[data-icon]::before {
width: 48px;
height: 48px;
padding: 8px;
margin-right: 12px;
background-color: var(--white);
border-radius: 8px;
border: 1px solid #e5e7eb;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Content wrapper: keep title above the secondary text */
.opt__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
}
.opt__content .title {
margin-bottom: 0;
}
/* Mantener dos por fila también en escritorio para uniformidad */
/* Paso 6: una tarjeta por fila para dar más espacio al vídeo */
#results {
grid-template-columns: 1fr;
}
/* Override: removed per user request */
.opt {
position: relative;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: var(--card);
padding: 12px;
cursor: pointer;
transition: all 0.18s ease;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.opt:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.opt.selected {
outline: 2px solid var(--selected);
background: #ffe1cc4d;
border-color: #ffe1cc4d;
}
.opt h4 {
margin: 0 0 6px;
color: var(--accent);
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 16px;
}
.opt p {
margin: 0;
color: var(--muted);
word-wrap: break-word;
overflow-wrap: break-word;
font-size: 0.9rem;
}
/* SVG icons inside option cards take currentColor */
.opt .i {
width: 22px;
height: 22px;
color: var(--title);
fill: currentColor;
stroke: currentColor;
margin-right: 8px;
}
.opt .i {
width: 22px;
height: 22px;
fill: var(--title);
margin-right: 8px;
}
.opt .title {
display: flex;
align-items: center;
gap: 8px;
}
.opt[data-icon]::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
margin-bottom: 8px;
flex-shrink: 0;
}
.opt[data-icon="tile"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="sofa"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="cama"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="sun"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="coche"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="tools"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="seat"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Iconso muebles */
.opt[data-icon="sillasybancos"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="sillonesybutacas"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="respaldos"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="puff"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Iconso descanso */
.opt[data-icon="descansocolchon"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="descansocolchoneta"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="descansoplegable"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="descansomascota"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="exteriorjardin"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="exteriorpallets"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="exteriorpiscina"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="exteriorchillout"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Iconos vehiculos */
.opt[data-icon="vehiculoscoche"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="vehiculosmoto"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="vehiculosbarco"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/*Iconos diy*/
.opt[data-icon="diydiy"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="diyproteccion"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="diyescolar"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="diydecoracion"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/*Iconos otros*/
.opt[data-icon="otrosacustica"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="otrosmaletin"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="otrospsicomotricidad"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Iconos grosores */
.opt[data-icon="grosor1"]::before,
.adjust-modal__icon[data-icon="grosor1"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="grosor2"]::before,
.adjust-modal__icon[data-icon="grosor2"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="grosor3"]::before,
.adjust-modal__icon[data-icon="grosor3"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="grosor4"]::before,
.adjust-modal__icon[data-icon="grosor4"] {
background-image: url('data:image/svg+xml;utf8,');
}
/* Reduce visual height of the two thickest "grosor" icons so they don't overflow the box */
#step3Options .opt[data-icon="grosor3"]::before {
/* keep full width but reduce vertical size so stroke doesn't stick out */
background-size: 100% 50%;
}
#step3Options .opt[data-icon="grosor4"]::before {
background-size: 100% 45%;
}
/* Make all grosor icons share the same sizing behaviour as the last two
so none overflow the 48x48 box. Use a uniform vertical compression. */
#step3Options .opt[data-icon^="grosor"]::before {
background-size: 100% 50% !important;
background-position: center;
}
.adjust-modal__icon[data-icon^="grosor"] {
background-size: 100% 50%;
background-position: center;
}
/* Signal icons for paso 4 (increasing bars) */
.opt[data-icon="signal1"]::before,
.adjust-modal__icon[data-icon="signal1"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="signal2"]::before,
.adjust-modal__icon[data-icon="signal2"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="signal3"]::before,
.adjust-modal__icon[data-icon="signal3"] {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="signal4"]::before,
.adjust-modal__icon[data-icon="signal4"] {
background-image: url('data:image/svg+xml;utf8,');
}
/* Step 4: one option per row and larger icon box on the left */
#step4Options {
grid-template-columns: 1fr;
}
#step4Options .opt {
flex-direction: row;
align-items: center;
gap: 14px;
}
#step4Options .opt[data-icon]::before {
width: 32px;
height: 32px;
padding: 8px;
margin-right: 12px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* Mirror horizontally but keep the current size */
transform: scaleX(-1);
transform-origin: center center;
}
.opt[data-icon="menupuntos"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Icons for Paso 5: use the symbols from icons.svg (economica, premium) */
.opt[data-icon="economica"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.opt[data-icon="premium"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.field {
margin-top: 14px;
}
.field label {
display: block;
font-weight: 600;
margin: 0 0 6px;
color: var(--title);
}
/* Increase size of the '¿Alguna indicación adicional?' label specifically in step 2 */
.step[data-step="2"] .field label {
font-size: 1rem;
margin-bottom: 12px;
}
.field textarea {
width: 100%;
min-height: 90px;
border-radius: 8px;
border: 1px solid #d1d5db;
padding: 10px;
resize: vertical;
}
.nav {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
}
.nav {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 0;
z-index: 3000; /* above bottom sheet */
background: linear-gradient(
to top,
rgba(246, 248, 250, 1),
rgba(246, 248, 250, 0.92)
);
padding: 10px 16px;
border-top: 1px solid #e5e7eb;
width: 100%;
max-width: 700px;
}
.spacer {
flex: 1;
}
.btn {
appearance: none;
border: 1px solid #cfd8e3;
background: var(--white);
color: #0f172a;
border-radius: 0px;
padding: 12px 18px; /* bigger */
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
}
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: #000000;
color: #ffffff;
border-color: #000000;
border-radius: 25px;
}
.btn-secondary {
background: #ffffff;
color: #000000;
border-color: #000000;
border-radius: 25px;
}
.btn-plain {
background: transparent;
border: 1px solid transparent;
color: inherit;
padding: 12px;
font-weight: 600;
}
.floating-actions {
position: fixed;
bottom: calc(var(--nav-offset, 70px) + 12px);
left: 50%;
transform: translate(-50%, 8px);
width: min(700px, calc(100% - 32px));
justify-content: space-between;
padding: 0 16px;
z-index: 4000;
gap: 12px;
display: flex;
opacity: 0;
pointer-events: none;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.step[data-step="6"]:not([hidden]) .floating-actions {
opacity: 1;
transform: translate(-50%, 0);
}
.step[data-step="6"]:not([hidden]) .floating-actions.is-hidden {
opacity: 0;
pointer-events: none;
transform: translate(-50%, 8px);
}
.step[data-step="6"]:not([hidden]) .floating-actions .btn {
pointer-events: auto;
}
.floating-actions .btn-doubt {
flex: 1;
max-width: 200px;
}
.btn-doubt {
background: linear-gradient(135deg, #ffd7b6 40%, #ffe2ae 60%, #f1ffa7 100%);
color: #000;
border-color: #ff7a00;
border-radius: 25px;
}
.btn-adjust {
background: #1d4ed8;
color: #ffffff;
border-radius: 50%;
width: 48px;
height: 48px;
padding: 0;
min-width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.btn-adjust::before {
content: "";
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url('data:image/svg+xml;utf8,');
}
.step6__title-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.info-badge {
border: none;
background: transparent;
color: #ff8443;
padding: 0;
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.info-badge svg {
width: 20px;
height: 20px;
}
.info-badge:focus-visible {
outline: 2px solid rgba(255, 132, 67, 0.5);
outline-offset: 2px;
}
.step6__disclaimer {
margin-top: 6px;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.4;
}
.step {
animation: fade 0.25s ease;
padding-bottom: 120px;
}
body.modal-open {
overflow: hidden;
}
@keyframes fade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
.result-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
box-shadow: var(--shadow);
}
.result-card h4 {
margin: 0 0 8px;
color: var(--accent);
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
font-weight: 600;
font-size: 0.8rem;
margin-right: 6px;
}
.meta {
color: var(--muted);
font-size: 0.9rem;
}
.video {
margin-top: 10px;
aspect-ratio: 16/9;
width: 100%;
border: 0;
border-radius: 8px;
}
/* Step 6: Rich result cards */
.rc {
border-radius: 12px;
padding: 14px;
}
.rc-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.rc-colors {
display: flex;
gap: 6px;
align-items: center;
}
.rc-color-label {
font-size: 0.65rem;
text-transform: lowercase;
color: #475569;
font-weight: 600;
}
.rc-color-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid #cbd5f0;
box-shadow: 0 0 0 1px #fff inset;
flex-shrink: 0;
}
.rc-pill {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: #1e3a8a;
background: #eef2ff;
border: 1px solid #1e3a8a;
border-radius: 10px;
padding: 2px 8px;
}
.rc-title {
margin: 12px 0 12px;
font-size: 1.15rem;
color: #0f172a;
}
.rc-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 12px;
}
.rc-meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
background: #f8fafc;
border: 1px solid #e2e8f0;
font-size: 0.78rem;
color: #0f172a;
font-weight: 600;
}
.rc-meta-label {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #475569;
}
.rc-meta-icon {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
}
.rc-meta-value {
font-weight: 700;
}
.rc-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 6px 0;
}
.rc-metric__head {
display: flex;
justify-content: space-between;
color: #334155;
font-size: 0.85rem;
margin-bottom: 6px;
font-weight: 700;
}
.rc-meter {
display: flex;
gap: 4px;
--rc-meter-color-on: #47a1b3;
}
.rc-meter__seg {
width: 12px;
height: 8px;
border-radius: 3px;
background: #e2e8f0;
}
.rc-meter__seg.is-on {
background: var(--rc-meter-color-on);
}
.rc-meter[data-variant="durabilidad"] {
--rc-meter-color-on: #d8a91d;
}
.rc-desc {
color: #475569;
margin: 8px 0 12px;
}
.rc-dropdown {
margin-top: 6px;
}
.rc-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
background: none;
border: none;
padding: 10px 12px;
cursor: pointer;
font-weight: 600;
color: #0f172a;
}
.rc-caret {
transition: transform 0.18s ease;
}
.rc-toggle.is-open .rc-caret {
transform: rotate(180deg);
}
.rc-extra {
margin-top: 8px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #f8fafc;
padding: 10px;
min-height: 80px;
display: grid;
place-items: center;
}
.rc-extra[hidden] {
display: none !important;
}
.rc-video-placeholder {
color: #94a3b8;
font-weight: 600;
text-align: center;
}
.adjust-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.25s ease;
}
#adjustModal {
position: fixed;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 5000;
pointer-events: none;
}
#adjustModal[hidden] {
display: none;
}
#adjustModal:not([hidden]) {
pointer-events: auto;
}
#adjustModal:not([hidden]) .adjust-modal__backdrop {
opacity: 1;
}
.adjust-modal__content {
position: relative;
background: var(--white);
border-radius: 18px 18px 0 0;
padding: 24px;
box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25);
width: min(700px, calc(100% - 32px));
max-height: 70vh;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.adjust-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.adjust-modal__header h2 {
margin: 0;
font-size: 1.25rem;
color: #0f172a;
}
.adjust-modal__close {
background: transparent;
border: none;
font-size: 1.6rem;
line-height: 1;
color: #475569;
cursor: pointer;
padding: 0;
}
.adjust-modal__intro {
margin: 0;
color: #7e91ac;
line-height: 1.4;
}
.adjust-modal__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.adjust-modal__option-title {
margin: 0;
font-weight: 700;
font-size: 1rem;
color: #0f172a;
line-height: 1.2;
}
.adjust-modal__option-desc {
margin: 0;
font-size: 0.9rem;
color: #6b7280;
}
.adjust-modal__field-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.adjust-modal__icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(8, 49, 90, 0.05);
display: inline-flex;
align-items: center;
justify-content: center;
background-size: 60% 60%;
background-repeat: no-repeat;
background-position: center;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.adjust-modal__field label {
font-weight: 600;
color: #1d4ed8;
}
.adjust-modal__value {
margin: 0;
font-size: 0.9rem;
color: #475569;
}
.adjust-modal__field input[type=\"range\"] {
width: 100%;
accent-color: #1d4ed8;
}
.adjust-modal__close-btn {
align-self: flex-end;
padding: 8px 16px;
margin-top: 8px;
}
/* Segmented switch (Paso 6) */
.segmented {
display: flex;
gap: 0;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 4px;
width: fit-content;
margin: 8px auto 12px;
}
.segmented__option {
appearance: none;
border: 0;
background: transparent;
color: #334155;
padding: 8px 16px;
border-radius: 999px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.segmented__option::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.segmented__option[data-icon="premium"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.segmented__option[data-icon="economica"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.segmented__option[aria-selected="true"] {
background: #1d4ed8;
color: #fff;
}
.segmented__option[aria-selected="true"]::before {
filter: brightness(0) invert(1);
}
.segmented__option[aria-selected="true"] .i {
fill: #fff;
}
/* Ajustes de tamaño en escritorio (ordenador) */
@media (min-width: 1024px) {
/* Strongly reduce base font-size and spacing on desktop for a compact UI */
body {
font-size: 10px;
line-height: 1.25;
}
/* Adjust headings and text to match the smaller base */
h1 {
font-size: 1.05rem;
margin: 10px 0 5px;
}
h2 {
font-size: 0.9rem;
}
.opt {
padding: 8px;
gap: 8px;
}
.opt h4 {
font-size: 0.85rem;
margin-bottom: 3px;
}
.opt p {
font-size: 0.75rem;
}
.btn {
padding: 5px 9px;
font-size: 0.75rem;
}
.card--section {
padding: 10px;
}
.info-card {
padding: 8px 10px;
}
}
/* Promo kit de muestras */
.promo-card {
display: flex;
flex-direction: column;
gap: 10px;
background: #f0f6ff;
border: 1px solid #dbe7ff;
border-radius: 14px;
padding: 14px;
box-shadow: var(--shadow);
margin-top: 8px;
}
.promo-card h4 {
margin: 0;
color: #08315a;
display: flex;
align-items: center;
gap: 8px;
}
.promo-card h4[data-icon]::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.promo-card h4[data-icon="maletin1"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.promo-card p {
margin: 0;
color: var(--muted);
}
.promo-card .row {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.btn-cta {
background: var(--selected);
color: #fff;
border: 1px solid var(--selected);
border-radius: 25px;
padding: 10px 14px;
font-weight: 700;
text-decoration: none; /* no underline */
display: inline-block;
}
/* Loading overlay */
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.loading-overlay[hidden] {
display: none !important;
}
.loading-card {
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px 14px;
box-shadow: var(--shadow);
}
.loading-card p {
margin: 0;
color: var(--accent);
font-weight: 600;
}
.spinner {
width: 22px;
height: 22px;
border: 3px solid #cfe1ff;
border-top-color: var(--selected);
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Step 6: floating promo card at the bottom, above footer */
section.step[data-step="6"] #samplesPromo {
position: fixed;
left: 50%;
transform: translateX(-50%);
/* sit above the fixed .nav; reserve ~70px + safe area */
bottom: calc(70px + env(safe-area-inset-bottom));
width: calc(100% - 24px);
max-width: 390px; /* align with desktop container */
z-index: 20; /* above .nav and footer */
pointer-events: none; /* let only inner card capture clicks */
}
section.step[data-step="6"] #samplesPromo .promo-card {
padding: 8px 10px;
gap: 6px;
margin: 0;
pointer-events: auto;
background: linear-gradient(135deg, #d10bb034 0%, #08315a 100%);
color: #ffffff;
border: 1px solid #0b74d1;
}
/* Toggle header row */
section.step[data-step="6"] #samplesPromo .promo-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
section.step[data-step="6"] #samplesPromo .promo-toggle::after {
content: "";
width: 16px;
height: 16px;
margin-left: 8px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.2s ease;
}
section.step[data-step="6"]
#samplesPromo
.promo-card.is-open
.promo-toggle::after {
transform: rotate(180deg);
}
/* Collapsible content */
section.step[data-step="6"] #samplesPromo .promo-content[hidden] {
display: none !important;
}
section.step[data-step="6"] #samplesPromo .promo-card.is-open .promo-content p {
font-size: 0.95rem; /* larger when open */
color: rgba(255, 255, 255, 0.85); /* texto secundario más clarito */
}
section.step[data-step="6"] #samplesPromo .promo-card.is-open {
padding: 14px 16px;
box-shadow: 0 10px 24px rgba(8, 49, 90, 0.25);
}
section.step[data-step="6"] #samplesPromo .promo-card .promo-subtitle {
margin: 4px 0 6px;
font-size: 0.95rem;
color: #e6f0ff;
}
section.step[data-step="6"] #samplesPromo .promo-card h4 {
color: #ffffff;
}
section.step[data-step="6"] #samplesPromo .promo-card .btn-cta {
background: #ffd257;
border-color: #ffd257;
color: #1f2937;
padding: 10px 16px; /* un poco más grande */
font-size: 0.9rem;
}
/* más separación para el botón, debajo del texto */
section.step[data-step="6"] #samplesPromo .promo-card .promo-content .row {
margin-top: 10px;
}
/* Question icon for promo title */
.promo-card h4[data-icon="pregunta"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
section.step[data-step="6"] #samplesPromo .promo-card h4 {
font-size: 0.95rem;
}
section.step[data-step="6"] #samplesPromo .promo-card p {
display: block; /* mostrar texto secundario */
margin: 0;
font-size: 0.75rem; /* en pequeño */
line-height: 1.25;
}
section.step[data-step="6"] #samplesPromo .promo-card .row {
gap: 8px;
}
section.step[data-step="6"] #samplesPromo .promo-card .btn-cta {
padding: 6px 10px;
font-size: 0.8rem;
}
/* Iconos dentro de info-card (sprite) */
.info-card__icon {
color: var(--selected); /* controlas el color aquí */
}
.info-card__icon .i {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
fill: currentColor; /* que herede el color */
stroke: currentColor; /* por si el símbolo es de línea */
stroke-width: 1.5;
display: inline-block; /* evita colapsos de tamaño */
color: inherit;
flex-shrink: 0;
}