/* ═══════════════════════════════════════════════════════════════
lb-grupo.css — LetsBoxIt · sistema de diseño del GRUPO
(portada / y web de Mudanzas). Decisión de Gon («mezcla», oct-2026):
el lienzo limpio del kit (Inter, titulares grandes y apretados,
píldoras, tarjetas de 24 px, sin degradados ni sombras) con el
TURQUESA de la web de siempre como acento y el logo del globo en
la caja. SIN Bruno: los ositos son solo de la web de Students.
Uso (orden obligatorio: este fichero va DESPUÉS de lb-marca.css):
…
(los pinta assets/lb-grupo.js)
Los componentes del kit (.lb-hero, .lb-seccion, .lb-pasos, .lb-faq,
.lb-precio, .lb-resenas, .lb-cifras, .lb-campo, .lb-btn…) siguen
valiendo: aquí solo se remapea el acento y se añade lo que falta,
con prefijo propio .lbg-* para no chocar con .lb-*.
Color (todos los pares medidos con la fórmula WCAG 2.x):
--lb-turquesa #1BA2A0 relleno de marca. Solo gráfico (logo, punto de la
insignia, interruptor encendido, casilla marcada,
borde de la opción elegida). NUNCA texto:
sobre blanco 3,12:1 (>= 3:1 vale para gráficos y
controles, no para letras); sobre #F5F5F7 2,87:1.
--lb-turquesa-hover #178B89 el mismo relleno al pasar el ratón (4,13:1 sobre blanco).
--lb-turquesa-texto #0E5F5E texto y líneas finas en turquesa: .lb-destacado,
anillo de foco, insignia «Pronto».
Sobre blanco 7,45:1 · #F5F5F7 6,85:1 · #E8F6F6 6,72:1.
--lb-turquesa-suave #E8F6F6 fondo suave (insignia «Pronto», opción elegida,
aviso de éxito). Tinta encima 15,18:1; gris 4,57:1.
Botón principal: TINTA con texto blanco (16,83:1; hover #464647 → 9,43:1),
como el kit. Blanco sobre turquesa (3,12:1) y tinta o blanco sobre el hover
(4,08 / 4,13:1) NO pasan AA para texto: por eso no hay botones turquesa con letras.
Marca de la casilla y bola del interruptor: blanco sobre turquesa 3,12:1 (gráfico, AA).
Otros pares usados: tinta / #F5F5F7 15,46 · tinta / #E8E8ED 13,78 ·
tinta / #FCEEEE 14,91 · gris #6E6E73 / blanco 5,07 · gris / #F5F5F7 4,66 ·
error #B3261E / blanco 6,54 · / #F5F5F7 6,00 · / #FCEEEE 5,79.
(Gris sobre #E8E8ED da 4,15: no se pone texto gris sobre el gris medio.)
Acento escaso (regla Apple del kit): el turquesa sale en el logo, en UNA palabra
del titular (.lb-destacado), en la insignia del único aviso (.lb-insignia),
en el anillo de foco, en la insignia «Pronto» y en el estado «elegido» de los
controles de formulario. Números, precios, enlaces, iconos y etiquetas: tinta o gris.
Reglas del kit que se cumplen: sin degradados; sin sombras salvo el anillo de
:focus-visible; todo color sale de tokens (los hex nuevos viven SOLO en el
bloque :root de abajo); tarjetas a 24 px y botones en píldora; todo movimiento
se anula con prefers-reduced-motion; objetivos táctiles de 44 px; sin scroll
horizontal a 360 px.
═══════════════════════════════════════════════════════════════ */
/* ── Tokens del grupo (únicos hex nuevos del fichero) ─────────── */
:root {
--lb-turquesa: #1BA2A0;
--lb-turquesa-hover: #178B89;
--lb-turquesa-texto: #0E5F5E;
--lb-turquesa-suave: #E8F6F6;
--lbg-gris-medio: #E8E8ED; /* hover de los botones y pistas grises */
--lbg-error-suave: #FCEEEE; /* fondo del aviso de error */
/* Pista de los controles (segmentado, contador): gris sobre blanco y al revés */
--lbg-pista: var(--lb-gris-claro);
--lbg-pista-btn: var(--lb-blanco);
}
/* El grupo deja la tinta del kit y usa el turquesa como acento */
[data-nicho="grupo"] {
--lb-acento: var(--lb-turquesa);
--lb-acento-texto: var(--lb-turquesa-texto);
--lb-acento-hover: var(--lb-turquesa-hover);
}
/* Botón principal: en tinta con texto blanco, como el kit (el turquesa no aguanta letras) */
[data-nicho="grupo"] .lb-btn--principal {
background: var(--lb-tinta);
color: var(--lb-blanco);
--lb-btn-hover: var(--lb-tinta);
}
@supports (color: color-mix(in srgb, red, blue)) {
[data-nicho="grupo"] .lb-btn--principal { --lb-btn-hover: color-mix(in srgb, var(--lb-tinta) 82%, var(--lb-blanco)); }
}
@media (hover: hover) {
[data-nicho="grupo"] .lb-btn--principal:hover { background: var(--lb-btn-hover); }
}
/* ── Caja ─────────────────────────────────────────────────────── */
.lbg-cab, .lbg-cab *, .lbg-cab *::before, .lbg-cab *::after,
.lbg-pie, .lbg-pie *, .lbg-pie *::before, .lbg-pie *::after,
.lbg-puertas, .lbg-puerta, .lbg-puerta *, .lbg-puerta *::before, .lbg-puerta *::after,
.lbg-confianza, .lbg-confianza *,
.lbg-tarjeta, .lbg-aviso, .lbg-aviso::before,
.lbg-grupo, .lbg-grupo *, .lbg-grupo *::before, .lbg-grupo *::after,
.lbg-segmentado, .lbg-segmentado *, .lbg-contador, .lbg-contador *, .lbg-contador *::before, .lbg-contador *::after,
.lbg-interruptor, .lbg-interruptor *, .lbg-interruptor *::before,
.lbg-check, .lbg-check *, .lbg-check *::before,
.lbg-opciones, .lbg-opcion, .lbg-opcion *, .lbg-opcion *::before,
.lbg-soltar, .lbg-soltar *, .lbg-soltar *::before, .lbg-soltar *::after,
.lbg-contenedor, .lbg-rejilla, .lbg-campos, .lbg-saltar {
box-sizing: border-box;
}
/* ═══ Botones extra (se suman a .lb-btn del kit) ════════════════════
Escríbenos gris claro, sin borde
… 44 px de alto (cabeceras, tarjetas)
icono de 20 px delante del texto */
.lbg-btn--suave {
background: var(--lbg-pista);
color: var(--lb-tinta);
}
@media (hover: hover) {
.lbg-btn--suave:hover { background: var(--lbg-gris-medio); }
}
.lbg-btn--compacto { min-height: 44px; padding: 0 20px; font-size: 15px; }
.lbg-btn__icono {
display: block;
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lbg-btn--ancho { width: 100%; }
/* ═══ Saltar al contenido ═════════════════════════════════════════
Saltar al contenido (primer hijo del body) */
.lbg-saltar {
position: absolute;
left: 16px;
top: -80px;
z-index: 100;
padding: 12px 22px;
border-radius: var(--lb-r-pildora);
background: var(--lb-tinta);
color: var(--lb-blanco);
font-family: var(--lb-fuente);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: top .3s var(--lb-ease);
}
.lbg-saltar:focus {
top: 12px;
outline: 2px solid transparent;
box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
/* ═══ Logo: el globo en la caja + «LetsBoxIt» en Inter 700 ═════════
Lo pinta lb-grupo.js (SVG en línea, trazo = currentColor → turquesa).
Sin JS: LetsBoxIt Pronto (texto #0E5F5E sobre #E8F6F6 = 6,72:1)
Para lo que aún no se puede contratar (hoy: Valet y guardamuebles).
No confundir con .lb-insignia del kit (el único aviso de la página). */
.lbg-pronto {
display: inline-flex;
flex: none;
align-items: center;
min-height: 22px;
padding: 0 9px;
border-radius: var(--lb-r-pildora);
background: var(--lb-turquesa-suave);
color: var(--lb-turquesa-texto);
font-family: var(--lb-fuente);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
/* ═══ Cabecera del grupo (la pinta lb-grupo.js en [data-lbg-cab]) ═══
Estructura: .lbg-cab > .lbg-cab__in > .lbg-logo + .lbg-cab__panel (nav .lbg-cab__menu
+ .lbg-cab__acciones, solo en el panel móvil) + .lbg-cab__wa + .lbg-cab__cta + .lbg-cab__burger
> 1100 px: todo en una fila (WhatsApp con texto) · 961-1100: WhatsApp solo icono ·
≤ 960 px: logo, botón principal y «Menú»; el menú abre un panel a pantalla completa.
El contenedor reserva el alto (sin saltos al pintar) y es el que se pega arriba. */
[data-lbg-cab] {
position: sticky;
top: 0;
z-index: 50;
min-height: 65px;
}
[data-lbg-cab][data-lbg-listo] { min-height: 0; }
.lbg-cab {
position: relative;
background: var(--lb-blanco);
border-bottom: 1px solid var(--lb-linea);
color: var(--lb-tinta);
font-family: var(--lb-fuente);
transition: border-color .3s var(--lb-ease);
}
/* Arriba del todo sin línea; aparece al desplazarse (la clase la pone lb-grupo.js) */
[data-lbg-listo] > .lbg-cab { border-bottom-color: transparent; }
[data-lbg-listo].es-desplazada > .lbg-cab { border-bottom-color: var(--lb-linea); }
/* Cristal esmerilado (no es sombra ni degradado) donde el navegador lo soporta */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (color: color-mix(in srgb, red, blue)) {
.lbg-cab {
background: color-mix(in srgb, var(--lb-blanco) 84%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
}
}
.lbg-cab__in {
display: flex;
align-items: center;
gap: 0 20px;
max-width: calc(var(--lb-maxw) + 2 * var(--lb-gutter));
min-height: 64px;
margin: 0 auto;
padding: 10px var(--lb-gutter);
}
.lbg-cab__panel { display: contents; }
.lbg-cab__menu {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: 4px;
}
.lbg-cab__menu a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 0 12px;
border-radius: var(--lb-r-pildora);
color: var(--lb-gris);
font-size: 15px;
font-weight: 500;
letter-spacing: -.01em;
text-decoration: none;
white-space: nowrap;
transition: color .3s var(--lb-ease), background-color .3s var(--lb-ease);
}
@media (hover: hover) {
.lbg-cab__menu a:hover { background: var(--lb-gris-claro); color: var(--lb-tinta); }
}
.lbg-cab__menu a[aria-current] { color: var(--lb-tinta); font-weight: 600; }
.lbg-cab__menu a:focus-visible,
.lbg-cab__burger:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lbg-cab__acciones { display: none; } /* solo existe dentro del panel móvil */
.lbg-cab__wa { flex: none; margin-left: auto; }
.lbg-cab__cta { flex: none; }
.lbg-cab__burger { display: none; }
/* Entre 961 y 1100 px: WhatsApp se queda en un botón redondo con su icono */
@media (max-width: 1100px) {
.lbg-cab__in { gap: 0 16px; }
.lbg-cab__wa { width: 44px; padding: 0; }
.lbg-cab__wa-texto {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
}
/* Tableta y móvil (≤ 960 px): una fila con logo, botón principal y «Menú» */
@media (max-width: 960px) {
[data-lbg-cab] { min-height: 57px; }
.lbg-cab__in { gap: 0 10px; min-height: 56px; padding: 6px 16px; }
.lbg-logo { --lbg-logo-alto: 32px; gap: 8px; }
.lbg-logo__nombre { font-size: 19px; }
.lbg-cab__wa { display: none; } /* WhatsApp pasa al panel */
.lbg-cab__cta { margin-left: auto; padding: 0 16px; }
/* Sin JavaScript el menú no está en un panel: va debajo, en una fila que se desliza */
.lbg-cab__in { flex-wrap: wrap; }
.lbg-cab__in > .lbg-cab__menu { order: 3; flex: 1 1 100%; justify-content: flex-start; margin: 0 -12px; overflow-x: auto; }
/* Botón «Menú»: dos líneas finas que se convierten en × */
.lbg-cab__burger {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 -10px 0 0;
padding: 0;
border: 0;
border-radius: var(--lb-r-pildora);
background: none;
color: var(--lb-tinta);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.lbg-cab__burger-lineas { position: relative; display: block; width: 20px; height: 12px; }
.lbg-cab__burger-lineas::before, .lbg-cab__burger-lineas::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
border-radius: 1px;
background: currentColor;
transition: top .4s var(--lb-ease), transform .4s var(--lb-ease);
}
.lbg-cab__burger-lineas::before { top: 2.5px; }
.lbg-cab__burger-lineas::after { top: 8px; }
.lbg-cab__burger[aria-expanded="true"] .lbg-cab__burger-lineas::before { top: 5.25px; transform: rotate(45deg); }
.lbg-cab__burger[aria-expanded="true"] .lbg-cab__burger-lineas::after { top: 5.25px; transform: rotate(-45deg); }
/* Panel: a pantalla completa bajo la cabecera, fondo blanco opaco */
.lbg-cab__panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100vh - 100%);
height: calc(100dvh - 100%);
display: flex;
flex-direction: column;
padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--lb-blanco);
opacity: 0;
visibility: hidden; /* cerrado: fuera también para el teclado y los lectores de pantalla */
pointer-events: none;
transition: opacity .3s var(--lb-ease), visibility 0s linear .3s;
}
.lbg-cab-abierto .lbg-cab__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .3s var(--lb-ease), visibility 0s;
}
.lbg-cab__panel .lbg-cab__menu { flex: none; flex-direction: column; align-items: stretch; gap: 0; }
.lbg-cab__panel .lbg-cab__menu a {
justify-content: space-between;
min-height: 64px;
padding: 0;
border-bottom: 1px solid var(--lb-linea);
border-radius: 0;
color: var(--lb-tinta);
font-size: clamp(24px, 7vw, 30px);
font-weight: 600;
letter-spacing: -.035em;
opacity: 0;
transform: translateY(14px);
transition: opacity .35s var(--lb-ease), transform .55s var(--lb-ease), color .3s var(--lb-ease);
}
.lbg-cab__panel .lbg-cab__menu a:hover { background: none; }
.lbg-cab__panel .lbg-cab__menu a { gap: 12px; padding: 10px 0; white-space: normal; line-height: 1.15; }
.lbg-cab__panel .lbg-cab__menu a:focus-visible { border-radius: 8px; }
.lbg-cab__panel .lbg-cab__menu a .lbg-pronto { font-size: 13px; min-height: 26px; padding: 0 11px; letter-spacing: 0; }
.lbg-cab-abierto .lbg-cab__panel .lbg-cab__menu a {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 70ms + 60ms);
}
.lbg-cab__panel .lbg-cab__menu a:nth-child(2) { --i: 1; }
.lbg-cab__panel .lbg-cab__menu a:nth-child(3) { --i: 2; }
.lbg-cab__panel .lbg-cab__menu a:nth-child(4) { --i: 3; }
/* Acciones al pie del panel: botón principal y WhatsApp, a lo ancho */
.lbg-cab__panel .lbg-cab__acciones {
display: grid;
gap: 12px;
margin-top: auto;
padding-top: 32px;
opacity: 0;
transition: opacity .35s var(--lb-ease);
}
.lbg-cab-abierto .lbg-cab__panel .lbg-cab__acciones { opacity: 1; transition-delay: 320ms; }
.lbg-cab__acciones .lb-btn { width: 100%; min-height: 52px; }
/* Abierto: la cabecera se fija arriba (el hueco lo guarda min-height, que pone el JS) y la página no se desplaza */
[data-lbg-cab].lbg-cab-abierto > .lbg-cab { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--lb-blanco); border-bottom-color: var(--lb-linea); }
html.lbg-menu-abierto, html.lbg-menu-abierto body { overflow: hidden; }
}
/* Móvil: la cabecera no se queda pegada (como el kit), salvo con el menú abierto */
@media (max-width: 720px) {
[data-lbg-cab] { position: static; }
}
/* Móvil estrecho: logo y botón principal más compactos para que quepan con «Menú» */
@media (max-width: 400px) {
.lbg-logo { --lbg-logo-alto: 30px; gap: 7px; }
.lbg-logo__nombre { font-size: 18px; }
.lbg-cab__cta { padding: 0 14px; font-size: 14px; }
}
/* Por debajo de 360 px el botón principal vive solo en el panel */
@media (max-width: 359px) {
.lbg-cab__in > .lbg-cab__cta { display: none; }
.lbg-cab__burger { margin-left: auto; }
}
/* ═══ Pie del grupo (lo pinta lb-grupo.js en [data-lbg-pie]) ═══════
Logo y contacto · Servicios · Empresa · Legal, y la línea final con el titular. */
.lbg-pie {
padding: clamp(48px, 7vw, 80px) var(--lb-gutter) 32px;
background: var(--lb-gris-claro);
color: var(--lb-tinta);
font-family: var(--lb-fuente);
--lbg-pista: var(--lb-blanco);
}
.lbg-pie__in {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: 40px 32px;
max-width: var(--lb-maxw);
margin: 0 auto;
}
.lbg-pie__marca .lbg-logo { margin-bottom: 20px; }
.lbg-pie__titulo {
margin: 0 0 12px;
color: var(--lb-gris);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.lbg-pie__lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lbg-pie__lista a, .lbg-pie__boton {
flex-wrap: wrap;
row-gap: 2px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
color: var(--lb-tinta);
font-family: var(--lb-fuente);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.lbg-pie__boton { color: var(--lb-gris); font-weight: 400; }
@media (hover: hover) {
.lbg-pie__lista a:hover, .lbg-pie__boton:hover { color: var(--lb-tinta); text-decoration: underline; text-underline-offset: 3px; }
}
.lbg-pie__lista a:focus-visible, .lbg-pie__boton:focus-visible, .lbg-pie .lbg-logo:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto);
}
.lbg-pie__contacto a { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.lbg-pie__contacto .lbg-btn__icono { width: 18px; height: 18px; color: var(--lb-gris); }
.lbg-pie__dato { color: var(--lb-gris); font-weight: 500; }
.lbg-pie__base {
max-width: var(--lb-maxw);
margin: 48px auto 0;
padding-top: 24px;
border-top: 1px solid var(--lb-linea);
}
.lbg-pie__copy { margin: 0; color: var(--lb-gris); font-size: 13px; line-height: 1.55; }
@media (max-width: 900px) {
.lbg-pie__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbg-pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.lbg-pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.lbg-pie__lista a, .lbg-pie__boton { min-height: 44px; } /* objetivo táctil */
}
/* ═══ Tarjetas-puerta (una por servicio) ═══════════════════════════
(opcional)
(opcional; con lb-iconos.js)
Una frase.
Ver Students
… Pronto …
(sin .lbg-puerta__enlace: la tarjeta no es un enlace; dentro, un .lb-enlace-flecha normal)
Toda la tarjeta es clicable (el enlace del título se estira con ::after). Cualquier otro
enlace o botón dentro necesita .lbg-puerta__encima para quedar por encima. */
.lbg-puertas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.lbg-puerta {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: var(--lb-r-tarjeta);
background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
color: var(--lb-tinta);
font-family: var(--lb-fuente);
transition: transform .5s var(--lb-ease);
}
.lbg-puerta__media {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--lb-r-tarjeta) var(--lb-r-tarjeta) 0 0;
background: var(--lbg-gris-medio);
}
.lbg-puerta__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s var(--lb-ease);
}
.lbg-puerta__cuerpo {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 28px 28px 26px;
}
.lbg-puerta__icono { --lb-icono-tam: 40px; margin-bottom: 6px; }
.lbg-puerta__titulo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0;
font-size: clamp(24px, 2.4vw, 30px);
font-weight: 700;
letter-spacing: -.035em;
line-height: 1.1;
}
.lbg-puerta__enlace { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.lbg-puerta__enlace::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--lb-r-tarjeta);
}
.lbg-puerta__enlace:focus-visible { outline: none; }
.lbg-puerta__enlace:focus-visible::after { box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto); }
.lbg-puerta__texto { margin: 0; color: var(--lb-gris); font-size: var(--lb-t-cuerpo); line-height: 1.5; text-wrap: pretty; }
.lbg-puerta__accion {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 14px;
color: var(--lb-tinta);
font-size: 17px;
font-weight: 600;
letter-spacing: -.01em;
}
.lbg-puerta__accion .lb-enlace-flecha__icono { transition: transform .35s var(--lb-ease); }
.lbg-puerta__encima { position: relative; z-index: 2; }
.lbg-puerta--pronto .lbg-puerta__cuerpo > .lb-enlace-flecha { min-height: 44px; margin: auto 0 -9px -4px; } /* el texto queda a la altura de .lbg-puerta__accion */
@media (hover: hover) {
.lbg-puerta:has(.lbg-puerta__enlace):hover { transform: translateY(-4px); }
.lbg-puerta:hover .lbg-puerta__media img { transform: scale(1.035); }
.lbg-puerta:hover .lbg-puerta__accion .lb-enlace-flecha__icono { transform: translateX(4px); }
}
.lbg-puerta:active:has(.lbg-puerta__enlace) { transform: scale(.985); }
/* ═══ Franja de confianza ═════════════════════════════════════════
Garantías en una línea cada una (sin cifras: las cifras van en .lb-cifras del
kit y SOLO si figuran como Público en brand/GRUPO.md).
Precio cerrado
Una frase.
(máximo 4; iconos en tinta) */
.lbg-confianza {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 28px 32px;
margin: 0;
padding: 32px 0;
border-top: 1px solid var(--lb-linea);
border-bottom: 1px solid var(--lb-linea);
list-style: none;
font-family: var(--lb-fuente);
}
.lbg-confianza__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start; gap: 4px 14px; }
.lbg-confianza__icono { grid-row: span 2; --lb-icono-tam: 32px; width: 32px; height: 32px; }
.lbg-confianza__titulo { margin: 0; color: var(--lb-tinta); font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.lbg-confianza__texto { margin: 0; color: var(--lb-gris); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
/* ═══ Tarjeta y aviso ═════════════════════════════════════════════
…
gris en sección blanca, blanca en sección gris
El punto es decoración: el texto dice si es un error («No hemos podido…»). */
.lbg-tarjeta {
--lbg-pista: var(--lb-blanco);
--lbg-pista-btn: var(--lb-gris-claro);
padding: clamp(24px, 4vw, 40px);
border-radius: var(--lb-r-tarjeta);
background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
color: var(--lb-tinta);
font-family: var(--lb-fuente);
}
.lbg-tarjeta--blanca, .lb-seccion--gris .lbg-tarjeta {
--lbg-pista: var(--lb-gris-claro);
--lbg-pista-btn: var(--lb-blanco);
}
.lbg-tarjeta--blanca { background: var(--lb-blanco); border: 1px solid var(--lb-linea); }
.lb-seccion--gris { --lbg-pista: var(--lb-blanco); --lbg-pista-btn: var(--lb-gris-claro); }
.lbg-aviso {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
border-radius: 16px;
background: var(--lb-gris-claro);
color: var(--lb-tinta);
font-family: var(--lb-fuente);
font-size: 15px;
line-height: 1.5;
}
.lb-seccion--gris .lbg-aviso:not(.lbg-aviso--exito):not(.lbg-aviso--error) { background: var(--lb-blanco); }
.lbg-aviso::before {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-top: .55em;
border-radius: 50%;
background: var(--lb-gris);
}
.lbg-aviso p { margin: 0; }
.lbg-aviso__titulo { font-weight: 650; }
.lbg-aviso--exito { background: var(--lb-turquesa-suave); }
.lbg-aviso--exito::before { background: var(--lb-turquesa); }
.lbg-aviso--error { background: var(--lbg-error-suave); }
.lbg-aviso--error::before { background: var(--lb-error); }
/* ═══ Formularios ══════════════════════════════════════════════════
Campos de texto, correo, teléfono, fecha y desplegables: los del kit (.lb-campo).
Aquí se añade el estado deshabilitado, filas de campos y los controles que el kit
no tiene. Estado de error: aria-invalid="true" en el control, o .es-error en el
.lbg-grupo, y SIEMPRE un mensaje en .lb-campo__error enlazado con aria-describedby.
Los controles marcados usan el turquesa como relleno; colócalos sobre blanco o
sobre una .lbg-tarjeta (sobre #F5F5F7 el relleno baja de 3:1; la marca blanca no).
Fila de campos que se reparten el ancho:
*/
.lbg-campos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 0 16px;
}
.lb-campo__control:disabled, .lb-campo input:disabled, .lb-campo select:disabled, .lb-campo textarea:disabled {
opacity: .5;
cursor: not-allowed;
}
.lb-campo__control:disabled:hover, .lb-campo input:disabled:hover, .lb-campo select:disabled:hover, .lb-campo textarea:disabled:hover {
border-color: var(--lb-gris);
}
.lb-campo:has(:disabled) .lb-campo__etiqueta { color: var(--lb-gris); }
/* ── Grupo de controles (fieldset + legend) ─────────────────────
¿Hay ascensor?
Opcional.
…control…
Elige una opción.
*/
.lbg-grupo { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; font-family: var(--lb-fuente); }
.lbg-grupo__leyenda {
float: left; /* así el margen inferior funciona en todos los navegadores */
width: 100%;
margin: 0 0 10px;
padding: 0;
color: var(--lb-tinta);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.lbg-grupo__leyenda + * { clear: both; }
.lbg-grupo > .lb-campo__ayuda { margin: -2px 0 12px; }
.lbg-grupo > .lb-campo__error { margin-top: 10px; }
.lbg-grupo[disabled] .lbg-grupo__leyenda { color: var(--lb-gris); }
/* ── Botones segmentados (radio nativo, flechas del teclado incluidas) ──
Sí No
Elegido: tinta con texto blanco (16,83:1). */
.lbg-segmentado {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
max-width: 100%;
padding: 4px;
border: 2px solid transparent;
border-radius: 26px;
background: var(--lbg-pista);
font-family: var(--lb-fuente);
transition: border-color .3s var(--lb-ease);
}
.lbg-segmentado { align-self: flex-start; } /* dentro de .lb-campo (columna flexible) no se estira */
.lbg-segmentado--ancho { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-self: stretch; width: 100%; }
.lbg-segmentado__opcion { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
input.lbg-segmentado__control { /* input.: gana a «.lb-campo input» del kit */
min-height: 0;
padding: 0;
border: 0;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.lbg-segmentado__texto {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
border-radius: var(--lb-r-pildora);
color: var(--lb-tinta);
font-size: 15px;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.2;
text-align: center;
pointer-events: none;
transition: background-color .3s var(--lb-ease), color .3s var(--lb-ease), transform .35s var(--lb-ease);
}
@media (hover: hover) {
.lbg-segmentado__control:not(:checked):not(:disabled):hover + .lbg-segmentado__texto { background: var(--lbg-gris-medio); }
}
.lbg-segmentado__control:active:not(:disabled) + .lbg-segmentado__texto { transform: scale(.97); }
.lbg-segmentado__control:checked + .lbg-segmentado__texto { background: var(--lb-tinta); color: var(--lb-blanco); }
.lbg-segmentado__control:focus-visible + .lbg-segmentado__texto {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px var(--lb-blanco), 0 0 0 4px var(--lb-acento-texto);
}
.lbg-segmentado__control:disabled { cursor: not-allowed; }
.lbg-segmentado__control:disabled + .lbg-segmentado__texto { opacity: .45; }
.es-error .lbg-segmentado, .lbg-segmentado[aria-invalid="true"] { border-color: var(--lb-error); }
/* ── Contador − n + (con lb-grupo.js; sin JS queda el campo numérico) ──
Muebles grandes
lb-grupo.js quita «hidden» a los botones, los desactiva en los límites (aria-disabled,
para no perder el foco) y anuncia el valor nuevo. */
.lbg-contador {
align-self: flex-start; /* dentro de .lb-campo (columna flexible) no se estira */
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 2px solid transparent;
border-radius: var(--lb-r-pildora);
background: var(--lbg-pista);
font-family: var(--lb-fuente);
transition: border-color .3s var(--lb-ease);
}
.lbg-contador__btn {
position: relative;
display: inline-grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--lbg-pista-btn);
color: var(--lb-tinta);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .3s var(--lb-ease), color .3s var(--lb-ease), transform .35s var(--lb-ease), opacity .3s var(--lb-ease);
}
.lbg-contador__btn[hidden] { display: none; }
/* − y + dibujados con dos barras (nítidos a cualquier zoom) */
.lbg-contador__btn::before, .lbg-contador__btn--mas::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
margin: -1px 0 0 -7px;
border-radius: 1px;
background: currentColor;
}
.lbg-contador__btn--mas::after { transform: rotate(90deg); }
@media (hover: hover) {
.lbg-contador__btn:not([aria-disabled="true"]):hover { background: var(--lb-tinta); color: var(--lb-blanco); }
}
.lbg-contador__btn:active:not([aria-disabled="true"]) { transform: scale(.9); }
.lbg-contador__btn[aria-disabled="true"], .lbg-contador__btn:disabled { opacity: .35; cursor: not-allowed; }
.lbg-contador__btn:focus-visible, input.lbg-contador__valor:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px var(--lb-blanco), 0 0 0 4px var(--lb-acento-texto);
}
input.lbg-contador__valor { /* input.: gana a «.lb-campo input» del kit */
min-height: 0;
width: 4ch;
min-width: 56px;
height: 44px;
margin: 0;
padding: 0 4px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--lb-tinta);
font-family: var(--lb-fuente);
font-size: 20px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
.lbg-contador__valor::-webkit-inner-spin-button, .lbg-contador__valor::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lbg-contador__valor:disabled { opacity: .45; cursor: not-allowed; }
.lbg-contador:has(.lbg-contador__valor[aria-invalid="true"]), .es-error .lbg-contador { border-color: var(--lb-error); }
/* Animación del número al cambiar (la clase la pone lb-grupo.js un instante) */
@keyframes lbg-salto { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.lbg-contador__valor.es-cambio { animation: lbg-salto .35s var(--lb-ease); }
/* ── Interruptor (checkbox nativo con role="switch") ──────────────
Hay ascensor He leído las condiciones
Estudio
Una línea de ayuda …
Elegida: borde turquesa, fondo #E8F6F6 y punto blanco sobre turquesa. */
.lbg-opciones {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
gap: 12px;
}
.lbg-opcion {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
padding: 18px 20px;
border: 1.5px solid var(--lb-linea);
border-radius: 20px;
background: var(--lb-blanco);
color: var(--lb-tinta);
font-family: var(--lb-fuente);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color .3s var(--lb-ease), background-color .3s var(--lb-ease), transform .35s var(--lb-ease);
}
.lbg-opcion__control { margin-top: 1px; }
.lbg-opcion__cuerpo { display: block; flex: 1 1 auto; min-width: 0; }
.lbg-opcion__titulo { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.lbg-opcion__texto { display: block; margin-top: 3px; color: var(--lb-gris); font-size: 15px; line-height: 1.4; }
.lbg-opcion__extra { flex: none; margin-left: auto; padding-left: 8px; color: var(--lb-tinta); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lbg-opcion__icono { --lb-icono-tam: 36px; display: block; margin-bottom: 12px; }
@media (hover: hover) {
.lbg-opcion:hover { border-color: var(--lb-gris); }
}
.lbg-opcion:active { transform: scale(.985); }
.lbg-opcion:has(.lbg-opcion__control:checked) { border-color: var(--lb-acento); background: var(--lb-turquesa-suave); }
.lbg-opcion--vertical { flex-direction: column; gap: 0; padding: 22px 20px 20px; }
.lbg-opcion--vertical .lbg-opcion__control { position: absolute; top: 18px; right: 18px; margin: 0; }
.lbg-opcion--vertical .lbg-opcion__cuerpo { padding-right: 28px; }
.lbg-opcion--vertical .lbg-opcion__extra { margin: 12px 0 0; padding: 0; }
@supports selector(:has(*)) {
/* El anillo de foco rodea toda la tarjeta, no solo el punto */
.lbg-opcion .lbg-opcion__control:focus-visible { box-shadow: none; }
.lbg-opcion:has(.lbg-opcion__control:focus-visible) { box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto); }
}
.lbg-opcion:has(:disabled) { opacity: .45; cursor: not-allowed; }
.lbg-opcion:has(:disabled):active { transform: none; }
.es-error .lbg-opcion, .lbg-opcion:has([aria-invalid="true"]) { border-color: var(--lb-error); }
/* ── Zona para soltar archivos (con lb-grupo.js: arrastrar, miniaturas y quitar) ──
El 
LetsBoxIt