/* ===========================================================================
   Puente Elementor -> CSS de las landings del mockup V4 · generado, no editar a mano
   (landing-pages/mockup-v4/_wordpress/desplegar_assets.py)
   =========================================================================== */
.elementor .e-div-block-base,.elementor .e-flexbox-base{padding:0;min-width:0}
.elementor .e-con{width:auto}
/* el widget HTML mete uno o dos <div> de envoltorio: no generan caja */
.elementor .elementor-widget-html,.elementor .elementor-widget-html > .elementor-widget-container{display:contents}
/* el botón atómico pierde el <span class="dot"> de la flecha: la dibuja el CSS */
.elementor a.btn.e-button-base{text-decoration:none}
.elementor a.btn.e-button-base::after{content:"";width:38px;height:38px;flex:none;border-radius:6px;
  background-color:rgba(3,26,53,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23031a35' stroke-width='2.4'%3E%3Cpath d='M5 12h13m-5-6 6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .25s ease,background-color .25s ease}
.elementor a.btn.e-button-base:hover::after{transform:translateX(3px);background-color:rgba(3,26,53,.18)}
.elementor a.btn--ghost.e-button-base::after{display:none}
.elementor a.btn--wa.e-button-base::after{background-color:rgba(255,255,255,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.86 9.86 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z'/%3E%3C/svg%3E")}
/* Elementor monta su capa de fondo en `.e-con::before`, absoluta y a tamaño completo:
   el número de los pasos es un ::before del mockup y se salía del flujo */
.elementor.elementor .paso::before{position:static;opacity:1;transition:none;mix-blend-mode:normal;border-width:0}
/* reset de Hello Elementor que pisa lo que el mockup deja heredar */
.elementor.elementor label,.elementor.elementor table th,.elementor.elementor table td{line-height:inherit}
.elementor.elementor table{margin-block:0;font-size:inherit}
.elementor.elementor table tbody > tr:nth-child(odd) > td:not(.is-on),
.elementor.elementor table tbody > tr:nth-child(odd) > th:not(.is-on),
.elementor.elementor table tbody tr:hover > td:not(.is-on),
.elementor.elementor table tbody tr:hover > th:not(.is-on){background-color:transparent}
/* combinadores hijo que el DOM de Elementor rompe */
.elementor .svc__card .disc::before{content:"";position:absolute;inset:0;z-index:1}
.elementor.elementor .callout > * > span,.elementor.elementor .callout > * > * > span{font-size:var(--t-s);color:var(--txt-2);display:block}


/* ===== sistema.css adaptado ===== */
/* ===========================================================================
   Sistema visual · Equipa Renting — dirección «Wefix»
   Extraído del .fig de la plantilla (tipografías, escala, paleta, radios) y
   compartido por la home y las 14 páginas interiores.
   Las dos desviaciones deliberadas respecto a la plantilla, por decisión del
   cliente (18-sep-2026): tipografía Manrope y color de énfasis azul.
   =========================================================================== */
/* ==========================================================================
   Sistema visual extraído del .fig de Wefix (canvas.fig → árbol de nodos)
   Tipos:    Manrope en todo (700 para display, 400-600 para texto)
   Escala:   80 / 60 / 45 / 30 · 18 / 16 / 14
   Color:    #161616 #1F1F1F #FFFFFF · acento azul #2E7BF6 · gris #F6F6F6
   Cambios propios frente a la plantilla: tipografía y color de énfasis, por decisión del cliente
   Radios:   30 bloques · 20 tarjetas · 10 botones · 4 pills · 100 círculos
   ========================================================================== */
:root{
  --ink:#161616;
  --ink-2:#1F1F1F;
  --accent:#2E7BF6;
  /* El azul vivo sobre blanco da 3,98:1 — insuficiente para texto normal (WCAG AA pide 4,5:1).
     Dos variantes más oscuras del MISMO tono para donde hay texto real:
     --accent-deep  fondo con texto blanco encima (6,70:1)
     --accent-text  texto azul pequeño sobre claro (7,16:1) */
  --accent-deep:#1D4ED8;
  --accent-text:#1552B8;
  --accent-soft:#E4EFFF;
  /* Solo para los puntos de la escena: sobre una foto, el azul de marca se pierde. */
  --hot:#FF7A1A;
  --paper:#FFFFFF;
  --grey:#F6F6F6;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(22,22,22,.10);
  --r-block:30px;
  --r-card:20px;
  --r-btn:10px;
  --r-pill:100px;
  --r-xs:6px;
  --shell:1880px;
  --gutter:20px;
  /* Margen lateral interior de una sección. Lo comparten los bloques de color y
     las secciones sin fondo, para que el contenido de todas arranque en la misma
     `x`. Hasta el 21-sep las de fondo blanco iban en un contenedor de 1.440 y los
     bloques de color en uno de 1.880 con 60 px de relleno: a 1.920 el contenido
     saltaba 160 px de una sección a la siguiente. */
  --pad-lat:60px;
  /* padding vertical de sección: se encoge en pantallas bajas para que quepa en 100vh */
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad-sec:clamp(56px,10.5vh,132px);
  --media:clamp(150px,27vh,330px);
  /* Ritmo vertical: TODA la separación entre secciones sale de aquí.
     Antes salía de sitios distintos —unas separaban con su propio padding y
     otras con margen, con multiplicadores 1,2 / 1,3 / 1,5— y el hueco real
     entre dos secciones iba de 98 a 222 px según el par que tocara. */
  --aire:clamp(118px,15.6vh,200px);

  /* ---- escala de texto: CINCO pasos, no dieciocho ----------------------
     La auditoría del 21-sep contó 18 tamaños distintos en una sola página,
     once de ellos entre 12 y 18 px. Sin escala no hay jerarquía: todo queda
     a medio camino de todo. Estos cinco son los únicos que se pueden usar. */
  --t-xs:13px;   /* pies, notas, etiquetas */
  --t-s:15px;    /* texto de tarjeta, descripciones */
  --t-m:16px;    /* texto corrido, entradillas */
  --t-l:18px;    /* destacados, entradilla de hero */
  --t-xl:20px;   /* títulos de tarjeta */

  /* ---- roles de color de texto: TRES por fondo, no dieciséis ----------
     Antes había ocho opacidades de blanco (.5 .55 .6 .62 .7 .72 .78 .8 .9)
     y cuatro de negro para lo que conceptualmente son tres papeles. */
  --txt-1:#161616;                 /* principal sobre claro */
  --txt-2:rgba(22,22,22,.68);      /* secundario sobre claro  (4,9:1) */
  --txt-3:rgba(22,22,22,.55);      /* apagado sobre claro     (3,5:1, solo texto grande) */
  --txt-1d:#FFFFFF;                /* principal sobre oscuro */
  --txt-2d:rgba(255,255,255,.72);  /* secundario sobre oscuro */
  --txt-3d:rgba(255,255,255,.55);  /* apagado sobre oscuro */
  /* eyebrow: azul oscuro sobre claro (7,16:1), azul claro sobre oscuro (9,31:1) */
  --eyebrow:var(--accent-text);
  --eyebrow-d:#8FBCFF;
}
*{box-sizing:border-box}
/* La separación entre secciones, en un solo sitio. Las secciones no llevan
   padding vertical propio: el de los bloques de color es su relleno interior,
   no la separación con la siguiente. */
.elementor > section.e-con,.elementor > .elementor-widget-html > section.e-con,.elementor > .elementor-widget-html > .elementor-widget-container > section.e-con{margin-top:var(--aire)}
body.elementor-page{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-m);line-height:1.7;-webkit-font-smoothing:antialiased;
}
.elementor.elementor .tit{display:block}
.elementor.elementor h1,.elementor.elementor h2,.elementor.elementor h3,.elementor.elementor h4,.elementor.elementor .tit,.elementor.elementor .display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
/* que ninguna palabra se quede sola en su línea, ni en un titular ni en un
   párrafo corrido: `balance` reparte el ancho de los titulares, `pretty`
   evita la huérfana en el texto corrido. Mejora progresiva: donde el
   navegador no lo soporta, el texto sigue envolviendo como siempre. */
.elementor.elementor p,.elementor.elementor li{text-wrap:pretty}
.elementor.elementor p{margin:0}
.elementor.elementor a{color:inherit;text-decoration:none}
.elementor.elementor img{max-width:100%;display:block}
.elementor.elementor ul{margin:0;padding:0;list-style:none}

.elementor.elementor .wrap,.elementor.elementor .bleed{width:min(100% - calc(var(--gutter)*2),var(--shell));margin-inline:auto}
/* las secciones sin fondo llevan el mismo margen lateral que los bloques de color */
.elementor.elementor .wrap{padding-inline:var(--pad-lat)}

/* ---- eyebrow ----
   La plantilla Wefix le pone delante un bloque de color de 16x20. Es el mismo
   problema que la raya decorativa que tenemos prohibida desde el feedback de
   este cliente del 4-sep: se lee como plantilla genérica, y además salía diez
   veces por página. El eyebrow se distingue por color, caja y tracking. */
.elementor.elementor .eyebrow{display:inline-block;font-size:var(--t-xs);font-weight:700;
  line-height:1.7;
  letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
.elementor.elementor .services:not(.services--claro) .eyebrow,.elementor.elementor .compare .eyebrow,.elementor.elementor .sec--dark .eyebrow{color:var(--eyebrow-d)}
/* sobre una foto no se puede garantizar el contraste de un azul claro: van en blanco */
.elementor.elementor .hero .eyebrow,.elementor.elementor .scene .eyebrow{color:#fff}
/* sobre el azul de la sección de cierre el azul claro no llega: va en blanco */
.elementor.elementor .cta .eyebrow,.elementor.elementor .contacto .eyebrow{color:#fff}

/* ---- botón principal: 50px, r10, + círculo 48x48 r10 con flecha ---- */
.elementor.elementor .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:52px;padding:0 7px 0 22px;border:1px solid transparent;
  border-radius:var(--r-btn);background:var(--accent-deep);color:#fff;font-size:var(--t-s);font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background .25s ease,border-color .25s ease}
.elementor.elementor .btn .dot{width:38px;height:38px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);display:grid;place-items:center;
  transition:transform .25s ease}
.elementor.elementor .btn:hover{background:var(--ink)}
.elementor.elementor .btn:hover .dot{background:rgba(255,255,255,.22);transform:translateX(3px)}
.elementor.elementor .btn .dot svg{stroke:#fff;transition:stroke .25s ease}
/* Botón principal del hero y de la barra: blanco de salida, azul al pasar por
   encima. El cuadrito de la flecha invierte con él, para que no quede azul sobre azul. */
.elementor.elementor .btn--light{background:#fff;color:var(--ink);border-color:#fff}
.elementor.elementor .btn--light .dot{background:var(--accent-deep)}
.elementor.elementor .btn--light:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}
.elementor.elementor .btn--light:hover .dot{background:rgba(255,255,255,.22)}
.elementor.elementor .btn--ghost{background:transparent;color:inherit;border-color:currentColor;padding:0 22px}
.elementor.elementor .btn--ghost:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}

/* ---- enlace "discover": texto + flecha + línea de 73px ---- */
.elementor.elementor .disc{display:inline-flex;flex-direction:column;justify-content:center;gap:10px;
  min-height:44px;font-size:var(--t-s);font-weight:600;width:max-content}
.elementor.elementor .disc span{display:inline-flex;align-items:center;gap:8px}
.elementor.elementor .disc::after{content:"";height:1px;width:73px;background:currentColor;opacity:.35;transition:width .3s ease,opacity .3s ease}
.elementor.elementor .disc:hover::after{width:110px;opacity:1}

.elementor.elementor .icon-btn{width:48px;height:48px;border-radius:var(--r-btn);display:grid;place-items:center;
  border:1px solid var(--line-dark);background:#fff;cursor:pointer;transition:.25s ease}
.elementor.elementor .icon-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.elementor.elementor .icon-btn:hover svg{stroke:#fff}
.elementor.elementor .icon-btn:disabled{opacity:.3;pointer-events:none}

/* ---- marcas de estado del proyecto ---- */
.elementor.elementor .flag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:4px;
  border:1px solid var(--accent-deep);background:var(--accent-deep);color:#fff;
  vertical-align:middle;line-height:1.35;max-width:100%}
.elementor.elementor .flag--block{font-size:var(--t-xs);padding:6px 12px}
body.elementor-page:not(.show-flags) .flag{display:none}
body.elementor-page.show-flags [data-pending]{outline:2px dashed rgba(46,123,246,.55);outline-offset:8px;border-radius:var(--r-btn)}

/* ==========================  HERO  ========================== */
.elementor.elementor .hero{padding-top:20px}
.elementor.elementor .hero__shell{position:relative;border-radius:var(--r-block);overflow:hidden;background:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.elementor.elementor .hero__bg{position:absolute;inset:0}
.elementor.elementor .hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.elementor.elementor .hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(22,22,22,.94) 0%,rgba(22,22,22,.80) 42%,rgba(22,22,22,.35) 100%)}

/* nav 1840x100 r20 */
/* La barra va transparente sobre la foto del hero: sin fondo ni desenfoque, para
   que el hero se lea de un tirón. El texto sigue siendo blanco y el velo oscuro
   del propio hero (.hero__bg::after) es el que garantiza el contraste. */
.elementor.elementor .nav{position:relative;z-index:30;height:clamp(78px,10vh,100px);
  background:transparent;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(24px,3.4vw,52px);gap:clamp(14px,1.6vw,26px)}
/* El logotipo real del cliente. La barra y el pie van en oscuro, así que usan la
   variante con el texto en blanco; el azul del logo es #1D4ED8, el mismo que
   --accent-deep, así que no hay que retocar nada. */
.elementor.elementor .logo{display:block;flex:none;line-height:0}
.elementor.elementor .logo .logo__marca{display:none}
.elementor.elementor .logo img{height:clamp(18px,1.85vw,26px);width:auto;display:block}
/* `nowrap`: con el logotipo real —bastante más ancho que el texto que había— los
   enlaces se partían en dos líneas y descuadraban la barra. */
.elementor.elementor .nav__menu{display:flex;gap:clamp(16px,1.9vw,30px);font-size:var(--t-s);font-weight:600}.elementor.elementor .nav__menu > a,.elementor.elementor .nav__menu > .elementor-widget-html > a,.elementor.elementor .nav__menu > .elementor-widget-html > .elementor-widget-container > a,.elementor.elementor .mega-trigger{white-space:nowrap}
.elementor.elementor .nav__menu a{opacity:.85;transition:opacity .2s}
.elementor.elementor .nav__menu a:hover{opacity:1;color:var(--accent)}
.elementor.elementor .nav__right{display:flex;align-items:center;gap:10px}

/* ---- megamenú ----
   Anclado al propio disparador (`position:relative`), no a la barra entera: con 7 y 5 soluciones
   no hace falta un panel a todo el ancho. Sin `:has()` ni JavaScript. */
.elementor.elementor .has-mega{position:relative}
.elementor.elementor .mega-trigger{display:inline-flex;align-items:center;gap:7px}
.elementor.elementor .has-mega:hover .mega-trigger svg,.elementor.elementor .has-mega:focus-within .mega-trigger svg{transform:rotate(180deg)}
.elementor.elementor .mega-trigger svg{transition:transform .25s ease}
.elementor.elementor .mega{position:absolute;left:-14px;top:calc(100% + 16px);z-index:20;
  width:min(600px,calc(100vw - 80px));
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r-block);padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
/* LOS DOS paneles se anclan a la izquierda de su disparador y se abren hacia la derecha.
   El 22-sep, al entrar «Compra o renting» en la barra, los disparadores se corrieron y el
   segundo panel —660 px— se salía 86 px de la ventana: scroll horizontal en TODAS las
   páginas, porque un panel oculto sigue contando para `scrollWidth`. Se ancló por la
   derecha, y entonces uno se abría hacia un lado y el otro hacia el contrario.
   La anchura es la que sobraba: a 1280 (la barra pasa a cajón en 1279) el segundo
   disparador empieza en 641, así que 600 px llegan hasta 1.227 y aún quedan 17 px hasta
   el borde de la barra. De 1400 para arriba sobran más de 80. */
/* La barra iba justa: con seis entradas acababa a 1 px del borde. Al añadir
   «Compra o renting» (22-sep-2026) se salía 152 px y aparecía scroll horizontal
   en toda la web —en el mockup local no se veía porque un ancestro lo recorta;
   en WordPress no—. Por debajo de 1600 se le quita aire al hueco y al margen. */
@media (max-width:1600px){
  .elementor.elementor .nav{gap:16px;padding-left:36px;padding-right:36px}
  .elementor.elementor .nav__menu{gap:16px}
}
.elementor.elementor .has-mega:hover .mega,.elementor.elementor .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.elementor.elementor .mega ul{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.elementor.elementor .mega li.wide{grid-column:span 2}
.elementor.elementor .mega li a{display:flex;align-items:center;gap:15px;padding:11px;min-height:88px;
  border:1px solid transparent;border-radius:var(--r-card);transition:.18s ease}
.elementor.elementor .mega li a:hover,.elementor.elementor .mega li a:focus-visible{background:rgba(255,255,255,.07);border-color:var(--line)}
.elementor.elementor .mega li img{width:84px;height:64px;object-fit:cover;border-radius:var(--r-btn);flex:none}
.elementor.elementor .mega li b{display:block;font-size:var(--t-s);font-weight:600;color:#fff;line-height:1.25}
.elementor.elementor .mega li em{display:block;font-style:normal;font-size:var(--t-xs);color:var(--txt-3d);
  line-height:1.35;margin-top:4px}
/* «Pantallas para clínicas dentales» destaca del resto: es partner de TV Dental, no una
   familia más. Borde y título en el azul de marca, también en reposo, no solo al pasar el ratón. */
.elementor.elementor .mega__accent-txt{color:var(--accent);font-weight:600}
.elementor.elementor .mega__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:8px;padding:14px 11px 6px;border-top:1px solid var(--line)}
.elementor.elementor .mega__foot span{font-size:var(--t-xs);color:var(--txt-3d)}
.elementor.elementor .mega__foot a{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:600;color:#fff}
.elementor.elementor .mega__foot a:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.elementor.elementor .mega{transition:none}}
.elementor.elementor .burger{display:none;width:50px;height:50px;border-radius:var(--r-btn);place-items:center;
  background:rgba(255,255,255,.12);border:0;cursor:pointer}
.elementor.elementor .nav__cerrar{display:none}
.elementor.elementor .burger span{display:block;width:18px;height:2px;background:#fff;box-shadow:0 -6px 0 #fff,0 6px 0 #fff}

.elementor.elementor .hero__body{position:relative;z-index:2;padding:clamp(40px,7vh,110px) var(--pad-lat) clamp(24px,4vh,40px);
  max-width:min(1080px,100%);flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.elementor.elementor .hero h2{font-size:clamp(34px,min(5.2vw,7.4vh),72px);margin:clamp(14px,2.4vh,22px) 0 clamp(14px,2.6vh,24px)}
/* tres líneas exactas en escritorio; en móvil se deja fluir */
@media (min-width:1101px){.elementor.elementor .hero h2 .l{display:block}}
.elementor.elementor .hero__body p{font-size:var(--t-l);color:var(--txt-2d);opacity:1;max-width:62ch}
.elementor.elementor .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,3.6vh,34px)}

/* tira de reclamos validados */
.elementor.elementor .hero__claims{position:relative;z-index:2;margin:0 20px 20px;border-radius:var(--r-card);
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow:hidden}
.elementor.elementor .hero__claims div{padding:clamp(14px,2.4vh,26px) 28px;background:rgba(22,22,22,.28)}
.elementor.elementor .hero__claims div+div{border-left:1px solid rgba(255,255,255,.12)}
.elementor.elementor .hero__claims b{font-family:var(--display);font-size:clamp(22px,3vh,30px);font-weight:700;display:block;line-height:1.1}
.elementor.elementor .hero__claims span{font-size:var(--t-s);opacity:.7}

/* círculos coral decorativos (Ellipse 314px del .fig) */
.elementor.elementor .blob{position:absolute;width:314px;height:314px;border-radius:50%;background:var(--accent);
  filter:blur(90px);opacity:.28;pointer-events:none;z-index:0}

/* ==========================  MARCAS  ========================== */
.elementor.elementor .brands{text-align:center}
.elementor.elementor .brands p{font-size:var(--t-s);opacity:.7;margin-bottom:22px}
.elementor.elementor .brands ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 42px;
  font-family:var(--display);font-size:22px;font-weight:700;opacity:.62}
.elementor.elementor .brands ul.brands__logos{opacity:1;align-items:center;gap:clamp(30px,5vw,74px)}
.elementor.elementor .brands__logos li{display:grid;place-items:center;opacity:.85;transition:opacity .25s ease,transform .25s ease}
.elementor.elementor .brands__logos li:hover{opacity:1;transform:translateY(-2px)}
.elementor.elementor .brands__logos svg{height:calc(clamp(24px,2.7vw,34px) * var(--k,1));width:auto}
.elementor.elementor .brands__more{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,19px);
  color:var(--txt-2);opacity:1!important;filter:none!important}
.elementor.elementor .brands p.brands__note{margin-top:20px;margin-bottom:0;font-size:var(--t-xs);color:var(--txt-2);opacity:1}
.elementor.elementor .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================  SOBRE  ========================== */
.elementor.elementor .about{display:grid;grid-template-columns:auto 602fr;gap:clamp(40px,4vw,80px);align-items:center}
.elementor.elementor .about__media{position:relative;border-radius:var(--r-block);overflow:hidden;aspect-ratio:663/583;
  max-height:48vh;justify-self:end;width:100%;max-width:100%}
.elementor.elementor .about__media img{width:100%;height:100%;object-fit:cover}
/* Iba a todo el ancho del pie de la foto y se colocaba justo encima de las dos
   personas: las caras son de lo poco que da confianza mientras no haya
   testimonios, así que el rótulo se va a la esquina y deja de taparlas. */
.elementor.elementor .about__badge{position:absolute;right:18px;bottom:18px;left:auto;max-width:72%;
  background:var(--accent-deep);color:#fff;border-radius:var(--r-card);padding:16px 20px}
.elementor.elementor .about__badge b{font-family:var(--display);font-size:clamp(34px,3.8vw,56px);font-weight:700;
  display:block;line-height:.9;letter-spacing:-.03em}
.elementor.elementor .about__badge b small{font-size:.38em;letter-spacing:0}
.elementor.elementor .about__badge span{font-size:var(--t-xs);font-weight:600;display:block;margin-top:8px;max-width:210px;line-height:1.4}
.elementor.elementor .about h3{font-size:clamp(28px,min(4vw,5.2vh),50px);margin:clamp(12px,2vh,18px) 0 clamp(14px,2.2vh,22px)}.elementor.elementor .about > div > p,.elementor.elementor .about > div > .elementor-widget-html > p,.elementor.elementor .about > div > .elementor-widget-html > .elementor-widget-container > p{opacity:.72;max-width:560px}
/* beneficios: los seis que la propia web de Equipa ya comunica, con icono */
.elementor.elementor .bens{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.25vw,18px);
  margin-top:clamp(22px,3.4vh,40px)}
/* el icono comparte línea con el título: dos filas de seis caben en una pantalla */
.elementor.elementor .ben{display:grid;grid-template-columns:34px 1fr;grid-template-areas:"i t" "d d";
  gap:6px 11px;align-items:center;
  border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:clamp(12px,1.7vh,17px);transition:.25s ease}
.elementor.elementor .ben:hover{border-color:var(--accent);background:var(--accent-soft)}
.elementor.elementor .ben__i{grid-area:i;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-xs);
  background:var(--accent-soft);color:var(--accent-text)}
.elementor.elementor .ben__i svg{width:19px;height:19px}
.elementor.elementor .ben .tit{grid-area:t;font-size:var(--t-s);font-family:var(--text);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.elementor.elementor .ben p{grid-area:d;font-size:var(--t-xs);color:var(--txt-2);line-height:1.5}

/* ==========================  SERVICIOS  ========================== */
.elementor.elementor .services{background:var(--ink);color:#fff;border-radius:var(--r-block);padding:clamp(36px,5.4vh,72px) var(--pad-lat);position:relative;overflow:hidden}
/* Cabecera de sección: UNA columna.
   Hasta el 21-sep era un flex con `space-between` + `align-items:flex-end`, así
   que el H2 quedaba a la izquierda y la entradilla se iba al borde derecho
   empezando 32 px MÁS ARRIBA que el titular: 290 px de salto en diagonal hacia
   atrás, repetidos en las nueve secciones de cada página. Era lo que hacía que
   la página se leyera en zigzag. Ahora todo arranca en el mismo punto. */
.elementor.elementor .sec-head{margin-bottom:clamp(32px,4.6vh,58px);max-width:100%}
.elementor.elementor .sec-head h3{font-size:clamp(24px,min(2.6vw,3.6vh),38px);max-width:34ch}
/* Dos secciones por página son ancla y sí van a tamaño grande: sin eso los nueve
   titulares pesan lo mismo y no hay jerarquía de página. */
/* dos líneas, no tres: con 18ch «El mismo equipo. Dos maneras muy distintas de
   pagarlo.» se partía en tres */
.elementor.elementor .sec-head--ancla h3{font-size:clamp(26px,min(3.6vw,5vh),52px);max-width:min(28ch,100%)}.elementor.elementor .sec-head > p,.elementor.elementor .sec-head > .elementor-widget-html > p,.elementor.elementor .sec-head > .elementor-widget-html > .elementor-widget-container > p{margin-top:clamp(8px,1.2vh,13px);max-width:62ch;font-size:var(--t-m);color:var(--txt-2)}
/* Carrusel horizontal de 3 visibles: cinco tarjetas no caben en una pantalla, y la plantilla
   original ya es un carrusel (trae el contador «01/03» y las dos flechas). */
.elementor.elementor .svc{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.elementor.elementor .svc::-webkit-scrollbar{display:none}
.elementor.elementor .svc__card{scroll-snap-align:start}
.elementor.elementor .svc__card[hidden]{display:none}
/* barra de familias + control del carrusel */
/* las dos secciones de soluciones se separan del resto y entre sí */
/* la segunda familia va en claro, para que las dos secciones se distingan de un vistazo */
.elementor.elementor .services--claro{background:var(--grey);color:var(--ink)}
.elementor.elementor .services--claro .svc__card{background:#fff;border-color:var(--line-dark)}
.elementor.elementor .services--claro .svc__card p{color:var(--txt-2)}
.elementor.elementor .services--claro .svc__card:hover p,.elementor.elementor .services--claro .svc__card:hover .tit{color:#fff}
.elementor.elementor .services--claro .services--claro .icon-btn--dark{background:#fff;border-color:var(--line-dark)}
.elementor.elementor .services--claro .icon-btn--dark svg{stroke:var(--ink)}
.elementor.elementor .services--claro .icon-btn--dark:hover svg{stroke:#fff}
.elementor.elementor .services--claro .sec-cta{border-top-color:var(--line-dark)}
.elementor.elementor .svc-arrows{display:flex;gap:10px;margin-left:auto}

/* tarjeta sin fotografía: mosaico con icono, a la misma altura que las demás */
.elementor.elementor .svc__shot--icon{display:grid;place-items:center;position:relative;
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(46,123,246,.20) 0%,rgba(46,123,246,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line)}
.elementor.elementor .svc__shot--icon svg{width:clamp(48px,7vw,74px);height:auto;color:var(--accent);opacity:.9}
.elementor.elementor .svc__shot--icon .flag{position:absolute;left:12px;bottom:12px}

/* ==========================  COMPRAR vs. RENTAR  ========================== */
/* La comparativa que angulos-copy.md señala como «la sección que más va a convertir».
   Es cualitativa a propósito: los únicos importes publicables son 17 €/mes y 3 €/día. */
.elementor.elementor .compare{background:var(--ink);color:#fff;border-radius:var(--r-block);
  padding:clamp(36px,5.4vh,72px) var(--pad-lat)}
.elementor.elementor .cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.elementor.elementor .cmp table{width:100%;min-width:760px;border-collapse:collapse;text-align:left}
.elementor.elementor .cmp th,.elementor.elementor .cmp td{padding:clamp(10px,1.35vh,16px) 22px;vertical-align:middle;white-space:nowrap;
  border-bottom:1px solid var(--line)}
.elementor.elementor .cmp tbody tr:last-child th,.elementor.elementor .cmp tbody tr:last-child td{border-bottom:0}
.elementor.elementor .cmp thead th{font:700 var(--t-xs)/1 var(--text);letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3d);padding-bottom:12px}
.elementor.elementor .cmp tbody th{font-family:var(--display);font-size:clamp(14px,1.15vw,16px);font-weight:700;
  width:26%;color:#fff}
.elementor.elementor .cmp td{font-size:var(--t-s);line-height:1.45;color:var(--txt-2d);width:37%}
.elementor.elementor .cmp td.is-on{color:#fff}
/* La columna recomendada.
   Iba con `rgba(46,123,246,.16)` sobre #161616, que compuesto da rgb(26,38,58):
   1,19:1 contra el fondo, o sea invisible — justo la columna que tiene que verse
   la primera. Ahora lleva fondo sólido, borde de acento y cabecera llena. */
.elementor.elementor .cmp .is-on{background:#1E2E52;color:#fff;
  box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent)}
.elementor.elementor .cmp thead .is-on{background:var(--accent-deep);border-radius:var(--r-btn) var(--r-btn) 0 0;
  box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent),inset 0 1px 0 var(--accent)}
.elementor.elementor .cmp tbody tr:last-child .is-on{border-radius:0 0 var(--r-btn) var(--r-btn);
  box-shadow:inset 1px 0 0 var(--accent),inset -1px 0 0 var(--accent),inset 0 -1px 0 var(--accent)}
.elementor.elementor .cmp .is-on b{font-weight:600}
.elementor.elementor .cmp__tag{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#fff}
/* Marca por celda: la fila se entiende sin leerla y el texto pasa a ser el matiz.
   Y «Comprarlo» lleva su ✓ en la fila de los cuatro años: una tabla donde ganas
   en todo se lee como propaganda y quema la credibilidad al decidir. */
.elementor.elementor .cmp__m{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  margin-right:10px;vertical-align:-4px;flex:none}
.elementor.elementor .cmp__m svg{width:13px;height:13px;stroke-width:2.8}
.elementor.elementor .cmp__m--si{background:var(--accent);color:#fff}
.elementor.elementor .cmp__m--no{background:rgba(255,255,255,.10);color:var(--txt-3d)}
.elementor.elementor .cmp__note{margin-top:clamp(14px,2vh,22px);font-size:var(--t-xs);line-height:1.55;
  color:var(--txt-3d);max-width:900px}
.elementor.elementor .compare .sec-cta{border-top-color:var(--line)}

/* En móvil la fila se rompe, pero las DOS columnas siguen una al lado de la otra.
   Apiladas se convertían en doce frases seguidas y dejaba de poder compararse,
   que es lo único que esta sección tiene que hacer. */
@media (max-width:760px){
  .elementor.elementor .cmp table{min-width:0;display:block}
  .elementor.elementor .cmp thead{display:none}
  .elementor.elementor .cmp tbody,.elementor.elementor .cmp tr{display:block}
  .elementor.elementor .cmp tbody tr{border-bottom:1px solid var(--line);padding:14px 0;
    display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .elementor.elementor .cmp tbody tr:last-child{border-bottom:0}
  .elementor.elementor .cmp th,.elementor.elementor .cmp td{width:auto;border:0;white-space:normal}
  .elementor.elementor .cmp tbody th{grid-column:1 / -1;width:auto;font-size:var(--t-s);margin-bottom:2px;padding:0}
  .elementor.elementor .cmp td{padding:10px 12px;border-radius:var(--r-btn);background:rgba(255,255,255,.05);
    font-size:var(--t-xs);line-height:1.4;box-shadow:none}
  .elementor.elementor .cmp td.is-on{background:#1E2E52;box-shadow:inset 0 0 0 1px var(--accent);
    border-radius:var(--r-btn)}
  .elementor.elementor .cmp td::before{display:block;margin-bottom:5px;content:"Comprarlo";
    font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3d)}
  .elementor.elementor .cmp td.is-on::before{content:"Equipa Renting";color:#fff}
  .elementor.elementor .cmp__m{width:17px;height:17px;margin:0 0 5px;display:grid}
  .elementor.elementor .cmp__m svg{width:11px;height:11px}
}

/* CTA de cierre, común a todas las secciones */
.elementor.elementor .sec-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,5vh,60px);padding-top:clamp(30px,3.8vh,46px);
  border-top:1px solid var(--line-dark)}
.elementor.elementor .services:not(.services--claro) .sec-cta,.elementor.elementor .scene .sec-cta{border-top-color:var(--line)}.elementor.elementor .services:not(.services--claro) .sec-head > p,.elementor.elementor .services:not(.services--claro) .sec-head > .elementor-widget-html > p,.elementor.elementor .services:not(.services--claro) .sec-head > .elementor-widget-html > .elementor-widget-container > p,.elementor.elementor .compare .sec-head > p,.elementor.elementor .compare .sec-head > .elementor-widget-html > p,.elementor.elementor .compare .sec-head > .elementor-widget-html > .elementor-widget-container > p,.elementor.elementor .scene .sec-head > p,.elementor.elementor .scene .sec-head > .elementor-widget-html > p,.elementor.elementor .scene .sec-head > .elementor-widget-html > .elementor-widget-container > p,.elementor.elementor .cta .sec-head > p,.elementor.elementor .cta .sec-head > .elementor-widget-html > p,.elementor.elementor .cta .sec-head > .elementor-widget-html > .elementor-widget-container > p{color:var(--txt-2d)}
.elementor.elementor .svc-nav div{display:flex;gap:10px}
.elementor.elementor .icon-btn--dark{background:rgba(255,255,255,.08);border-color:var(--line)}
.elementor.elementor .icon-btn--dark svg{stroke:#fff}
@media (max-width:1400px){.elementor.elementor .svc{grid-auto-columns:calc((100% - 40px)/3)}}
@media (max-width:1100px){.elementor.elementor .svc{grid-auto-columns:calc((100% - 20px)/2)}}
/* En móvil el carrusel llega hasta el borde del contenedor: margen negativo
   igual al padding lateral de la sección, y el mismo padding dentro, para que
   el hueco sea idéntico en reposo y al llegar al final. La tarjeta cortada a la
   derecha es la que avisa de que hay más.
   `scroll-snap-type:none` NO es un descuido: con snap el navegador resuelve un
   ajuste nada más pintar y se come el padding de salida, y la primera tarjeta
   queda pegada al borde. Documentado en _servicios/elementor/APRENDIZAJES.md.
   La inercia se conserva con -webkit-overflow-scrolling. */
@media (max-width:680px){
  .elementor.elementor .svc{grid-auto-columns:86%;
    margin-inline:calc(var(--pad-lat) * -1);padding-inline:var(--pad-lat);
    scroll-snap-type:none;-webkit-overflow-scrolling:touch}
  .elementor.elementor .svc__card{scroll-snap-align:none}
  /* las flechas, justo debajo del carrusel y no detrás del botón */
  .elementor.elementor .sec-cta{position:relative}
  .elementor.elementor .svc-arrows{order:-1;width:100%;margin-left:0;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.elementor.elementor .svc{scroll-behavior:auto}}
/* La tarjeta entera es el enlace, no solo «Ver la solución»: el objetivo de
   clic pasa de ~140 px de ancho a la tarjeta completa. El enlace que ya había se
   estira por encima con un pseudoelemento, sin tocar el marcado. */
.elementor.elementor .svc__card > .disc::before,.elementor.elementor .svc__card > .elementor-widget-html > .disc::before,.elementor.elementor .svc__card > .elementor-widget-html > .elementor-widget-container > .disc::before,.elementor.elementor .post > .disc::before,.elementor.elementor .post > .elementor-widget-html > .disc::before,.elementor.elementor .post > .elementor-widget-html > .elementor-widget-container > .disc::before{content:"";position:absolute;inset:0;z-index:1}
.elementor.elementor .svc__card,.elementor.elementor .post{cursor:pointer}
.elementor.elementor .post{position:relative}
.elementor.elementor .svc__card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-block);
  padding:clamp(18px,2.6vh,28px);display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);transition:.3s ease;position:relative}
.elementor.elementor .svc__card:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-6px)}
.elementor.elementor .svc__shot{position:relative;border-radius:var(--r-card);overflow:hidden;height:var(--media);flex:none}
.elementor.elementor .svc__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.elementor.elementor .svc__card:hover .svc__shot img{transform:scale(1.05)}
.elementor.elementor .svc__card .tit{font-size:clamp(20px,min(2.3vw,3.2vh),30px)}
.elementor.elementor .svc__card p{font-size:var(--t-s);color:var(--txt-2d);line-height:1.65;flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.elementor.elementor .price{position:absolute;left:14px;bottom:14px;z-index:2;font-size:var(--t-xs);font-weight:700;
  background:var(--accent-deep);color:#fff;border-radius:var(--r-xs);padding:6px 11px;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.elementor.elementor .svc__card:hover .price{background:var(--ink)}

/* ==========================  ESCENA CON PUNTOS  ========================== */
.elementor.elementor .scene{border-radius:var(--r-block);overflow:hidden;position:relative;background:var(--ink-2)}
/* La escena es vertical (1536x1024) y a ancho completo se iba a 1170 px de alto. Se recorta a la
   altura de la ventana con object-fit:cover y los puntos se recolocan por JS sobre las coordenadas
   REALES de la imagen, para que sigan cayendo encima de cada equipo. */
.elementor.elementor .scene__img{position:relative;height:calc(100svh - 40px);min-height:420px}
.elementor.elementor .scene__img img{width:100%;height:100%;object-fit:cover;object-position:center}
/* velo para que el texto blanco se lea sobre una escena clara */
/* El velo se concentra en la esquina inferior izquierda, que es donde va el texto y el único
   rincón de la escena sin equipos marcados. Así no apaga el resto de la imagen. */
.elementor.elementor .scene__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 95% at 0% 100%,rgba(22,22,22,.94) 0%,rgba(22,22,22,.78) 26%,rgba(22,22,22,.18) 54%,rgba(22,22,22,0) 72%),
             linear-gradient(to top,rgba(22,22,22,.55) 0%,rgba(22,22,22,0) 34%)}
.elementor.elementor .scene__copy{position:absolute;left:var(--pad-lat);bottom:46px;z-index:3;color:#fff;max-width:600px}
.elementor.elementor .scene__copy h3{font-size:clamp(26px,min(3.4vw,5vh),52px);margin:14px 0 12px;max-width:15ch}
.elementor.elementor .scene__copy p{font-size:var(--t-m);color:var(--txt-2d);max-width:46ch}
/* Los puntos van sobre una foto: encima de una pantalla encendida o del velo oscuro de la esquina,
   el azul de marca desaparecía. Llevan color propio (naranja) y doble anillo, blanco y oscuro, así
   se recortan igual sobre claro que sobre oscuro. El contraste no depende del fondo. */
.elementor.elementor .hot{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--hot);
  border:3px solid #fff;cursor:pointer;z-index:4;padding:0;
  box-shadow:0 0 0 2px rgba(22,22,22,.55),0 2px 10px rgba(22,22,22,.45),0 0 0 0 rgba(255,122,26,.7);
  transform:translate(-50%,-50%);animation:pulse 2.4s infinite}
/* zona táctil de 44px alrededor del punto, sin agrandar el punto */
.elementor.elementor .hot::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%}
.elementor.elementor .hot[aria-expanded="true"]{background:#fff;border-color:var(--hot);animation:none}
.elementor.elementor .hot:hover,.elementor.elementor .hot:focus-visible{background:#fff;border-color:var(--hot);
  box-shadow:0 0 0 2px rgba(22,22,22,.55),0 2px 10px rgba(22,22,22,.45)}
.elementor.elementor .hot::after{content:attr(data-label);position:absolute;left:50%;top:-44px;transform:translateX(-50%);
  background:#fff;color:var(--ink);font-size:var(--t-xs);font-weight:700;padding:7px 12px;border-radius:var(--r-xs);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.elementor.elementor .hot:hover::after,.elementor.elementor .hot:focus-visible::after{opacity:1}
@keyframes pulse{
  0%{box-shadow:0 0 0 2px rgba(22,22,22,.55),0 2px 10px rgba(22,22,22,.45),0 0 0 0 rgba(255,122,26,.7)}
  70%{box-shadow:0 0 0 2px rgba(22,22,22,.55),0 2px 10px rgba(22,22,22,.45),0 0 0 20px rgba(255,122,26,0)}
  100%{box-shadow:0 0 0 2px rgba(22,22,22,.55),0 2px 10px rgba(22,22,22,.45),0 0 0 0 rgba(255,122,26,0)}}
@media (prefers-reduced-motion:reduce){.elementor.elementor .hot{animation:none}}

/* ==========================  ARGUMENTOS  ========================== */

.elementor.elementor .why__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,4.6vw,80px);align-items:start}
.elementor.elementor .why h3{font-size:clamp(28px,min(4.2vw,5.4vh),56px);margin:clamp(12px,2vh,18px) 0 0}
.elementor.elementor .feat{border-top:1px solid var(--line-dark);padding:clamp(18px,2.6vh,30px) 0;display:grid;grid-template-columns:44px 1fr;gap:20px}
.elementor.elementor .feat:last-child{border-bottom:1px solid var(--line-dark)}
.elementor.elementor .feat b{font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent-text);line-height:1}
.elementor.elementor .feat .tit{font-size:24px;margin-bottom:8px}
.elementor.elementor .feat p{font-size:var(--t-s);opacity:.7;line-height:1.65}
.elementor.elementor .callout{margin-top:clamp(20px,3vh,34px);background:var(--grey);border-radius:var(--r-card);padding:clamp(20px,2.8vh,30px)}.elementor.elementor .callout > span,.elementor.elementor .callout > .elementor-widget-html > span,.elementor.elementor .callout > .elementor-widget-html > .elementor-widget-container > span{font-size:var(--t-s);color:var(--txt-2);display:block}
.elementor.elementor .callout b{font-family:var(--display);font-size:clamp(28px,3.6vw,45px);font-weight:700;display:block;margin-top:6px}

/* ==========================  CONTENIDOS  ========================== */

.elementor.elementor .posts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.elementor.elementor .post{border:1px solid var(--line-dark);border-radius:var(--r-card);padding:clamp(20px,2.8vh,30px);
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,14px);transition:.3s}
.elementor.elementor .post:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.elementor.elementor .post:hover .post__m{opacity:.6}
.elementor.elementor .post__m{font-size:var(--t-xs);color:var(--accent-text);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.elementor.elementor .post .tit{font-size:24px;line-height:1.25}
.elementor.elementor .post p{font-size:var(--t-s);opacity:.7;flex:1}

/* ==========================  CTA + PIE  ========================== */
.elementor.elementor .cta{background:var(--accent-deep);color:#fff;border-radius:var(--r-block);padding:var(--pad-sec) var(--pad-lat);
  display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.elementor.elementor .cta h3{font-size:clamp(30px,4vw,60px);max-width:680px}
.elementor.elementor .cta p{margin-top:12px;max-width:520px}

.elementor.elementor footer{background:var(--ink);color:#fff;border-radius:var(--r-block);margin:20px auto 20px;
  padding:70px var(--pad-lat) 34px}
.elementor.elementor .foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px}
.elementor.elementor .foot .tit{font-size:var(--t-m);font-family:var(--text);font-weight:700;margin-bottom:18px}
.elementor.elementor .foot li{margin-bottom:10px;font-size:var(--t-s);color:var(--txt-2d)}
/* en el pie los enlaces medían 21 px de alto: en táctil eso no se acierta */
.elementor.elementor .foot li a{display:inline-block;padding:9px 0}
.elementor.elementor .foot li{margin-bottom:2px}
.elementor.elementor .foot li a:hover{color:var(--accent)}
.elementor.elementor .foot__brand p{font-size:var(--t-s);opacity:.65;margin-top:16px;max-width:320px}
.elementor.elementor .foot__bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--t-xs);opacity:.55}

/* Portátiles de poca altura (768–800 px): sin esto la sección de servicios no entra */
@media (max-height:820px){
  :root{--media:clamp(132px,24vh,260px);--aire:clamp(86px,11.2vh,146px)}
  .elementor.elementor .hero__body p{font-size:var(--t-m)}
  .elementor.elementor .sec-cta{margin-top:clamp(26px,3.4vh,42px);padding-top:clamp(20px,2.8vh,32px)}
  .elementor.elementor .svc__card p{-webkit-line-clamp:2}
  .elementor.elementor .about__media{max-height:46vh}
  /* en un portátil de 720 px «quiénes somos» se pasaba de pantalla por los paddings del bloque */
.elementor.elementor .about > div > p,.elementor.elementor .about > div > .elementor-widget-html > p,.elementor.elementor .about > div > .elementor-widget-html > .elementor-widget-container > p{font-size:var(--t-s)}
  .elementor.elementor .cmp th,.elementor.elementor .cmp td{padding-top:11px;padding-bottom:11px}
}
/* 1280x720 y similares: quedan ~630 px útiles y hay que bajar el propio factor vh,
   porque el mínimo del clamp ya no llega a activarse */
@media (max-height:700px){
  :root{--pad-sec:clamp(40px,7.2vh,112px);--media:clamp(118px,20vh,240px);--aire:clamp(66px,9vh,114px)}
  .elementor.elementor .bens{gap:10px;margin-top:14px}
  .elementor.elementor .ben{padding:12px 14px}
  .elementor.elementor .ben__i{width:30px;height:30px;margin-bottom:8px}
  .elementor.elementor .about__media{max-height:42vh}
}

/* ==========================  PANEL DE REVISIÓN  ========================== */
.elementor.elementor .review{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;gap:8px;align-items:center;
  background:var(--ink);color:#fff;border-radius:var(--r-btn);padding:10px 14px;font-size:var(--t-xs);
  font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.elementor.elementor .review button{background:var(--accent-deep);color:#fff;border:0;border-radius:var(--r-xs);padding:7px 12px;
  font:inherit;cursor:pointer}
.elementor.elementor .notes{background:var(--grey);border-radius:var(--r-block);padding:50px var(--pad-lat);margin-bottom:20px}
.elementor.elementor .notes h2{font-size:30px;margin-bottom:8px}.elementor.elementor .notes > p,.elementor.elementor .notes > .elementor-widget-html > p,.elementor.elementor .notes > .elementor-widget-html > .elementor-widget-container > p{opacity:.7;max-width:760px;margin-bottom:26px}
.elementor.elementor .notes ol{margin:0;padding-left:20px}
.elementor.elementor .notes li{margin-bottom:12px;font-size:var(--t-s)}
.elementor.elementor .notes code{background:#fff;border-radius:4px;padding:2px 6px;font-size:var(--t-xs)}

/* En escritorio el hero y la escena ocupan exactamente una pantalla. En móvil se dejan crecer:
   forzar 100vh ahí deja el texto ilegible y el navegador cambia de alto al hacer scroll. */
@media (min-width:1101px){
  .elementor.elementor .hero__shell{height:calc(100svh - 40px);min-height:560px}
}
/* El logotipo real ocupa 9:1 y con los seis enlaces la barra no cabe por debajo
   de 1400 px. Primero se aprietan los espaciados y, a partir de 1340, se retiran
   «Preguntas» y «Contacto» —los dos que están también en el pie y en la CTA—.
   El menú NO se esconde hasta los 680: el burger de este prototipo es decorativo
   y no abre ningún panel, así que ocultarlo dejaría la tablet sin navegación. */
@media (max-width:1400px){
  .elementor.elementor .nav{padding-left:clamp(20px,2.4vw,52px);padding-right:clamp(20px,2.4vw,52px);gap:16px}
  .elementor.elementor .nav__menu{gap:clamp(14px,1.5vw,30px);font-size:var(--t-xs)}
  .elementor.elementor .logo img{height:clamp(18px,1.55vw,26px)}
}
@media (max-width:1100px){
  .elementor.elementor .hero__shell{min-height:640px}
  .elementor.elementor .scene__img{height:auto;aspect-ratio:1536/1024}
  .elementor.elementor .about,.elementor.elementor .why__grid{grid-template-columns:1fr;gap:44px}
  .elementor.elementor .foot{grid-template-columns:1fr 1fr}
  .elementor.elementor .posts__grid{gap:18px}
  :root{--pad-lat:30px}
  .elementor.elementor .hero__body{padding-top:44px;padding-bottom:30px}
  .elementor.elementor .nav{padding-left:30px;padding-right:30px}
  .elementor.elementor .scene__copy{position:static;padding:34px 30px 0;max-width:none;color:#fff;bottom:auto}
  .elementor.elementor .scene{background:var(--ink)}
}
/* ---- menú en cajón, de 1100 hacia abajo ----
   Hasta el 21-sep el burger era decorativo: no abría nada. Por eso el menú de
   escritorio no se podía esconder y entre 680 y 1340 px la navegación iba
   recortada. Ahora abre de verdad, y con él el menú completo baja a 1100. */
@media (max-width:1279px){
  .elementor.elementor .burger{display:grid}
  .elementor.elementor .nav__menu{position:fixed;inset:0;z-index:40;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);padding:96px 24px 32px;overflow-y:auto;
    font-size:var(--t-l);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  body.elementor-page.menu-abierto{overflow:hidden}
  body.elementor-page.menu-abierto .nav__menu{opacity:1;visibility:visible;transform:none}.elementor.elementor .nav__menu > a,.elementor.elementor .nav__menu > .elementor-widget-html > a,.elementor.elementor .nav__menu > .elementor-widget-html > .elementor-widget-container > a,.elementor.elementor .mega-trigger{padding:15px 0;border-bottom:1px solid var(--line);
    white-space:normal;display:block}
  .elementor.elementor .nav__menu a{opacity:1}
  .elementor.elementor .has-mega{border-bottom:1px solid var(--line)}
  .elementor.elementor .mega-trigger{width:100%;justify-content:space-between;border-bottom:0}
  /* dentro del cajón el panel va estático y desplegado: nada de hover */
  .elementor.elementor .mega{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;padding:0;
    max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease}
  .elementor.elementor .has-mega.abierto .mega{max-height:1400px;padding:0 0 12px}
  .elementor.elementor .has-mega.abierto .mega-trigger svg{transform:rotate(180deg)}
  .elementor.elementor .has-mega:hover .mega,.elementor.elementor .has-mega:focus-within .mega{opacity:1;visibility:visible}
  .elementor.elementor .mega ul{grid-template-columns:1fr}
  .elementor.elementor .mega li.wide{grid-column:auto}
  .elementor.elementor .mega li a{min-height:0;padding:10px 8px;border-bottom:0;gap:16px}
  .elementor.elementor .mega li img{width:92px;height:70px}
  .elementor.elementor .mega li b{font-size:var(--t-m)}
  .elementor.elementor .mega li em{font-size:var(--t-xs)}
  /* el pie del panel repite el precio y el enlace a la familia, que ya está en
     la propia lista: en el cajón solo alarga el scroll */
  .elementor.elementor .mega__foot{display:none}
  /* el cerrar del cajón */
  .elementor.elementor .nav__cerrar{display:grid;position:fixed;right:20px;top:20px;z-index:41;
    width:48px;height:48px;border-radius:var(--r-btn);place-items:center;
    background:rgba(255,255,255,.12);border:0;color:#fff;cursor:pointer}
  body.elementor-page:not(.menu-abierto) .nav__cerrar{display:none}
}
@media (max-width:680px){
  :root{--pad-lat:20px}
  /* Los cuatro reclamos se apilaban en cuatro filas de ancho completo: ~290 px
     justo debajo del botón del hero. En dos por fila ocupan la mitad. */
  .elementor.elementor .hero__claims{grid-template-columns:1fr 1fr}
  .elementor.elementor .hero__claims div+div{border-left:0}
  .elementor.elementor .hero__claims div:nth-child(2n){border-left:1px solid rgba(255,255,255,.12)}
  .elementor.elementor .hero__claims div{padding:14px 18px}
  .elementor.elementor .hero__claims b{font-size:22px}
  .elementor.elementor .hero__claims span{font-size:var(--t-xs);line-height:1.35;display:block}
  /* la comparativa respira un poco más dentro de cada celda */
  .elementor.elementor .cmp tbody tr{gap:9px}
  .elementor.elementor .cmp td{padding:11px 12px}
  .elementor.elementor .nav{height:80px;padding-left:20px;padding-right:20px;gap:10px}
  /* En móvil la barra se queda con el logotipo y la hamburguesa. El «Pide
     presupuesto» de aquí arriba competía con la hamburguesa por el mismo
     gesto y no aporta: el mismo CTA está en el hero, al final del cajón y en
     cada sección. Se oculta, no se borra — en escritorio sigue. */
.elementor.elementor .nav__right > .btn,.elementor.elementor .nav__right > .elementor-widget-html > .btn,.elementor.elementor .nav__right > .elementor-widget-html > .elementor-widget-container > .btn{display:none}
  /* el de palabra mide 198 px de ancho a 22 px de alto: no deja sitio al botón
     ni a la hamburguesa. En móvil va el monograma y la etiqueta cabe entera. */
  .elementor.elementor .logo .logo__palabra{display:none}
  .elementor.elementor .logo .logo__marca{display:block;height:34px;width:34px}
  /* el enlace del logotipo, con zona táctil de 44 */
  .elementor.elementor .logo{display:grid;place-items:center;min-height:44px;min-width:44px}
  .elementor.elementor .bens,.elementor.elementor .posts__grid{grid-template-columns:1fr}
  .elementor.elementor .foot{grid-template-columns:1fr}
  .elementor.elementor .hero__shell{min-height:0}
}

/* ==========================================================================
   AÑADIDO 21-sep-2026 · piezas nuevas de la auditoría de CRO
   ========================================================================== */

/* ---------- botón a WhatsApp -------------------------------------------
   Jorge confirmó (1-sep) que WhatsApp es el canal principal, y la web en
   producción ya usa wa.me/34662179989. Antes el CTA de cierre abría un
   `mailto:`, que deja al visitante delante de un correo en blanco y en móvil
   muchas veces no hace nada. El botón es el del sistema; lo único verde es el
   cuadrito del icono, para que se reconozca el destino sin meter otro color
   de marca en la paleta. */
.elementor.elementor .btn--wa .dot{background:#128C7E}
.elementor.elementor .btn--wa:hover .dot{background:#0F6E60}
.elementor.elementor .btn--light.btn--wa:hover .dot{background:#128C7E}

/* ---------- bloque de contacto ------------------------------------------
   Sustituye a la CTA de cierre. Dos caminos reales: WhatsApp (un toque) y un
   formulario de tres campos para quien no quiera WhatsApp. */
.elementor.elementor .contacto{background:var(--accent-deep);color:#fff;
  border-radius:var(--r-block);padding:var(--pad-sec) var(--pad-lat);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,64px);align-items:start}
.elementor.elementor .contacto h3{font-size:clamp(28px,3.4vw,48px);max-width:16ch}.elementor.elementor .contacto > div > p,.elementor.elementor .contacto > div > .elementor-widget-html > p,.elementor.elementor .contacto > div > .elementor-widget-html > .elementor-widget-container > p{margin-top:14px;max-width:46ch;color:rgba(255,255,255,.88);font-size:var(--t-m)}
.elementor.elementor .contacto__acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.6vh,28px)}
.elementor.elementor .contacto__acc .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.elementor.elementor .contacto__acc .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.elementor.elementor .cta__puntos{list-style:none;margin:clamp(16px,2.4vh,24px) 0 0;padding:0;display:grid;gap:9px;max-width:52ch}
.elementor.elementor .cta__puntos li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-size:var(--t-s);line-height:1.45;color:rgba(255,255,255,.9)}
.elementor.elementor .cta__puntos svg{width:20px;height:20px;stroke-width:2.4;color:#fff}

/* formulario: tres campos. Es donde más se pierde en captación, así que no hay
   ni un campo que no haga falta para devolver una cuota. */
.elementor.elementor .form{background:#fff;color:var(--ink);border-radius:var(--r-card);padding:clamp(22px,2.8vh,32px)}
.elementor.elementor .form .tit{font-size:var(--t-xl);letter-spacing:-.02em}.elementor.elementor .form > p,.elementor.elementor .form > .elementor-widget-html > p,.elementor.elementor .form > .elementor-widget-html > .elementor-widget-container > p{font-size:var(--t-xs);color:var(--txt-2);margin-top:7px}
.elementor.elementor .form label{display:block;margin-top:16px;font-size:var(--t-xs);font-weight:700;color:var(--txt-2)}
.elementor.elementor .form input,.elementor.elementor .form select,.elementor.elementor .form textarea{width:100%;margin-top:7px;padding:12px 14px;
  border:1px solid rgba(22,22,22,.22);border-radius:var(--r-btn);background:#fff;color:var(--ink);
  font:var(--t-m)/1.4 var(--text)}
.elementor.elementor .form textarea{min-height:84px;resize:vertical}
.elementor.elementor .form input:focus,.elementor.elementor .form select:focus,.elementor.elementor .form textarea:focus{outline:2px solid var(--accent-deep);
  outline-offset:1px;border-color:var(--accent-deep)}
.elementor.elementor .form .btn{width:100%;margin-top:20px;justify-content:space-between}
.elementor.elementor .form__rgpd{margin-top:12px;font-size:12px;line-height:1.5;color:var(--txt-2)}
.elementor.elementor .form__rgpd a{display:inline-block;padding:4px 0;color:var(--accent-text);
  text-decoration:underline;text-underline-offset:2px}

/* ---------- cómo funciona, en tres pasos --------------------------------
   Faltaba en las quince páginas. En renting la duda no es el equipo, es
   «¿esto qué papeleo lleva?»: la sección que vende la facilidad. */
.elementor.elementor .pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,32px);counter-reset:paso}
.elementor.elementor .paso{position:relative;padding-top:clamp(14px,2vh,20px);border-top:2px solid var(--line-dark);counter-increment:paso}
.elementor.elementor .paso::before{content:counter(paso,decimal-leading-zero);font-family:var(--display);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.1em;color:var(--accent-text)}
.elementor.elementor .paso .tit{margin-top:8px;font-size:var(--t-xl);line-height:1.25}
.elementor.elementor .paso p{margin-top:8px;font-size:var(--t-s);line-height:1.55;color:var(--txt-2)}
.elementor.elementor .sec--grey .paso{border-top-color:rgba(22,22,22,.16)}

/* ---------- para quién sí / para quién no -------------------------------
   Cualifica y filtra: el visitante se autoidentifica antes de escribir. */
.elementor.elementor .quien{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px);align-items:start}
.elementor.elementor .quien__col{background:#fff;border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:clamp(20px,2.6vh,28px)}
.elementor.elementor .quien__col--no{background:transparent}
.elementor.elementor .quien .tit{display:flex;align-items:center;gap:10px;font-size:var(--t-xl)}
.elementor.elementor .quien .tit span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none}
.elementor.elementor .quien .tit span svg{width:16px;height:16px;stroke-width:2.6}
.elementor.elementor .quien__col--si .tit span{background:var(--accent-deep);color:#fff}
.elementor.elementor .quien__col--no .tit span{background:rgba(22,22,22,.09);color:var(--txt-2)}
.elementor.elementor .quien ul{margin-top:16px;display:grid;gap:11px}
.elementor.elementor .quien li{position:relative;padding-left:20px;
  font-size:var(--t-s);line-height:1.5;color:var(--txt-2)}
.elementor.elementor .quien li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}
.elementor.elementor .quien__col--no li::before{background:rgba(22,22,22,.22)}

/* ---------- hueco de prueba social --------------------------------------
   No hay ni un testimonio autorizado. El hueco se maqueta y se marca con el
   chip de revisión para que rellenarlo sea pegar contenido, no rehacer nada. */
/* ---------- escena: tarjeta del punto y lista alternativa ---------------- */
.elementor.elementor .hot-card{position:absolute;z-index:6;right:clamp(20px,3vw,44px);top:clamp(20px,4vh,54px);
  width:min(330px,calc(100% - 40px));background:#fff;color:var(--ink);
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.elementor.elementor .hot-card[data-abierta]{opacity:1;visibility:visible;transform:none}
.elementor.elementor .hot-card img{width:100%;height:150px;object-fit:cover}
.elementor.elementor .hot-card__c{padding:16px 18px 18px}
.elementor.elementor .hot-card .tit{font-size:var(--t-l);line-height:1.25}
.elementor.elementor .hot-card p{margin-top:7px;font-size:var(--t-xs);line-height:1.5;color:var(--txt-2)}
.elementor.elementor .hot-card .disc{margin-top:14px;color:var(--accent-text)}
.elementor.elementor .hot-card__x{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(22,22,22,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.elementor.elementor .scene__lista{display:none}

/* ---------- responsive de lo nuevo --------------------------------------- */
@media (max-width:1100px){
  .elementor.elementor .contacto{grid-template-columns:1fr}
  .elementor.elementor .quien{grid-template-columns:1fr}
  /* el tope en `ch` deja el titular en una columna estrecha al lado de su propia
     entradilla cuando ya no sobra ancho: por debajo de 1.100 usa el que haya */
  .elementor.elementor .sec-head h3,.elementor.elementor .sec-head--ancla h3{max-width:none}
  /* con cuatro reclamos, `auto-fit` daba tres columnas y el cuarto se quedaba
     solo; con tres, el tercero. Dos por fila y el impar a fila completa. */
  .elementor.elementor .hero__claims{grid-template-columns:1fr 1fr}
  .elementor.elementor .hero__claims div+div{border-left:0}
  .elementor.elementor .hero__claims div:nth-child(2n){border-left:1px solid rgba(255,255,255,.12)}
  .elementor.elementor .hero__claims div:last-child:nth-child(odd){grid-column:1 / -1;border-left:0}
  .elementor.elementor .hot-card{right:20px;left:20px;width:auto}
}
@media (max-width:760px){
  .elementor.elementor .pasos{grid-template-columns:1fr}
  /* Los puntos sobre la foto no funcionan con el dedo: la misma información
     pasa a ser una lista de enlaces con miniatura. */
  .elementor.elementor .scene .hot,.elementor.elementor .hot-card{display:none}
  .elementor.elementor .scene__lista{display:grid;gap:10px;padding:0 20px 24px}
  .elementor.elementor .scene__lista a{display:flex;align-items:center;gap:14px;padding:10px;
    border:1px solid var(--line);border-radius:var(--r-card);color:#fff}
  .elementor.elementor .scene__lista img{width:66px;height:50px;object-fit:cover;border-radius:var(--r-btn);flex:none}
  .elementor.elementor .scene__lista b{display:block;font-size:var(--t-s);font-weight:600}
  .elementor.elementor .scene__lista em{display:block;font-style:normal;font-size:var(--t-xs);color:var(--txt-3d);margin-top:3px}
  .elementor.elementor .scene__lista svg{margin-left:auto;flex:none}
}

/* ===== interior.css adaptado ===== */
/* ===========================================================================
   Páginas interiores · dirección «Wefix»
   Usan el mismo lenguaje que la home: hero a pantalla completa con la foto de
   la solución de fondo, y secciones a todo el ancho que alternan claro y oscuro.
   Depende de sistema.css, de donde salen el hero, la barra, las tarjetas de
   solución, la tabla comparativa, los botones y el pie.
   =========================================================================== */

/* ----------------------------------------------- hero de página interior */
.elementor.elementor .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:var(--t-xs);
  color:var(--txt-3d);margin-bottom:clamp(14px,2.2vh,22px)}
.elementor.elementor .crumbs a{color:var(--txt-2d)}
.elementor.elementor .crumbs a:hover{color:var(--accent)}
.elementor.elementor .crumbs i{font-style:normal;color:var(--txt-3d)}
.elementor.elementor .crumbs b{font-weight:600;color:#fff}

.elementor.elementor .hero--int h2{font-size:clamp(34px,min(4.6vw,6.6vh),64px);max-width:16ch}
.elementor.elementor .hero--int .hero__body p{max-width:640px}
/* los tres reclamos cortos de la solución, bajo la entradilla */

/* ----------------------------------------------- secciones */
.elementor.elementor .sec{padding-block:0}
.elementor.elementor .sec--grey{background:var(--grey);border-radius:var(--r-block);
  padding:calc(var(--pad-sec)*1.2) var(--pad-lat)}
.elementor.elementor .sec--dark{background:var(--ink);color:#fff;border-radius:var(--r-block);
  padding:calc(var(--pad-sec)*1.2) var(--pad-lat)}
.elementor.elementor .sec--dark .sec-head p,.elementor.elementor .sec--dark p{color:var(--txt-2d)}
.elementor.elementor .sec--dark .sec-cta{border-top-color:var(--line)}

/* ----------------------------------------------- dolores: antes y después
   Hasta el 1-oct-2026 eran tres tarjetas en fila, con el icono encima del
   título, una línea divisoria y un texto de «solución» debajo que repetía en
   letra pequeña lo que el título ya decía — y la sección se quedaba sin una
   sola imagen. Ahora las tarjetas van en columna a la izquierda (icono junto
   al título, no encima) y la foto de la propia página queda fija en su
   columna mientras se hace scroll por las tarjetas. */
.elementor.elementor .pains-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,64px);align-items:start}
.elementor.elementor .pains-col{min-width:0}
.elementor.elementor .pains{display:flex;flex-direction:column;gap:clamp(14px,1.8vh,20px)}
.elementor.elementor .pain{border:1px solid var(--line-dark);border-radius:var(--r-block);
  padding:clamp(18px,2.4vh,26px);transition:border-color .25s ease}
.elementor.elementor .pain:hover{border-color:var(--ink)}
.elementor.elementor .pain__head{display:flex;align-items:center;gap:14px}
.elementor.elementor .pain__i{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-btn);
  background:var(--grey);color:var(--ink);flex:none}
.elementor.elementor .pain__i svg{width:20px;height:20px}
.elementor.elementor .pain h4,.elementor.elementor .pain .tit{font-size:clamp(17px,1.5vw,20px);line-height:1.25}
.elementor.elementor .pain p{margin-top:8px;font-size:var(--t-s);line-height:1.55;color:var(--txt-2)}
.elementor.elementor .pains__media{position:sticky;top:clamp(24px,4vh,48px);border-radius:var(--r-block);
  overflow:hidden;align-self:start;aspect-ratio:3/4;background:var(--grey)}
.elementor.elementor .pains__media img{display:block;width:100%;height:100%;object-fit:cover}
/* sin segunda foto real y distinta de la del hero: las tarjetas pasan a una
   fila de tres en vez de forzar una imagen que no pega con la página */
.elementor.elementor .pains-wrap--solo{display:block}
.elementor.elementor .pains-wrap--solo .pains{flex-direction:row}
.elementor.elementor .pains-wrap--solo .pain{flex:1}
@media (max-width:900px){
  .elementor.elementor .pains-wrap{grid-template-columns:1fr}
  .elementor.elementor .pains-wrap--solo .pains{flex-direction:column}
  .elementor.elementor .pains__media{position:static;aspect-ratio:16/9;order:-1}
}

/* ----------------------------------------------- qué incluye, sobre oscuro
   Era una lista a la izquierda y una tarjeta a la derecha: la tarjeta medía 170 px
   contra los 400 de la lista, dejaba 230 px de negro vacío debajo y había tres
   bordes derechos distintos en la misma sección (750 / 1.360 / 1.360). Ahora la
   lista ocupa el ancho en dos columnas y lo que conviene decidir va de banda
   debajo, justo antes del botón: se lee de arriba abajo y todo cuadra. */
.elementor.elementor .inc__lista{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,3.4vw,56px)}
.elementor.elementor .inc__lista li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;
  padding:19px 0;border-bottom:1px solid var(--line)}
/* con dos columnas, la línea de abajo la quitan las DOS últimas */
.elementor.elementor .inc__lista li:nth-last-child(-n+2):nth-child(odd),.elementor.elementor .inc__lista li:last-child{border-bottom:0}
/* con un número impar de conceptos el último se quedaba solo en la columna
   izquierda: ocupa la fila entera */
.elementor.elementor .inc__lista li:last-child:nth-child(odd){grid-column:1 / -1}
.elementor.elementor .inc__lista svg{width:24px;height:24px;padding:4px;border-radius:50%;box-sizing:border-box;
  background:var(--accent-deep);color:#fff;stroke-width:2.6}
.elementor.elementor .inc__lista b{display:block;font-size:var(--t-s);font-weight:600}
.elementor.elementor .inc__lista span{display:block;margin-top:4px;font-size:var(--t-xs);line-height:1.5;
  color:var(--txt-3d)}
.elementor.elementor .inc__aparte{margin-top:clamp(22px,3vh,32px);padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid var(--line)}
.elementor.elementor .inc__aparte .tit{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-3d)}
.elementor.elementor .inc__aparte ul{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.elementor.elementor .inc__aparte li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:var(--t-s);
  line-height:1.5;color:var(--txt-2d)}
.elementor.elementor .inc__aparte svg{width:18px;height:18px;color:var(--accent);margin-top:3px}


/* ----------------------------------------------- usos */
.elementor.elementor .usos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,30px)}
.elementor.elementor .uso{border:1px solid var(--line-dark);border-radius:var(--r-block);overflow:hidden;
  transition:.28s ease;display:flex;flex-direction:column}
.elementor.elementor .uso:hover{border-color:var(--ink)}
.elementor.elementor .uso__i{padding:clamp(20px,2.6vh,26px) clamp(20px,2.6vh,26px) 0}
.elementor.elementor .uso__i svg{width:34px;height:34px;color:var(--accent-text)}
.elementor.elementor .uso .tit{margin:14px clamp(20px,2.6vh,26px) 0;font-size:var(--t-l);line-height:1.25}
.elementor.elementor .uso p{margin:10px clamp(20px,2.6vh,26px) clamp(20px,2.6vh,26px);font-size:var(--t-s);
  line-height:1.55;color:var(--txt-2);flex:1}

/* ----------------------------------------------- FAQ */
/* A todo el ancho quedaban 1.400 px entre la pregunta y el signo que la abre,
   y la respuesta se cortaba a 760: media sección vacía. */
/* Y la columna va centrada en la página, no pegada a la izquierda: a 1.280 px
   dejaba 240 px muertos a su derecha, y era la única sección descuadrada. */
.elementor.elementor .faq{border-top:1px solid var(--line-dark);max-width:940px;margin-inline:auto;
  margin-top:clamp(30px,4.4vh,54px)}
/* el pie de la sección se alinea con el acordeón, no con el ancho de página.
Sin línea propia: el último <details> del acordeón ya cierra con su borde
   inferior,Sin línea propia: el último <details > .elementor-widget-html > del acordeón ya cierra con su borde
   inferior,Sin línea propia: el último <details > .elementor-widget-html > .elementor-widget-container > del acordeón ya cierra con su borde
   inferior,así que la de .sec-cta quedaba doblada justo encima del botón. */
.elementor.elementor .faq + .sec-cta{max-width:940px;margin-inline:auto;justify-content:center;border-top:0;padding-top:0}
/* la cabecera se centra con su acordeón; el contenido de cada pregunta, no */
.elementor.elementor .sec--faq .sec-head{text-align:center}.elementor.elementor .sec--faq .sec-head h3,.elementor.elementor .sec--faq .sec-head > p,.elementor.elementor .sec--faq .sec-head > .elementor-widget-html > p,.elementor.elementor .sec--faq .sec-head > .elementor-widget-html > .elementor-widget-container > p{margin-inline:auto}
.elementor.elementor .faq__i{border-bottom:1px solid var(--line-dark)}
.elementor.elementor .faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;padding:clamp(13px,1.9vh,20px) 0;font-family:var(--display);
  font-weight:700;letter-spacing:-.02em;font-size:clamp(15px,1.25vw,18px);line-height:1.35}
.elementor.elementor .faq__i summary::-webkit-details-marker{display:none}
.elementor.elementor .faq__i summary svg{flex:none;color:var(--accent-text);transition:transform .25s ease}
.elementor.elementor .faq__i[open] summary svg{transform:rotate(45deg)}
.elementor.elementor .faq__c{padding-bottom:clamp(14px,2vh,22px);max-width:78ch}
.elementor.elementor .faq__c p{font-size:var(--t-s);line-height:1.6;color:var(--txt-2)}
.elementor.elementor .faq__c p + p{margin-top:12px}
.elementor.elementor .faq__c a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------- carrusel de soluciones
   Usa .services y .svc__card de sistema.css, igual que la home. Aquí solo el
   apaño de que en las interiores hay un único carrusel por página. */
.elementor.elementor .services .svc-arrows{display:flex;gap:10px;margin-left:auto}

/* ----------------------------------------------- responsive */
@media (max-width:1100px){
  .elementor.elementor .hero--int h2{max-width:none}
}
@media (max-width:760px){
  .elementor.elementor .usos{grid-template-columns:1fr}
  .elementor.elementor .inc__lista{grid-template-columns:1fr}
  .elementor.elementor .inc__lista li:nth-last-child(-n+2):nth-child(odd){border-bottom:1px solid var(--line)}
  .elementor.elementor .inc__lista li:last-child{border-bottom:0}
  .elementor.elementor .inc__aparte ul{grid-template-columns:1fr}
}
@media (max-width:680px){
  /* La miga, a una sola línea. */
  /* En móvil la miga se queda en el enlace al padre y nada más: «Inicio» no
     aporta —ahí está el logotipo— y la página actual es el H1 de dos líneas más
     abajo, así que repetirla solo gasta pliegue. */
  .elementor.elementor .crumbs{flex-wrap:nowrap;overflow:hidden;font-size:12px;gap:7px}
  .elementor.elementor .crumbs a:first-child,.elementor.elementor .crumbs i{display:none}
  .elementor.elementor .crumbs b{display:none}
  .elementor.elementor .crumbs a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .elementor.elementor .crumbs a::before{content:"← "}
  .elementor.elementor .crumbs a{display:inline-block;padding:10px 0}
  .elementor.elementor .crumbs{margin-bottom:6px}
}
/* el mismo apretón de la home en portátiles bajos: con seis ítems en «qué incluye»
   o siete preguntas, estas dos secciones se pasaban de pantalla a 720 px de alto */
@media (max-height:820px){
  .elementor.elementor .sec--grey,.elementor.elementor .sec--dark{padding-top:var(--pad-sec);padding-bottom:var(--pad-sec)}
  .elementor.elementor .inc__lista li{padding:11px 0}
  .elementor.elementor .inc__lista span{font-size:var(--t-xs);margin-top:3px}
  .elementor.elementor .inc__aparte{padding:20px}
  .elementor.elementor .faq__c{padding-bottom:12px}
  .elementor.elementor .sec-head{margin-bottom:clamp(14px,2.2vh,40px)}
}

/* ── Compra directa o renting ────────────────────────────────────────────────
   Zigzag: cada modalidad es una fila ancha de foto + contenido, y la segunda
   invierte el orden. Con aire: la sección entera no cabe en una pantalla y no
   tiene por qué —cada fila sí es un golpe de vista completo—.

   Tres cosas que estaban mal y aquí se corrigen:
   · Se decía la modalidad TRES veces por fila (etiqueta, rótulo sobre la foto y
     titular), y el título de la sección ya la dice. Ahora hay un solo rótulo.
   · Las dos filas parecían componentes distintos: una con texto azul y fondo
     destacado, la otra plana. Ahora son gemelas y el renting se marca solo con
     el borde de acento, a los cuatro lados.
   · Nada alineaba entre filas. Ahora comparten rejilla y ritmo vertical. */
.elementor.elementor .dual{display:grid;gap:clamp(40px,5vw,80px)}
.elementor.elementor .dual__col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-block);overflow:hidden}
.elementor.elementor .dual__col--on{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}
.elementor.elementor .dual__col--on .dual__shot{order:2}          /* la segunda, foto a la derecha */
.elementor.elementor .dual__col--on .dual__cuerpo{order:1}

.elementor.elementor .dual__shot{position:relative;min-height:clamp(300px,46vh,440px);background:var(--grey);
  overflow:hidden}
.elementor.elementor .dual__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s ease}
.elementor.elementor .dual__col:hover .dual__shot img{transform:scale(1.04)}

.elementor.elementor .dual__cuerpo{display:grid;align-content:center;
  padding:clamp(28px,4.4vh,54px) clamp(26px,3vw,54px)}
/* Un solo rótulo, dentro del contenido y no encima de la foto. */
/* En una rejilla de una columna el hijo se estira: sin `justify-self` la
   píldora ocupaba todo el ancho del contenido. */
.elementor.elementor .dual__tag{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  padding:7px 14px 7px 11px;border-radius:var(--r-pill);
  background:var(--grey);color:var(--txt-2);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.elementor.elementor .dual__col--on .dual__tag{background:var(--accent-deep);color:#fff}
.elementor.elementor .dual__tag svg{width:17px;height:17px;stroke-width:2}
.elementor.elementor .dual__cuerpo .tit,.elementor.elementor .dual__cuerpo h3{margin-top:clamp(14px,2vh,20px);
  font-size:var(--t-xl);line-height:1.18}
.elementor.elementor .dual__lead{margin-top:10px;font-size:var(--t-s);line-height:1.55;color:var(--txt-2);
  max-width:46ch}
.elementor.elementor .dual__list{margin-top:clamp(18px,2.6vh,28px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.8vh,18px) 24px}
/* Tres hijos (marca, rótulo y descripción) en dos columnas: sin áreas, la
   descripción caía en la columna de 18 px y salía a palabra por línea. */
.elementor.elementor .dual__list li{display:grid;grid-template-columns:18px 1fr;gap:3px 9px;align-items:start;
  grid-template-areas:"i t" ". d"}
.elementor.elementor .dual__list li svg{grid-area:i;width:16px;height:16px;margin-top:3px;color:var(--accent-text)}
.elementor.elementor .dual__list b{grid-area:t;font-weight:700;font-size:var(--t-s);line-height:1.3}
.elementor.elementor .dual__list span{grid-area:d;color:var(--txt-2);font-size:var(--t-xs);line-height:1.5}

.elementor.elementor .btn--bloque{margin-top:clamp(20px,3vh,30px);justify-self:start}
.elementor.elementor .btn--neutro{background:var(--ink);color:#fff}
.elementor.elementor .btn--neutro:hover{background:var(--ink-2)}

.elementor.elementor .dual__note{max-width:76ch;margin-top:clamp(14px,2vh,22px);font-size:var(--t-s);
  line-height:1.55;color:var(--txt-2)}

@media(max-width:900px){
  .elementor.elementor .dual__col,.elementor.elementor .dual__col--on{grid-template-columns:1fr}
  .elementor.elementor .dual__col--on .dual__shot,.elementor.elementor .dual__col--on .dual__cuerpo{order:initial}
  .elementor.elementor .dual__shot{min-height:0;aspect-ratio:16/10}
  .elementor.elementor .dual__list{grid-template-columns:1fr}
}

/* ── Gamas del catálogo ──────────────────────────────────────────────────── */
.elementor.elementor .gamas{display:grid;gap:clamp(26px,3.4vh,40px)}
.elementor.elementor .gamas__t{display:flex;align-items:baseline;gap:12px;font-size:var(--t-l);line-height:1.25;
  padding-bottom:12px;border-bottom:1px solid var(--line-dark)}
.elementor.elementor .gamas__t span{font-size:var(--t-xs);font-weight:600;color:var(--txt-2);letter-spacing:.02em}
/* Cuatro columnas: con 7, 4 y 3 gamas, una rejilla de tres deja una ficha
   colgando al final de dos de los tres grupos. Con cuatro sale 4+3, 4 y 3. */
.elementor.elementor .gamas__rej{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px)}
.elementor.elementor .gama{border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:clamp(16px,2vh,22px);background:#fff}
.elementor.elementor .gama:hover{border-color:var(--accent)}
.elementor.elementor .gama h4,.elementor.elementor .gama .tit{display:block;font-size:var(--t-s);font-weight:700;line-height:1.3}
.elementor.elementor .gama p{margin-top:8px;font-size:var(--t-xs);color:var(--txt-2);line-height:1.5}

@media(max-width:1400px){ .elementor.elementor .gamas__rej{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1180px){ .elementor.elementor .gamas__rej{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px){ .elementor.elementor .dual{grid-template-columns:1fr} }
@media(max-width:640px){ .elementor.elementor .gamas__rej{grid-template-columns:1fr} }

/* Cada gama con su foto: son las del catálogo del propio cliente (V4). */
.elementor.elementor .gama{display:flex;flex-direction:column;padding:0;overflow:hidden}
.elementor.elementor .gama__shot{aspect-ratio:4/3;background:var(--grey);overflow:hidden}
.elementor.elementor .gama__shot img{width:100%;height:100%;object-fit:cover;display:block}
.elementor.elementor .gama h4,.elementor.elementor .gama .tit{margin:clamp(14px,1.8vh,18px) clamp(16px,2vh,20px) 0}
.elementor.elementor .gama p{margin:8px clamp(16px,2vh,20px) clamp(16px,2vh,20px)}

/* ── Las seis familias del catálogo ──────────────────────────────────────── */
.elementor.elementor .fams{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.elementor.elementor .fam{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-dark);
  border-radius:var(--r-card);overflow:hidden}
.elementor.elementor .fam:hover{border-color:var(--accent)}
.elementor.elementor .fam__shot{position:relative;aspect-ratio:16/10;background:var(--grey);overflow:hidden}
.elementor.elementor .fam__shot img{width:100%;height:100%;object-fit:cover;display:block}
.elementor.elementor .fam__chip{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(22,22,22,.82);color:#fff;font-size:var(--t-xs);font-weight:600}
.elementor.elementor .fam h3,.elementor.elementor .fam .tit{margin:clamp(16px,2vh,20px) clamp(18px,2.2vh,22px) 0;font-size:var(--t-l);
  line-height:1.25}
.elementor.elementor .fam p{margin:9px clamp(18px,2.2vh,22px) 0;font-size:var(--t-s);color:var(--txt-2);line-height:1.5}
.elementor.elementor .fam .disc{margin:auto clamp(18px,2.2vh,22px) clamp(18px,2.2vh,22px);padding-top:16px}

/* ── «Qué gama se monta aquí»: el puente al catálogo desde cada uso ──────── */
.elementor.elementor .gtira{max-width:var(--shell);margin-inline:auto;padding:clamp(20px,2.6vh,28px) var(--pad-lat);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  border-block:1px solid var(--line-dark)}
.elementor.elementor .gtira__t{font-size:var(--t-s);font-weight:700;flex:none}
.elementor.elementor .gtira__c{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.elementor.elementor .gchip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:#fff;font-size:var(--t-xs);font-weight:600;
  color:var(--ink);text-decoration:none}
.elementor.elementor .gchip:hover{border-color:var(--accent);color:var(--accent-text)}
.elementor.elementor .gtira .disc{flex:none}

@media(max-width:1180px){ .elementor.elementor .fams{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .elementor.elementor .fams{grid-template-columns:1fr}
  .elementor.elementor .gtira{flex-direction:column;align-items:flex-start} }

/* Versión corta (home y páginas de categoría): sin la descripción de cada punto
   y con la llamada como enlace. Es lo que hace que la sección quepa en una
   pantalla de 720 px; el detalle completo está en /comprar-o-rentar/. */
.elementor.elementor .dual--corto .dual__list li{grid-template-columns:18px 1fr;grid-template-areas:"i t";
  align-items:center}
.elementor.elementor .dual--corto .dual__list b{font-size:var(--t-s)}
.elementor.elementor .dual--corto .dual__cuerpo .disc{margin-top:clamp(10px,1.5vh,18px);justify-self:start}

/* ----------------------------------------------- página TV Dental */
/* Crédito de marca del partner: logo + texto, pequeño, bajo la entradilla del hero */
.elementor.elementor .tvd-brand{display:flex;align-items:center;gap:10px;margin-top:clamp(16px,2.4vh,26px)}
.elementor.elementor .tvd-brand img{height:22px;width:auto;filter:brightness(0) invert(1)}
.elementor.elementor .tvd-brand span{font-size:var(--t-xs);color:var(--txt-2d)}

/* Vídeo explicativo, justo debajo del hero: mismo radio de bloque que el resto */
.elementor.elementor .tvd-video{border-radius:var(--r-block);overflow:hidden;background:var(--ink);
  box-shadow:0 20px 50px rgba(22,22,22,.14)}
.elementor.elementor .tvd-video video{display:block;width:100%;height:auto}

/* Chips de categorías del catálogo, reutiliza el estilo de .gchip de gamas */
.elementor.elementor .tvd-cats{display:flex;flex-wrap:wrap;gap:10px}

/* Fotografías a sangre: sin bandas dentro del contenedor. */
.elementor.elementor .uso__foto{display:block;width:100%;height:clamp(220px,25vw,340px);object-fit:cover;object-position:center;background:#eeefed}
.elementor.elementor .inc__aparte--foto{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(24px,4vw,64px);align-items:start}
.elementor.elementor .inc__aparte--foto .inc__foto{grid-row:1 / 3;display:block;width:100%;height:100%;min-height:340px;max-height:480px;object-fit:cover;object-position:center;border-radius:var(--r-block)}
.elementor.elementor .inc__aparte--foto h3,.elementor.elementor .inc__aparte--foto ul{grid-column:2}
.elementor.elementor .inc__aparte--foto ul{grid-template-columns:1fr}
@media(max-width:680px){
  .elementor.elementor .inc__aparte--foto{grid-template-columns:1fr;gap:22px}
  .elementor.elementor .inc__aparte--foto .inc__foto{grid-row:auto;height:320px;min-height:0}
  .elementor.elementor .inc__aparte--foto h3,.elementor.elementor .inc__aparte--foto ul{grid-column:1}
}

/* Evitar que el CTA ensanche la columna y recorte el texto en móvil. */
@media(max-width:900px){.elementor.elementor .dual__cuerpo{grid-template-columns:minmax(0,1fr)}.elementor.elementor .dual__cuerpo .btn{max-width:100%;white-space:normal}.elementor.elementor .dual__tag{max-width:100%}}

/* Heros amplios con líneas equilibradas; la portada conserva para empresas unido. */
.elementor.elementor .hero__body{max-width:100%}
.elementor.elementor .hero__body h2{width:100%;max-width:none;text-wrap:balance}
.elementor.elementor .hero__body h2 .l{display:inline}

/* Imágenes completas: el marco se adapta a la foto; sin recorte ni zoom. */
.elementor.elementor .pains__media,.elementor.elementor .gama__shot,.elementor.elementor .fam__shot,.elementor.elementor .about__media,.elementor.elementor .svc__shot{
  aspect-ratio:auto;height:auto;min-height:0;max-height:none}
.elementor.elementor .pains__media img,.elementor.elementor .gama__shot img,.elementor.elementor .fam__shot img,.elementor.elementor .about__media img,.elementor.elementor .svc__shot img,.elementor.elementor .uso__foto,.elementor.elementor .inc__aparte--foto .inc__foto{
  display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;transform:none}
.elementor.elementor .svc__card:hover .svc__shot img,.elementor.elementor .dual__col:hover .dual__shot img{transform:none}
.elementor.elementor .dual__shot{aspect-ratio:auto;min-height:0;align-self:center}
.elementor.elementor .dual__shot img{position:static;display:block;width:100%;height:auto;object-fit:contain}
.elementor.elementor .hero__bg img{object-fit:contain}
.elementor.elementor .mega li img,.elementor.elementor .scene__lista img{object-fit:contain}
.elementor.elementor .hot-card img{height:auto;object-fit:contain}
.elementor.elementor .scene__img{height:auto;min-height:0}
.elementor.elementor .scene__img img{display:block;width:100%;height:auto;object-fit:contain}

/* Limitar ambas columnas al adaptar la altura natural de la imagen. */
@media(min-width:1101px){.elementor.elementor .about{grid-template-columns:minmax(0,663fr) minmax(0,602fr)}}
/* Bloques de visita: imagen contenida y título unido a los puntos. */
.elementor.elementor .inc__aparte--foto{
  display:grid;grid-template-columns:clamp(180px,22vw,260px) minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr;column-gap:clamp(28px,5vw,72px);row-gap:0;
  align-items:start;padding:32px 0 0;
}
.elementor.elementor .inc__aparte--foto .inc__foto{
  grid-column:1;grid-row:1 / 5;width:100%;height:auto;min-height:0;max-height:none;
  object-fit:contain;border-radius:20px;
}.elementor.elementor .inc__aparte--foto > :nth-child(2),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > :nth-child(2),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-container > :nth-child(2){grid-column:2;grid-row:2}.elementor.elementor .inc__aparte--foto > :nth-child(3),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > :nth-child(3),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-container > :nth-child(3){grid-column:2;grid-row:3}
.elementor.elementor .inc__aparte--foto .tit{font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.02em;text-transform:none;color:var(--txt-1d)}
.elementor.elementor .inc__aparte--foto ul{grid-template-columns:1fr;margin:20px 0 0;gap:0}
.elementor.elementor .inc__aparte--foto li{padding:14px 0;border-bottom:1px solid var(--line)}
.elementor.elementor .inc__aparte--foto li:last-child{border-bottom:0}
@media(max-width:640px){
  .elementor.elementor .inc__aparte--foto{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:0;padding:24px 0 0}
  .elementor.elementor .inc__aparte--foto .inc__foto{grid-column:1;grid-row:1;width:min(100%,220px);margin:0 auto 24px}.elementor.elementor .inc__aparte--foto > :nth-child(2),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > :nth-child(2),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-container > :nth-child(2){grid-column:1;grid-row:2}.elementor.elementor .inc__aparte--foto > :nth-child(3),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > :nth-child(3),.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-container > :nth-child(3){grid-column:1;grid-row:3}
  .elementor.elementor .inc__aparte--foto ul{margin-top:12px}
}.elementor.elementor .inc__aparte--foto > .elementor-widget-html,.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-html,.elementor.elementor .inc__aparte--foto > .elementor-widget-html > .elementor-widget-container > .elementor-widget-html{display:block;min-height:0;height:auto;align-self:start}

/* Tarjetas: una proporción por componente, sin recortar ni deformar equipos. */
.elementor.elementor .svc__shot:not(.svc__shot--icon){aspect-ratio:1/1;height:auto;min-height:0;flex:none}
.elementor.elementor .svc__shot:not(.svc__shot--icon) img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;transform:none}
.elementor.elementor .fam__shot{aspect-ratio:3/2;height:auto;min-height:0}
.elementor.elementor .gama__shot{aspect-ratio:3/4;height:auto;min-height:0}
.elementor.elementor .fam__shot img,.elementor.elementor .gama__shot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform:none}
.elementor.elementor .gama__shot{position:relative}
.elementor.elementor .uso__foto{aspect-ratio:3/4;width:100%;height:auto;object-fit:contain}

/* Feedback 2026-10-07: marca, encuadres y separación entre modalidades. */
.elementor.elementor .nav .logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.elementor.elementor .nav .logo__tagline{display:block;color:#fff;font-size:9px;font-weight:600;line-height:1.3;letter-spacing:.035em;text-align:center;white-space:nowrap}
.elementor.elementor .brands__logos img{display:block;width:145px;height:auto;object-fit:contain}
.elementor.elementor .dual{gap:40px}
.elementor.elementor .dual__shot{aspect-ratio:auto;min-height:clamp(300px,46vh,440px);align-self:stretch}
.elementor.elementor .dual__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.elementor.elementor .hero--compra .hero__bg img{object-fit:cover}
@media(max-width:900px){.elementor.elementor .dual{gap:32px}.elementor.elementor .dual__shot{min-height:0;aspect-ratio:16/10}}
@media(max-width:700px){.elementor.elementor .nav .logo .logo__palabra{display:block;height:auto;width:215px}.elementor.elementor .nav .logo .logo__marca{display:none}.elementor.elementor .nav .logo__tagline{font-size:9px;letter-spacing:0}}

/* ===== tema-v4.css adaptado ===== */
/* ===========================================================================
   Tema V4 para las landings por servicio
   Se carga DESPUÉS de sistema.css e interior.css (los del rediseño, que traen
   la maquetación, el contenido y el SEO) y cambia solo la piel a la de la V4
   de Jorge: azul marino #031a35, azul de marca #004bb2/#1863dc, amarillo
   #ffc629 en las llamadas, Plus Jakarta Sans en títulos e Inter en texto.
   Decisión de Javier, 8-oct-2026: «cogemos el estilo de la V4 y lo aplicamos
   a las landings de servicio».
   =========================================================================== */
:root{
  --ink:#031a35;
  --ink-2:#0a2a4f;
  --accent:#1863dc;
  --accent-deep:#004bb2;
  --accent-text:#004bb2;
  --accent-soft:#e8f0ff;
  --grey:#f2f4f6;
  --eyebrow:#004bb2;
  --eyebrow-d:#67e8f9;
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-block:24px;
  --r-card:16px;
  --r-btn:8px;
  --txt-1:#191c1e;
  --txt-2:#424654;
}
body.elementor-page{background:#f7f9fb;color:var(--txt-1)}
.elementor.elementor h1,.elementor.elementor h2,.elementor.elementor h3,.elementor.elementor h4,.elementor.elementor .tit,.elementor.elementor .display{font-weight:800;letter-spacing:-.02em}

/* ---- ancho: la misma columna que la home de la V4 ----
   La home usa contenedores de 1280 px con 40 px de margen (16 en móvil). Aquí todas las
   secciones van a todo el ancho y el contenido se alinea a esa columna con --pad-lat, que
   es el margen que el CSS del rediseño ya usa en todas partes. Así ningún bloque arranca en
   otra x ni es más ancho que en la home. */
:root{--col:1280px;--lat:40px;--shell:100%;--gutter:0px;
  --pad-lat:max(var(--lat),calc((100vw - var(--col)) / 2))}
@media (max-width:767px){:root{--lat:16px}}
.elementor.elementor .wrap,.elementor.elementor .bleed{width:100%;max-width:none}
.elementor.elementor .services,.elementor.elementor .compare,.elementor.elementor .contacto,.elementor.elementor .cta,.elementor.elementor .sec--grey,.elementor.elementor .bleed{border-radius:0}

/* ---- hero: a sangre, como el de la V4, y de alto una pantalla junto con la cabecera ---- */
.elementor.elementor .hero{padding-top:0}.elementor.elementor .hero > .hero__shell,.elementor.elementor .hero > .elementor-widget-html > .hero__shell,.elementor.elementor .hero > .elementor-widget-html > .elementor-widget-container > .hero__shell{width:100%;max-width:none;border-radius:0;background:var(--ink);
  height:auto;min-height:calc(100svh - var(--eq-h));justify-content:center}
@media (min-width:1101px){.elementor.elementor .hero > .hero__shell{height:auto;min-height:calc(100svh - var(--eq-h))}}
.elementor.elementor .hero__body{padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(40px,6vh,80px)}
.elementor.elementor .hero__bg img{opacity:1}
.elementor.elementor .hero__bg::after{background:linear-gradient(90deg,#031a35 0%,rgba(3,26,53,.88) 42%,rgba(3,26,53,.25) 100%),
  linear-gradient(0deg,rgba(3,26,53,.55),transparent 45%)}
.elementor.elementor .hero .blob{display:none}
.elementor.elementor .hero .eyebrow{display:inline-block;color:#67e8f9;border:1px solid rgba(103,232,249,.3);background:rgba(103,232,249,.1);
  padding:6px 14px;border-radius:999px;letter-spacing:.12em}
.elementor.elementor .hero h2{font-weight:800;letter-spacing:-.025em;line-height:1.06}
.elementor.elementor .crumbs a,.elementor.elementor .crumbs b,.elementor.elementor .crumbs i{color:rgba(255,255,255,.75)}
/* las cifras del hero pasan a viñetas bajo la entradilla (8-oct) */
.elementor.elementor .hero__vinetas{list-style:none;margin:clamp(18px,3vh,26px) 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.elementor.elementor .hero__vinetas li{display:flex;align-items:flex-start;gap:12px;font-size:var(--t-m);line-height:1.45;color:rgba(255,255,255,.88)}
.elementor.elementor .hero__vinetas svg{flex:none;margin-top:2px}
.elementor.elementor .hero__vinetas b{color:#fff;font-weight:700}

/* ---- botones: el amarillo de la V4 para la acción principal ---- */
.elementor.elementor .btn{background:#ffc629;color:#031a35;border-color:#ffc629;font-weight:700;box-shadow:0 8px 22px rgba(255,198,41,.22)}
.elementor.elementor .btn .dot{background:rgba(3,26,53,.12)}
.elementor.elementor .btn .dot svg{stroke:#031a35}
.elementor.elementor .btn:hover{background:#ffd45c;border-color:#ffd45c;color:#031a35}
.elementor.elementor .btn:hover .dot{background:rgba(3,26,53,.18)}
.elementor.elementor .btn--light{background:#ffc629;color:#031a35;border-color:#ffc629}
.elementor.elementor .btn--light .dot{background:rgba(3,26,53,.12)}
.elementor.elementor .btn--light:hover{background:#ffd45c;color:#031a35;border-color:#ffd45c}
.elementor.elementor .btn--light:hover .dot{background:rgba(3,26,53,.18)}
.elementor.elementor .btn--ghost{background:transparent;box-shadow:none;border:2px solid rgba(255,255,255,.8);color:#fff}
.elementor.elementor .btn--ghost:hover{background:#fff;color:#031a35!important;border-color:#fff}
.elementor.elementor .btn--wa{background:#178a46;border-color:#178a46;color:#fff;box-shadow:none}
.elementor.elementor .btn--wa .dot svg{stroke:#fff}
.elementor.elementor .btn--wa:hover{background:#127238;border-color:#127238;color:#fff}

/* ---- bloques de color: marino de la V4, el de cierre en azul de marca ---- */
.elementor.elementor .services:not(.services--claro),.elementor.elementor .compare{background:var(--ink)}
.elementor.elementor .contacto,.elementor.elementor .cta{background:linear-gradient(135deg,#004bb2,#0a2a4f)}
.elementor.elementor .svc__card:hover{background:#004bb2;border-color:#004bb2}

/* ---- tarjetas: blancas con borde suave y sombra, como las de la V4 ---- */
.elementor.elementor .ben{background:#fff;border:1px solid #e0e3e5;box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}
.elementor.elementor .sec--grey{background:#f2f4f6}

/* el H1 de las landings es la píldora con la consulta del KWR: ancho de su texto, no de la fila */
.elementor.elementor .hero h1.eyebrow{width:fit-content;max-width:100%}
/* foto del hero a sangre y cubriendo, como en la V4 (en el rediseño iba en contain) */
.elementor.elementor .hero__bg img{object-fit:cover;object-position:70% center}

/* ---- «Qué incluye»: foto grande + conceptos en tarjetas (8-oct) ----
   Antes era una lista de texto a todo el ancho sobre marino, sin una sola imagen. */
.elementor.elementor .inc-v4{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4.4vw,64px);align-items:stretch}
.elementor.elementor .inc-v4__foto{margin:0;border-radius:20px;overflow:hidden;min-height:420px;position:relative}
.elementor.elementor .inc-v4__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.elementor.elementor .inc-v4__txt{display:flex;flex-direction:column;min-width:0}
.elementor.elementor .sec--incluye .sec-head{margin-bottom:clamp(20px,3vh,32px)}
.elementor.elementor .sec--incluye .inc__lista{gap:12px}
.elementor.elementor .sec--incluye .inc__lista li,.elementor.elementor .sec--incluye .inc__lista li:last-child,.elementor.elementor .sec--incluye .inc__lista li:nth-last-child(-n+2):nth-child(odd){padding:16px 18px;border:1px solid rgba(255,255,255,.12);
  border-radius:14px;background:rgba(255,255,255,.05);gap:12px}
.elementor.elementor .sec--incluye .inc__lista svg{background:#ffc629;color:#031a35}
.elementor.elementor .sec--incluye .inc__lista b{font-size:16px;font-weight:700;color:#fff}
.elementor.elementor .sec--incluye .inc__lista span{font-size:14px;color:rgba(255,255,255,.72)}
.elementor.elementor .sec--incluye .inc__aparte{border-top:0;padding:18px 20px;border-radius:14px;background:rgba(103,232,249,.07);
  border:1px solid rgba(103,232,249,.22)}
.elementor.elementor .sec--incluye .inc__aparte .tit{color:#67e8f9}
.elementor.elementor .sec--incluye .inc__aparte ul{grid-template-columns:1fr;gap:10px}
.elementor.elementor .sec--incluye .inc__aparte li{font-size:15px;color:rgba(255,255,255,.85)}
.elementor.elementor .sec--incluye .sec-cta{margin-top:auto;padding-top:clamp(22px,3vh,32px);border-top:0}
@media (max-width:980px){
  .elementor.elementor .inc-v4{grid-template-columns:1fr}
  .elementor.elementor .inc-v4__foto{min-height:0;aspect-ratio:16/10}
}
@media (max-width:620px){.elementor.elementor .sec--incluye .inc__lista{grid-template-columns:1fr}}

/* ---- tarjetas de servicio: la foto ocupa todo el ancho de la tarjeta (8-oct) ---- */
.elementor.elementor .svc__card{padding:0;gap:12px;overflow:hidden;border-radius:18px}
.elementor.elementor .svc__shot{border-radius:0;height:clamp(190px,24vh,250px)}
.elementor.elementor .svc__card .tit{font-size:21px;line-height:1.2;padding:8px 22px 0;letter-spacing:-.015em}
.elementor.elementor .svc__card p{padding:0 22px}.elementor.elementor .svc__card > .disc,.elementor.elementor .svc__card > .elementor-widget-html > .disc,.elementor.elementor .svc__card > .elementor-widget-html > .elementor-widget-container > .disc{margin:0 22px 22px}
.elementor.elementor .services--claro .svc__card{box-shadow:0 4px 14px rgba(3,26,53,.06)}
.elementor.elementor .services--claro .svc__card:hover{background:#fff;border-color:#c9d6ea;transform:translateY(-4px);box-shadow:0 18px 40px rgba(3,26,53,.14)}
.elementor.elementor .services--claro .svc__card:hover p{color:var(--txt-2)}
.elementor.elementor .services--claro .svc__card:hover .tit{color:var(--ink)}

/* ---- ritmo vertical como la home: secciones pegadas, cada una con su fondo y su relleno ----
   El rediseño separaba bloques redondeados con margen (--aire); a todo el ancho eso dejaba
   franjas de fondo sueltas entre dos bloques de color. */
:root{--grey:#eef2f7}
body.elementor-page{background:#fff}.elementor > section.e-con,.elementor > .elementor-widget-html > section.e-con,.elementor > .elementor-widget-html > .elementor-widget-container > section.e-con{margin-top:0}.elementor > section.e-con.sec,.elementor > .elementor-widget-html > section.e-con.sec,.elementor > .elementor-widget-html > .elementor-widget-container > section.e-con.sec,.elementor > section.e-con.bleed,.elementor > .elementor-widget-html > section.e-con.bleed,.elementor > .elementor-widget-html > .elementor-widget-container > section.e-con.bleed{padding-block:clamp(72px,10vh,112px)}
.elementor.elementor .sec--grey,.elementor.elementor .services--claro{background:#eef2f7}
.elementor.elementor .gtira{max-width:none;width:100%;margin:0;background:#0a2a4f;color:#fff;border-radius:0;
  padding-block:20px;border-top:1px solid rgba(255,255,255,.08)}
.elementor.elementor .gtira__t{color:#fff}
.elementor.elementor .gtira .disc,.elementor.elementor .gtira .disc span{color:#67e8f9}

/* ---- pasos: tarjetas con el número grande, como bloque visual y no solo texto ---- */
.elementor.elementor .paso{background:#fff;border:1px solid #e0e3e5;border-top:0;border-radius:16px;padding:26px 24px 24px;
  box-shadow:0 4px 14px rgba(3,26,53,.06)}
.elementor.elementor .paso::before{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:#031a35;color:#ffc629;font-size:20px;letter-spacing:0}
.elementor.elementor .paso .tit{margin-top:18px}

/* ---- rejillas sin huérfanas tras la limpieza de contenido (8-oct) ----
   Ventajas pasó de 6 a 4 tarjetas y las gamas de 14 a 11: con 3 y 4 columnas fijas
   quedaban tarjetas sueltas en la última fila. */
.elementor.elementor .bens{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.elementor.elementor .gamas__rej{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.elementor.elementor .gamas__rej{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.elementor.elementor .gamas__rej{grid-template-columns:1fr}}

/* ---- botones de sección: centrados y sin la raya encima (8-oct) ---- */
.elementor.elementor .sec-cta{justify-content:center;border-top:0!important;padding-top:0;margin-top:clamp(32px,4.4vh,48px)}

/* ---- el problema: título a todo el ancho; tarjetas y foto a la misma altura ---- */
.elementor.elementor .sec--problema .sec-head{max-width:760px;margin-bottom:clamp(26px,3.6vh,40px)}
.elementor.elementor .sec--problema .pains-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:clamp(24px,3vw,40px)}
.elementor.elementor .sec--problema .pains-col{display:flex}
.elementor.elementor .sec--problema .pains{display:flex;flex-direction:column;gap:14px;width:100%}
.elementor.elementor .sec--problema .pain{flex:1;display:flex;flex-direction:column;justify-content:center;
  background:#fff;border:1px solid #e0e3e5;border-radius:16px;padding:22px 24px;box-shadow:0 4px 14px rgba(3,26,53,.05)}
.elementor.elementor .sec--problema .pain__i{background:#031a35;color:#ffc629;border-radius:10px}
.elementor.elementor .sec--problema .pains__media{position:relative;top:auto;height:auto;min-height:360px;border-radius:20px;overflow:hidden}
.elementor.elementor .sec--problema .pains__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.elementor.elementor .sec--problema .pains-wrap--solo .pains{flex-direction:row}
@media (max-width:900px){
  .elementor.elementor .sec--problema .pains-wrap{grid-template-columns:1fr}
  .elementor.elementor .sec--problema .pains__media{min-height:0;aspect-ratio:16/10;order:-1}
}

/* ---- fichas de gama compactas: foto entera a la izquierda, texto a la derecha ----
   Las fotos son verticales (3:4): en columna la tarjeta medía más de 500 px de alto. */
.elementor.elementor .gamas__rej{gap:16px}
.elementor.elementor .gama{flex-direction:row!important;align-items:stretch;background:#fff;border:1px solid #e0e3e5;border-radius:16px;
  overflow:hidden;box-shadow:0 4px 14px rgba(3,26,53,.05)}
.elementor.elementor .gama__shot{flex:0 0 38%;aspect-ratio:3/4;height:auto!important;border-radius:0;margin:0}
.elementor.elementor .gama__shot img{width:100%;height:100%;object-fit:cover}.elementor.elementor .gama > .tit,.elementor.elementor .gama > .elementor-widget-html > .tit,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > .tit,.elementor.elementor .gama > p,.elementor.elementor .gama > .elementor-widget-html > p,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > p{padding-inline:18px}
.elementor.elementor .gama{display:grid!important;grid-template-columns:38% 1fr;grid-template-rows:auto 1fr;column-gap:0}
.elementor.elementor .gama__shot{grid-row:1 / span 2;flex:none}.elementor.elementor .gama > .tit,.elementor.elementor .gama > .elementor-widget-html > .tit,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > .tit{align-self:end;padding-top:18px;font-size:17px;line-height:1.25}.elementor.elementor .gama > p,.elementor.elementor .gama > .elementor-widget-html > p,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > p{align-self:start;margin-top:8px;padding-bottom:18px;font-size:14px;line-height:1.5;color:var(--txt-2)}
.elementor.elementor .gamas{gap:clamp(28px,4vh,44px)}

/* ---- para quién encaja: el sí en marino, el no en claro, y los usos con icono destacado ---- */
.elementor.elementor .quien{gap:20px}
.elementor.elementor .quien__col{border-radius:18px;padding:28px 30px}
.elementor.elementor .quien__col--si{background:#031a35;border-color:#031a35;color:#fff}
.elementor.elementor .quien__col--si .tit{color:#fff}
.elementor.elementor .quien__col--si li{color:rgba(255,255,255,.85)}
.elementor.elementor .quien__col--si li::before{background:#ffc629!important}.elementor.elementor .quien__col--si .tit > span,.elementor.elementor .quien__col--si .tit > .elementor-widget-html > span,.elementor.elementor .quien__col--si .tit > .elementor-widget-html > .elementor-widget-container > span{background:#ffc629!important;color:#031a35!important}
.elementor.elementor .quien__col--no{background:#fff;border:1px solid #e0e3e5}
.elementor.elementor .uso{background:#fff;border:1px solid #e0e3e5;border-radius:16px;box-shadow:0 4px 14px rgba(3,26,53,.05)}
.elementor.elementor .uso__i{display:inline-grid;place-items:center;width:52px;height:52px;margin:24px 0 0 24px;padding:0!important;
  border-radius:14px;background:#e8f0ff;color:#004bb2}
.elementor.elementor .sec--problema .pains__media{align-self:stretch;height:auto!important;max-height:none!important;aspect-ratio:auto!important}
@media (max-width:900px){.elementor.elementor .sec--problema .pains__media{aspect-ratio:16/10!important}}
/* con una o dos gamas la ficha no se queda sola a la izquierda */
.elementor.elementor .sec--gamas .gamas__rej{display:flex;flex-wrap:wrap;justify-content:center}
.elementor.elementor .sec--gamas .gama{flex:0 1 400px}
.elementor.elementor .sec--gamas .sec-head{text-align:center;margin-inline:auto}
.elementor.elementor .gama{grid-template-columns:38% minmax(0,1fr)!important}
@media (max-width:560px){
  .elementor.elementor .gama{grid-template-columns:1fr!important;grid-template-rows:auto!important}
  .elementor.elementor .gama__shot{grid-row:auto!important;aspect-ratio:4/3}.elementor.elementor .gama > .tit,.elementor.elementor .gama > .elementor-widget-html > .tit,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > .tit{padding-top:16px}
}

/* ---- una sola gama: ficha grande a lo ancho, no una tarjeta suelta (8-oct) ---- */
.elementor.elementor .sec--gamas .gamas__rej--una .gama{flex:1 1 100%;max-width:1040px;grid-template-columns:minmax(0,5fr) minmax(0,6fr)!important;
  grid-template-rows:1fr auto auto 1fr!important;border-radius:20px}
.elementor.elementor .gamas__rej--una .gama__shot{grid-row:1 / span 4!important;aspect-ratio:4/3;min-height:360px}.elementor.elementor .gamas__rej--una .gama > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > .tit{grid-row:2;font-size:clamp(24px,2.4vw,32px);padding:0 clamp(24px,4vw,56px)}.elementor.elementor .gamas__rej--una .gama > p,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > p,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > p{grid-row:3;font-size:18px;line-height:1.6;margin-top:14px;padding:0 clamp(24px,4vw,56px)}.elementor.elementor .gamas__rej--una .gama > .btn,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .btn,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > .btn{grid-row:4;align-self:start;justify-self:start;margin:26px clamp(24px,4vw,56px) 0}
@media (max-width:760px){
  .elementor.elementor .sec--gamas .gamas__rej--una .gama{grid-template-columns:1fr!important;grid-template-rows:auto!important}
  .elementor.elementor .gamas__rej--una .gama__shot{grid-row:auto!important;min-height:0}.elementor.elementor .gamas__rej--una .gama > *,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > *,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > *{grid-row:auto!important}.elementor.elementor .gamas__rej--una .gama > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > .tit{padding-top:24px}.elementor.elementor .gamas__rej--una .gama > .btn,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .btn,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > .btn{margin-bottom:26px}
}
.elementor.elementor .sec--gamas .sec-head h3{margin-inline:auto}.elementor.elementor .gamas__rej--una .gama > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .tit,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > .tit,.elementor.elementor .gamas__rej--una .gama > p,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > p,.elementor.elementor .gamas__rej--una .gama > .elementor-widget-html > .elementor-widget-container > p{margin-left:0;margin-right:0}

/* ===========================================================================
   SISTEMA COMÚN home ↔ landings (8-oct). Los mismos valores están en
   tema-home.css para la home (Tailwind). Si se cambia uno, se cambian los dos.
     título de sección   30 → 44 px · 800 · #031a35
     título de tarjeta   20 px · 700 · #031a35 (fichas de gama, 18)
     antetítulo          píldora 12 px · 700 · mayúsculas · azul 10 %
     botón               8 px de radio · 52 px de alto · 16 px · 700 · amarillo
     tarjeta             16 px de radio · borde #e0e3e5 · sombra suave
     sección             relleno vertical clamp(72px, 10vh, 112px)
   =========================================================================== */
.elementor.elementor .sec-head h3,.elementor.elementor .sec-head h2:not(.eyebrow){font-size:clamp(30px,3.1vw,44px);line-height:1.12;font-weight:800;color:#031a35}
.elementor.elementor .sec--dark .sec-head h3,.elementor.elementor .services:not(.services--claro) .sec-head h3,.elementor.elementor .compare .sec-head h3,.elementor.elementor .contacto .sec-head h3,.elementor.elementor .cta h3{color:#fff}
.elementor.elementor .sec-head .eyebrow{display:inline-block;font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:#004bb2;background:rgba(0,75,178,.1);border:1px solid rgba(0,75,178,.2);padding:6px 14px;border-radius:999px;line-height:1.4}
.elementor.elementor .sec--dark .sec-head .eyebrow,.elementor.elementor .services:not(.services--claro) .sec-head .eyebrow,.elementor.elementor .compare .sec-head .eyebrow,.elementor.elementor .contacto .eyebrow,.elementor.elementor .cta .eyebrow{
  color:#67e8f9;background:rgba(103,232,249,.1);border-color:rgba(103,232,249,.3)}
.elementor.elementor .ben .tit,.elementor.elementor .pain__head .tit,.elementor.elementor .paso .tit,.elementor.elementor .uso .tit,.elementor.elementor .quien__col .tit,.elementor.elementor .svc__card .tit,.elementor.elementor form .tit{font-family:var(--display);font-size:20px;font-weight:700;
  line-height:1.25;letter-spacing:-.01em;color:#031a35}
.elementor.elementor .quien__col--si .tit{color:#fff}.elementor.elementor .gama > .tit,.elementor.elementor .gama > .elementor-widget-html > .tit,.elementor.elementor .gama > .elementor-widget-html > .elementor-widget-container > .tit{font-weight:700;font-size:18px;color:#031a35}
.elementor.elementor .btn{border-radius:8px;min-height:52px;font-size:16px}
.elementor.elementor .svc__card,.elementor.elementor .quien__col,.elementor.elementor .ben,.elementor.elementor .paso,.elementor.elementor .uso,.elementor.elementor .gama,.elementor.elementor .sec--problema .pain{border-radius:16px}
.elementor.elementor .svc__card,.elementor.elementor .ben,.elementor.elementor .paso,.elementor.elementor .uso,.elementor.elementor .gama,.elementor.elementor .sec--problema .pain,.elementor.elementor .quien__col--no{border:1px solid #e0e3e5;box-shadow:0 4px 14px rgba(3,26,53,.06)}

/* ---- hero en móvil: que el botón principal quepa en la primera pantalla (medido a 360×740) ---- */
@media (max-width:480px){
  .elementor.elementor .hero__body{padding-top:22px;padding-bottom:26px}
  .elementor.elementor .hero .crumbs{margin-bottom:12px}
  .elementor.elementor .hero h1.eyebrow{font-size:11px;padding:5px 12px;letter-spacing:.1em;line-height:1.45}
  .elementor.elementor .hero h2{font-size:clamp(29px,8.4vw,34px);margin-top:12px}.elementor.elementor .hero__body > p,.elementor.elementor .hero__body > .elementor-widget-html > p,.elementor.elementor .hero__body > .elementor-widget-html > .elementor-widget-container > p{font-size:15.5px;line-height:1.5;margin-top:12px}
  .elementor.elementor .hero__vinetas{margin-top:14px;gap:6px}
  .elementor.elementor .hero__vinetas li{font-size:15px;line-height:1.4;gap:10px}
  .elementor.elementor .hero__cta{margin-top:18px;gap:10px}
}

/* palabras largas (sobre todo en alemán): se parten con guion según el lang de la página */
.elementor.elementor h1,.elementor.elementor h2,.elementor.elementor h3,.elementor.elementor .tit,.elementor.elementor .eyebrow{overflow-wrap:break-word}
.elementor.elementor :lang(de) :is(h1,h2,h3,h4,.tit,.eyebrow){-webkit-hyphens:auto;hyphens:auto}

/* ===========================================================================
   Gamas (8-oct, 2.ª versión): «son horribles y sin ninguna optimización SEO».
   Sección con cabecera de keywords (gamas.py), fichas con foto, referencia, H4,
   descripción, características en lista y botón a WhatsApp. Misma ficha en el
   catálogo de renting-pantallas.
   =========================================================================== */
.elementor.elementor .sec--gm{background:#eef2f7;padding-inline:var(--pad-lat)}
.elementor.elementor .sec--gm .sec-head{text-align:center;margin-inline:auto;max-width:820px}
.elementor.elementor .sec--gm .sec-head h3,.elementor.elementor .sec--gm .sec-head p{margin-inline:auto}
.elementor.elementor .gm-rej{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(290px,380px));justify-content:center;gap:24px}
.elementor.elementor .gamas__rej.gm-rej{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.elementor.elementor .gm{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e3e5;border-radius:16px;overflow:hidden;
  box-shadow:0 4px 14px rgba(3,26,53,.06);transition:transform .25s ease,box-shadow .25s ease}
.elementor.elementor .gm:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(3,26,53,.14)}
.elementor.elementor .gm__foto{margin:0;aspect-ratio:4/3;overflow:hidden;background:#031a35}
.elementor.elementor .gm__foto img{display:block;width:100%;height:100%;object-fit:cover}
.elementor.elementor .gm__txt{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.elementor.elementor .gm__ref{font:700 11.5px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#004bb2}
.elementor.elementor .gm__tit{margin:8px 0 0;font:700 21px/1.2 var(--display);letter-spacing:-.015em;color:#031a35}.elementor.elementor .gm__txt > p,.elementor.elementor .gm__txt > .elementor-widget-html > p,.elementor.elementor .gm__txt > .elementor-widget-html > .elementor-widget-container > p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--txt-2)}
.elementor.elementor .gm__specs{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid #e8ecf1;display:grid;gap:9px}
.elementor.elementor .gm__specs li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.4;color:#191c1e;font-weight:500}
.elementor.elementor .gm__specs svg{flex:none;width:20px;height:20px;padding:3px;border-radius:6px;background:#031a35;margin-top:-1px}.elementor.elementor .gm__txt > .btn,.elementor.elementor .gm__txt > .elementor-widget-html > .btn,.elementor.elementor .gm__txt > .elementor-widget-html > .elementor-widget-container > .btn{margin-top:auto;align-self:flex-start}
.elementor.elementor .gm__specs{margin-bottom:24px}
/* una sola gama: ficha grande, foto a la izquierda */
.elementor.elementor .gm-rej--una{grid-template-columns:minmax(0,1080px)}
.elementor.elementor .gm-rej--una .gm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.elementor.elementor .gm-rej--una .gm__foto{aspect-ratio:auto;min-height:440px;position:relative}
.elementor.elementor .gm-rej--una .gm__foto img{position:absolute;inset:0}
.elementor.elementor .gm-rej--una .gm__txt{justify-content:center;padding:clamp(28px,4vw,56px)}
.elementor.elementor .gm-rej--una .gm__tit{font-size:clamp(24px,2.4vw,32px)}.elementor.elementor .gm-rej--una .gm__txt > p,.elementor.elementor .gm-rej--una .gm__txt > .elementor-widget-html > p,.elementor.elementor .gm-rej--una .gm__txt > .elementor-widget-html > .elementor-widget-container > p{font-size:17px}
.elementor.elementor .gm-rej--una .gm__specs{grid-template-columns:1fr;gap:12px}
.elementor.elementor .gm-rej--una .gm__specs li{font-size:16px}.elementor.elementor .gm-rej--una .gm__txt > .btn,.elementor.elementor .gm-rej--una .gm__txt > .elementor-widget-html > .btn,.elementor.elementor .gm-rej--una .gm__txt > .elementor-widget-html > .elementor-widget-container > .btn{margin-top:4px}
@media (max-width:820px){
  .elementor.elementor .gm-rej--una .gm{grid-template-columns:1fr}
  .elementor.elementor .gm-rej--una .gm__foto{min-height:0;aspect-ratio:4/3}
}
@media (max-width:420px){.elementor.elementor .gm-rej{grid-template-columns:1fr}}