/* Zonabierta - acabado sobre widgets nativos. Sin HTML en el contenido. */
:root{--zb-bg:#0A0A0B;--zb-surf:#141416;--zb-ink:#F4F4F5;--zb-acc:#FFF;--zb-mut:#8A8A93;--zb-hair:#2A2A2E;--zb-ctrl:#606066}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--zb-bg);scrollbar-width:none;-ms-overflow-style:none}
body::-webkit-scrollbar{width:0;height:0;display:none}
/* medida del contenedor, como .wrap */
.elementor-13 .e-con-boxed>.e-con-inner{max-width:1140px}
/* PROPORCIONES: en el HTML las fotos van recortadas, no a tamano natural */
.elementor-widget-image img{display:block;width:100%;height:auto;border-radius:2px;
transition:transform .7s cubic-bezier(.22,.9,.24,1)}
.elementor-widget-image .elementor-widget-container{overflow:hidden;border-radius:2px}
.elementor-widget-image:hover img{transform:scale(1.04)}
#propuesta-valor .elementor-widget-image img,
#para-quien-es .elementor-widget-image img,
#servicios .elementor-widget-image img,
#trabajo .elementor-widget-image img,
#equipo-tecnico .elementor-widget-image img{aspect-ratio:1/1;object-fit:cover}
#el-espacio .elementor-widget-image img,
#escenografia .elementor-widget-image img,
#quienes-somos .elementor-widget-image img,
#faq .elementor-widget-image img,
#contacto .elementor-widget-image img{aspect-ratio:3/4;object-fit:cover}
#casos .elementor-widget-image img{aspect-ratio:4/5;object-fit:cover}
/* VIDEO: mismo criterio */
.elementor-widget-video .elementor-wrapper{border-radius:2px;overflow:hidden;height:auto!important;padding-bottom:0!important}
.elementor-widget-video .elementor-wrapper video,
.elementor-widget-video .elementor-wrapper iframe{position:static!important;width:100%;height:100%;object-fit:cover;display:block}
#inicio .elementor-widget-video .elementor-wrapper{aspect-ratio:16/9}
#escenografia .elementor-widget-video .elementor-wrapper{aspect-ratio:3/4}
#trabajo .elementor-widget-video .elementor-wrapper{aspect-ratio:9/16}
.elementor-widget-video .elementor-custom-embed-image-overlay{position:absolute;inset:0}
.elementor-widget-video .elementor-custom-embed-image-overlay img{width:100%;height:100%;object-fit:cover}
/* filete entre secciones, como en el prototipo */
#propuesta-valor,#escenografia,#equipo-tecnico,#servicios,#como-funciona,#para-quien-es,
#quienes-somos,#trabajo,#casos,#precios,#prueba-social,#faq,#contacto{border-top:1px solid var(--zb-hair)}
#equipo-tecnico,#servicios,#como-funciona,#para-quien-es,#quienes-somos,#trabajo,#casos,
#precios,#prueba-social,#faq,#contacto,#footer{position:relative;z-index:6;background-color:var(--zb-bg)}
#cabecera{z-index:100}
/* La marquesina falsa (un heading duplicado a mano con la animacion zbT) se
retiro el 2026-08-12: ahora esa banda la ocupa #cinta-publicos, con items
editables. La regla vieja seguia viva y aplicaba zbT a CADA rotulo por
separado, desplazando cada uno hasta un -50% de SU PROPIO ancho: por eso los
huecos salian desiguales (20px en unos, 40 en otros). */
#marquesina{overflow:hidden}
/* seccion clara */
#el-espacio .elementor-heading-title{color:var(--zb-bg)}
#el-espacio .elementor-widget-text-editor{color:var(--zb-ctrl)}
#el-espacio{border-top-color:#D2D2D6}
/* precios: la destacada se eleva */
#precios .e-con-full:nth-child(2){border-color:var(--zb-acc)!important}
/* FAQ */
.elementor-accordion .elementor-accordion-item{border-color:var(--zb-hair)!important;border-left:0!important;border-right:0!important;border-top:0!important}
.elementor-accordion .elementor-tab-title{padding:22px 0!important}
.elementor-accordion .elementor-tab-content{padding:0 0 22px!important;border:0!important}
/* formulario */
.elementor-widget-form .elementor-field-textual{min-height:52px;padding:0 14px;border-radius:2px!important;
background:var(--zb-bg)!important;color:var(--zb-ink)!important;border:1px solid var(--zb-ctrl)!important;
-webkit-appearance:none;appearance:none}
.elementor-widget-form textarea.elementor-field-textual{padding:14px;min-height:125px}
.elementor-widget-form input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55}
.elementor-widget-form .elementor-button{min-height:52px}
/* cabecera pegajosa translucida */
#cabecera{backdrop-filter:blur(12px)}
/* ZB-GEOM ====================================================
Cabecera y Film van los dos fijos y comparten un unico origen:
cambiar --zb-header-h los mueve a la vez sin descuadrarse.
85px = 16 padding + 52 boton + 16 padding + 1 filete.
============================================================ */
:root{
--zb-header-h:85px;
--zb-film-inset:clamp(16px,2.4vw,32px);
}
#cabecera{min-height:var(--zb-header-h)}
#film{
top:var(--zb-header-h)!important;
right:0!important;bottom:0!important;left:0!important;
width:auto!important;height:auto!important;
--min-height:0px;
--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;
--padding-top:var(--zb-film-inset);--padding-bottom:var(--zb-film-inset);
--padding-left:var(--zb-film-inset);--padding-right:var(--zb-film-inset);
--justify-content:center;--align-items:stretch;
}
#film>.e-con{--min-height:0px;width:100%;height:100%;--justify-content:space-between;--align-items:stretch}
/* Film es decorativa entera: sin esto captura todos los clics del viewport. */
#film,#film *{pointer-events:none}
/* Cinta de servicios -----------------------------------------
Swiper trae easing por defecto; en linear se lee como banda
continua. Y cada bloque ocupa lo que mide su texto, no un
tercio fijo del contenedor (el ancho real lo fija el JS que
pone slidesPerView:'auto'; esto es la mitad de CSS).
------------------------------------------------------------ */
#cinta-servicios{width:100%}
#cinta-servicios .swiper-wrapper{transition-timing-function:linear!important}
#cinta-servicios .swiper{overflow:hidden}
#cinta-servicios .swiper-slide{width:auto!important;flex-shrink:0}
#cinta-servicios .swiper-slide>.e-con{width:auto;--width:auto;--padding-left:0px;--padding-right:0px}
#cinta-servicios .elementor-heading-title{white-space:nowrap;padding:0 clamp(14px,1.8vw,30px)}
/* El encuadre de camara no se ve en estas dos secciones ------------
Film es position:fixed con z-index:10. No se puede "apagar" por
seccion desde Elementor, pero si taparlo: basta con que la seccion
cree su propio contexto de apilamiento por encima. Las dos ya tienen
fondo opaco (#F4F4F5 y #0A0A0B), asi que lo ocultan al pasar por
delante. La cabecera (z-index 100) sigue por encima de todo.
Mismo patron que usaba .sobre-grano con la capa de grano.
------------------------------------------------------------------ */
#el-espacio,#escenografia{position:relative;z-index:11}
/* Slider de sets ---------------------------------------------------
Bucle continuo: autoplay_speed 1 + speed alto + timing lineal. Sin
el lineal, Swiper aplica su easing y se lee como pasos, no como
desplazamiento. Las tres slides miden lo mismo, asi que aqui la
velocidad ya es constante y no hace falta calcularla por JS.
Los bordes se funden con el fondo de la seccion (#0A0A0B) para que
las tarjetas no aparezcan y desaparezcan de golpe contra el corte.
------------------------------------------------------------------ */
#sets-slider .swiper-wrapper{transition-timing-function:linear!important}
#sets-slider{position:relative}
#sets-slider .swiper{overflow:hidden}
#sets-slider::before,
#sets-slider::after{
content:"";
position:absolute;
top:0;bottom:0;
width:clamp(36px,7vw,132px);
z-index:2;
pointer-events:none;
}
#sets-slider::before{left:0;background:linear-gradient(to right,#0A0A0B 0%,rgba(10,10,11,0) 100%)}
#sets-slider::after{right:0;background:linear-gradient(to left,#0A0A0B 0%,rgba(10,10,11,0) 100%)}
@media (prefers-reduced-motion:reduce){
#sets-slider .swiper-wrapper{transition-duration:0ms!important}
}
/* Servicios como en index.html --------------------------------------
El prototipo usa .numbered--media: una retícula de 4 columnas por
fila (número · miniatura · título · texto) con filete inferior, no
tarjetas en 3 columnas. Los hijos ya van reordenados en
_elementor_data, así que el grid los coloca por orden.
Se targetea por ID de elemento y no por clase propia: Elementor no
vuelca _css_classes al class de los contenedores.
-------------------------------------------------------------------- */
/* 0a2aeab: la misma lista numerada, dentro de #para-quien-es (2026-08-17).
Al copiar la fila hay que copiar tambien su CSS: la reticula va por ID de
elemento, no por clase, asi que una replica sin esto sale sin formato. */
.elementor-element-13c0dc1,.elementor-element-0a2aeab{border-top:1px solid #2A2A2E}
.elementor-element-13c0dc1>.e-con,.elementor-element-0a2aeab>.e-con{
display:grid!important;
grid-template-columns:56px 104px 1fr minmax(0,28ch);
gap:32px;
align-items:center;
padding-block:32px;
border-bottom:1px solid #2A2A2E;
transition:padding-left .35s cubic-bezier(.2,.6,.2,1);
}
.elementor-element-13c0dc1>.e-con:hover,.elementor-element-0a2aeab>.e-con:hover{padding-left:16px}
.elementor-element-13c0dc1>.e-con>.elementor-widget-image,.elementor-element-0a2aeab>.e-con>.elementor-widget-image{aspect-ratio:1;border:1px solid #2A2A2E;border-radius:2px;overflow:hidden;background:#141416}
.elementor-element-13c0dc1>.e-con>.elementor-widget-image img,.elementor-element-0a2aeab>.e-con>.elementor-widget-image img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){
.elementor-element-13c0dc1>.e-con,.elementor-element-0a2aeab>.e-con{grid-template-columns:56px 72px 1fr;gap:20px}
.elementor-element-13c0dc1>.e-con>.elementor-widget-text-editor,.elementor-element-0a2aeab>.e-con>.elementor-widget-text-editor{grid-column:2/-1}
}
@media(max-width:560px){
/* Movil (2026-08-19): la fila pasa a columna. Fila 1 el numero, fila 2
miniatura + titulo, fila 3 el parrafo. Antes la miniatura iba a
display:none y el cliente la quiere visible en telefono. */
.elementor-element-13c0dc1>.e-con,.elementor-element-0a2aeab>.e-con{grid-template-columns:84px minmax(0,1fr);gap:12px 16px;padding-block:24px}
.elementor-element-13c0dc1>.e-con>.elementor-widget-heading:first-child,.elementor-element-0a2aeab>.e-con>.elementor-widget-heading:first-child{grid-column:1/-1}
.elementor-element-13c0dc1>.e-con>.elementor-widget-image,.elementor-element-0a2aeab>.e-con>.elementor-widget-image{display:block;grid-column:1}
.elementor-element-13c0dc1>.e-con>.elementor-widget-text-editor,.elementor-element-0a2aeab>.e-con>.elementor-widget-text-editor{grid-column:1/-1}
}
/* HOVER-CARDS-INI */
/* Fondo blanco y texto negro al pasar el raton en propuesta de valor; al reves en
el-espacio. Va por CSS porque los ajustes de contenedor de Elementor no alcanzan
al texto de los widgets hijos en :hover. Todo a 0.3 s.
Ojo: los rotulos van en un heading con etiqueta div, de ahi .elementor-heading-title. */
#propuesta-valor .elementor-element-c922e83,#propuesta-valor .elementor-element-993f17a,#propuesta-valor .elementor-element-3bc62f3,#propuesta-valor .elementor-element-1c83f47,#el-espacio .elementor-element-b155ecc,#el-espacio .elementor-element-4bd566f,#el-espacio .elementor-element-18ff9cf{transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
#propuesta-valor .elementor-element-c922e83 *,#propuesta-valor .elementor-element-993f17a *,#propuesta-valor .elementor-element-3bc62f3 *,#propuesta-valor .elementor-element-1c83f47 *,#el-espacio .elementor-element-b155ecc *,#el-espacio .elementor-element-4bd566f *,#el-espacio .elementor-element-18ff9cf *{transition:color .3s ease,opacity .3s ease,transform .3s ease}
#propuesta-valor .elementor-element-c922e83:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor),#propuesta-valor .elementor-element-993f17a:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor),#propuesta-valor .elementor-element-3bc62f3:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor),#propuesta-valor .elementor-element-1c83f47:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor){color:#0A0A0B}
#el-espacio .elementor-element-b155ecc:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor),#el-espacio .elementor-element-4bd566f:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor),#el-espacio .elementor-element-18ff9cf:hover :where(h1,h2,h3,h4,h5,h6,p,span,a,li,strong,em,.elementor-heading-title,.elementor-widget-text-editor){color:#F4F4F5}
#edicion .e-con{transition:background-color .3s ease,border-color .3s ease}
#edicion .e-con *{transition:color .3s ease,opacity .3s ease}
/* HOVER-CARDS-FIN */
/* SHORTS-FORM-INI */
/* Cinta de clips ------------------------------------------------------------
Portadas 9:16 nativas (405x720), servidas a tamano completo: es el techo que
da la fuente. Continuo por timing lineal. Sin fundido en los extremos.
Al pasar el raton se congela: Swiper para el autoplay, pero la transicion en
curso seguiria; por eso ademas se fija la duracion a 0 y se sostiene la
posicion actual. */
#shorts-slider .swiper-wrapper{transition-timing-function:linear!important}
#shorts-slider .swiper{overflow:hidden}
#shorts-slider::before,#shorts-slider::after{content:none!important;display:none!important}
#shorts-slider{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
#shorts-slider .elementor-image-carousel-wrapper{box-shadow:none}
#shorts-slider img{aspect-ratio:9/16;object-fit:cover;width:100%;height:auto;display:block;box-shadow:none;image-rendering:auto}
#trabajo{overflow-x:clip}
@media(prefers-reduced-motion:reduce){#shorts-slider .swiper-wrapper{transition-duration:0ms!important}}
/* Cinta de clientes: mismo trato que la de servicios. Cada bloque ocupa lo que
mide su texto y va seguido del siguiente, sin saltos ni huecos. */
#cinta-clientes{width:100%}
#cinta-clientes .swiper-wrapper{transition-timing-function:linear!important}
#cinta-clientes .swiper{overflow:hidden}
#cinta-clientes .swiper-slide{width:auto!important;flex-shrink:0}
#cinta-clientes .swiper-slide>.e-con{width:auto;--width:auto;--padding-left:0px;--padding-right:0px}
@media(prefers-reduced-motion:reduce){#cinta-clientes .swiper-wrapper,#cinta-servicios .swiper-wrapper{transition-duration:0ms!important}}
/* Cards de edicion: solo cambia el color del velo, sin desplazamiento ni escala. */
#edicion .e-con:hover{transform:none!important}
#edicion .elementor-widget-image:hover img{transform:none!important}
/* Formulario: aire entre rotulo y campo y entre campos; el boton invierte. */
#contacto .elementor-field-group>label.elementor-field-label{margin-bottom:10px;display:block}
#contacto .elementor-form-fields-wrapper{row-gap:28px}
#contacto .elementor-field-group{margin-bottom:0}
#contacto .elementor-field-type-acceptance{margin-top:6px}
#contacto .elementor-button[type=submit]{transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
#contacto .elementor-button[type=submit]:hover,#contacto .elementor-button[type=submit]:focus-visible{background-color:#0A0A0B;color:#FFFFFF;box-shadow:inset 0 0 0 1px #FFFFFF}
/* SHORTS-FORM-FIN */
/* HERO-MOVIL-INI */
/* En movil el hero no reproduce video, asi que Elementor pinta el respaldo del
video, que es 16:9. Con fondo de tipo 'video' ignora background_image_mobile,
de ahi que la vertical se imponga aqui. El respaldo 16:9 se conserva para
escritorio, que es donde tendria sentido si el video fallara.
Y el velo, porque la foto llega sin oscurecer y el titular no se leia. */
@media(max-width:767px){
#inicio{position:relative;isolation:isolate;
background-image:url('https://zonabierta.com/wp-content/uploads/2026/08/hero-movil-9-16-zonabierta.webp')!important;
background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
#inicio::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.78) 100%);z-index:0;pointer-events:none}
#inicio>*{position:relative;z-index:1}
}
/* HERO-MOVIL-FIN */
/* --- "Asi trabajamos contigo" al estilo del build estatico ------------------
El numero va hueco (relleno transparente + trazo de 1px) y se rellena en
blanco al pasar por encima; el rail se prolonga hasta el paso siguiente y su
linea se dibuja de izquierda a derecha cuando el paso entra en pantalla.
Nada de esto lo dan los controles de Elementor: -webkit-text-stroke y el
trazo animado no existen en el panel. El disparo por scroll se engancha a la
clase .animated que Elementor ya pone con la animacion de entrada, asi que no
hace falta JS propio. */
#como-funciona .zb-flow-step{position:relative}
#como-funciona .zb-flow-n{position:relative;padding-bottom:34px}
#como-funciona .zb-flow-n .elementor-heading-title{color:transparent;-webkit-text-stroke:1px #606066;transition:color .45s cubic-bezier(.2,.7,.2,1),-webkit-text-stroke-color .45s cubic-bezier(.2,.7,.2,1)}
#como-funciona .zb-flow-step:hover .zb-flow-n .elementor-heading-title{color:#FFFFFF;-webkit-text-stroke-color:#FFFFFF}
#como-funciona .zb-flow-n::before,#como-funciona .zb-flow-n::after{content:'';position:absolute;left:0;right:-28px}
#como-funciona .zb-flow-n::before{bottom:14px;height:7px;background-image:radial-gradient(circle at 3.5px 50%,#8A8A93 3.5px,rgba(0,0,0,0) 3.6px),linear-gradient(to right,#2A2A2E,#2A2A2E);background-size:7px 7px,100% 1px;background-position:left center,left center;background-repeat:no-repeat}
#como-funciona .zb-flow-step:hover .zb-flow-n::before{background-image:radial-gradient(circle at 3.5px 50%,#FFFFFF 5px,rgba(0,0,0,0) 5.1px),linear-gradient(to right,#2A2A2E,#2A2A2E)}
#como-funciona .zb-flow-n::after{bottom:17px;height:1px;background:#F4F4F5;transform:scaleX(0);transform-origin:left center;transition:transform .85s cubic-bezier(.2,.7,.2,1)}
#como-funciona .zb-flow-step.animated .zb-flow-n::after{transform:scaleX(1)}
#como-funciona .zb-flow-step:last-child .zb-flow-n::before,#como-funciona .zb-flow-step:last-child .zb-flow-n::after{right:0}
@media(max-width:1024px){#como-funciona .zb-flow-n::before,#como-funciona .zb-flow-n::after{right:0}}
/* Cinta de publicos (bajo el hero): mismo trato que la de servicios y la de
clientes. El widget por si solo NO basta: sin estas reglas cada bloque ocupa
el ancho entero y la banda se ve vacia. */
#cinta-publicos{width:100%}
#cinta-publicos .swiper-wrapper{transition-timing-function:linear!important}
#cinta-publicos .swiper{overflow:hidden}
#cinta-publicos .swiper-slide{width:auto!important;flex-shrink:0}
#cinta-publicos .swiper-slide>.e-con{width:auto;--width:auto;--padding-left:0px;--padding-right:0px}
#cinta-publicos .elementor-heading-title{white-space:nowrap;padding:0 clamp(14px,1.8vw,30px)}
@media(prefers-reduced-motion:reduce){#cinta-publicos .swiper-wrapper{transition-duration:0ms!important}}
/* La cinta se mueve por CSS, no con el autoplay de Swiper -------------------
Con autoplay_speed=1 Swiper se re-dispara cada milisegundo y cancela su
propia transicion: el wrapper acaba con transition-duration:0ms en linea y
la cinta no avanza ni un pixel (running:true, paused:true). Ademas, si la
pista cabe entera en el visor Swiper la bloquea (isLocked) y no hay nada que
hacer. El script destruye la instancia, duplica los bloques y deja que la
animacion de abajo haga el recorrido: el -50% cierra el bucle sin salto.
Los items siguen siendo widgets de Elementor, o sea editables desde el panel. */
#cinta-publicos .swiper-wrapper.zb-cinta{display:flex;flex-wrap:nowrap;width:max-content;transition:none;animation:zbCinta 42s linear infinite;will-change:transform}
#cinta-publicos .swiper-wrapper.zb-cinta>.swiper-slide{width:auto!important;flex:0 0 auto}
@keyframes zbCinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#cinta-publicos .swiper-wrapper.zb-cinta{animation:none}}
/* Areas tactiles del formulario (revision movil/tablet 2026-08-12) -----------
zb-tactil: la casilla del RGPD mediía 13x13 px y el boton de envio 40 px de
alto, los dos por debajo del minimo. La regla previa de min-height no llegaba
al boton por especificidad, de ahi el selector con #contacto. */
#contacto .elementor-field-type-submit .elementor-button{min-height:52px;padding-top:0;padding-bottom:0}
#contacto .elementor-field-type-acceptance{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0}
#contacto .elementor-field-type-acceptance input[type=checkbox]{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:#FFFFFF;cursor:pointer}
#contacto .elementor-field-type-acceptance label{cursor:pointer;line-height:1.5;padding:2px 0}
/* zb-tactil fin */
/* Las 4 cards de #edicion llevan a Instagram ---------------------------------
El ajuste de enlace del CONTENEDOR se guarda pero PRO Elements no lo pinta
como , asi que el enlace va en el titular y se estira por encima de la
card con un ::after. Asi el area clicable es la tarjeta entera y el enlace
sigue siendo un de verdad, con su texto, para teclado y lector. */
/* Color del enlace fijado a fuego en TODOS los estados. Con color:inherit
bastaba en teoria, pero cualquier navegador que se quede con una copia vieja
de esta hoja pinta el con su azul por defecto. Es el mismo #F4F4F5 que
ya tenia el titular antes de ser enlace, asi que no cambia nada a la vista. */
#edicion .zb-card-ig .elementor-heading-title a,#edicion .zb-card-ig .elementor-heading-title a:link,#edicion .zb-card-ig .elementor-heading-title a:visited,#edicion .zb-card-ig .elementor-heading-title a:hover,#edicion .zb-card-ig .elementor-heading-title a:focus,#edicion .zb-card-ig .elementor-heading-title a:active{color:#F4F4F5!important;text-decoration:none}
/* El ::after se ancla al ancestro posicionado mas cercano, y en Elementor lo son
TODOS los contenedores y widgets: sin esto el area clicable se quedaba en el
titular (520x128) en vez de cubrir la card (560x605). Los dos intermedios no
tienen pseudoelementos, asi que pasarlos a static no rompe nada; el que si
tiene el velo oscuro y la foto conserva su position:relative y pasa a ser el
ancla, que mide exactamente lo que la card. */
#edicion .zb-card-ig-wrap,#edicion .zb-card-ig{position:static}
#edicion .zb-card-ig .elementor-heading-title a::after{content:'';position:absolute;inset:0;z-index:5}
#edicion .zb-card-ig .elementor-heading-title a:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
#edicion .zb-card-ig{cursor:pointer}
/* El velo de la card, por debajo del texto ----------------------------------
El velo es el ::before del contenedor de la foto, o sea un elemento POSICIONADO,
y en el orden de pintado eso va por encima del texto en flujo. Mientras el widget
del titular estuvo en position:relative se compensaba solo; al pasarlo a static
(para que el enlace cubra la card entera) el texto cayo por debajo del velo: en
reposo se traslucia y en hover, con el cian solido al 100%, desaparecia.
Se baja el velo con z-index:-1, y el contenedor recibe z-index:0 para crear
contexto de apilamiento propio; si no, el velo se iria detras del fondo de la
card y dejaria de verse. Resultado: foto -> velo -> texto. */
#edicion .zb-card-foto{z-index:0}
#edicion .zb-card-foto::before{z-index:-1}
/* Cinta de clientes: misma receta que #cinta-publicos (2026-08-13) ----------
Estaba congelada desde el 12-08 porque Swiper bloquea la pista cuando cabe
entera en el visor (isLocked). El script gemelo destruye la instancia y el
movimiento lo hace esta animacion, igual que la banda de debajo del hero.
Sin el padding del rotulo los items se pegan unos a otros. */
#cinta-clientes .elementor-heading-title{white-space:nowrap;padding:0 clamp(14px,1.8vw,30px)}
#cinta-clientes .swiper-wrapper.zb-cinta{display:flex;flex-wrap:nowrap;width:max-content;transition:none;animation:zbCinta 42s linear infinite;will-change:transform}
#cinta-clientes .swiper-wrapper.zb-cinta>.swiper-slide{width:auto!important;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){#cinta-clientes .swiper-wrapper.zb-cinta{animation:none}}
/* Tira de portadas de #edicion (2026-08-13). Van a 16:9 SIN recortar: un
cuadrado se come el rotulo, que es justo lo que demuestra el acabado. */
.elementor-element-zbed010>.e-con>.elementor-widget-image{aspect-ratio:16/9;border:1px solid #2A2A2E;border-radius:2px;overflow:hidden;background:#141416}
.elementor-element-zbed010>.e-con>.elementor-widget-image img{width:100%;height:100%;object-fit:cover;display:block}