/* ========================================================================== Kommad Base · estilos que theme.json no puede expresar -------------------------------------------------------------------------- 0. Colores por función y zonas 0 bis. Variables de estilo (esquinas, sombras, bordes, densidad) 0 ter. Opciones de estilo de cada web 1. Escala tipografica por punto de corte 2. Accesibilidad 3. Utilidades de zona Héroe, franjas y demás patrones de composición: assets/css/patrones.css. Los estilos de las fichas y bloques de kommad-contenidos (pueblo, ruta, lugar, tarjetas, listados, mapa, agenda) viven en el plugin desde la 0.5.0: cada módulo lleva su CSS y lo carga solo donde aparece. El tema pone la personalidad con las variables de la sección 0 bis, y el plugin las lee con un valor de respaldo. Regla para todo el archivo: ningún color se escribe con su nombre propio («azul pizarra») ni con su código. Se usan los huecos de la paleta (--wp--preset--color--titulo, --wp--preset--color--fondo…) o las variables --kmd-acento* de la sección 0. Cada web pone sus colores en el theme.json de su tema hijo. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Colores por función y zonas Variables de trabajo para el color de acento. Fuera de cualquier zona leen el acento principal de la web. Dentro de `.zona-turistica` leen el segundo acento (acento-2…) si la web lo define; si no lo define, siguen con el principal, así que una web de una sola zona no tiene que hacer nada. acento superficie, bordes y decoración acento-texto texto y botones: el tono que cumple AA sobre fondo claro. Si la web no define «acento-texto», se usa «acento». acento-oscuro estados :hover y fondos oscuros acento-claro fondos suaves teñidos -------------------------------------------------------------------------- */ body { --kmd-acento: var(--wp--preset--color--acento); --kmd-acento-texto: var(--wp--preset--color--acento-texto, var(--wp--preset--color--acento)); --kmd-acento-oscuro: var(--wp--preset--color--acento-oscuro, var(--wp--preset--color--titulo)); --kmd-acento-claro: var(--wp--preset--color--acento-claro, var(--wp--preset--color--fondo-suave)); } .zona-turistica { --kmd-acento: var(--wp--preset--color--acento-2, var(--wp--preset--color--acento)); --kmd-acento-texto: var(--wp--preset--color--acento-2-texto, var(--wp--preset--color--acento-2, var(--wp--preset--color--acento-texto, var(--wp--preset--color--acento)))); --kmd-acento-oscuro: var(--wp--preset--color--acento-2-oscuro, var(--wp--preset--color--titulo)); --kmd-acento-claro: var(--wp--preset--color--acento-2-claro, var(--wp--preset--color--acento-claro, var(--wp--preset--color--fondo-suave))); } /* -------------------------------------------------------------------------- 0 bis. Variables de estilo Lo que cambia de una web a otra sin tocar el CSS de cada pieza. Los valores de aquí son los de partida (el aspecto que tenía Puebla de Lillo); cada web los elige en su ficha. Las usan la cabecera, el pie y los bloques de kommad-contenidos, siempre con un respaldo por si el tema no las define. Esquinas, solo de contenedores (los círculos y las píldoras no cambian): --kmd-radio-pequeno campos, botones, cuadro de fecha, miniaturas --kmd-radio-medio tarjetas, cajas de datos, caja de filtros --kmd-radio-grande mapa, franjas, imagen del héroe Sombras: --kmd-sombra-color tiñe todas las sombras con el color de títulos de la web (nunca un negro o un gris escrito a mano). Las de los paneles que flotan (desplegables, buscador, menú del móvil) son funcionales y no dependen del estilo; --kmd-sombra-tarjeta es la que elige cada web. Bordes: --kmd-borde-tarjeta, el de tarjetas, caja de filtros y mapa. Los bordes de formulario y las líneas separadoras son fijos (accesibilidad). Densidad: --kmd-esp-seccion separación entre secciones de una ficha --kmd-esp-caja relleno de las cajas de datos --kmd-esp-tarjeta relleno del texto de las tarjetas y de los filtros --kmd-esp-rejilla hueco entre tarjetas -------------------------------------------------------------------------- */ /* Valores de partida (sin ajuste «estilo» en la web): el aspecto de Puebla. Los radios se guardan en dos pasos: --kmd-r-* es el tamaño y --kmd-radio-* la forma que usan las piezas, para que la forma (hoja, una esquina recta) pueda cambiar sin tocar el tamaño. */ :root { --kmd-r-pequeno: 4px; --kmd-r-medio: 4px; --kmd-r-grande: 4px; --kmd-radio-pequeno: var(--kmd-r-pequeno); --kmd-radio-medio: var(--kmd-r-medio); --kmd-radio-grande: var(--kmd-r-grande); --kmd-sombra-color: var(--wp--preset--color--titulo); --kmd-sombra-tarjeta: none; --kmd-sombra-tarjeta-encima: var(--kmd-sombra-tarjeta); --kmd-borde-tarjeta: 1px solid var(--wp--preset--color--borde); /* Densidad: un solo factor multiplica todos los espacios de estilo. */ --kmd-densidad: 1; --kmd-esp-seccion: calc(var(--wp--preset--spacing--50) * var(--kmd-densidad)); --kmd-esp-caja: calc(var(--wp--preset--spacing--40) * var(--kmd-densidad)); --kmd-esp-tarjeta: calc(1rem * var(--kmd-densidad)); --kmd-esp-rejilla: calc(1.5rem * var(--kmd-densidad)); /* Separación entre franjas de una portada o página de sección (patrones). En el móvil baja hasta el 60 %. */ --kmd-esp-franja: calc(clamp(3rem, 6.5vw, 5rem) * var(--kmd-densidad)); /* Movimiento: distancia y duración de la entrada al hacer scroll. */ --kmd-mov-distancia: 12px; --kmd-mov-duracion: 400ms; } /* -------------------------------------------------------------------------- 0 ter. Opciones de estilo de cada web Cada web elige en su ficha (ajuste «estilo» de kmd_ajustes) y el tema lo escribe como atributos en (inc/estilo.php): data-kmd-caja contenida · estandar · amplia · fluida data-kmd-esquinas rectas · suaves · redondeadas · muy-redondeadas data-kmd-forma iguales · hoja · hoja-inversa · recta-ai · recta-ad · recta-bi · recta-bd (ai = arriba a la izquierda…) data-kmd-sombras ninguna · suave · marcada data-kmd-bordes ninguno · fino · marcado data-kmd-densidad compacta · normal · amplia data-kmd-movimiento ninguno · sutil · marcado data-kmd-visuales sangre · caja (héroe y franjas; patrones.css) Un atributo que falta deja el valor de partida. Fijo en todas las webs: accesibilidad (foco, contraste, 44 px, movimiento reducido) y un mismo valor para toda la web. -------------------------------------------------------------------------- */ /* Caja. WordPress escribe los anchos en body; por eso se cambian ahí. content-size es la medida máxima del texto: nunca más de 1.200 px. */ html[data-kmd-caja="contenida"] body { --wp--style--global--content-size: 1080px; --wp--style--global--wide-size: 1080px; } html[data-kmd-caja="estandar"] body { --wp--style--global--content-size: 1200px; --wp--style--global--wide-size: 1200px; } html[data-kmd-caja="amplia"] body { --wp--style--global--content-size: 1200px; --wp--style--global--wide-size: 1320px; } html[data-kmd-caja="fluida"] body { --wp--style--global--content-size: 1200px; --wp--style--global--wide-size: min(92vw, 1600px); } /* Con caja amplia o fluida, el texto (que no pasa de 1.200 px) empieza en el mismo borde que tarjetas, mapa y cabecera, y el aire queda a la derecha (decisión del 08/10/2026). WordPress centra cada bloque con «margin: auto !important»; aquí se desplaza a la izquierda de la caja. */ html:is([data-kmd-caja="amplia"], [data-kmd-caja="fluida"]) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; margin-right: auto !important; } /* Esquinas: tamaño (pequeño · medio · grande). */ :root[data-kmd-esquinas="rectas"] { --kmd-r-pequeno: 0px; --kmd-r-medio: 0px; --kmd-r-grande: 0px; } :root[data-kmd-esquinas="suaves"] { --kmd-r-pequeno: 2px; --kmd-r-medio: 4px; --kmd-r-grande: 8px; } :root[data-kmd-esquinas="redondeadas"] { --kmd-r-pequeno: 4px; --kmd-r-medio: 10px; --kmd-r-grande: 16px; } :root[data-kmd-esquinas="muy-redondeadas"] { --kmd-r-pequeno: 8px; --kmd-r-medio: 16px; --kmd-r-grande: 28px; } /* Esquinas: forma. Solo contenedores medianos y grandes; los pequeños (campos, botones) siempre con las cuatro iguales. Orden de border-radius: arriba izquierda, arriba derecha, abajo derecha, abajo izquierda. */ :root[data-kmd-forma="hoja"] { --kmd-radio-medio: var(--kmd-r-medio) 0 var(--kmd-r-medio) 0; --kmd-radio-grande: var(--kmd-r-grande) 0 var(--kmd-r-grande) 0; } :root[data-kmd-forma="hoja-inversa"] { --kmd-radio-medio: 0 var(--kmd-r-medio) 0 var(--kmd-r-medio); --kmd-radio-grande: 0 var(--kmd-r-grande) 0 var(--kmd-r-grande); } :root[data-kmd-forma="recta-ai"] { --kmd-radio-medio: 0 var(--kmd-r-medio) var(--kmd-r-medio) var(--kmd-r-medio); --kmd-radio-grande: 0 var(--kmd-r-grande) var(--kmd-r-grande) var(--kmd-r-grande); } :root[data-kmd-forma="recta-ad"] { --kmd-radio-medio: var(--kmd-r-medio) 0 var(--kmd-r-medio) var(--kmd-r-medio); --kmd-radio-grande: var(--kmd-r-grande) 0 var(--kmd-r-grande) var(--kmd-r-grande); } :root[data-kmd-forma="recta-bd"] { --kmd-radio-medio: var(--kmd-r-medio) var(--kmd-r-medio) 0 var(--kmd-r-medio); --kmd-radio-grande: var(--kmd-r-grande) var(--kmd-r-grande) 0 var(--kmd-r-grande); } :root[data-kmd-forma="recta-bi"] { --kmd-radio-medio: var(--kmd-r-medio) var(--kmd-r-medio) var(--kmd-r-medio) 0; --kmd-radio-grande: var(--kmd-r-grande) var(--kmd-r-grande) var(--kmd-r-grande) 0; } /* Sombras de tarjetas y mapa, teñidas con el color de títulos. «encima» es la de al pasar el ratón por una tarjeta. */ :root[data-kmd-sombras="ninguna"] { --kmd-sombra-tarjeta: none; --kmd-sombra-tarjeta-encima: none; } :root[data-kmd-sombras="suave"] { --kmd-sombra-tarjeta: 0 1px 2px color-mix(in srgb, var(--kmd-sombra-color) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--kmd-sombra-color) 6%, transparent); --kmd-sombra-tarjeta-encima: 0 2px 4px color-mix(in srgb, var(--kmd-sombra-color) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--kmd-sombra-color) 10%, transparent); } :root[data-kmd-sombras="marcada"] { --kmd-sombra-tarjeta: 0 2px 4px color-mix(in srgb, var(--kmd-sombra-color) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--kmd-sombra-color) 12%, transparent); --kmd-sombra-tarjeta-encima: 0 4px 8px color-mix(in srgb, var(--kmd-sombra-color) 10%, transparent), 0 18px 40px color-mix(in srgb, var(--kmd-sombra-color) 16%, transparent); } /* Bordes de tarjetas, caja de filtros y mapa. Los de formulario no cambian (accesibilidad, sección 2). */ :root[data-kmd-bordes="ninguno"] { --kmd-borde-tarjeta: none; } :root[data-kmd-bordes="fino"] { --kmd-borde-tarjeta: 1px solid var(--wp--preset--color--borde); } :root[data-kmd-bordes="marcado"] { --kmd-borde-tarjeta: 1px solid var(--wp--preset--color--texto-suave); } /* Sin borde y sin sombra, una tarjeta blanca sobre blanco desaparece: toma el fondo suave. */ :root[data-kmd-bordes="ninguno"]:not([data-kmd-sombras="suave"]):not([data-kmd-sombras="marcada"]) { --kmd-fondo-tarjeta: var(--wp--preset--color--fondo-suave); } /* Densidad. */ :root[data-kmd-densidad="compacta"] { --kmd-densidad: 0.75; } :root[data-kmd-densidad="amplia"] { --kmd-densidad: 1.4; } /* Movimiento: entrada al hacer scroll (assets/js/movimiento.js). - Solo se oculta algo cuando el script ha cargado (clase kmd-mov-listo): sin JavaScript, todo se ve. - Lo que ya está en pantalla al cargar no se anima. - Una sola vez por elemento; nunca la cabecera ni el héroe. - Con «reducir movimiento» del sistema, el script no hace nada. */ :root[data-kmd-movimiento="marcado"] { --kmd-mov-distancia: 24px; --kmd-mov-duracion: 600ms; } html.kmd-mov-listo .kmd-mov-espera { opacity: 0; transform: translateY(var(--kmd-mov-distancia)); } html.kmd-mov-listo .kmd-mov-visto { opacity: 1; transform: none; transition: opacity var(--kmd-mov-duracion) ease-out var(--kmd-mov-retraso, 0ms), transform var(--kmd-mov-duracion) ease-out var(--kmd-mov-retraso, 0ms); } html.kmd-mov-listo[data-kmd-movimiento="marcado"] .kmd-mov-espera :is(img, .kb-franja__foto) { transform: scale(1.04); } html.kmd-mov-listo[data-kmd-movimiento="marcado"] .kmd-mov-visto :is(img, .kb-franja__foto) { transform: none; transition: transform calc(var(--kmd-mov-duracion) * 1.6) ease-out; } /* -------------------------------------------------------------------------- 1. Escala tipografica por punto de corte theme.json define los tamanos de escritorio. Aqui se reproducen los mismos puntos de corte que tenia el kit de Elementor (1024 px y 767 px) para no cambiar el diseno acordado. Se usa el selector `:root h1` (y equivalentes) en lugar de `:where(h1)` porque WordPress genera los estilos de elemento con `:root :where(h1)`, de especificidad menor. Asi el ajuste gana siempre, sin recurrir a !important y sin depender del orden en que se carguen las hojas de estilo. -------------------------------------------------------------------------- */ /* Pantallas de más de 1.100 px: el texto corrido sube a 20 px, con algo más de interlineado, para que la línea a todo el ancho de la caja (1.200 px) no pase de unos 115 caracteres. Se cambia el tamaño «texto», que es el del cuerpo y el de los párrafos; la letra de interfaz (menú, tarjetas, filtros, datos) usa «texto-pequeno» o medidas propias y no cambia. */ @media (min-width: 1100px) { :root { --wp--preset--font-size--texto: 20px; } body { line-height: 1.65; } } /* Títulos dentro del contenido: el doble de aire encima que debajo, para que el título se lea con el texto que abre y no con el que cierra (decisión del 08/10/2026). Solo los títulos del editor (bloque Título, clase wp-block-heading) que son hijos directos de una caja de contenido; los subtítulos de las fichas del plugin, los héroes y los patrones tienen sus propias medidas. El primero de la caja no lleva margen. */ .is-layout-constrained > :is(h2, h3, h4).wp-block-heading:not(:first-child) { margin-block-start: calc(var(--wp--style--block-gap, 1rem) * 2); } @media (max-width: 1024px) { html body { font-size: 17px; } :root h1 { font-size: 42px; } :root h2 { font-size: 34px; } :root h3 { font-size: 26px; } :root h4 { font-size: 22px; } :root h5 { font-size: 19px; } :root h6 { font-size: 17px; } } @media (max-width: 767px) { html body { font-size: 17px; } :root h1 { font-size: 34px; } :root h2 { font-size: 28px; } :root h3 { font-size: 23px; } :root h4 { font-size: 20px; } :root h5 { font-size: 18px; } :root h6 { font-size: 16px; } } /* -------------------------------------------------------------------------- 2. Accesibilidad Criterios WCAG 2.1 AA / UNE-EN 301 549, exigibles por el RD 1112/2018. -------------------------------------------------------------------------- */ /* 2.4.7 Foco visible. Doble trazo para que se vea sobre fondo claro y oscuro. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--titulo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wp--preset--color--fondo); } /* Enlace de salto al contenido. WordPress lo inserta en los temas de bloques; aqui solo se le da un aspecto coherente cuando recibe el foco. */ .skip-link.screen-reader-text:focus { background-color: var(--wp--preset--color--titulo); color: var(--wp--preset--color--fondo); font-family: var(--wp--preset--font-family--texto); font-size: 16px; padding: 12px 24px; text-decoration: underline; z-index: 100000; } /* 1.4.3 Contraste del texto en secciones oscuras. theme.json fija el color de los encabezados en Gris 900, y eso pisaba el color heredado dentro de cualquier grupo con color de texto propio: en el pie, azul profundo, los encabezados quedaban en 1,17 de contraste. La regla correcta no es pintar de blanco ese encabezado concreto, sino que los encabezados hereden el color cuando su contenedor define uno. Asi vale para el pie y para cualquier seccion oscura que se haga en adelante. */ .has-text-color :is(h1, h2, h3, h4, h5, h6), .has-text-color :is(h1, h2, h3, h4, h5, h6) a { color: inherit; } /* 1.4.11 Contraste de elementos no textuales: los bordes de formulario usan «texto-suave» (en Puebla, Gris 500: 4,82 sobre blanco), nunca «borde» (Gris 300: 1,81, no cumple el 3:1). */ input:not([type="submit"]):not([type="button"]), select, textarea { border: 1px solid var(--wp--preset--color--texto-suave); border-radius: var(--kmd-radio-pequeno); padding: 10px 12px; font-family: inherit; font-size: inherit; } /* 1.4.12 Espaciado de texto: sin alturas fijas que corten el texto ampliado. */ :where(p, li, dd, dt, figcaption) { overflow-wrap: break-word; } /* 2.3.3 Respeta la preferencia de reducir movimiento del sistema. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 3. Utilidades de zona En una zona con segundo acento (en Puebla, Descubre: Terracota de superficie y Teja profunda para texto y botones), los enlaces y botones toman el acento de texto de esa zona. Fuera de zona mandan los estilos de theme.json. -------------------------------------------------------------------------- */ .zona-turistica :where(a:not(.wp-element-button)) { color: var(--kmd-acento-texto); } .zona-turistica :where(a:not(.wp-element-button)):hover { color: var(--wp--preset--color--titulo); } .zona-turistica .wp-element-button, .zona-turistica .wp-block-button__link { background-color: var(--kmd-acento-texto); color: var(--wp--preset--color--fondo); } .zona-turistica .wp-element-button:hover, .zona-turistica .wp-block-button__link:hover { background-color: var(--wp--preset--color--titulo); color: var(--wp--preset--color--fondo); }