/* ========================================================================== BioWay - Sistema de forma organica El rasgo visual caracteristico, en tres papeles: 1) cenefa - cinta vertical anclada al borde 2) veta - cinta suelta dentro de una seccion 3) recorte - la seccion misma se curva con clip-path ========================================================================== */ /* 1) CENEFA: cinta vertical anclada al borde de la seccion */ /* Cenefas onduladas: el recurso de las láminas LiftOff. Borde nítido, degradado de marca, el centro se queda limpio. EL CORTE DE ABAJO (corregido el 19-ago-2026). Esto llevaba `bottom:110px`, un número mágico que pretendía terminar la cenefa justo donde empieza la ola de cierre. Pero la ola ocupa 166px, no 110: `.ola{height:110px;margin-top:56px}` en bioway-base.css. La cenefa se detenía 56px antes de tiempo y, como su path cierra con `H0 Z` —un borde recto—, quedaba una guillotina plana flotando sobre el papel liso. La corrección no es ajustar el número: es que la cenefa llegue al fondo y se desvanezca antes de tocarlo, con una máscara. Así el final deja de depender de la altura de un elemento vecino, que era la fragilidad de raíz. De paso tapa el estiramiento del `preserveAspectRatio="none"`: el tramo que más se deformaba es justo el que ya no se dibuja. */ .cenefa{position:absolute;top:0;bottom:0;width:clamp(90px,11vw,190px);z-index:0;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 96%); mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 96%)} .cenefa.izq{left:0} .cenefa.der{right:0} .cenefa svg{width:100%;height:100%;display:block} /* En pantallas estrechas la cenefa se come el texto: se estrecha y se aclara. No se oculta — es el rasgo de marca. */ @media (max-width:900px){ .cenefa{width:clamp(46px,9vw,90px);opacity:.75} } /* La regla de 560px se retiró el 20-ago-2026: era código muerto. Las cenefas se ocultan a 720px con `display:none` en bioway-base.css, así que nunca hay una visible a 560 o menos. */ /* 2) VETA: contorno abierto, no relleno. Da ritmo sin pesar. */ .veta{position:absolute;z-index:0;pointer-events:none} .veta svg{display:block;width:100%;height:auto} /* cinta rellena con degradado de marca: es la misma forma de las cenefas, suelta dentro de la sección en vez de pegada al borde */ .veta path{stroke:none} .veta-app{top:-8%;left:-14%;width:clamp(260px,34vw,560px);opacity:.5} .veta-traza{bottom:-10%;right:-12%;width:clamp(240px,30vw,500px);opacity:.42} .veta-aliados{top:-56px;left:50%;transform:translateX(-50%);width:min(760px,88vw);opacity:.34} /* 3) RECORTE: el borde superior de la franja de materiales es una curva, resuelta con clip-path para no encadenar más SVG entre secciones. */ .materiales{clip-path:ellipse(140% 100% at 50% 100%)} /* La franja de Punto BioWay llevaba `clip-path:ellipse(150% 100% at 46% 100%)` para entrar y salir con curva propia. Retirado el 20-ago-2026: la elipse recorta la seccion por abajo y, como el fondo del body es papel, por el corte se veia una banda clara —mas ancha en los bordes que en el centro, la firma de la elipse— justo debajo del menta. Es el espacio en blanco que el usuario marco en rojo. La curva de entrada ya la pone la `.onda-sep` de arriba; la de salida no hacia falta, porque debajo no hay cambio de color que disimular. */ .hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto} /* ── El hero es un escenario: cada escena cambia titular, texto e imagen ── */ .escenario{position:relative;min-height:clamp(430px,52vh,540px);display:grid} .escena{grid-area:1/1} /* Sin `grid-template-columns` aquí (19-ago-2026). Esta hoja carga DESPUÉS de bioway-base.css, y esta regla —misma especificidad, sin media query— pisaba en silencio a `.escena,.escena-estelar{grid-template-columns:1fr}` del breakpoint de 1040px. Resultado: el hero seguía en dos columnas hasta en un teléfono de 360px, con la imagen aplastada a 97px y el texto estrangulado. Medido con DevTools: computaba `125.86px 97.03px`. Las columnas las fija base.css, que es quien tiene los breakpoints. */ .escena{display:grid;gap:52px;align-items:center; opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s} .escena.activa{opacity:1;visibility:visible} .escena-texto{display:flex;flex-direction:column;align-items:flex-start;text-align:left} .escena-media{position:relative;display:flex;align-items:center;justify-content:center} .escena-estelar .escena-media{z-index:1} .escena-estelar .escena-media img{max-height:clamp(250px,34vh,360px);max-width:100%} .escena-estelar .escena-media::after{background:rgba(0,0,0,.22)} /* La sombra pasa de `0 26px 40px` a `0 16px 26px`: la anterior pedia 66px de aire alrededor de la imagen —26 de desplazamiento mas 40 de desenfoque— y en varios anchos no los tenia, asi que se cortaba contra el borde del hero. Medido a 1200px: la columna de la imagen acaba a 60px del borde, seis menos de los que la sombra necesitaba. Se reduce la sombra en vez de encoger la imagen porque en escritorio la imagen se ve bien y es lo que la escena viene a ensenar; 42px de aire los tiene en todos los anchos, y el caracter de la sombra no cambia: sigue siendo un piso suave bajo el objeto, solo que menos derramado. */ .escena-media img{max-height:clamp(300px,42vh,430px);width:auto; filter:drop-shadow(0 16px 26px rgba(13,69,44,.2))} /* franja de materiales */ .materiales{position:relative;background:var(--menta-suave);padding:22px 0;overflow:hidden;border-top:1px solid #DDF0E2;border-bottom:1px solid #DDF0E2} .cinta{display:flex;gap:54px;align-items:center;width:max-content;animation:rodar 30s linear infinite;padding:0 27px} .cinta img{height:46px;width:auto} .cinta span{font:700 12px var(--cuerpo);letter-spacing:2px;color:var(--medio);white-space:nowrap} @keyframes rodar{to{transform:translateX(-50%)}} /* ── Trayectoria: cinta editorial, no tarjetas de catálogo ──────────── Cada hito es la imagen entera —sin borde, sin padding—; el año y el nombre flotan encima con un degradado mínimo, siempre legibles. El texto largo (dónde y qué pasó) solo aparece al pasar el mouse: crece desde abajo sobre la propia imagen, en vez de abrir una ventana aparte. Las banderas (mismo patrón que la versión anterior del sitio, vía flag-icon-css) van en la esquina superior de cada hito. */ .trayectoria-real{padding:84px 0;background:#0E1F16} .contenedor-ancho{max-width:1400px;margin:0 auto;padding:0 5vw} .trayectoria-real .rotulo{color:var(--light)} .trayectoria-real h2{color:#fff} .trayectoria-real .lede{margin-top:10px;max-width:520px;color:#B7D9C4} .tray-cabecera{display:flex;justify-content:space-between;align-items:flex-end; gap:32px;flex-wrap:wrap} .tray-cifras-inline{display:flex;gap:28px} .tray-cifras-inline div{text-align:center} .tray-cifras-inline b{display:block;font:900 clamp(26px,2.6vw,34px) var(--display); color:var(--light);line-height:1;letter-spacing:-1px} .tray-cifras-inline span{display:block;margin-top:2px;font-size:11px;color:#8FAF9C; text-transform:uppercase;letter-spacing:.5px} .tray-carrusel-envoltura{position:relative;margin-top:36px} .tray-carrusel{display:flex;gap:3px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none} .tray-carrusel::-webkit-scrollbar{display:none} /* Punto medio entre el vertical original (ratio .65 — cabían muchas celdas pero la imagen se veía chica y recortada) y el 16:9 puro (ratio 1.78 — la imagen lucía pero solo entraban 3-4 celdas en pantalla). 4:3 deja la foto grande y reconocible sin volver la cinta tan ancha que se pierda la sensación de "hay más, desliza". Ancho en `calc()`, no fijo: exactamente 3 tarjetas completas caben en `.contenedor-ancho` (1400px máx.) con un pedacito de la 4ª asomando — antes con 280px fijos entraban casi 4 enteras y se veían chicas. */ .tray-hito{position:relative;flex:none;width:calc((100% - 6px) / 3.15);aspect-ratio:4/3; scroll-snap-align:start;border:none;padding:0;cursor:pointer;overflow:hidden; background:#16281D} .tray-hito img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .4s ease} .tray-hito:hover img{transform:scale(1.06)} .tray-banderas{position:absolute;top:10px;right:10px;z-index:2;display:flex; align-items:center;gap:4px} .tray-banderas .flag-icon{width:22px;height:15px;border-radius:2px; box-shadow:0 1px 4px rgba(0,0,0,.4)} .tray-mas-paises{display:flex;align-items:center;justify-content:center; height:15px;padding:0 5px;border-radius:2px;background:rgba(0,0,0,.55); font:700 9px var(--cuerpo);color:#fff} /* El degradado inferior existe siempre (para que año/nombre se lean sobre cualquier foto), pero solo crece y revela el detalle en :hover/:focus — la cinta en reposo se ve solo de imagen. Más oscuro y más alto que antes: con fotos muy claras (carteles blancos, capturas de pantalla) el año/nombre en reposo se perdían contra el fondo. */ .tray-overlay{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px; background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.75) 40%,rgba(0,0,0,0) 100%); display:flex;flex-direction:column;gap:2px;pointer-events:none; transition:padding-top .25s ease} .tray-año{font:800 11px var(--display);letter-spacing:1px;color:var(--light)} .tray-nombre{font:700 14px var(--display);color:#fff;line-height:1.25} .tray-detalle{max-height:0;opacity:0;overflow:hidden;margin-top:0; font-size:12px;line-height:1.45;color:#DCEFE2;transition:max-height .3s ease,opacity .25s ease .05s} .tray-hito:hover .tray-overlay,.tray-hito:focus-visible .tray-overlay{padding-top:40px} .tray-hito:hover .tray-detalle,.tray-hito:focus-visible .tray-detalle{ max-height:120px;opacity:1;margin-top:6px} .tray-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:44px;height:44px; border-radius:50%;background:rgba(255,255,255,.95);border:none;color:var(--primary); box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;display:flex; align-items:center;justify-content:center;transition:.15s} .tray-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .tray-prev{left:-6px} .tray-next{right:-6px} @media (max-width:720px){ .tray-nav{display:none} /* en móvil se navega deslizando con el dedo, más natural que un botón chico */ .tray-hito{width:calc((100% - 3px) / 1.65)} .tray-cabecera{flex-direction:column;align-items:flex-start} /* Sin hover en pantalla táctil: el detalle se ve siempre, no solo al tocar. */ .tray-overlay{padding-top:40px} .tray-detalle{max-height:120px;opacity:1;margin-top:6px} } /* ── Medallas: Byte protagoniza, no acompaña ────────────────────────── A diferencia de app-byte/punto-vecino (imagen chica en la esquina de OTRA cosa), aquí el personaje es tan grande como el titular: es su sección. */ .medallas-cabecera{display:flex;align-items:flex-end;justify-content:space-between; gap:32px;flex-wrap:wrap} .medallas-cabecera > div:first-child{flex:1;min-width:280px} .medallas-byte{flex:none;width:clamp(140px,16vw,220px);height:auto; filter:drop-shadow(0 20px 34px rgba(13,69,44,.18))} .medallas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .medalla{background:#fff;border:1px solid #DCEEE1;border-radius:18px;padding:22px 20px} .medalla-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px; margin-bottom:12px;border-radius:50%;background:var(--menta-suave);border:1px solid #DCEEE1; font:800 14px var(--display);color:var(--primary)} .medalla b{display:block;font:800 15px var(--display);color:var(--tinta);margin-bottom:6px} .medalla p{font-size:13.5px;color:var(--texto);line-height:1.5} @media (max-width:860px){ .medallas-grid{grid-template-columns:repeat(2,1fr)} .medallas-byte{width:120px} } @media (max-width:560px){ .medallas-grid{grid-template-columns:1fr} .medallas-cabecera{flex-direction:column;align-items:center;text-align:center} } /* aliados */ .aliados{padding:44px 5vw;border-top:1px solid #E8F2EA} .aliados .contenedor{position:relative;z-index:1;display:flex;align-items:center;gap:44px;flex-wrap:wrap;justify-content:center} .aliados span{font:700 11.5px var(--cuerpo);letter-spacing:2px;color:#8FAf9C} .aliados img{height:30px;width:auto;filter:grayscale(1);opacity:.5;mix-blend-mode:multiply;transition:.25s} .aliados img:hover{filter:none;opacity:.95} /* Sin `nowrap`: es una frase larga dentro de un flex con wrap, y el nowrap le imponía su ancho al contenedor — desbordaba la página en móvil. */ .aliados .reconocimiento{font:700 15px var(--display);font-style:normal;color:#9DB5A6;letter-spacing:.3px;text-align:center;max-width:100%} /* cierre */ .cierre{position:relative;overflow:hidden;background:var(--grad-marca);color:#fff;border-radius:26px; padding:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} /* `height` en px y no en %, mismo criterio que `.onda-sep` de bioway-base.css: un porcentaje sobre un contenedor de altura variable aplasta la onda justo donde el contenido se comprime (ver el comentario de `.estelar-onda`). */ .cierre-cinta{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(120px,22vw,220px);z-index:0} .cierre>*:not(.cierre-cinta){position:relative;z-index:1} .cierre h2{color:#fff;max-width:560px;margin:0} .cierre .btn-primario{background:#fff;color:var(--primary)} /* Aquí vivía `footer{padding:28px 5vw;display:flex;justify-content:space-between; flex-wrap:wrap;gap:10px}`, del pie de una sola línea que hubo antes. El pie común (`partes/pie.php`) es un `