, . */
/* Solo el margen vertical del párrafo: el lateral lo usa «.ek-cuenta» para
empujarse al extremo de la fila. */
.ek-paso .ek-bola,.ek-frente .ek-num,.ek-fam-cab .ek-cuenta,
.ek-arco .ek-marbete,.ek-foto-vacia{margin-block:0}
/* Una sección que ya viene precedida de su cabecera no repite el aire. */
.ek-sin-aire{padding-top:0}
/* Hueco de fotografía todavía sin imagen: el bloque vacío no ocupa. */
.ek-foto .wp-block-image:empty{display:none}
/* Menús del pie: el de secciones va en columna, el legal en línea. */
.ek-pie .ek-menu-legal{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px}
.ek-pie-barra .ek-menu-legal a{color:var(--tinta)}
/* Avisos del formulario. */
.ek-aviso{font-family:var(--f-uni);font-size:12.5px;line-height:1.5;padding:12px 16px;
border-radius:12px;margin-bottom:6px}
.ek-aviso--bien{background:var(--claro);color:var(--hondo)}
.ek-aviso--mal{background:#F7E7E2;color:var(--error)}
/* El caso de un proyecto: el titular es un enlace, no texto suelto. */
.ek-caso h2 a,.ek-ficha h2 a{color:inherit}
.ek-caso h2 a:hover,.ek-ficha h2 a:hover{color:var(--azul)}
.ek-caso-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Páginas montadas con Elementor: manda su propio ancho. */
.ek-elementor .ek-main{padding-inline:0}
/* La flecha del prototipo, que allí era un SVG dentro del botón. Como es
decoración, va en el CSS y no en el marcado que edita el cliente. */
.wp-block-button:not(.is-style-hueco) .wp-block-button__link::after,
.ek-btn:not(.ek-btn-hueco)::after{content:"→";font-size:1.05em;line-height:1;
transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){
.wp-block-button:not(.is-style-hueco) .wp-block-button__link:hover::after,
.ek-btn:not(.ek-btn-hueco):hover::after{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
.wp-block-button .wp-block-button__link:hover::after,
.ek-btn:hover::after{transform:none}
}
/* Variantes de bloque que registra inc/setup.php. */
.wp-block-group.is-style-panel{background:var(--panel);border-radius:var(--r-panel);
padding:clamp(24px,3.4vw,46px);box-shadow:var(--sombra-panel)}
.wp-block-list.is-style-verificado{column-count:2;column-gap:clamp(28px,3.5vw,56px);
padding-left:0;list-style:none}
.wp-block-list.is-style-verificado li{break-inside:avoid;position:relative;
padding:11px 0 11px 32px;font-size:.9375rem;
color:var(--tinta-2);line-height:1.55}
.wp-block-list.is-style-verificado li::before{content:"✓";position:absolute;left:0;top:12px;
width:20px;height:20px;border-radius:50%;
background:var(--claro);color:var(--hondo);
display:grid;place-items:center;font-size:11px;
font-weight:600;line-height:1}
@media (max-width:860px){.wp-block-list.is-style-verificado{column-count:1}}
/* Páginas a ancho completo: el aire lo pone el contenido, no la plantilla. */
.ek-main--ancho{padding-inline:0}
.ek-pagina--ancho > .ek-caja:first-child{padding-top:clamp(20px,2.6vw,34px)}
/* El teléfono va al final de la isla, tras el menú, como en el prototipo.
En el marcado aparece antes para que sea el primer enlace tras la marca
cuando se navega con teclado. */
.ek-cab-in .ek-tel{order:3}
/* ════════════════════════════════════════════════════════════════════
Márgenes de flujo de WordPress
Al pintar un grupo, WordPress le pone la clase «is-layout-flow» y mete
1,5 rem entre sus hermanos. Nuestras rejillas y paneles ya llevan su
propio gap y su propio relleno, así que ese margen se suma y descuadra
las filas: las cifras, los pasos y los frentes se separaban 24 px de más
y la portada crecía otro tanto.
Se quita en todo el armazón del tema. Las reglas propias que sí quieren
margen —«.ek-frente p», «.ek-familia + .ek-familia», la prosa editable—
llevan más especificidad y siguen mandando.
════════════════════════════════════════════════════════════════════ */
.ek-main :where(.wp-block-group,.wp-block-buttons,.wp-block-columns) > *{margin-block:0}
/* En el contenido que escribe el cliente sí hace falta aire entre bloques. */
.ek-prosa > * + *{margin-top:1.25em}
/* Sin relleno de raíz, una página de texto suelto —sin nuestras secciones—
necesita su propio ancho y su propio aire: si no, el texto toca el borde. */
.ek-pagina > :not(.ek-caja):not(.alignfull):not(.ek-main){
width:100%;max-width:820px;margin-inline:auto;
padding-inline:clamp(16px,4vw,44px)}
/* Dentro de la prosa, ancho completo y ancho extra ocupan la columna de
lectura: es lo predecible cuando la plantilla no impone una rejilla. */
.ek-prosa .alignwide,.ek-prosa .alignfull{width:auto;max-width:none;margin-inline:0}
/* El reajuste de arriba iguala en especificidad a las reglas propias que sí
piden margen, y al ir después las anulaba: la cabecera de sección perdía
sus 36 px contra el panel. Se reponen aquí, ya detrás del reajuste. */
.ek-main .ek-cabeza{margin-bottom:clamp(22px,3vw,36px)}
.ek-main .ek-acciones{margin-top:30px}
.ek-main .ek-brotes{margin-top:12px}
.ek-main .ek-medida{margin-top:22px}
.ek-main .ek-caso-banda{margin-top:clamp(14px,1.8vw,22px)}
.ek-main .ek-familia + .ek-familia,.ek-main .ek-caso + .ek-caso{margin-top:clamp(14px,1.8vw,22px)}
/* ── logotipo del sitio ──
Cada archivo llega con sus proporciones, así que lo que se fija es el alto
—ajustable en Personalizar → Identidad del sitio— y el ancho se calcula
solo. Sin esto, el logotipo entraba a su tamaño original y reventaba la
isla de la cabecera. */
.ek-marca .custom-logo-link{display:block;line-height:0}
.ek-marca .custom-logo{
height:var(--logo-alto,40px);width:auto;
max-width:min(240px,44vw);object-fit:contain;display:block}
.ek-pie .custom-logo{height:var(--logo-alto,40px);width:auto;max-width:200px;
object-fit:contain;display:block;margin-bottom:12px}
@media (max-width:720px){
.ek-marca .custom-logo{height:min(var(--logo-alto,40px),36px);max-width:52vw}
}
/* ── la lámina cede el sitio a la fotografía ──
Respaldo del script: aunque el lienzo siguiera puesto —imagen insertada en
caliente, script bloqueado—, en cuanto hay una fotografía dentro las hojas
dejan de verse. Era lo que tapaba la imagen de la portada. */
.ek-lamina:has(img) > canvas.ek-hojas{display:none}
.ek-arco .wp-block-image{position:absolute;inset:0;margin:0;z-index:1}
.ek-arco img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ek-arco .wp-block-image:empty{display:none}
/* ════════════════════════════════════════════════════════════════════
Carrusel de fotografías
Una tira que se desplaza de lado. El desplazamiento es el nativo del
navegador con anclaje: se arrastra con el dedo, rueda con el trackpad y
funciona igual si el script no llega —entonces son flechas menos, pero
la tira sigue moviéndose—. Las flechas y los puntos los añade ui.js.
════════════════════════════════════════════════════════════════════ */
.ek-carrusel{position:relative}
/* La pista es la galería del editor. Se estiliza el bloque nativo en lugar de
inventar un marcado propio: así las fotografías se añaden, se quitan y se
reordenan como en cualquier galería de WordPress, que es lo que el cliente
ya sabe hacer. */
.ek-carrusel .wp-block-gallery,.ek-pista-carrusel{
display:flex;flex-wrap:nowrap;gap:clamp(12px,1.5vw,20px);
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
padding-block:2px;margin-inline:-2px;padding-inline:2px}
.ek-carrusel .wp-block-gallery::-webkit-scrollbar,
.ek-pista-carrusel::-webkit-scrollbar{display:none}
/* Todas anclan por la izquierda: así la foto a la vista queda alineada con
el resto de la página y el salto de una a otra es exacto. */
.ek-carrusel .wp-block-gallery > figure,.ek-diapo{
flex:0 0 clamp(260px,58%,640px);scroll-snap-align:start;
height:clamp(200px,26vw,380px);margin:0;
border-radius:var(--r-tarjeta);overflow:hidden;background:var(--fondo-2);
box-shadow:var(--sombra-chica)}
.ek-carrusel .wp-block-gallery > figure img{
width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ek-carrusel .wp-block-gallery > figure figcaption{
position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 16px 12px;
font-size:12.5px;color:#FFFFFF;background:none;
background-image:linear-gradient(180deg,rgba(31,59,92,0),rgba(31,59,92,.62))}
/* Sin fotografías: el aviso que solo ve quien puede subirlas. */
.ek-carrusel--vacio{border:1px dashed var(--suave);border-radius:var(--r-tarjeta);
background:var(--fondo-2);padding:clamp(24px,3vw,40px);text-align:center}
.ek-carrusel--vacio p{font-family:var(--f-uni);font-size:12.5px;line-height:1.6;
color:var(--hondo);max-width:52ch;margin-inline:auto}
/* Flechas: mismo cristal que los rótulos de las láminas. */
.ek-flecha-carrusel{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(160%);
box-shadow:var(--sombra-flotante), inset 0 1px 0 rgba(255,255,255,.8);
color:var(--hondo);
transition:transform .18s var(--sale),opacity .18s ease,background .18s ease}
.ek-flecha-carrusel[hidden]{display:none}
.ek-flecha-carrusel:disabled{opacity:.34;pointer-events:none}
.ek-flecha-carrusel--antes{left:clamp(6px,1vw,14px)}
.ek-flecha-carrusel--luego{right:clamp(6px,1vw,14px)}
/* Puntos: cuántas hay y en cuál se está. */
.ek-puntos-carrusel{
display:flex;justify-content:center;gap:8px;margin-top:clamp(14px,1.6vw,20px)}
.ek-puntos-carrusel button{
width:9px;height:9px;border-radius:50%;padding:0;
background:var(--suave);transition:background .2s ease,transform .2s var(--sale)}
.ek-puntos-carrusel button[aria-current="true"]{background:var(--hondo);transform:scale(1.28)}
@media (hover:hover) and (pointer:fine){
.ek-flecha-carrusel:hover{background:#FFFFFF;transform:translateY(-50%) scale(1.06)}
.ek-puntos-carrusel button:hover{background:var(--medio)}
}
/* Con el dedo, el propio arrastre es la forma natural de pasar: las flechas
estorban más que ayudan y los puntos suben a 44 px de objetivo. */
@media (pointer:coarse){
.ek-flecha-carrusel{display:none}
.ek-puntos-carrusel button{width:44px;height:44px;border-radius:999px;background:transparent;
display:grid;place-items:center}
.ek-puntos-carrusel button::before{content:"";width:9px;height:9px;border-radius:50%;
background:var(--suave);transition:background .2s ease}
.ek-puntos-carrusel button[aria-current="true"]{transform:none;background:transparent}
.ek-puntos-carrusel button[aria-current="true"]::before{background:var(--hondo);transform:scale(1.28)}
}
@media (max-width:820px){
.ek-diapo{flex-basis:min(86%,420px);height:clamp(190px,52vw,300px)}
}
@media (prefers-reduced-motion:reduce){
.ek-pista-carrusel{scroll-behavior:auto}
.ek-flecha-carrusel:hover{transform:translateY(-50%)}
.ek-puntos-carrusel button{transition:none}
}
@media (prefers-reduced-transparency:reduce){
.ek-flecha-carrusel{background:#FFFFFF;backdrop-filter:none}
}
@media (prefers-contrast:more){
.ek-flecha-carrusel{background:#FFFFFF;backdrop-filter:none;border:1px solid var(--hondo);
box-shadow:none}
.ek-puntos-carrusel button{border:1px solid var(--hondo)}
}
/* ════════════════════════════════════════════════════════════════════
Formulario: que nada empuje la página a lo ancho
Un elemento de rejilla o de caja flexible arranca con «min-width:auto»,
es decir, no puede encogerse por debajo de su contenido. La opción más
larga del desplegable —«Estudios propios (plantas de tratamiento…)»—
medía 637 px y arrastraba consigo al formulario entero: en un teléfono
de 390 px la página se desplazaba de lado.
════════════════════════════════════════════════════════════════════ */
.ek-cont > *,.ek-dos > *,.ek-form > *,.ek-campo,.ek-lado-cont > *{min-width:0}
.ek-campo input,.ek-campo select,.ek-campo textarea{width:100%;max-width:100%}
/* El desplegable recorta la opción larga en lugar de estirarse. */
.ek-campo select{text-overflow:ellipsis}
/* El campo trampa está fuera de la vista, pero si algún estilo lo sacara,
que no provoque el acercamiento de Safari al enfocarlo. */
.screen-reader-text input{font-size:16px}
/* Con el dedo, el correo y el teléfono del panel son destino de toque. */
@media (pointer:coarse){
.ek-dblq a{display:inline-block;padding-block:12px}
}
/* ── el fondo de hojas, apagable ──
Personalizar → Eklektos · Datos de contacto → «Dibujar el fondo de hojas».
Va por clase del documento para que valga igual con el script bloqueado, y
se asegura aquí que ninguna lámina se pinte encima de una fotografía. */
.ek-sin-hojas canvas.ek-hojas{display:none}
.ek-lamina:has(img) > canvas.ek-hojas{display:none}
.ek-lamina:has(img){background:var(--fondo-2)}
/* ── pie por áreas de bloques ──
Cada columna del pie es un área de widgets que se edita con bloques. Los
bloques traen sus propias clases, así que el pie tiene que vestir lo que
caiga dentro: listas, párrafos, menús de navegación e imágenes. */
.ek-pie-bloque > :first-child{margin-top:0}
.ek-pie .ek-pie-bloque h1,.ek-pie .ek-pie-bloque h2,
.ek-pie .ek-pie-bloque h3,.ek-pie .ek-pie-bloque h4,
.ek-pie .wp-block-heading{
font-family:var(--f-uni);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--tinta);font-weight:600;margin-bottom:13px;line-height:1.3}
.ek-pie .wp-block-page-list,.ek-pie .wp-block-navigation__container,
.ek-pie .ek-pie-bloque ul{display:flex;flex-direction:column;gap:7px;list-style:none;
padding:0;margin:0}
.ek-pie .wp-block-navigation{display:block}
.ek-pie .ek-pie-bloque p{margin-bottom:0}
.ek-pie .ek-pie-bloque p + p{margin-top:8px}
.ek-pie .ek-pie-bloque img{max-width:min(200px,100%);height:auto}
/* ── vista previa de los bloques del tema dentro del editor ──
El formulario y el panel de datos se pintan en el servidor, así que en el
editor se ve lo mismo que se publica. Se desactiva el puntero para que al
pulsar se seleccione el bloque en lugar de escribir en un campo. */
.ek-vista-bloque{pointer-events:none}
.editor-styles-wrapper .ek-vista-bloque .ek-form{margin:0}
/* ════════════════════════════════════════════════════════════════════
Blog
════════════════════════════════════════════════════════════════════ */
/* La tarjeta empieza por la imagen, que es lo que se mira primero. */
.ek-ficha .ek-foto{display:block;aspect-ratio:16/10;margin-bottom:4px;
border-radius:var(--r-tarjeta)}
.ek-ficha .ek-foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ek-ficha .ek-seguir{font-family:var(--f-uni);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--azul);margin-top:auto;padding-top:4px}
.ek-ficha .ek-seguir::after{content:" →"}
/* Imagen de cabecera de la publicación. */
.ek-portada-entrada{aspect-ratio:16/7;margin-bottom:clamp(14px,1.8vw,22px)}
.ek-portada-entrada img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
/* Dentro del artículo, la imagen manda: ancha y con su pie. */
.ek-prosa .wp-block-image{margin-block:1.8em}
.ek-prosa .wp-block-image img{width:100%;height:auto}
.ek-prosa .wp-block-image:empty{min-height:clamp(180px,24vw,320px);background:var(--fondo-2);
border-radius:var(--r-tarjeta);display:block}
@media (hover:hover) and (pointer:fine){
.ek-ficha:hover .ek-seguir{text-decoration:underline;text-underline-offset:.2em}
}
/* ════════════════════════════════════════════════════════════════════
Nosotros
════════════════════════════════════════════════════════════════════ */
/* Trayectoria: una columna de años a la izquierda y el relato a la derecha,
unidos por una línea continua. */
.ek-hitos{display:flex;flex-direction:column}
.ek-hito{display:grid;grid-template-columns:110px minmax(0,1fr);
gap:clamp(14px,2.4vw,36px);padding-block:clamp(18px,2.2vw,26px);
position:relative}
.ek-hito + .ek-hito{border-top:1px solid var(--claro)}
.ek-hito .ek-anio{font-family:var(--f-uni);font-size:13px;letter-spacing:.06em;
color:var(--hondo);padding-top:4px;position:relative}
.ek-hito .ek-anio::before{content:"";position:absolute;right:-1px;top:0;bottom:calc(-1 * clamp(18px,2.2vw,26px));
width:1px;background:var(--suave)}
.ek-hito:last-child .ek-anio::before{display:none}
.ek-hito h3{font-size:1.19rem}
.ek-hito p{font-size:.9375rem;color:var(--tinta-2);margin-top:8px;max-width:58ch}
@media (max-width:640px){
.ek-hito{grid-template-columns:1fr;gap:6px}
.ek-hito .ek-anio::before{display:none}
}
/* El consultor: una sola ficha, con el retrato a un lado. Es una persona
concreta y no una rejilla de caras, así que ocupa el ancho del panel. */
.ek-consultor{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:clamp(20px,3vw,44px);align-items:start}
.ek-consultor .ek-retrato{aspect-ratio:1}
.ek-consultor .ek-retrato img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ek-consultor h3{font-size:clamp(1.31rem,2.4vw,1.75rem)}
.ek-consultor .ek-cargo{font-family:var(--f-uni);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--hondo);margin:8px 0 0}
.ek-consultor p{font-size:.9375rem;color:var(--tinta-2);margin-top:14px;max-width:58ch}
@media (max-width:720px){.ek-consultor{grid-template-columns:1fr}
.ek-consultor .ek-retrato{max-width:260px}}
/* Socios comerciales: son empresas, así que mandan el logotipo y lo que
aportan, no un retrato. */
.ek-socios{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.ek-socio{display:flex;flex-direction:column;gap:10px;background:var(--panel);
border-radius:var(--r-tarjeta);padding:clamp(20px,2.2vw,28px);
box-shadow:var(--sombra-chica)}
/* El hueco del logotipo acepta cualquier proporción sin recortar: un
logotipo de Canva sale cuadrado —500 × 500 de fábrica— y antes se quedaba
limitado a 56 px de alto, ridículo al lado de uno apaisado. Ahora la caja
tiene una altura cómoda y la imagen se ajusta dentro, tocando el alto si es
cuadrada y el ancho si es alargada.
El fondo va blanco con un filete: así un PNG con transparencia y un JPG con
fondo blanco —los dos formatos que exporta Canva— se ven igual de limpios,
sin el recuadro que dejaría un fondo de color. */
.ek-socio-logo{display:grid;place-items:center;position:relative;
min-height:clamp(128px,15vw,168px);
padding:clamp(16px,2vw,24px);
background:var(--panel);border:1px solid var(--claro);border-radius:12px}
.ek-socio-logo .wp-block-image{margin:0;width:100%;height:100%;display:grid;place-items:center}
.ek-socio-logo .wp-block-image:empty{display:none}
.ek-socio-logo img{max-width:100%;max-height:clamp(96px,11vw,120px);
width:auto;height:auto;object-fit:contain;border-radius:0}
.ek-logo-vacio{font-family:var(--f-uni);font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--apagado);margin:0}
.ek-socio-logo:has(img) .ek-logo-vacio{display:none}
.ek-socio h3{font-size:1.19rem;margin-top:4px}
.ek-socio > p{font-size:.9375rem;color:var(--tinta-2)}
.ek-socio .ek-etiquetas{margin-top:2px}
@media (max-width:640px){.ek-socios{grid-template-columns:1fr}}
/* Logotipos de clientes y certificaciones: mismo alto, aire alrededor. */
.ek-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px);
align-items:center}
.ek-logos .wp-block-image{margin:0;display:grid;place-items:center;
min-height:clamp(84px,9vw,104px);
background:var(--panel);border:1px solid var(--claro);
border-radius:12px;padding:14px}
.ek-logos .wp-block-image img{max-width:100%;max-height:clamp(56px,6vw,72px);
width:auto;height:auto;object-fit:contain;border-radius:0}
@media (max-width:860px){.ek-logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.ek-logos{grid-template-columns:repeat(2,1fr)}}
/* Toda la tarjeta es el enlace: en un teléfono, el título a dos líneas cortas
se queda en 42 px de alto y eso es poco para el dedo. El enlace del título
se estira sobre la tarjeta entera; la imagen no lleva enlace propio para
que no haya dos destinos superpuestos ni dos paradas de teclado. */
.ek-ficha{position:relative}
.ek-ficha h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-tarjeta)}
.ek-ficha h2 a:focus-visible::after{outline:2px solid var(--azul);outline-offset:3px}