/* surper.es — encaje en cualquier pantalla (11/2026). Va después de los estilos principales y de fx3d.css.
   --lb-h lo calcula fit.js: alto que ocupa el letrero flotante de auditoría desde el borde inferior. */

/* ===== Cabecera (hero): crece con su contenido en vez de recortarlo ===== */
/* Las 4 diapositivas se apilan en la misma celda: la cabecera mide lo que la más alta
   y no cambia de alto al rotar (antes recortaba con height:100vh y movía la página en móvil). */
#hero .hero-slider{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
#hero .hero-slide{grid-area:1/1;position:relative;inset:auto;min-width:0}
@media(min-width:768px){
  #hero,#hero .hero-slider{height:auto;min-height:100vh;min-height:100svh}
  #hero .hero-content{height:auto;min-height:100vh;min-height:100svh;overflow:visible;padding-bottom:var(--hero-pb,72px)}
}
@media(max-width:767px){
  #hero .hero-slide{display:flex;visibility:hidden}
  #hero .hero-slide.active{visibility:visible}
  #hero .slider-nav{grid-area:2/1}
}
/* Hueco inferior para que el letrero de auditoría no tape las cifras ni los controles del banner */
@media(min-width:768px) and (max-width:1199px){
  /* tableta y portátil estrecho: controles en el flujo, debajo del texto y por encima del letrero */
  #hero{--hero-pb:24px}
  #hero .hero-content{min-height:calc(100svh - 60px - var(--lb-h,64px))}
  #hero .slider-nav{position:static;grid-area:2/1;justify-content:center;margin:0 0 calc(var(--lb-h,64px) + 16px)}
}
@media(min-width:1200px){
  #hero{--hero-pb:calc(var(--lb-h,76px) + 28px)}
  /* controles a la derecha, bajo el ordenador y por encima del letrero (centrados chocaban con él) */
  #hero .slider-nav{left:auto;right:2.5%;width:40%;bottom:calc(var(--lb-h,76px) + 14px)}
  /* el ordenador de la derecha se centra en la cabecera real, no en el 46 % de la pantalla */
  .hero-mockup{top:calc(var(--hero-h,100vh) * .47)}
}
/* Pantallas bajas (portátil con zoom 125-150 %): todo un poco más compacto para que quepa de un vistazo */
@media(min-width:768px) and (max-height:800px){
  /* el formulario rápido repite lo que ya ofrece el letrero de auditoría: fuera en pantallas bajas */
  #hero .hero-quick-form,#hero .hero-response{display:none}
}
@media(min-width:768px) and (max-height:700px){
  #hero .hero-content{padding-top:80px}
  #hero h1,#hero .hero-h1{font-size:clamp(1.6rem,2.4vw + 1.6vh,2.9rem);margin-bottom:.4rem}
  #hero .hero-badge{margin-bottom:.5rem}
  #hero .hero-rating{margin-bottom:.6rem}
  #hero .hero-sub{margin-bottom:.7rem}
  #hero .hero-ctas{margin-bottom:.7rem}
  #hero .hero-quick-form{margin-top:.7rem}
}
@media(min-width:1200px) and (max-height:620px){.hero-mockup{width:34%}}

/* Etiqueta del proyecto en el ordenador del móvil: entera, arriba a la izquierda, sin pisar el botón */
@media(max-width:600px){
  .hero-mockup-tag{top:10px;bottom:auto;max-width:calc(100% - 20px);white-space:normal;text-overflow:clip;line-height:1.25}
}

/* ===== Textos que se cortaban con puntos suspensivos o a media línea ===== */
.servicios-grid .servicio-card p,
.resultados-grid.home-carousel .resultado-card p,
.blog-grid.home-carousel .blog-card p,
.proyectos-grid.home-carousel .proyecto-info p,
.testimonio-text,
.footer-brand p,
.pg-cap strong{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.resultado-duration{white-space:normal;text-align:right;min-width:0}
.resultado-top{min-width:0;gap:.5rem}

/* Preguntas frecuentes: cerradas no enseñan una franja de la respuesta y abiertas no la recortan */
.sp-faq-item:not(.open) .sp-faq-a{padding-top:0;padding-bottom:0}
.sp-faq-item.open .sp-faq-a{max-height:80rem}

/* ===== Letrero flotante de auditoría: nada queda debajo sin poder verse ===== */
@media(max-width:900px){
  body:has(#leadBar.visible:not(.lb-open):not(.lb-hide)){padding-bottom:var(--lb-h,64px)!important}
  body:has(#leadBar.visible:not(.lb-open):not(.lb-hide)) .whatsapp-float,
  body:has(#leadBar.visible:not(.lb-open):not(.lb-hide)) .scroll-top{bottom:calc(var(--lb-h,64px) + 12px)!important}
}
@media(min-width:901px){
  body:has(#leadBar.visible:not(.lb-hide)) footer{padding-bottom:calc(30px + var(--lb-h,80px))}
}

/* ===== Fondo unificado «grafito continuo» (11/2026) =====
   Una sola capa fija para todas las páginas: grafito profundo con un halo amarillo muy suave arriba
   y viñeta abajo. Las secciones ya no pintan su propio negro (eso creaba bandas y cortes) y el
   túnel 3D de la portada se ve detrás de toda la página, más tenue fuera de la cabecera. */
:root{
  --bg-base:#121416;
  --bg-mid:#101214;
  --bg-deep:#0b0c0e;
  --bg-halo:rgba(239,223,0,.06);
  --bg-halo2:rgba(239,223,0,.025);
  --bg-wash:rgba(255,255,255,.014);
  --bg-hair:rgba(239,223,0,.12);
  --gray2:#858c99; /* gris secundario con contraste AA (5,5:1) sobre el fondo */
}
html{background:var(--bg-base)}
body{background:transparent}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(110% 60% at 50% -12%,var(--bg-halo),transparent 62%),
    radial-gradient(70% 50% at 108% 108%,var(--bg-halo2),transparent 60%),
    linear-gradient(180deg,var(--bg-base) 0%,var(--bg-mid) 58%,var(--bg-deep) 100%)}
/* sin constelación 2D de puntos: era ruido y competía con el 3D */
#particles{display:none!important}
/* las secciones dejan ver el fondo común; las alternas solo llevan un velo que se funde sin borde */
#clientes-logos,#porque,#proceso,#proyectos-section,#blog-section,#testimonios,#cta-final,.pp-hero,.pp-section-alt,.sp-section-alt{background:transparent}
#clientes-logos,#proceso,#blog-section,#testimonios,.pp-section-alt,.sp-section-alt{background-image:linear-gradient(180deg,transparent,var(--bg-wash) 18%,var(--bg-wash) 82%,transparent)}
#clientes-logos{border-top-color:transparent;border-bottom-color:transparent}
.logos-carousel-area::before{background:linear-gradient(90deg,var(--bg-base) 0%,transparent 100%)}
.logos-carousel-area::after{background:linear-gradient(-90deg,var(--bg-base) 0%,transparent 100%)}
footer{background:linear-gradient(180deg,transparent 0%,rgba(8,9,10,.55) 45%,rgba(8,9,10,.85) 100%);border-top-color:transparent}
/* cabecera sin fotos de fondo: eran oscuras y turbias, chocaban con el 3D y no siguen la identidad (negro + halo amarillo) */
#hero .hero-slide-bg,#hero .hero-slide-overlay{display:none}
#hero .hero-slide-glow{background:radial-gradient(ellipse 60% 55% at 18% 48%,rgba(239,223,0,.085) 0%,transparent 68%)}
#fx3d-canvas{transition:opacity .9s ease}

/* ===== Legibilidad y tamaño táctil (mínimo 12 px y zonas de 44 px) ===== */
.footer-nl-legal,.footer-bottom p,.lm-privacy,.lm-point,.blog-cats .filter-btn small,
.pg-cap span,.pg-cat,.pr-cat,#cta-final .cf-badge,.hero-badge{font-size:max(12px,.75rem)}
#leadBar .lead-bar-toggle,.svc-toggle,.svc-card-actions .servicio-cta,.blog-cats .filter-btn,.blog-sort .filter-btn,.pg-skip{min-height:44px}
.svc-toggle,.svc-card-actions .servicio-cta{display:inline-flex;align-items:center}
.contacto-dato>a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:600px){.pr-arrow{width:44px;height:44px}}
/* el halo del ordenador del móvil no pisa su rótulo */
.hero-mockup-label{position:relative;z-index:2}

/* ===== Portfolio: títulos del anillo enteros (antes con puntos suspensivos) ===== */
.pr-cap{white-space:normal;text-overflow:clip;display:block;overflow:visible;min-height:2.6em}
.pr-stage{height:calc(var(--cw) * .82 + 110px)}
.pr-arrow{top:calc((var(--cw) * .82 + 110px) / 2)}

/* ===== Secciones ancladas (proceso y túnel) en pantallas bajas: caben enteras mientras están fijas ===== */
@media(min-width:1024px) and (max-height:760px){
  html.fx3d-desk #proceso{padding-top:76px!important;padding-bottom:12px!important}
  html.fx3d-desk #proceso .section-header{margin-bottom:.4rem}
  html.fx3d-desk #proceso .section-header h2{font-size:clamp(1.5rem,2.2vw + 1.2vh,2.4rem)}
  html.fx3d-desk #proceso .proceso-stage{height:290px;scale:.88;transform-origin:50% 0;margin-bottom:-34px}
  #proyectos-section.pg-tunel{padding-top:76px!important}
  #proyectos-section.pg-tunel .section-header h2{font-size:clamp(1.5rem,2.2vw + 1.2vh,2.4rem)}
  .pg-tunel .pg{height:calc(100vh - 250px);min-height:330px}
}
@media(min-width:1024px) and (max-height:640px){
  html.fx3d-desk #proceso .section-header .section-sub,#proyectos-section.pg-tunel .section-header .section-tag{margin-bottom:.3rem}
  html.fx3d-desk #proceso .proceso-stage{height:260px;scale:.78;margin-bottom:-58px}
  .pg-tunel .pg{min-height:300px}
}

/* ===== Anclaje de proceso y túnel con sticky (sin saltos de maquetación) ===== */
.fx-sticky{position:relative}
.fx-sticky>.fx-stuck{position:sticky!important;top:0}
/* Túnel en pantallas bajas: la ficha del proyecto se compacta para no tapar el título ni los filtros */
@media(min-width:1024px) and (max-height:760px){
  .pg-tunel .pg-info{width:min(400px,31vw);padding:.85rem 1rem .95rem}
  .pg-tunel .pg-title{font-size:clamp(1.05rem,1.4vw,1.3rem);margin:.45rem 0 .35rem}
  .pg-tunel .pg-desc{font-size:.84rem;line-height:1.45;margin-bottom:.7rem}
  .pg-tunel .pg-actions a{padding:.55rem .95rem;font-size:.84rem}
}
/* Portfolio: las tarjetas que aún no han entrado (invisibles) no capturan toques sobre lo que hay debajo */
#portfolioFullGrid .pf3d:not(.pf3d-in){pointer-events:none}

/* ===== Tipografía de reserva con las mismas medidas que DM Sans y Syne =====
   Si las fuentes tardan (conexión lenta), el texto se pinta con Arial ajustada al mismo ancho:
   al llegar la fuente real no cambian los saltos de línea y la página no se mueve (CLS). */
@font-face{font-family:'DM Sans Fallback';src:local('Arial'),local('Helvetica'),local('Roboto');size-adjust:103.5%;ascent-override:96%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:'Syne Fallback';src:local('Arial Bold'),local('Arial'),local('Helvetica'),local('Roboto');font-weight:400 900;size-adjust:140%;ascent-override:66%;descent-override:20%;line-gap-override:0%}
body{font-family:'DM Sans','DM Sans Fallback','Inter',system-ui,sans-serif}
h1,h2,h3,h4,.hero-h1,.headline,.sp-title,.pp-title,.apoyo-hero h1,.price-amount,.stat-num,.metric-val,.sp-price,.sp-stat-val,.logos-header h3,.logos-trust-item b,.paso-num,#avgRating{font-family:'Syne','Syne Fallback','DM Sans',system-ui,sans-serif}
/* Tableta: el formulario rápido del banner repite el letrero de auditoría; fuera para que el banner quepa en pantalla */
@media(min-width:768px) and (max-width:1199px){#hero .hero-quick-form,#hero .hero-response{display:none}}