/* ============================================================ CONFIGURADOR Hereda todo de `style.css`: tokens, tipografía, `.t-label`, `.skip`, `:focus-visible`. Aquí solo va lo que no existía. Las tres reglas de `makers-docs/07_design/design-principles.md` que mandan sobre este fichero: 1. «La estructura se ve» — el raíl numerado, las hairlines y la rejilla del libro de capas son elementos de diseño, no andamiaje que ocultar. 2. «El acento es estructura» — `--ember` va en hairlines, numeración, conectores y estados activos. NUNCA en fondos, tarjetas ni titulares. Si una sección parece floja, el problema es el contenido. 3. «Una sola voz tipográfica» — Bai Jamjuree, pesos 400 y 500. La jerarquía se construye con tamaño, peso y aire. ------------------------------------------------------------------------- */ /* `style.css` inmoviliza el body hasta que la película marca `data-mk-ready` en el —es su defensa contra el parpadeo mientras arranca el WebGL—. Aquí no hay película que esperar, así que esa traba deja la página sin scroll para siempre. Se levanta sin tocar el arranque de la película. */ html:not([data-mk-ready]) body.cfg-body { overflow: visible; height: auto; } .cfg-body { overflow-x: hidden; /* La película es un cielo nocturno; el configurador es la mesa de trabajo. Mismo mundo, distinta luz: un punto por encima del negro puro para que las hairlines a 12 % se lean sin tener que subirlas a gris medio. */ background: var(--ink); color: var(--paper); } /* ------------------------------------------------------------ CABECERA */ .cfg-hdr { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gut); background: var(--ink); border-bottom: 1px solid var(--line-sutil); } .cfg-hdr__volver { display: inline-flex; align-items: center; gap: 0.6em; color: var(--paper); text-decoration: none; font-size: 0.7875rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; } /* Es el ÚNICO camino de vuelta de toda la página, y medía 84x16: la altura de su propio renglón. En un teléfono eso es pedir puntería para salir de un formulario de seis pasos. La caja crece a 44 px de alto sin mover el rótulo —ya está centrado por `align-items`— y sin tocar la maqueta de la cabecera. */ .cfg-hdr__volver { min-height: 44px; } .cfg-hdr__volver .arrow { transition: transform var(--dur) var(--ease); } .cfg-hdr__volver:hover .arrow { transform: translateX(-0.35em); } .cfg-hdr__estado { color: var(--ember); opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .cfg-hdr__estado[data-visible] { opacity: 1; } /* --------------------------------------------------------------- BOTONES Pill, según la decisión vigente del sistema de diseño. El relleno es blanco y el texto tinta: el acento NO se usa como fondo de botón. */ .cfg-btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 1.9em; border: 1px solid var(--white); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.7875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .cfg-btn .arrow { transition: transform var(--dur) var(--ease); } .cfg-btn:hover:not(:disabled) { background: transparent; color: var(--white); } .cfg-btn:hover:not(:disabled) .arrow { transform: translateX(0.35em); } .cfg-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cfg-btn--fantasma { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 28%, transparent); } .cfg-btn--fantasma:hover:not(:disabled) { border-color: var(--white); color: var(--white); background: transparent; } .cfg-btn--fantasma:hover:not(:disabled) .arrow { transform: translateX(-0.35em); } .cfg-btn[hidden] { display: none; } /* --------------------------------------------------------------- PORTADA */ .cfg-portada { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: end; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(4rem, 12vh, 9rem) var(--gut) clamp(4rem, 10vh, 7rem); min-height: calc(100dvh - 5rem); } .cfg-portada[hidden] { display: none; } .cfg-portada .label { display: block; color: var(--ember); opacity: 1; margin-bottom: 2rem; } .cfg-portada__h { margin: 0 0 1.5rem; font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; color: var(--white); text-wrap: balance; } .cfg-portada__sub { margin: 0 0 3rem; font-size: clamp(1.0125rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 34ch; } .cfg-portada__dur { margin: 1.25rem 0 0; opacity: 0.6; } .cfg-retomar { border-left: 2px solid var(--ember); padding: 0 0 0 1.25rem; margin-bottom: 2.5rem; } .cfg-retomar__t { margin: 0 0 1rem; font-size: 0.95rem; opacity: 0.8; } .cfg-retomar__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; } .cfg-retomar .cfg-btn { padding: 0.65em 1.3em; font-size: 0.7rem; } /* El ancla de precio. Sin fondo y sin tarjeta: una hairline superior y aire. Es el único precio público del sitio y no necesita gritar. */ .cfg-ancla { padding-top: 1.75rem; border-top: 1px solid var(--ember); } .cfg-ancla__label { display: block; margin-bottom: 1.5rem; max-width: 24ch; line-height: 1.5; } .cfg-ancla__precio { margin: 0 0 1rem; /* Sólo el SUELO. Por debajo de 704 px este precio y el titular de la portada medían exactamente lo mismo, así que la página no decía cuál manda. Se baja aquí y no dándole un clamp propio al h1: `style.css` documenta «UN SOLO VALOR POR NIVEL» como decisión explícita, y un tamaño de h1 ad hoc reabriría justo lo que esa decisión cerró. */ font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--white); font-variant-numeric: tabular-nums; max-width: none; } .cfg-ancla__precio em { font-style: normal; font-size: 0.9rem; font-weight: 400; letter-spacing: 0.02em; opacity: 0.5; vertical-align: 0.9em; } .cfg-ancla__pie { margin: 0; font-size: 0.9rem; line-height: 1.55; opacity: 0.6; max-width: 30ch; } /* ----------------------------------------------------------------- FLUJO */ .cfg-flujo { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(3rem, 7vh, 5.5rem) var(--gut) 7rem; align-items: start; } .cfg-flujo[hidden] { display: none; } .cfg-flujo[data-fin] { grid-template-columns: minmax(0, 1fr); } /* -------------------------------------------------- RAÍL DE PROGRESO El conector se dibuja con dos líneas superpuestas: la apagada completa y la encendida escalada por `--avance`. Escalar es más barato que animar altura y no fuerza `layout`. */ .cfg-rail { position: sticky; top: 6rem; } .cfg-rail__lista { list-style: none; margin: 0; padding: 0 0 0 1.75rem; position: relative; display: flex; flex-direction: column; gap: 1.6rem; } .cfg-rail__lista::before, .cfg-rail__lista::after { content: ""; position: absolute; left: 3px; top: 0.45em; bottom: 0.45em; width: 1px; } .cfg-rail__lista::before { background: var(--line-sutil); } .cfg-rail__lista::after { background: var(--ember); transform: scaleY(var(--avance, 0)); transform-origin: top; transition: transform var(--dur-slow) var(--ease-expo); } .cfg-rail__paso { position: relative; display: flex; gap: 0.75rem; align-items: baseline; } .cfg-rail__paso::before { content: ""; position: absolute; left: -1.75rem; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .cfg-rail__paso[data-hecho]::before { background: var(--ember); border-color: var(--ember); } .cfg-rail__paso[data-activo]::before { border-color: var(--ember); background: var(--ink); } .cfg-rail__n { font-size: 0.7rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .cfg-rail__t { font-size: 0.82rem; line-height: 1.3; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .cfg-rail__paso[data-hecho] .cfg-rail__n, .cfg-rail__paso[data-hecho] .cfg-rail__t { opacity: 0.65; } .cfg-rail__paso[data-activo] .cfg-rail__n { color: var(--ember); opacity: 1; } .cfg-rail__paso[data-activo] .cfg-rail__t { color: var(--white); opacity: 1; font-weight: 500; } /* ------------------------------------------------------------------ PASO */ .cfg-form { min-width: 0; } .cfg-paso { min-width: 0; } .cfg-paso[hidden] { display: none; } .cfg-paso__n { display: block; color: var(--ember); font-size: 0.7875rem; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; margin-bottom: 1.25rem; } .cfg-paso__h { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; color: var(--white); text-wrap: balance; } .cfg-paso__intro { margin: 0 0 2.75rem; opacity: 0.65; max-width: 48ch; } /* Entrada de paso. Cumple el principio 4: el movimiento dice de dónde viene algo. Un desplazamiento corto y una sola vez; nada que retrase la lectura. */ @media (prefers-reduced-motion: no-preference) { .cfg-paso[data-entrando] { animation: cfg-entra var(--dur) var(--ease-expo) both; } } @keyframes cfg-entra { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------- CAMPOS */ .cfg-campos { display: grid; gap: 1.75rem; max-width: 34rem; } .cfg-campo { display: flex; flex-direction: column; gap: 0.5rem; } .cfg-campo__label { font-size: 0.7875rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.6; } .cfg-campo input, .cfg-campo select { font: inherit; font-size: 1.0625rem; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--line-marco); border-radius: 0; padding: 0.65rem 0 0.7rem; transition: border-color var(--dur-fast) var(--ease); } .cfg-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 0.75rem center, right 0.4rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; } .cfg-campo select option { background: var(--ink); color: var(--paper); } .cfg-campo input:hover, .cfg-campo select:hover { border-bottom-color: color-mix(in srgb, var(--paper) 45%, transparent); } .cfg-campo input:focus, .cfg-campo select:focus { outline: none; border-bottom-color: var(--ember); } .cfg-campo input::placeholder { color: color-mix(in srgb, var(--paper) 35%, transparent); } .cfg-campo__ayuda { font-size: 0.82rem; opacity: 0.6; margin: 0; } .cfg-campo[data-error] input, .cfg-campo[data-error] select { border-bottom-color: var(--ember); } .cfg-error { display: block; color: var(--ember); font-size: 0.82rem; margin-top: 0.4rem; min-height: 1em; } /* ------------------------------------------------------------- OPCIONES Tarjeta de opción. El estado activo se marca con el borde y una hairline izquierda en acento: estructura, no relleno. Van dentro de un `fieldset` real —con su `legend`— porque un grupo de radios sin agrupar se lee en el lector de pantalla como opciones sueltas sin pregunta. El reset es obligatorio: el `fieldset` trae borde y padding de serie. */ .cfg-opciones { display: grid; gap: 0.75rem; max-width: 46rem; border: 0; margin: 0; padding: 0; min-width: 0; } .cfg-opciones--dos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .cfg-opcion { position: relative; display: block; padding: 1.15rem 1.35rem 1.15rem 1.6rem; border: 1px solid var(--line-sutil); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .cfg-opcion::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--ember); transform: scaleY(0); transform-origin: center; transition: transform var(--dur-fast) var(--ease); } .cfg-opcion:hover { border-color: color-mix(in srgb, var(--paper) 35%, transparent); } /* El control se oculta a la vista, NO a la accesibilidad. `opacity: 0` lo sacaba del árbol: el lector de pantalla no encontraba los radios y la pregunta quedaba sin respuestas. Recortado a 1px sigue enfocándose, anunciándose y respondiendo al teclado. */ .cfg-opcion input, .cfg-nivel input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cfg-opcion:has(input:checked) { border-color: color-mix(in srgb, var(--paper) 40%, transparent); background: color-mix(in srgb, var(--paper) 4%, transparent); } .cfg-opcion:has(input:checked)::before { transform: scaleY(1); } .cfg-opcion:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 3px; } .cfg-opcion__t { display: block; color: var(--white); font-weight: 500; line-height: 1.3; } .cfg-opcion__d { display: block; font-size: 0.88rem; line-height: 1.45; opacity: 0.6; margin-top: 0.3rem; } /* ---------------------------------------------------------- LIBRO DE CAPAS El componente central. Filas numeradas con hairline entre ellas: la rejilla se ve, que es exactamente lo que el sistema de diseño pide. */ .cfg-capas { border-top: 1px solid var(--line-sutil); margin-bottom: 2.5rem; } .cfg-capa { border-bottom: 1px solid var(--line-sutil); padding: 1.6rem 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; align-items: start; transition: opacity var(--dur-fast) var(--ease); } /* NO SE ANIDA OPACIDAD. Esto era `opacity: 0.38` sobre la fila entera, y dentro cada texto llevaba la suya —0,4 el plazo, 0,4 la unidad, 0,6 el qué, 0,45 el botón—. Multiplicadas dejaban la capa no seleccionada en 1,29:1 de contraste y su botón «Añadir» en 1,35:1: invisibles. Y era justo el estado que hay que poder leer, porque es el que decide si la añades. Ahora el estado «fuera» lo marca el filete izquierdo, que ya es el lenguaje de la casa, y cada texto conserva su propia opacidad con suelo de 0,6. */ .cfg-capa[data-fuera] { opacity: 0.72; } .cfg-capa[data-fuera] .cfg-capa__que, .cfg-capa[data-fuera] .cfg-capa__plazo, .cfg-capa[data-fuera] .cfg-capa__unidad, .cfg-capa[data-fuera] .cfg-capa__quitar, /* La fase entra en esta lista o el 0,72 de la fila la multiplica: 0,72 × 0,5 devolvería los 2,3:1 que el suelo acaba de quitar. */ .cfg-capa[data-fuera] .cfg-capa__fase, .cfg-capa[data-fuera] .cfg-nivel { opacity: 0.85; } .cfg-capa__n { grid-row: 1 / span 2; font-size: 0.7875rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--ember); padding-top: 0.28em; transition: color var(--dur-fast) var(--ease); } .cfg-capa[data-fuera] .cfg-capa__n { color: var(--paper); } .cfg-capa__cab { min-width: 0; } .cfg-capa__nombre { margin: 0; font-size: 1.35rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--white); } .cfg-capa__fase { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; margin-left: 0.7rem; white-space: nowrap; } .cfg-capa__que { margin: 0.45rem 0 0; font-size: 0.95rem; line-height: 1.5; opacity: 0.6; max-width: 44ch; } .cfg-capa__plazo { margin: 0.55rem 0 0; font-size: 0.8rem; opacity: 0.6; } .cfg-capa__precio { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .cfg-capa__cifra { display: block; font-size: 1.2rem; font-weight: 500; color: var(--white); letter-spacing: -0.01em; } .cfg-capa__unidad { display: block; font-size: 0.72rem; opacity: 0.6; margin-top: 0.25rem; } .cfg-capa__cuerpo { grid-column: 2 / -1; } .cfg-capa__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; } /* Selector de profundidad: dos pastillas pequeñas. */ .cfg-nivel { position: relative; padding: 0.45em 1em; border: 1px solid var(--line-marco); border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; opacity: 0.6; transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .cfg-nivel:hover { opacity: 0.9; } .cfg-nivel:has(input:checked) { border-color: var(--ember); color: var(--white); opacity: 1; } .cfg-nivel:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 3px; } .cfg-capa__quitar { margin-left: auto; background: none; border: 0; padding: 0.45em 0; color: inherit; font: inherit; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.6; cursor: pointer; border-bottom: 1px solid transparent; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .cfg-capa__quitar:hover { opacity: 1; border-bottom-color: var(--ember); } .cfg-capa__fijo { margin-left: auto; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ember); opacity: 0.8; } /* Lista de entregables. Sale del catálogo real; por eso se puede enseñar. */ .cfg-capa__incluye { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .cfg-capa__incluye li { position: relative; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.45; opacity: 0.65; } .cfg-capa__incluye li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 1px; background: var(--ember); } .cfg-capa__nota { margin: 0.9rem 0 0; font-size: 0.82rem; opacity: 0.6; } .cfg-capa[data-fuera] .cfg-capa__cuerpo > *:not(.cfg-capa__mandos) { display: none; } /* ----------------------------------------------------------------- TOTAL Pegajoso abajo: la cifra tiene que estar a la vista mientras se toca el libro de capas, o el visitante configura a ciegas. */ .cfg-total { position: sticky; bottom: 0; z-index: 20; margin-top: 2rem; padding: 1.5rem 0 1.75rem; /* Opaco, no traslúcido. Con el libro de capas pasando por detrás, un fondo al 92 % dejaba leer los entregables a través de la cifra —en móvil era ilegible—. `backdrop-filter` tampoco salva eso sobre texto denso, y el sistema de diseño pide contraste real antes que efecto. */ background: var(--ink); border-top: 1px solid var(--ember); } .cfg-total__filas { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: flex-end; } .cfg-total__bloque { min-width: 0; } .cfg-total__label { display: block; margin-bottom: 0.5rem; } .cfg-total__cifra { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: var(--white); font-variant-numeric: tabular-nums; max-width: none; } .cfg-total__cifra small { font-size: 0.42em; font-weight: 400; letter-spacing: 0.02em; opacity: 0.5; margin-left: 0.35em; } /* La línea del descontable. Es el dato que más juega a favor del visitante, así que va con el acento y no enterrada en el pie a media opacidad. */ .cfg-total__neto { margin: 1rem 0 0; font-size: 0.92rem; line-height: 1.5; max-width: 60ch; opacity: 0.85; } .cfg-total__neto strong { color: var(--ember); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Color y no `opacity`: aquí dentro va el precio en un ``, y la opacidad del padre crea grupo de composición — ningún hijo puede recuperar lo que el padre ya apagó. Con `color` el precio sí puede ir a blanco pleno, como ya hace `.cfg-total__neto strong`. Era la pantalla del correo enseñando su cifra en el estilo más apagado de la hoja. */ .cfg-total__pie { margin: 1.1rem 0 0; font-size: 0.82rem; line-height: 1.5; max-width: 56ch; color: color-mix(in srgb, var(--paper) 60%, var(--ink)); } .cfg-total__pie strong { color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; } .cfg-total__vacio { margin: 0; opacity: 0.6; } /* Tachado del descuento. */ .cfg-total__antes { display: block; font-size: 0.85rem; opacity: 0.4; text-decoration: line-through; margin-bottom: 0.35rem; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------- CONSENTIMIENTOS Dos casillas separadas y ambas sin marcar. El RGPD no permite meter el marketing dentro del consentimiento necesario para dar el servicio, y el de WhatsApp necesita el suyo propio por la LSSI. */ .cfg-consents { display: grid; gap: 1rem; margin: 2.25rem 0 0; max-width: 46rem; } .cfg-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; cursor: pointer; align-items: start; } .cfg-consent input { appearance: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); background: transparent; cursor: pointer; display: grid; place-content: center; transition: border-color var(--dur-fast) var(--ease); } .cfg-consent input::after { content: ""; width: 0.55rem; height: 0.55rem; background: var(--ember); transform: scale(0); transition: transform var(--dur-fast) var(--ease); } .cfg-consent input:checked { border-color: var(--ember); } .cfg-consent input:checked::after { transform: scale(1); } .cfg-consent span { font-size: 0.9rem; line-height: 1.5; opacity: 0.75; } .cfg-consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .cfg-consent a:hover { color: var(--ember); } .cfg-consent__nota { font-size: 0.8rem; line-height: 1.55; opacity: 0.6; margin: 0.25rem 0 0; max-width: 56ch; } /* ---------------------------------------------------------------- GANCHO */ .cfg-gancho { border: 1px solid var(--line-sutil); border-left: 2px solid var(--ember); padding: 1.75rem 1.85rem; max-width: 46rem; margin-bottom: 1.75rem; } .cfg-gancho__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .cfg-gancho__t { margin: 0; font-size: 1.2rem; font-weight: 500; color: var(--white); letter-spacing: -0.015em; } .cfg-gancho__pct { font-size: 1.1rem; font-weight: 500; color: var(--ember); font-variant-numeric: tabular-nums; white-space: nowrap; } .cfg-gancho__d { margin: 0; font-size: 0.95rem; line-height: 1.55; opacity: 0.7; max-width: 52ch; } .cfg-gancho__botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .cfg-gancho__respuesta { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ember); } .cfg-honestidad { margin: 1.5rem 0 0; font-size: 0.82rem; opacity: 0.6; } /* ------------------------------------------------------------------- FIN */ .cfg-fin__resumen { border-top: 1px solid var(--line-sutil); margin: 2.5rem 0 0; padding: 0; max-width: 46rem; } .cfg-fin__fila { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-sutil); font-size: 0.95rem; } .cfg-fin__fila dt { opacity: 0.65; margin: 0; } .cfg-fin__fila dd { margin: 0; color: var(--white); text-align: right; font-variant-numeric: tabular-nums; } .cfg-fin__fila--neto dd { color: var(--ember); } /* Qué pasa ahora. El momento de máxima intención no puede terminar en «volver a la película»: quien acaba de configurar quiere saber cuándo le contestan y por dónde puede hablar hoy mismo. */ .cfg-fin__ahora { margin: 2.5rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--ember); max-width: 52rem; } .cfg-fin__pasos { counter-reset: paso; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .cfg-fin__pasos li { counter-increment: paso; position: relative; padding-left: 2.1rem; font-size: 0.95rem; line-height: 1.5; opacity: 0.8; } .cfg-fin__pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; color: var(--ember); font-size: 0.75rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; } .cfg-fin__directo { margin: 1.4rem 0 0; font-size: 0.95rem; opacity: 0.8; } .cfg-fin__directo a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .cfg-fin__directo a:hover { color: var(--ember); } .cfg-fin__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.5rem 0 0; } a.cfg-btn { text-decoration: none; } .cfg-fin__salvedad { margin: 2rem 0 0; font-size: 0.9rem; opacity: 0.65; } .cfg-fin__cierre { margin: 3.5rem 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; color: var(--white); letter-spacing: -0.02em; } /* ------------------------------------------------------------ NAVEGACIÓN */ .cfg-nav { display: flex; gap: 1rem; align-items: center; margin-top: 3rem; } .cfg-nav .cfg-btn--fantasma { order: -1; } /* `display: flex` gana al `display: none` que el navegador aplica a [hidden]: sin esta línea los botones siguen ahí después de enviar. */ .cfg-nav[hidden] { display: none; } .cfg-noscript { max-width: var(--maxw); margin-inline: auto; padding: 4rem var(--gut); } .cfg-noscript a { color: var(--ember); } /* ---------------------------------------------------------------- MÓVIL */ @media (max-width: 900px) { .cfg-portada { grid-template-columns: 1fr; align-items: start; gap: 3rem; } .cfg-flujo { grid-template-columns: 1fr; gap: 2.5rem; } /* El raíl vertical no cabe: pasa a ser una tira horizontal de puntos. Sigue enseñando la estructura, ocupando una línea. */ .cfg-rail { position: static; } .cfg-rail__lista { flex-direction: row; padding: 0; gap: 0; justify-content: space-between; } .cfg-rail__lista::before, .cfg-rail__lista::after { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 1px; } .cfg-rail__lista::after { transform: scaleX(var(--avance, 0)); transform-origin: left; } .cfg-rail__paso { flex: 1; padding-top: 1.25rem; } .cfg-rail__paso::before { left: 0; top: 0; } .cfg-rail__t { display: none; } .cfg-rail__n { opacity: 0.6; } .cfg-capa { grid-template-columns: 2rem minmax(0, 1fr); } .cfg-capa__precio { grid-column: 2; text-align: left; margin-top: 0.6rem; } .cfg-capa__cuerpo { grid-column: 2; } .cfg-total__filas { gap: 1rem 2rem; } } @media (max-width: 520px) { .cfg-capa__fase { display: block; margin: 0.35rem 0 0; } .cfg-nav { flex-direction: column-reverse; align-items: stretch; } .cfg-nav .cfg-btn { justify-content: center; } .cfg-gancho { padding: 1.4rem 1.35rem; } } @media (prefers-reduced-motion: reduce) { .cfg-rail__lista::after { transition: none; } .cfg-btn, .cfg-btn .arrow, .cfg-opcion, .cfg-opcion::before { transition: none; } } /* ---------------------------------------------------------------- IMPRESIÓN El presupuesto tiene que poder salir del navegador. Sin esto, la única forma de llevárselo era una captura de pantalla —o nada—, y el copy prometía que se lo llevaba igual. Se invierte a tinta sobre papel porque un fondo negro a sangre es lo que hace que la gente cancele la impresión. */ @media print { .cfg-hdr, .cfg-rail, .cfg-nav, .cfg-fin__acciones, .cfg-portada, .skip { display: none !important; } html, body, .cfg-body { background: #fff !important; color: #111 !important; } .cfg-flujo { display: block; padding: 0; max-width: none; } .cfg-paso { break-inside: avoid; } .cfg-paso__h, .cfg-fin__cierre, .cfg-fin__fila dd, .cfg-total__cifra { color: #000 !important; } .cfg-paso__n, .cfg-fin__pasos li::before { color: #000 !important; } .cfg-paso__intro, .cfg-fin__salvedad, .cfg-fin__pasos li, .cfg-fin__directo { opacity: 1 !important; color: #333 !important; } .cfg-fin__resumen, .cfg-fin__fila { border-color: #bbb !important; } .cfg-fin__ahora { border-left-color: #000 !important; } .cfg-fin__fila--neto dd { color: #000 !important; font-weight: 500; } .cfg-fin__directo a { color: #000 !important; } /* Un presupuesto impreso sin fecha no vale para nada, y la validez son 30 días: el papel tiene que decir desde cuándo cuentan. */ .cfg-fin::after { content: "MAKERS · info@agenciamakers.com · Validez de la propuesta: 30 días desde su emisión."; display: block; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid #bbb; font-size: 10pt; color: #555; } }