/* Wizard de agendado. Hereda tokens y primitivas de css/marca.css y los componentes de sitio de css/style.css. */ /* ---------- Armazón ---------- */ /* 7.5rem = 120px: el nav fijo mide 88 desde que el logo creció. */ .wizard-main { padding-top: 7.5rem; } /* `relative` es el ancla del ticket escondido (.ticket-oculto--rojo): tiene que ser la sección y no el form, porque el form es la tarjeta que lo tapa. */ .wizard-section { position: relative; max-width: 880px; padding-top: 1.5rem; } .wizard-section .section-head { max-width: 640px; } .wizard-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--sp-3); } .wizard-progress-bar { flex: 1; height: 4px; background: var(--negro-3); overflow: hidden; } /* **El relleno se mueve con `transform: scaleX()`, y ese es el contrato.** `js/booking.js` escribe el `scaleX` en cada paso; acá el valor inicial es 1/7, que es el paso 1 y lo que corresponde ver antes de que corra el script. No cambiar esto por `width`: hasta el 2026-08-09 el JS movía `width` mientras el CSS escalaba, las dos se multiplicaban, y la barra mostraba un 8% cuando la persona iba por el paso 4 de 7. */ .wizard-progress-fill { height: 100%; width: 100%; background: var(--amarillo); transform: scaleX(.1428); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .wizard-progress-label { font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hueso-tenue); white-space: nowrap; } .wizard-card { background: var(--negro-2); border: 3px solid var(--negro-3); border-radius: var(--radio); padding: var(--sp-4); /* Por encima del ticket escondido que asoma por debajo (ver style.css: el boleto va en capa normal y es la tarjeta la que sube). */ position: relative; z-index: 1; } .wizard-step { display: none; animation: wizard-in .32s cubic-bezier(.2,.7,.2,1); } .wizard-step.is-active { display: block; } @keyframes wizard-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .wizard-step h3 { font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo); font-size: var(--t-h3); margin-bottom: .5rem; } .wizard-step-sub { color: var(--hueso-tenue); font-size: var(--t-chico); margin-bottom: var(--sp-3); } /* ---------- Botones de opción (sí/no, parte del cuerpo) ---------- */ /* `.choice-row` y `.choice-btn` se mudaron a css/style.css el 2026-08-08: los usa /cuidados/, que NO es una página de formulario y no carga esta hoja. Con ellos acá, sus dos botones salían con el estilo nativo del navegador —caja gris de sistema sobre una página negra— y nada lo delataba salvo mirarlos. Acá solo queda la variante de sede, que sí es de este par de páginas. */ /* ---------- Grid de estilos (paso 2) ---------- */ .style-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; } .style-choice-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem 1rem; border-radius: var(--radio); border: 2px solid var(--negro-3); background: var(--negro); cursor: pointer; text-align: left; transition: border-color .2s, transform .2s; } .style-choice-card svg { width: 30px; height: 30px; } .style-choice-card span { font-family: var(--font-rotulo); font-weight: 400; font-size: var(--t-cuerpo); color: var(--hueso); } .style-choice-card:hover { border-color: var(--cian); transform: translateY(-2px); } .style-choice-card.is-selected { border-color: var(--amarillo); box-shadow: 4px 4px 0 var(--rojo); } .style-choice-card.is-selected span { color: var(--amarillo); } .style-choice-undecided { border-style: dashed; } /* ---------- Lista de artistas (paso 3) ---------- */ .artist-choice-list { display: flex; flex-direction: column; gap: .9rem; } .artist-choice-card { border: 2px solid var(--negro-3); border-radius: var(--radio); padding: 1.3rem; cursor: pointer; background: var(--negro); transition: border-color .2s, box-shadow .2s; } .artist-choice-card:hover { border-color: var(--cian); } .artist-choice-card.is-selected { border-color: var(--amarillo); box-shadow: 4px 4px 0 var(--rojo); } .artist-choice-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; cursor: pointer; } .artist-choice-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 2px solid var(--negro-3); display: grid; place-items: center; font-weight: 700; font-size: var(--t-cuerpo); color: var(--hueso-tenue); } .artist-choice-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* `flex-start` y no `center`: en móvil un nombre largo ("Max Rodríguez") pasa a dos líneas, y centrado el ícono quedaba flotando lejos del nombre. Los 4px de margen lo dejan clavado contra la primera línea — para los 22 nombres de una sola línea el resultado es idéntico a centrarlo. */ .artist-choice-name-row { display: flex; align-items: flex-start; gap: .6rem; } .artist-choice-name { font-family: var(--font-rotulo); font-weight: 400; color: var(--hueso); font-size: var(--t-h3); } /* Mismo botón circular que el roster de la portada (`.roster-ig` en style.css), un punto más chico para no competir con el nombre. */ .artist-choice-ig { width: 28px; height: 28px; margin-top: 4px; } .artist-choice-ig svg { width: 14px; height: 14px; } .artist-choice-card.is-selected .artist-choice-name { color: var(--amarillo); } .artist-choice-sede { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cian); } .artist-choice-sede svg { width: 11px; height: 11px; } .artist-choice-bio { font-size: var(--t-chico); line-height: 1.6; color: var(--hueso-tenue); margin: -.3rem 0 1rem; } .artist-carousel { display: flex; gap: .6rem; overflow-x: auto; cursor: grab; padding-bottom: .3rem; scroll-snap-type: x proximity; user-select: none; } .artist-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; } .artist-carousel::-webkit-scrollbar { height: 6px; } .artist-carousel::-webkit-scrollbar-thumb { background: var(--negro-3); } .artist-work-tile { flex: 0 0 92px; height: 92px; border-radius: var(--radio); background: var(--negro-2); border: 2px solid var(--negro-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; scroll-snap-align: start; pointer-events: none; overflow: hidden; } .artist-work-tile svg { width: 24px; height: 24px; } .artist-work-tile span { font-size: var(--t-micro); color: var(--hueso-tenue); text-align: center; padding: 0 .3rem; line-height: 1.2; } .artist-work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } /* Las fotos reales se amplían al tocarlas. El borde late en dorado y la lupa en la esquina lo anuncian: sin eso, nadie adivina que la miniatura abre algo. `pointer-events: auto` revierte el `none` de arriba, que existe para que el arrastre del carrusel no se trabe en las celdas. */ .artist-work-tile.is-clickable { position: relative; pointer-events: auto; cursor: pointer; padding: 0; animation: tile-invite 2.8s ease-in-out infinite; } .artist-work-tile.is-clickable:hover img, .artist-work-tile.is-clickable:focus-visible img { transform: scale(1.09); } .artist-work-tile.is-clickable:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; } .artist-work-lupa { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,15,14,.75); border: 2px solid var(--negro-3); color: var(--amarillo); display: grid; place-items: center; opacity: .9; transition: opacity .2s, transform .2s; } .artist-work-lupa svg { width: 11px; height: 11px; } .artist-work-tile.is-clickable:hover .artist-work-lupa, .artist-work-tile.is-clickable:focus-visible .artist-work-lupa { opacity: 1; transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .artist-work-tile.is-clickable { animation: none; border-color: var(--amarillo-sombra); } } .link-minor { display: block; margin-top: 1.1rem; background: none; border: none; padding: 0; color: var(--cian); font-family: var(--font-texto); font-size: var(--t-chico); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link-minor:hover { color: var(--cian-luz); } .link-minor.is-active-link { color: var(--amarillo); } /* ---------- Paso 4: contacto y referencias ---------- */ .wizard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .sede-readout { padding: .7rem .85rem; border-radius: var(--radio); background: var(--negro); border: 2px dashed var(--negro-3); color: var(--amarillo); font-weight: 700; font-size: var(--t-chico); } .field-hint { font-size: var(--t-micro); color: var(--hueso-tenue); margin-top: .5rem; line-height: 1.5; } /* El aviso cuando una foto no pasa: naranja, no rojo. El sistema no admite el rojo como color de texto (regla del rojo, en DESIGN.md) y el naranja ya se usa así en marca.css — da 6.7:1 sobre negro-2, de sobra para AA. El peso lo separa del `field-hint` gris que tiene al lado. `[hidden]` explícito porque esta clase declara `display`. */ .field-error { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--naranja); margin-top: .5rem; line-height: 1.5; } .field-error[hidden] { display: none; } /* "Preparando la foto…" mientras se reescala. En cian y no en naranja: es un estado, no un problema, y el cian es el color con el que este sistema dice "esto está pasando". Mismo `[hidden]` explícito por la misma razón. */ .field-estado { display: block; font-size: var(--t-micro); font-weight: 600; color: var(--cian); margin-top: .5rem; line-height: 1.5; } .field-estado[hidden] { display: none; } /* Aparece debajo de los botones sí/no del paso 5, así que necesita su propio aire: sin esto la etiqueta queda pegada al botón que la acaba de invocar. */ #coverCampo { margin-top: var(--sp-3); } .ref-previews { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; } .ref-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--radio); overflow: hidden; border: 2px solid var(--negro-3); } .ref-thumb img { width: 100%; height: 100%; object-fit: cover; } .ref-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--negro); color: var(--hueso); font-size: var(--t-micro); line-height: 1; cursor: pointer; } /* ---------- Paso 7: resumen ---------- */ .wizard-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.2rem; } .wizard-summary div { display: flex; flex-direction: column; gap: .2rem; background: var(--negro); border: 2px solid var(--negro-3); border-radius: var(--radio); padding: .75rem .9rem; } .wizard-summary dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); } .wizard-summary dd { margin: 0; color: var(--hueso); font-size: var(--t-chico); } /* ---------- Confirmación ---------- */ .wizard-confirm { text-align: center; padding: 1.25rem 0 .5rem; } .wizard-confirm-icon { width: 64px; height: 64px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--amarillo); display: grid; place-items: center; box-shadow: 4px 4px 0 var(--rojo); } .wizard-confirm-icon svg { width: 30px; height: 30px; color: var(--negro); } .wizard-confirm h3 { font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo); font-size: var(--t-h2); margin-bottom: 1rem; } .wizard-confirm p { color: var(--hueso-tenue); max-width: 46ch; margin: 0 auto var(--sp-3); } .wizard-confirm p strong { color: var(--hueso); } .wizard-confirm .btn { margin: 0 auto; } /* El aviso de las fotos tiene que leerse como instrucción: si nadie lo lee, el estudio se queda sin las imágenes y no puede cotizar. Pero **no se enmarca**. Vive dentro de `.wizard-card`, y una tarjeta dentro de otra no se hace en este sistema —lo dice la nota de `.perfo-explica` más abajo—; encima, un marco con barra de acento a un lado es el adorno que el sistema evita. Se separa con un filete arriba, el mismo recurso con el que `.perfo-higiene-titulo` abre su bloque, y el peso lo lleva el texto: la primera frase va en amarillo, que es el color de énfasis de la página. */ .wizard-confirm-fotos { border-top: 2px solid var(--negro-3); padding-top: var(--sp-3); } .wizard-confirm .wizard-confirm-fotos strong { color: var(--amarillo); } .wizard-confirm-nota { font-size: var(--t-chico); } /* **Los dos enlaces de rescate** —el de la confirmación del wizard y el de `/piercings/` (`.perfo-respaldo`)— los pinta la regla de prosa de style.css, porque los dos contenedores son párrafos. Acá hubo un parche por selector durante una hora; se fue cuando la regla se volvió automática. Vale dejar dicho por qué importan tanto: aparecen **solo cuando WhatsApp no abrió**, así que la persona ya está en el camino roto y ese enlace es la salida. Que se vean poco no los hace menos importantes: los hace más, porque nadie los ve fallar. Si alguna vez se sacan de un `

`, hay que devolverles el color a mano. */ /* El aviso de que las fotos quedan públicas. Se separa con un filete arriba, igual que el aviso de la confirmación y que `.perfo-higiene-titulo`: no se enmarca ni lleva barra de acento, porque vive dentro de `.wizard-card` y anidar tarjetas no se hace en este sistema. El peso lo llevan las dos frases en negrita, no un color de alerta: no es un error del visitante, es información que necesita antes de decidir. */ .aviso-fotos { border-top: 2px solid var(--negro-3); padding-top: var(--sp-3); gap: var(--sp-2); } .aviso-fotos[hidden] { display: none; } .aviso-fotos-texto { margin: 0; font-size: var(--t-chico); color: var(--hueso-tenue); line-height: 1.6; } .aviso-fotos-texto strong { color: var(--amarillo); } /* La casilla y su texto en una línea, alineados por arriba para que un texto de dos renglones no deje la casilla flotando en el medio. `cursor: pointer` en la etiqueta entera: el blanco de toque es la frase, no el cuadradito. */ .aviso-fotos-check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; font-size: var(--t-chico); font-weight: 400; color: var(--hueso); } .aviso-fotos-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--amarillo); } /* Un selector de archivos apagado tiene que verse apagado: si no, se toca, no pasa nada y parece que el sitio está roto. */ .field input[type="file"]:disabled { opacity: .45; cursor: not-allowed; } @media (pointer: coarse) { /* Mismo piso táctil que el resto de los controles del sitio. */ .aviso-fotos-check { min-height: 44px; align-items: center; } } /* ---------- Navegación del wizard ---------- */ /* `flex-wrap` es lo que evita que el botón de continuar se salga de la tarjeta en un teléfono: los dos botones juntos piden ~318px y a 375 de pantalla hay 291. Antes el botón se encogía hasta 58px y partía "Continuar →" en dos líneas; al meterlo en una columna dejó de poder encogerse y directamente se iba 33px afuera. Partiendo la fila, cada botón queda entero. */ .wizard-nav { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-top: var(--sp-4); } .wizard-nav .btn[hidden] { visibility: hidden; } /* El aviso cuelga del botón de continuar y crece hacia la izquierda: alineado al borde derecho, un nombre largo se estira sobre el aire que queda y nunca empuja el botón ni se sale de la tarjeta. `margin-left: auto` lo manda a la derecha tanto en una fila como cuando la fila se parte. */ .wizard-nav-avance { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; margin-left: auto; min-width: 0; } .wizard-elegido { margin: 0; text-align: right; font-size: var(--t-micro); letter-spacing: .06em; color: var(--hueso-tenue); } .wizard-elegido strong { color: var(--amarillo); font-weight: 700; } .wizard-elegido[hidden] { display: none; } @media (max-width: 720px) { /* La bio se recorta a 4 líneas: en un teléfono una bio larga empujaba las fotos fuera de vista y obligaba a scrollear medio formulario para pasar de un artista al siguiente. `-webkit-box` es lo que habilita `line-clamp`, y el propio clamp pone los puntos suspensivos que avisan que hay más. Se abre al elegir al artista, no con un botón aparte: quien lo selecciona es justo quien quiere leerlo entero, y como solo puede haber una tarjeta seleccionada, nunca hay dos bios largas abiertas a la vez. Volver a `display: block` desactiva el clamp sin pelearle. */ .artist-choice-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .artist-choice-card.is-selected .artist-choice-bio { display: block; } .wizard-card { padding: 1.4rem; } .wizard-grid { grid-template-columns: 1fr; } .wizard-summary { grid-template-columns: 1fr; } } /* Debajo de ~403px los dos botones ("← Atrás" 129 + "Continuar →" 173 + 1rem de separación) ya no caben en los ~291 que da la tarjeta, y el `flex-wrap` los partía en dos filas. Dejando solo la flecha el par baja a ~241 y vuelve a entrar en una sola línea. El corte va en 560 y no en 403 para no cambiarle la forma al botón a mitad del rango de teléfonos: una flecha sola es un patrón normal de móvil a cualquier ancho. */ @media (max-width: 560px) { .wizard-back-palabra { display: none; } #wizardBack { padding-inline: 1.1rem; } } /* ========================================================================== Perforaciones (perforaciones.html) ========================================================================== Comparte con el wizard la tarjeta, los botones de opción y los campos. Lo que cambia es la forma: acá son tres preguntas, no siete pasos, así que van todas juntas en una sola tarjeta. Un wizard para tres respuestas serían tres pantallas de una línea cada una. Y termina en WhatsApp, no en un backend: por eso el botón de envío lleva el ícono del canal y no un "Continuar →". */ .perfo-section { max-width: 1040px; } /* El panel de precios va al lado y no debajo: la pregunta "¿cuánto sale?" llega antes que "¿dónde me lo hago?", y tenerlo a la vista mientras se llena el formulario evita el viaje de ida y vuelta. Apilado en pantallas angostas, con los precios primero por la misma razón. */ .perfo-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; } .perfo-form { display: flex; flex-direction: column; gap: var(--sp-4); } /* La letra chica de menores, al pie del formulario. Se separa con el filete del sistema —el mismo recurso de `.perfo-higiene-titulo` y del aviso de privacidad— y no con una caja: encajonarla dentro de la tarjeta sería anidar tarjetas, que este sistema no hace. El margen negativo se come el `gap` de la columna, que está calibrado para separar preguntas y acá deja demasiado aire entre el botón de envío y su propia nota al pie. */ .perfo-menores { margin: calc(var(--sp-4) * -1 + var(--sp-3)) 0 0; padding-top: var(--sp-3); border-top: 2px solid var(--negro-3); font-size: var(--t-chico); line-height: 1.6; color: var(--hueso-tenue); } .perfo-menores strong { color: var(--hueso); font-weight: 700; } /* `fieldset` sin borde ni padding: se usa por lo que significa —un grupo de opciones con su rótulo— y no por su marco, que es de otra época. */ .perfo-campo { border: none; padding: 0; margin: 0; min-width: 0; } .perfo-campo legend { font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo); font-size: var(--t-h3); margin-bottom: .9rem; padding: 0; } /* Una pregunta del formulario escrita como

` y no en el botón**, porque `tile-invite` anima `border-color` y el borde lo lleva el figure. En el wizard los dos son el mismo elemento y por eso allá no se nota la diferencia. El figure nace `hidden` cuando no hay foto, así que la animación no corre sobre una caja vacía y no hace falta condicionarla. */ .perfo-explica-foto { animation: tile-invite 2.8s ease-in-out infinite; } .perfo-explica-lente { display: block; position: relative; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; } .perfo-explica-lente img { transition: transform .35s; } .perfo-explica-lente:hover img, .perfo-explica-lente:focus-visible img { transform: scale(1.09); } .perfo-explica-lente:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; } .perfo-explica-lupa { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(15,15,14,.75); border: 2px solid var(--negro-3); color: var(--amarillo); display: grid; place-items: center; opacity: .9; transition: opacity .2s, transform .2s; } .perfo-explica-lupa svg { width: 10px; height: 10px; } .perfo-explica-lente:hover .perfo-explica-lupa, .perfo-explica-lente:focus-visible .perfo-explica-lupa { opacity: 1; transform: scale(1.12); } /* Mismo trato que la celda del wizard: sin latido, el borde se queda en el dorado apagado —la señal de que se puede tocar no desaparece, solo deja de moverse—. Va acá y no en el bloque de reduced motion de style.css porque esta hoja es la que define el componente. */ @media (prefers-reduced-motion: reduce) { .perfo-explica-foto { animation: none; border-color: var(--amarillo-sombra); } } /* En el teléfono la nota se apila: el texto arriba a todo lo ancho y la foto debajo. Al lado, la miniatura le deja al texto 146px de columna —unos 24 caracteres—, y la descripción del surface caía en **siete renglones** con una cola de 72px colgando por debajo de la foto: una cinta de texto angosta al lado de un cuadrito. Apilado, el mismo texto entra en tres renglones sobre los ~284px de la tarjeta. La foto queda del mismo tamaño y no crece a todo el ancho: sigue siendo un ejemplo al que se le da un vistazo, y a 284px de lado competiría con la pregunta. El orden no se toca —primero qué es, después cómo se ve—, así que el DOM ya está en el orden correcto y basta con cambiar la dirección. */ @media (max-width: 560px) { .perfo-explica { flex-direction: column; gap: var(--sp-2); } } /* Heredia en cian, Los Yoses en amarillo: el mismo par invertido que ya usan las pestañas de sede, los chips del roster y los paneles de "Dónde estamos". Tres clases le ganan a `.is-selected` sin depender del orden del archivo. */ .choice-btn.is-cian.is-selected { background: var(--cian); border-color: var(--cian); color: var(--negro); box-shadow: 4px 4px 0 var(--cian-oscuro); } .perfo-envio { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; } .perfo-envio .btn svg { flex-shrink: 0; } .perfo-envio .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: 4px 4px 0 var(--rojo-oscuro); } .perfo-envio .field-hint { margin-top: 0; } .perfo-respaldo { font-size: var(--t-chico); color: var(--hueso-tenue); } .perfo-respaldo[hidden] { display: none; } /* El panel de precios: superficie elevada con el borde del sistema, sin sombra dura —no es un objeto que se levante, es una nota al margen—. */ .perfo-precios { background: var(--negro-2); border: 3px solid var(--negro-3); border-radius: var(--radio); padding: var(--sp-3); } .perfo-precios h3 { font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo); font-size: var(--t-h3); margin-bottom: var(--sp-2); } .perfo-tarifa { display: flex; flex-direction: column; gap: .7rem; margin: 0; } .perfo-tarifa > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-bottom: .7rem; border-bottom: 2px solid var(--negro-3); } .perfo-tarifa > div:last-child { border-bottom: none; padding-bottom: 0; } .perfo-tarifa dt { font-size: var(--t-chico); color: var(--hueso); } .perfo-tarifa dd { margin: 0; font-size: var(--t-micro); color: var(--hueso-tenue); text-align: right; white-space: nowrap; } /* El número es lo que se busca de un vistazo, así que es lo único que sube de peso y de color; el "desde" y el "c/u" quedan en el registro de apoyo. En línea y no en bloque: con `display: block` el "desde" y el "c/u" se iban cada uno a su renglón y una cifra quedaba en tres líneas. */ .perfo-tarifa dd strong { font-size: var(--t-cuerpo); color: var(--amarillo); font-weight: 700; } .perfo-notas { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; } .perfo-notas li { position: relative; padding-left: 1.1rem; font-size: var(--t-chico); color: var(--hueso-tenue); line-height: 1.55; } .perfo-notas li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--cian); border-radius: 50%; } .perfo-notas strong { color: var(--hueso); font-weight: 700; } /* Higiene, dentro del mismo panel que el precio y separada por la línea del sistema. Es un segundo tema, no una nota más de la lista de arriba, así que lleva su propio título — pero más chico que "Precios", que es el título del panel: el rótulo grande se usa una vez por superficie. */ .perfo-higiene-titulo { font-family: var(--font-rotulo); font-weight: 400; color: var(--amarillo); font-size: var(--t-cuerpo); margin: var(--sp-3) 0 .7rem; padding-top: var(--sp-3); border-top: 2px solid var(--negro-3); } .perfo-higiene { margin: 0; font-size: var(--t-chico); color: var(--hueso-tenue); line-height: 1.55; } .perfo-higiene strong { color: var(--hueso); font-weight: 700; } @media (max-width: 860px) { /* `order` y no reordenar el HTML: en el DOM el formulario va primero porque es a lo que se vino, y eso es lo que lee un lector de pantalla. Visualmente los precios suben, que es el orden en que se leen apilados. */ /* `minmax(0, 1fr)` y no `1fr`: el mínimo automático de una pista es el min-content de lo que lleva dentro, y con las tarjetas de las perforadoras eso pasó a ser el carrusel de fotos —tres celdas de 92px, 295 en total—. La columna crecía a 392 dentro de una ventana de 386 y **la página entera desbordaba a lo ancho**. Es la misma trampa que ya se pagó abajo con el `nowrap` del botón de envío; el cero deja que el carrusel haga lo que fue diseñado para hacer, que es rodar adentro de la tarjeta. */ .perfo-layout { grid-template-columns: minmax(0, 1fr); } .perfo-precios { order: -1; } /* El botón a lo ancho, y con la etiqueta autorizada a partirse. `.btn` de css/style.css trae `white-space: nowrap`, que es lo correcto para un botón que se dimensiona solo — pero acá lo volvía irreducible: su mínimo era 320px y, como el mínimo automático de una pista de grid es el min-content de su contenido, la columna crecía a 371 dentro de un contenedor de 335 y la página entera desbordaba 36px a lo ancho. Soltar el nowrap baja ese mínimo a 199. */ .perfo-envio { align-items: stretch; } .perfo-envio .btn { width: 100%; justify-content: center; white-space: normal; } }