/* ========================================================================== Zeltra Labs — sistema de diseno Fuente de verdad de los valores: docs/marca.md Si cambias un color aqui, actualiza tambien ese documento. ========================================================================== */ :root { /* Paleta. Ver docs/marca.md para el porque del ambar. */ --grafito: #0e1520; --acero: #18222f; --acero-claro: #22303f; --ambar: #f2a83b; --ambar-oscuro: #d98e1f; --verde: #2fa36b; --rojo: #d9534f; --texto: #f3f6f9; --texto-suave: #b3c2d2; /* Roles semanticos: los componentes usan estos, nunca la paleta directa. Asi el modo claro se resuelve reasignando ocho variables. */ --fondo: var(--grafito); --superficie: var(--acero); --superficie-alta: #1e2a38; --borde: var(--acero-claro); --tinta: var(--texto); --tinta-suave: var(--texto-suave); --acento: var(--ambar); --acento-hover: var(--ambar-oscuro); /* Limite visual de un CONTROL, no de una tarjeta. WCAG pide 3:1 para el borde de algo con lo que se interactua, y `--borde` se queda en 1,3:1: un boton fantasma con ese borde parece texto suelto al lado del ambar. Es un token aparte a proposito: subir `--borde` cambiaria todos los separadores de tabla y de tarjeta, que si pueden ser tenues. */ --borde-control: #6b7b8e; /* El ambar sobre blanco solo llega a 1,93:1: en tema claro el boton principal necesita contorno propio o se funde con el fondo. */ --contorno-principal: transparent; /* El texto sobre ambar es SIEMPRE grafito. Ambar sobre blanco no llega a 4.5:1, asi que blanco sobre ambar tampoco. No es opinable. */ --sobre-acento: #0e1520; --titular: "Bricolage Grotesque", "Archivo", system-ui, sans-serif; --cuerpo: "Inter Tight", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --r-s: 8px; --r-m: 14px; --r-l: 22px; --ancho: 1140px; } @media (prefers-color-scheme: light) { :root { --fondo: #fbfaf8; --superficie: #ffffff; --superficie-alta: #f4f2ee; --borde: #e3ded6; --tinta: #101822; --tinta-suave: #5c6775; --borde-control: #8a8378; --contorno-principal: #b0741a; } } /* El interruptor de tema del usuario gana en las dos direcciones. */ :root[data-tema="dark"] { --fondo: var(--grafito); --superficie: var(--acero); --superficie-alta: #1e2a38; --borde: var(--acero-claro); --tinta: var(--texto); --tinta-suave: var(--texto-suave); --borde-control: #6b7b8e; --contorno-principal: transparent; } :root[data-tema="light"] { --fondo: #fbfaf8; --superficie: #ffffff; --superficie-alta: #f4f2ee; --borde: #e3ded6; --tinta: #101822; --tinta-suave: #5c6775; --borde-control: #8a8378; --contorno-principal: #b0741a; } * { box-sizing: border-box; } body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--cuerpo); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--titular); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; } h1 { font-size: clamp(2.1rem, 5.5vw, 3.9rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 650; } h3 { font-size: 1.2rem; font-weight: 620; } p { margin: 0 0 1rem; } a { color: inherit; } /* Una matricula es un identificador: siempre monoespaciada, o se confunden 0/O y 1/I al leerla en voz alta por telefono. */ .matricula { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: var(--r-s); padding: .12em .45em; white-space: nowrap; } /* ---------- estructura ---------- */ .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; } .seccion { padding: clamp(56px, 9vw, 108px) 0; } .seccion--alt { background: var(--superficie); border-block: 1px solid var(--borde); } .centrado { text-align: center; } .medida { max-width: 62ch; } .medida.centrado { margin-inline: auto; } /* ---------- migas de pan ---------- */ .migas { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; font-size: .9rem; color: var(--tinta-suave); padding-top: 1.6rem; } .migas__enlace { color: var(--tinta-suave); text-decoration: none; } .migas__enlace:hover { color: var(--acento); } .migas__separador { color: var(--borde); } /* ---------- botones ---------- */ .boton { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--cuerpo); font-weight: 600; font-size: 1rem; padding: .8rem 1.5rem; border-radius: var(--r-s); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .boton:active { transform: translateY(1px); } .boton--principal { background: var(--acento); color: var(--sobre-acento); border-color: var(--contorno-principal); } .boton--principal:hover { background: var(--acento-hover); } .boton--fantasma { background: transparent; color: var(--tinta); border-color: var(--borde-control); } .boton--fantasma:hover { border-color: var(--acento); color: var(--acento); } .boton--ancho { width: 100%; justify-content: center; } /* ---------- cabecera ---------- */ .cabecera { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde); } .cabecera__fila { display: flex; align-items: center; gap: 1.5rem; height: 68px; } .cabecera__nav { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; } /* Los enlaces de navegacion son enlaces; los botones de la misma barra (Solicitar plaza) conservan su propio estilo. Sin el :not, esta regla ganaba a .boton--principal por especificidad (0,1,1 contra 0,1,0) y el texto sobre ambar se pintaba de gris claro, peso 500 y .95rem. */ .cabecera__nav a:not(.boton) { color: var(--tinta-suave); text-decoration: none; font-size: .95rem; font-weight: 500; } .cabecera__nav a:not(.boton):hover { color: var(--tinta); } @media (max-width: 800px) { .cabecera__nav .oculta-movil { display: none; } } /* ---------- logo ---------- */ .logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); } .logo__marca { color: var(--acento); flex: none; } .logo__texto { font-family: var(--titular); font-size: 1.22rem; letter-spacing: -0.02em; } .logo__texto b { font-weight: 700; } .logo__texto span { font-weight: 400; color: var(--tinta-suave); } /* ---------- hero ---------- */ .hero { padding: clamp(58px, 10vw, 118px) 0 clamp(44px, 7vw, 84px); } .hero__parrafo { font-size: clamp(1.05rem, 2.1vw, 1.28rem); color: var(--tinta-suave); max-width: 60ch; } .hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .hero__nota { margin-top: 1.1rem; font-size: .92rem; color: var(--tinta-suave); } .etiqueta { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; letter-spacing: .02em; color: var(--acento); background: color-mix(in srgb, var(--ambar) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 32%, transparent); border-radius: 999px; padding: .34rem .85rem; margin-bottom: 1.4rem; } /* ---------- rejillas ---------- */ .rejilla { display: grid; gap: 1.2rem; } .rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); padding: 1.6rem; } .seccion--alt .tarjeta { background: var(--superficie-alta); } .tarjeta__num { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--acento); letter-spacing: .1em; display: block; margin-bottom: .7rem; } .tarjeta p { color: var(--tinta-suave); margin: 0; } .tarjeta p:not(:last-child) { margin-bottom: .8rem; } /* ---------- cifras ---------- */ .cifra__valor { font-family: var(--titular); font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--acento); letter-spacing: -0.03em; } .cifra__texto { color: var(--tinta-suave); font-size: .95rem; margin-top: .55rem; } .cifra__fuente { color: var(--tinta-suave); font-size: .78rem; opacity: .75; margin-top: .3rem; } /* ---------- alterna texto / visual ---------- */ .alterna { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .alterna { grid-template-columns: 1fr 1fr; } .alterna--invertida .alterna__visual { order: -1; } } /* ---------- transcripcion de la demo ---------- */ .charla { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); padding: 1.3rem; } .charla__linea { display: flex; gap: .8rem; margin-bottom: 1rem; font-size: .96rem; } .charla__linea:last-child { margin-bottom: 0; } .charla__quien { flex: none; width: 5.4rem; font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .18rem; } .charla__quien--ia { color: var(--acento); } .charla__quien--cliente { color: var(--tinta-suave); } .charla__texto { color: var(--tinta); } .charla__meta { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borde); font-size: .87rem; color: var(--tinta-suave); } /* ---------- lista de ventajas ---------- */ .lista { list-style: none; padding: 0; margin: 1.2rem 0 0; } .lista li { display: flex; gap: .7rem; margin-bottom: .8rem; color: var(--tinta-suave); } .lista li::before { content: "›"; color: var(--acento); font-weight: 700; flex: none; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--borde); } .faq details { border-bottom: 1px solid var(--borde); } .faq summary { cursor: pointer; padding: 1.15rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--acento); font-size: 1.3rem; line-height: 1; flex: none; } .faq details[open] summary::after { content: "−"; } .faq details p { color: var(--tinta-suave); padding-bottom: 1.15rem; margin: 0; max-width: 70ch; } /* ---------- pie ---------- */ .pie { border-top: 1px solid var(--borde); padding: 2.8rem 0; color: var(--tinta-suave); font-size: .9rem; } .pie__fila { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; } .pie a { color: var(--tinta-suave); text-decoration: none; } .pie a:hover { color: var(--tinta); } /* ---------- formularios ---------- */ .panel-auth { max-width: 430px; margin: 0 auto; } .campo { margin-bottom: 1.1rem; } .campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .38rem; } .campo input, .campo select, .campo textarea { width: 100%; padding: .72rem .9rem; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-s); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); } .campo__ayuda { font-size: .84rem; color: var(--tinta-suave); margin-top: .32rem; } /* El error se senala en el campo, no con una alarma al principio de la pagina: asi el usuario ve DONDE esta el problema, no solo que lo hay. */ .campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); } .campo__error { font-size: .87rem; color: var(--rojo); margin-top: .32rem; } /* La casilla de consentimiento no es un campo de texto: no ocupa todo el ancho. */ .campo input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--acento); } .campo--error input[type="checkbox"] { outline: 2px solid var(--rojo); outline-offset: 2px; } /* ---------- contacto ---------- */ .contacto { max-width: 540px; margin-top: 1.8rem; } .contacto__nota { margin-top: 1rem; font-size: .88rem; color: var(--tinta-suave); } /* Trampa antibots: fuera de la pantalla pero dentro del formulario. Un bot la rellena; una persona no sabe que existe. */ .contacto__cebo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .aviso { border-radius: var(--r-s); padding: .85rem 1rem; margin-bottom: 1.2rem; font-size: .93rem; border: 1px solid; } .aviso--error { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); background: color-mix(in srgb, var(--rojo) 10%, transparent); } .aviso--ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); background: color-mix(in srgb, var(--verde) 10%, transparent); } /* ---------- tablas ---------- */ /* Toda tabla vive dentro de .scroll-x: en movil se desplaza ella, nunca la pagina. */ .scroll-x { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .94rem; } th, td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--borde); white-space: nowrap; } th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 650; } .pastilla { display: inline-block; font-size: .78rem; font-weight: 650; padding: .16rem .58rem; border-radius: 999px; border: 1px solid; } .pastilla--ok { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); } .pastilla--aviso { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); } .pastilla--mal { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, transparent); } .pastilla--neutro { color: var(--tinta-suave); border-color: var(--borde); } /* ---------- calendario ---------- */ /* La hora vive en una columna a la izquierda, no dentro de cada recuadro. Repetirla en las 56 celdas de una semana era la mitad del espacio gastado y la razon de que un solo dia llenara la pantalla. */ .agenda__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .agenda__titulo h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0; } .agenda__sin-horario { margin-top: 1.4rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .agenda__sin-horario > span { flex: 1; min-width: 240px; } .agenda__leyenda { margin-top: 1rem; font-size: .84rem; color: var(--tinta-suave); } .barra-agenda { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0 .9rem; } .barra-agenda__nav { display: flex; align-items: center; gap: .35rem; } .barra-agenda__flecha { padding: .4rem .7rem; line-height: 1; } .barra-agenda__hoy { padding: .4rem .8rem; font-size: .88rem; } .barra-agenda__rango { font-weight: 650; margin-inline: .45rem; text-transform: capitalize; } .barra-agenda__cuenta { margin-left: auto; color: var(--tinta-suave); font-size: .9rem; white-space: nowrap; } .barra-agenda__enlace { color: var(--acento); font-size: .9rem; text-decoration: none; white-space: nowrap; } .barra-agenda__ir { display: flex; gap: .4rem; align-items: center; } .barra-agenda__ir label { font-size: .86rem; color: var(--tinta-suave); } .barra-agenda__ir input { padding: .4rem .55rem; font: inherit; font-size: .88rem; color: var(--tinta); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-s); } /* Conmutador dia/semana/mes/lista. Cuatro enlaces pegados: se lee como un control unico y deja claro en cual estas sin necesidad de leer nada. */ .conmutador { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r-s); overflow: hidden; } .conmutador__opcion { padding: .4rem .85rem; font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--tinta-suave); background: var(--superficie); border-right: 1px solid var(--borde); } .conmutador__opcion:last-child { border-right: 0; } .conmutador__opcion:hover { color: var(--tinta); background: var(--superficie-alta); } .conmutador__opcion.es-activa { background: var(--acento); color: var(--sobre-acento); } /* La rejilla usa gap de 1px sobre fondo de borde: las separaciones son lineas de un pixel en vez de margenes, que es de donde salia el aire sobrante. */ .cal { display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-m); overflow: hidden; grid-template-columns: auto repeat(var(--dias), minmax(0, 1fr)); min-width: max-content; } .cal--dia { min-width: 0; } .cal--semana { min-width: 640px; } .cal__esquina { background: var(--superficie-alta); } .cal__cabeza { background: var(--superficie-alta); padding: .4rem .5rem; text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; justify-content: center; } .cal--dia .cal__cabeza { justify-content: flex-start; } .cal__cabeza:hover { background: var(--borde); } .cal__cabeza-nombre { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 650; } .cal__cabeza-num { font-family: var(--titular); font-size: 1rem; font-weight: 700; } .cal__cabeza.es-hoy { background: color-mix(in srgb, var(--ambar) 18%, var(--superficie-alta)); } .cal__cabeza.es-hoy .cal__cabeza-nombre, .cal__cabeza.es-hoy .cal__cabeza-num { color: var(--acento); } .cal__cabeza-cuenta { font-size: .68rem; font-weight: 700; color: var(--tinta-suave); border: 1px solid var(--borde); border-radius: 999px; padding: 0 .32rem; background: var(--superficie); } .cal__cabeza-nota { font-size: .68rem; color: var(--tinta-suave); width: 100%; text-align: center; } .cal__hora { background: var(--superficie-alta); color: var(--tinta-suave); font-family: var(--mono); font-size: .72rem; line-height: 1; padding: .45rem .5rem; text-align: right; white-space: nowrap; } .cal__celda { position: relative; background: var(--superficie); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 30px; } /* Un dia que no abre a esa hora. Distinto de "abierto y libre", y por eso no es blanco: rayado suave para que se lea como "aqui no se trabaja". */ .cal__celda--fuera { background: repeating-linear-gradient(135deg, var(--superficie) 0 6px, var(--superficie-alta) 6px 12px); } /* La franja que se esta viviendo ahora. Es lo que busca el ojo al abrir. */ .cal__celda.es-ahora { box-shadow: inset 2px 0 0 var(--verde); } .cal__vacio { grid-column: 1 / -1; background: var(--superficie); padding: 2rem 1rem; text-align: center; color: var(--tinta-suave); font-size: .9rem; } /* Recuadros dentro de una celda. Densos: dos lineas como mucho en semana. */ .franja { position: relative; display: flex; flex-direction: column; gap: .1rem; flex: 1; justify-content: center; text-decoration: none; color: inherit; border-radius: 5px; padding: .2rem .35rem; font-size: .78rem; line-height: 1.2; min-width: 0; transition: background .12s ease, border-color .12s ease; } .franja__matricula { font-size: .78rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .franja__motivo { font-size: .72rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .franja__meta { font-size: .68rem; color: var(--tinta-suave); font-family: var(--mono); } .franja__accion { font-size: .72rem; color: var(--tinta-suave); } /* En semana solo cabe la matricula. El motivo se lee en el title y en el dia. */ .cal--semana .franja__motivo { display: none; } @media (min-width: 1100px) { .cal--semana .franja__motivo { display: block; } } .franja--libre { border: 1px dashed var(--borde); } .franja--libre:hover, .franja--libre:focus-visible { border-color: var(--acento); border-style: solid; background: color-mix(in srgb, var(--acento) 10%, transparent); } .franja--libre:hover .franja__accion, .franja--libre:focus-visible .franja__accion { color: var(--acento); } .franja--ocupada { background: var(--superficie-alta); border-left: 3px solid var(--acero-claro); } .franja--ocupada:hover { background: color-mix(in srgb, var(--acento) 14%, var(--superficie-alta)); } /* Estado de la cita a golpe de vista: el color dice si hay que hacer algo. */ .franja--pendiente { border-left-color: var(--ambar); } .franja--confirmada { border-left-color: var(--verde); } .franja--completada { border-left-color: var(--acero-claro); opacity: .7; } .franja--no_presentado { border-left-color: var(--rojo); } /* La linea verde de la izquierda marca lo que genero Zeltra: es el ROI que le ensenamos al taller, asi que gana al color de estado. */ .franja--ia { box-shadow: inset 3px 0 0 var(--verde); } /* ---------- alargar una cita ---------- */ /* El asa del borde inferior: se ve al pasar por encima y SIEMPRE en tactil, donde no hay hover. El limite es `--borde-control`, el token de los controles con los que se interactua, no el separador tenue de tarjetas. */ .franja__asa { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; touch-action: none; border-bottom: 2px solid var(--borde-control); border-radius: 0 0 5px 5px; opacity: 0; } .franja:hover .franja__asa, .franja__asa:focus-visible { opacity: 1; } @media (hover: none) { .franja__asa { opacity: 1; } } /* Mientras se estira, la cita crece por encima de las celdas de debajo. */ .franja.se-alarga { position: absolute; left: 2px; right: 2px; top: 2px; z-index: 5; background: var(--superficie-alta); box-shadow: 0 0 0 2px var(--acento); } .franja--pasada { opacity: .4; min-height: 22px; } .franja--continuacion { background: var(--superficie-alta); color: var(--tinta-suave); opacity: .7; } .franja--suelta { border: 1px dotted var(--ambar); } .franja:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } /* Citas a una hora que no cuadra con ninguna franja. Antes no se pintaban en ningun sitio y desaparecian de todas las pantallas. */ .sueltas { margin-top: 1.2rem; border: 1px dotted var(--ambar); border-radius: var(--r-m); padding: .9rem 1rem; } .sueltas__titulo { font-weight: 650; font-size: .92rem; color: var(--ambar); } .sueltas__nota { font-size: .84rem; color: var(--tinta-suave); margin: .25rem 0 .7rem; } .sueltas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; } .sueltas__lista .franja { padding: .45rem .6rem; } .franja__aviso { color: var(--ambar); } /* ---------- buscador de la agenda ---------- */ /* El filtro RESALTA, nunca esconde. Sobre una rejilla de capacidad, esconder una cita deja su hueco pintado como libre y el taller reserva encima. */ .buscador { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; } .buscador input[type="search"], .buscador select { padding: .42rem .6rem; font: inherit; font-size: .88rem; color: var(--tinta); background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-s); } .buscador__texto { min-width: 200px; flex: 1 1 200px; max-width: 320px; } .buscador__boton { padding: .42rem .9rem; font-size: .88rem; } .buscador__resultado { font-size: .88rem; color: var(--acento); font-weight: 600; } .buscador__limpiar { font-size: .86rem; color: var(--tinta-suave); } .agenda__atajos { display: block; margin-top: .3rem; opacity: .75; } .agenda__error { margin-bottom: .8rem; } /* Lo que no casa con el filtro se apaga, pero se sigue viendo: el hueco sigue ocupado aunque no sea lo que estas buscando. */ .es-apagada { opacity: .22; filter: saturate(.2); } .es-apagada:hover, .es-apagada:focus-visible { opacity: 1; filter: none; } /* ---------- arrastrar una cita ---------- */ /* Atajo, no el unico camino: el formulario sigue siendo el que funciona con teclado y con el dedo, porque el arrastre HTML5 no existe en tactil. */ .franja[draggable="true"] { cursor: grab; } .franja.se-arrastra { opacity: .4; cursor: grabbing; } .cal__celda.es-diana { background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); box-shadow: inset 0 0 0 2px var(--acento); } .cal__celda.se-mueve { opacity: .5; } /* ---------- modo mover ---------- */ /* El arrastre HTML5 no existe en tactil y no se puede usar con el teclado, asi que dejaba fuera al jefe de taller con el movil en la mano. En este modo se toca la cita y luego el hueco. */ .modo-mover { padding: .42rem .9rem; font-size: .88rem; } .modo-mover[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); } .cal.es-modo-mover .franja--libre, .cal.es-modo-mover .franja--ocupada { cursor: pointer; } /* Los huecos a los que puede ir, marcados antes de tocar: sin esto el taller tiene que adivinar donde vale soltar. */ .cal.es-modo-mover .cal__celda.es-diana-posible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 55%, transparent); cursor: pointer; } .cal.es-modo-mover .cal__celda.es-diana-posible:hover, .cal.es-modo-mover .cal__celda.es-diana-posible:focus-visible { background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); box-shadow: inset 0 0 0 2px var(--acento); outline: none; } .franja.es-elegida { box-shadow: 0 0 0 2px var(--acento); background: color-mix(in srgb, var(--acento) 18%, var(--superficie-alta)); } /* ---------- barra de deshacer ---------- */ /* Arrastrar es facil de hacer sin querer. Colores de la paleta, no fijos: la barra tiene que verse igual de bien en tema claro que en oscuro. */ .deshacer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: .9rem; border: 1px solid color-mix(in srgb, var(--ambar) 45%, transparent); background: color-mix(in srgb, var(--ambar) 10%, transparent); border-radius: var(--r-s); font-size: .92rem; } .deshacer__texto { flex: 1; min-width: 220px; } .deshacer__boton { padding: .4rem .85rem; font-size: .88rem; white-space: nowrap; } /* ---------- vista de mes ---------- */ .mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-m); overflow: hidden; min-width: 640px; } .mes__cabeza { background: var(--superficie-alta); padding: .4rem .5rem; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); font-weight: 650; } .mes__dia { background: var(--superficie); padding: .3rem; min-height: 92px; display: flex; flex-direction: column; gap: 2px; } .mes__dia.es-otro-mes { background: var(--superficie-alta); } .mes__dia.es-otro-mes .mes__num { opacity: .45; } .mes__dia.es-cerrado { background: repeating-linear-gradient(135deg, var(--superficie) 0 6px, var(--superficie-alta) 6px 12px); } .mes__num { align-self: flex-start; font-family: var(--titular); font-size: .88rem; font-weight: 700; text-decoration: none; color: var(--tinta); padding: .05rem .3rem; border-radius: 999px; line-height: 1.4; } .mes__num:hover { background: var(--borde); } .mes__dia.es-hoy .mes__num { background: var(--acento); color: var(--sobre-acento); } .mes__cerrado { font-size: .68rem; color: var(--tinta-suave); padding-inline: .3rem; } .mes__cita { display: flex; gap: .3rem; align-items: baseline; text-decoration: none; color: inherit; background: var(--superficie-alta); border-left: 3px solid var(--acero-claro); border-radius: 4px; padding: .12rem .3rem; font-size: .72rem; min-width: 0; } .mes__cita:hover { background: color-mix(in srgb, var(--acento) 14%, var(--superficie-alta)); } .mes__cita.es-ia { box-shadow: inset 3px 0 0 var(--verde); } .mes__cita-hora { font-family: var(--mono); color: var(--tinta-suave); font-size: .68rem; } .mes__cita-matricula { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mes__resto { font-size: .68rem; color: var(--acento); text-decoration: none; padding-inline: .3rem; } .mes__resto:hover { text-decoration: underline; } @media (max-width: 720px) { .mes__dia { min-height: 68px; } .mes__cita-matricula { display: none; } .barra-agenda__cuenta { margin-left: 0; } } /* ---------- vista de lista ---------- */ /* La cuarta escala: las citas venideras en vertical, agrupadas por dia. El jefe de taller ve que tiene por delante sin buscar entre huecos vacios, y se lee en el movil sin desplazarse en horizontal. */ .lista-citas { display: flex; flex-direction: column; gap: 1.5rem; } .lista-citas__cabecera { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .5rem; font-size: 1.05rem; } .lista-citas__cabecera::before { content: ""; width: 3px; align-self: stretch; background: var(--borde); border-radius: 999px; } .lista-citas__dia.es-hoy .lista-citas__cabecera::before { background: var(--acento); } .lista-citas__dia.es-hoy .lista-citas__fecha { color: var(--acento); } .lista-citas__fecha { text-transform: capitalize; } .lista-citas__cuenta { font-size: .78rem; color: var(--tinta-suave); font-weight: 650; border: 1px solid var(--borde); border-radius: 999px; padding: 0 .55rem; } .lista-citas__filas { display: flex; flex-direction: column; gap: .45rem; } .lista-citas__fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--acero-claro); border-radius: var(--r-s); padding: .6rem .85rem; text-decoration: none; color: inherit; transition: border-color .14s ease, background .14s ease; } .lista-citas__fila:hover { border-color: var(--acento); background: var(--superficie-alta); } .lista-citas__fila:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; } .lista-citas__hora { font-family: var(--mono); font-size: .88rem; font-weight: 650; flex: none; } .lista-citas__matricula { font-size: .8rem; } .lista-citas__motivo { color: var(--tinta-suave); font-size: .88rem; flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lista-citas__estado { font-size: .76rem; font-weight: 650; color: var(--tinta-suave); border: 1px solid var(--borde); border-radius: 999px; padding: .1rem .55rem; background: var(--superficie-alta); } .lista-citas__duracion { font-size: .76rem; color: var(--tinta-suave); font-family: var(--mono); } /* Estado a golpe de vista, igual que en la rejilla. */ .lista-citas__fila--pendiente { border-left-color: var(--ambar); } .lista-citas__fila--confirmada { border-left-color: var(--verde); } .lista-citas__fila--completada { border-left-color: var(--acero-claro); opacity: .7; } .lista-citas__fila--no_presentado { border-left-color: var(--rojo); } /* La linea verde de la izquierda marca lo que genero Zeltra. */ .lista-citas__fila.es-ia { box-shadow: inset 3px 0 0 var(--verde); } .lista-citas__vacio { background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--r-m); padding: 2.2rem 1.4rem; text-align: center; color: var(--tinta-suave); display: flex; flex-direction: column; align-items: center; gap: .9rem; } @media (max-width: 720px) { .lista-citas__motivo { display: none; } } /* ---------- prosa de los articulos ---------- */ /* Medida de linea corta a proposito: 68 caracteres es donde el ojo deja de perder el renglon. Un articulo a todo el ancho no se lee, se abandona. */ .prosa { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; } .prosa h2 { margin-top: 2.6rem; font-size: clamp(1.35rem, 2.6vw, 1.75rem); } .prosa h3 { margin-top: 1.9rem; font-size: 1.15rem; } .prosa p, .prosa ul, .prosa ol { margin: 0 0 1.15rem; } .prosa ul, .prosa ol { padding-left: 1.3rem; } .prosa li { margin-bottom: .5rem; } .prosa a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; } .prosa strong { color: var(--tinta); font-weight: 650; } .prosa blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--acento); color: var(--tinta-suave); } .prosa code { font-family: var(--mono); font-size: .92em; background: var(--superficie-alta); padding: .1em .35em; border-radius: 4px; } .prosa table { margin: 1.6rem 0; } .prosa hr { border: none; border-top: 1px solid var(--borde); margin: 2.4rem 0; } .ficha-articulo { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; color: var(--tinta-suave); font-size: .9rem; margin-bottom: 1.6rem; } .tarjeta-articulo { display: flex; flex-direction: column; gap: .55rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-m); padding: 1.4rem; text-decoration: none; color: inherit; transition: border-color .14s ease; } .tarjeta-articulo:hover { border-color: var(--acento); } .tarjeta-articulo h3 { margin: 0; font-size: 1.1rem; } .tarjeta-articulo p { margin: 0; color: var(--tinta-suave); font-size: .94rem; } .tarjeta-articulo__meta { font-size: .8rem; color: var(--tinta-suave); display: flex; gap: .7rem; flex-wrap: wrap; } .fuentes { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--borde); font-size: .9rem; color: var(--tinta-suave); } .fuentes ol { padding-left: 1.2rem; } img, svg { max-width: 100%; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================================ ESCENAS CON FOTO — secciones con fotografia de fondo ============================================================================ La foto se pasa por la variable `--foto` en el propio elemento:
(donde `la-imagen` es una funcion url() de CSS apuntando al estatico; aqui no se escribe literal porque el postprocesador de whitenoise rastrea los url() TAMBIEN dentro de los comentarios e intentaria resolverlo como fichero) Si `--foto` no existe, la escena renderiza SOLO el degradado y sigue pareciendo intencional. Por eso el degradado va siempre debajo y no es un "placeholder": es el fondo de marca, y la foto es una capa opcional encima. Asi la web no depende de tener fotos para verse acabada. El velo (`.escena::after`) no es decoracion: sin el, el texto blanco sobre una foto clara se queda por debajo de 4.5:1 y deja de cumplir. Es opaco a proposito en la mitad donde cae el texto. */ .escena { position: relative; isolation: isolate; background-color: var(--grafito); background-image: var(--foto, none); background-size: cover; background-position: var(--foto-pos, center); color: var(--texto); } /* Velo de contraste. `--velo` permite subirlo en fotos claras. */ .escena::after { content: ""; position: absolute; inset: 0; z-index: -2; /* debajo del esquema, que va en -1 */ background: linear-gradient(100deg, rgba(14, 21, 32, var(--velo, .78)) 0%, rgba(14, 21, 32, calc(var(--velo, .78) * .97)) 46%, rgba(14, 21, 32, calc(var(--velo, .78) * .92)) 100%), radial-gradient(120% 90% at 12% 8%, rgba(242, 168, 59, .14) 0%, transparent 58%); } /* Cuanto puede bajar `--velo` depende de LO CLARA QUE SEA LA FOTO, y por eso el valor por defecto no vale para todas. Contra una foto blanca —el peor caso imaginable— el suelo medido para que `--texto-suave` llegue a 4.5:1 es .75. Por eso el defecto es .78: aguanta cualquier foto que se ponga sin mirarla. Una foto oscura admite mucho menos velo y se ve mucho mejor. Medido con la luminancia media de cada una y suponiendo que sus zonas claras llegan al DOBLE de esa media (una media baja puede esconder una ventana o un foco): empresa.jpg media 100 -> minimo .68 veterinaria.jpg media 69 -> minimo .51 peluqueria.jpg media 61 -> minimo .50 taller.jpg media 27 -> minimo .50 Las tres de sector van a .65 en `INDUSTRIAS`: diez puntos por encima de su minimo, porque la heuristica del doble puede quedarse corta con un foco de trabajo. El degradado ya solo cae un 8% de un lado al otro, asi que el suelo real nunca se aleja del valor que se fija. Si anades una foto clara, sube `--velo` y comprueba el contraste antes. */ /* Dentro de una escena el texto es siempre el de tema oscuro, aunque el visitante tenga el tema claro puesto: el fondo es una foto oscura. */ .escena h1, .escena h2, .escena h3 { color: var(--texto); } .escena p, .escena .lista li { color: var(--texto-suave); } .escena .tarjeta { background: color-mix(in srgb, var(--acero) 82%, transparent); border-color: color-mix(in srgb, #ffffff 14%, transparent); backdrop-filter: blur(8px); } /* El boton fantasma sobre foto necesita su propio borde: el de tema claro desaparece contra el grafito del velo. */ .escena .boton--fantasma { color: var(--texto); border-color: #6b7b8e; } .escena .boton--fantasma:hover { border-color: var(--ambar); color: var(--ambar); } /* ---------- revelado al hacer scroll ---------- Sin libreria: IntersectionObserver + una transicion. GSAP son ~50 kB y una CDN externa, y la marca prohibe las dos cosas (docs/marca.md). El estado inicial se aplica SOLO si hay JS (`.js`, que escribe el propio ). Sin JS —o para un rastreador— el contenido esta visible: ocultar texto por defecto y confiar en el script es como no publicarlo. */ .js .revela { opacity: 0; transform: translateY(12px); } .js .revela--visible { opacity: 1; transform: none; transition: opacity .35s ease-out, transform .35s ease-out; } /* Escalonado: como mucho 8 hijos, mas alla el ultimo se siente colgado. */ .js .revela--visible:nth-child(2) { transition-delay: .06s; } .js .revela--visible:nth-child(3) { transition-delay: .12s; } .js .revela--visible:nth-child(4) { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { .js .revela { opacity: 1; transform: none; } .js .revela--visible { transition: none; } } /* ---------- esquema animado de fondo ---------- El dibujo va ENTRE el velo (-2) y el contenido: por debajo del velo no se veria, y por encima del contenido taparia el texto. Ocupa la mitad derecha porque el texto de las escenas cae a la izquierda. Un trazado por debajo de un titular le baja el contraste aunque sea tenue, y el de las escenas ya esta medido al limite justo. */ .esquema { position: absolute; z-index: -1; right: 0; top: 50%; transform: translateY(-50%); width: min(52%, 560px); max-height: 88%; pointer-events: none; } /* Por debajo de 900px el texto ocupa todo el ancho y el esquema quedaria detras del titular. No se encoge: se quita. */ @media (max-width: 900px) { .esquema { display: none; } } .esquema__trama line { stroke: var(--acero-claro); stroke-width: 1; opacity: .34; } .esquema__linea { stroke: var(--acero-claro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .esquema__nodo { fill: var(--acero-claro); } .esquema__nodo--eje { fill: none; stroke: var(--ambar); stroke-width: 2.5; } .esquema__pulso { fill: var(--ambar); } /* Estado de partida: sin cablear. Se aplica en cuanto hay JS —no cuando el esquema entra en pantalla— o el dibujo se veria entero un instante antes de empezar a animarse. */ .js .esquema__linea { stroke-dasharray: 400; stroke-dashoffset: 400; } .js .esquema__nodo { opacity: 0; } .js .esquema__pulso { opacity: 0; } /* El disparo es `--visto`, no la carga de la pagina: el segundo esquema esta fuera de pantalla al cargar, y atado a la carga terminaria de dibujarse antes de que nadie llegue a verlo. Lo pone el mismo observador que revela las secciones. */ .js .esquema--visto .esquema__linea { animation: esquema-traza .9s ease-out forwards; animation-delay: calc(.35s + var(--orden) * .28s); } .js .esquema--visto .esquema__nodo { animation: esquema-enciende .45s ease-out forwards; animation-delay: calc(.5s + var(--orden) * .28s); } .js .esquema--visto .esquema__nodo--eje { animation: esquema-enciende .45s ease-out forwards, esquema-late 3.4s ease-in-out 2.4s infinite; } .js .esquema--visto .esquema__pulso { animation: esquema-aparece .6s 2.6s forwards; } @keyframes esquema-traza { to { stroke-dashoffset: 0; } } @keyframes esquema-enciende { from { opacity: 0; } to { opacity: 1; } } @keyframes esquema-aparece { to { opacity: .9; } } @keyframes esquema-late { 0%, 100% { stroke-opacity: 1; r: 9; } 50% { stroke-opacity: .55; r: 11; } } /* Sin movimiento: el esquema se queda dibujado y quieto. Sigue siendo parte del fondo, pero no se anima nada. */ @media (prefers-reduced-motion: reduce) { .js .esquema__linea { stroke-dashoffset: 0; animation: none; } .js .esquema__nodo { opacity: 1; animation: none; } .js .esquema__nodo--eje { animation: none; } .esquema__pulso { display: none; } /* animateMotion no lo para el CSS */ } /* ---------- formulario de contacto, version en tarjeta ---------- El formulario deja de ser una columna suelta y pasa a una tarjeta con la promesa al lado: quien llega hasta aqui ya esta convencido a medias, y lo que le frena es no saber que pasa despues de darle al boton. */ .contacto__caja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; margin-top: 2rem; } @media (max-width: 860px) { .contacto__caja { grid-template-columns: 1fr; } } .contacto { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--r-l); padding: clamp(1.4rem, 3vw, 2rem); max-width: none; margin-top: 0; } .seccion--alt .contacto { background: var(--superficie-alta); } /* Nombre y telefono comparten fila: los dos son cortos y opcionales, y en columna hacen que el formulario parezca mas largo de lo que es. */ .contacto__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 560px) { .contacto__fila { grid-template-columns: 1fr; } } /* "opcional" al lado de la etiqueta. Se marca lo opcional y no lo obligatorio: de cinco campos aqui, tres se pueden saltar, y ver tres "opcional" cansa menos que ver dos asteriscos rojos. */ .campo__opcional { font-weight: 500; font-size: .78rem; color: var(--tinta-suave); border: 1px solid var(--borde); border-radius: 999px; padding: .05rem .45rem; margin-left: .45rem; vertical-align: 1px; } /* La casilla de consentimiento en linea con su texto, que es largo. */ .campo--casilla label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; font-size: .93rem; } .campo--casilla input[type="checkbox"] { margin-top: .18rem; flex: none; } /* Lo que pasa despues de enviar, al lado del formulario. */ .contacto__promesa { list-style: none; padding: 0; margin: 0; } .contacto__promesa li { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var(--borde); color: var(--tinta-suave); font-size: .95rem; } .contacto__promesa li:last-child { border-bottom: 0; } .contacto__promesa b { color: var(--tinta); font-weight: 650; display: block; margin-bottom: .12rem; } .contacto__paso { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--acento); border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent); background: color-mix(in srgb, var(--ambar) 12%, transparent); } /* Estado de envio: el boton dice que esta pasando algo y no se puede pulsar dos veces. Un doble envio aqui son dos correos identicos al comercial. */ .contacto button[aria-disabled="true"] { opacity: .65; cursor: progress; } /* ---------- barra de acento en las tarjetas de cifra ---------- El contador solo tiene sentido donde el dato es un numero, y de las tres industrias solo talleres lo es: veterinaria y peluqueria llevan una frase ("La vacuna anual"). Asi que el movimiento de esa seccion no puede depender de que haya cifras. Esta barra se dibuja en TODAS al aparecer, diga lo que diga el dato. Es un trazo de 3px, no una animacion aparte: da ritmo a la seccion sin competir con el texto que hay al lado. */ .tarjeta .cifra__valor { position: relative; padding-bottom: .7rem; } .tarjeta .cifra__valor::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 2.6rem; border-radius: 2px; background: var(--acento); } .js .revela .cifra__valor::after { width: 0; } .js .revela--visible .cifra__valor::after { width: 2.6rem; transition: width .5s ease-out .15s; } @media (prefers-reduced-motion: reduce) { .js .revela .cifra__valor::after, .js .revela--visible .cifra__valor::after { width: 2.6rem; transition: none; } }