:root { --navy: #000028; --navy-2: #00001e; --turquoise: #00e6d0; --turquoise-bright: #00ffe1; --ink: #15172f; --muted: #66708a; --soft: #f6f8fb; --line: #e6ebf2; --white: #ffffff; --radius-xl: 42px; --radius-lg: 28px; --radius-md: 18px; --shadow: 0 30px 80px rgba(0, 0, 40, 0.11); --max: 1180px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Averta", "Ciutadella Rounded", "Inter", "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--white); line-height: 1.5; overflow-x: hidden; /* `overflow-x: hidden` sin `overflow-y` explícito hace que Chromium compute overflow-y como hidden también, bloqueando el scroll vertical — bug real de la fuente, invisible hasta Home (H2, primera página con contenido más alto que el viewport). Ver docs/design-source.md. */ overflow-y: auto; padding-top: 82px; transition: background-color 0.5s ease; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* Escapado a `div.page` (no bare `.page`): WordPress agrega la clase literal "page" al de toda página estática vía body_class(), que choca con el nombre del div wrapper del tema. Como `.page` (specificity 0,1,0) le gana a `body { overflow-y: auto }` (0,0,1), el heredaba `overflow: hidden` y bloqueaba el scroll vertical — invisible hasta Home (H2, primera página más alta que el viewport). No es bug de la fuente (el sitio estático nunca tuvo body_class()) — es un choque de nombres propio del port a WordPress. Ver docs/design-source.md. */ div.page { position: relative; overflow: hidden; } .bg-shape { position: fixed; z-index: -1; pointer-events: none; background-size: contain; background-repeat: no-repeat; background-position: center; } .bg-shape.one { display: none; } .bg-shape.two { width: 1200px; height: 1200px; right: -500px; top: 10%; background-image: url("../img/gray.svg"); opacity: 0.8; } .bg-shape.three { width: 1000px; height: 1000px; right: -300px; bottom: -400px; background-image: url("../img/gray2.svg"); opacity: 0.8; } .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; } .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; backdrop-filter: blur(18px); background: rgba(255, 255, 255, 0.88); } .nav-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; height: 42px; } .brand img { width: 132px; height: auto; } .nav-links { display: flex; align-items: center; gap: 25px; font-size: 14pt; color: var(--muted); font-weight: 600; } .nav-links a { position: relative; padding: 8px 0; } .nav-links a:hover, .nav-links a.active { color: var(--navy); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: var(--navy); } .nav-actions { display: flex; align-items: center; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 38px; border-radius: 999px; border: 1px solid var(--navy); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; transition: 0.2s ease; cursor: pointer; white-space: nowrap; background: transparent; } .btn-primary { background: var(--navy); color: var(--white); box-shadow: none; } .btn-primary:hover { transform: translateY(-2px); background: #070743; } .btn-secondary { background: transparent; color: var(--navy); } .btn-secondary::after { content: " →"; opacity: 0; transition: opacity 0.2s ease; } .btn-secondary:hover { transform: translateY(-2px); background: var(--turquoise); color: var(--navy); border-color: var(--turquoise); } .btn-secondary:hover::after { opacity: 1; } .btn-light { background: var(--white); color: var(--navy); border-color: rgba(255, 255, 255, 0.4); } .btn-whatsapp { border-color: rgba(0, 230, 208, 0.7); color: var(--navy); background: rgba(0, 230, 208, 0.12); } .view { animation: fadeIn 0.28s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .section { padding: 84px 0; } .section-tight { padding: 60px 0; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 18px; } .eyebrow::before { content: ""; width: 16px; height: 3px; border-radius: 999px; background: var(--turquoise); } h1, h2, h3 { color: var(--navy); letter-spacing: -0.045em; line-height: 1.02; } h1 { /* H13 (revisión del cliente): el tope de 84px quedaba "exagerado" frente al resto de la jerarquía (párrafo 21px, h2 hasta 62px) — bajado a 68px, sigue siendo el elemento más grande de la página sin el salto extremo. */ font-size: clamp(40px, 5vw, 68px); max-width: 790px; } h2 { font-size: clamp(34px, 5vw, 62px); max-width: 760px; } h3 { font-size: 24px; } p { color: var(--muted); font-size: 17px; } .lead { font-size: 21px; color: #4c5570; max-width: 760px; margin-top: 22px; } .hero { padding: 78px 0 42px; min-height: calc(100vh - 82px); display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 0.98fr 1.02fr; gap: 54px; align-items: center; } .hero-copy p { max-width: 590px; margin-top: 24px; font-size: 21px; color: #4c5570; } .hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero-note { margin-top: 32px; display: flex; gap: 18px; align-items: center; color: var(--muted); font-size: 14px; max-width: 560px; } .hero-note span { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--turquoise); font-weight: 900; flex: 0 0 auto; } .hero-media { position: relative; min-height: 600px; } .video-card { position: absolute; top: 28px; right: 0; width: min(650px, 100%); height: 390px; border-radius: 66px 66px 66px 10px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow); } .video-card::before { content: ""; position: absolute; inset: 0; /* H9: la URL ya no es un literal del zip — se resuelve desde PHP vía barter_media('banner') como custom property --banner-url (mismo patrón que .team-photo/.page-visual en page-about.php), porque la foto ahora vive en la Media Library, no en assets/img/. */ background: linear-gradient(120deg, rgba(0, 0, 40, 0.28), rgba(0, 230, 208, 0.08)), var(--banner-url) center/cover; opacity: 0.95; } .video-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(0, 0, 40, 0.82), transparent); } .play { position: absolute; width: 76px; height: 76px; left: 42px; bottom: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--navy); box-shadow: 0 18px 60px rgba(0, 0, 40, 0.2); } .play::before { content: ""; width: 0; height: 0; border-left: 17px solid var(--navy); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; } .video-caption { position: absolute; right: 38px; bottom: 36px; z-index: 2; color: var(--white); max-width: 310px; } .video-caption strong { display: block; font-size: 21px; letter-spacing: -0.03em; margin-bottom: 6px; } .video-caption small { color: rgba(255, 255, 255, 0.78); font-size: 13px; } .floating-card { position: absolute; left: 0; top: 440px; width: 330px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 24px; backdrop-filter: blur(18px); z-index: 3; } .floating-card strong { color: var(--navy); font-size: 42px; line-height: 1; letter-spacing: -0.06em; } .floating-card p { font-size: 15px; margin-top: 8px; } .signal { position: absolute; right: 28px; top: 0; width: 170px; height: 170px; border-radius: 42% 58% 62% 38% / 40% 44% 56% 60%; background: rgba(0, 230, 208, 0.12); } .trust { padding: 24px 0 64px; } .trust-row { padding: 30px 0; display: grid; grid-template-columns: 210px 1fr; gap: 38px; align-items: center; } .carousel-container { overflow: hidden; width: 100%; position: relative; } .carousel-container::before, .carousel-container::after { content: ""; position: absolute; top: 0; width: 100px; height: 100%; z-index: 1; pointer-events: none; } .carousel-container::before { display: none; } .carousel-container::after { display: none; } .carousel-track { display: flex; gap: 40px; animation: scroll 40s linear infinite; width: max-content; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .carousel-item { width: 240px; height: 120px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .carousel-item img { max-width: 100%; max-height: 100%; object-fit: contain; } .trust-title { font-weight: 900; color: var(--navy); letter-spacing: -0.03em; } .split { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 64px; align-items: start; } .value-panel { border-radius: var(--radius-xl); background: var(--navy); padding: 42px; min-height: 400px; position: relative; overflow: hidden; } .value-panel::before { content: ""; position: absolute; width: 420px; height: 420px; right: -210px; top: -210px; background: rgba(0, 230, 208, 0.22); border-radius: 50%; } .value-panel h3, .value-panel p { color: var(--white); position: relative; z-index: 1; } .value-panel p { color: rgba(255, 255, 255, 0.74); margin-top: 14px; } .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; position: relative; z-index: 1; } .metric { padding: 20px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 22px; background: rgba(255, 255, 255, 0.06); } .metric strong { color: var(--turquoise-bright); display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.11em; margin-bottom: 6px; } .metric span { color: rgba(255, 255, 255, 0.82); font-size: 14px; } .section-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 38px; } .section-head p { max-width: 430px; } .services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .service-card { width: 210px; height: 360px; border-radius: 34px; background: var(--navy); overflow: hidden; position: relative; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; transition: 0.24s ease; isolation: isolate; } .service-card::before { content: ""; position: absolute; inset: 0; background: var(--image) center/cover; opacity: 0.52; filter: grayscale(0.25); z-index: -2; } .service-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 40, 0.1), rgba(0, 0, 40, 0.92) ); z-index: -1; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 70px rgba(0, 0, 40, 0.18); } .service-card small { color: var(--turquoise-bright); text-transform: uppercase; font-weight: 900; letter-spacing: 0.12em; font-size: 11px; margin-bottom: 10px; } .service-card h3 { color: var(--white); font-size: 25px; } .service-card p { color: rgba(255, 255, 255, 0.76); font-size: 14px; margin-top: 12px; } .why { background: var(--soft); border-radius: 58px; padding: 58px; position: relative; overflow: hidden; } .why::after { content: "barter"; position: absolute; right: -40px; bottom: -58px; font-size: 160px; font-weight: 900; letter-spacing: -0.08em; color: rgba(0, 0, 40, 0.035); } .why-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; position: relative; z-index: 1; } .features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .feature { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 20px; } .icon { width: 32px; height: 32px; border-radius: 12px; background: rgba(0, 230, 208, 0.16); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; margin-bottom: 14px; } .feature h3 { font-size: 20px; margin-bottom: 8px; } .feature p { font-size: 14px; } .home-cases { background: var(--navy); color: var(--white); border-radius: 52px; padding: 58px 0; margin: 20px 0; overflow: hidden; position: relative; } .home-cases::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -180px; top: -200px; background: rgba(0, 230, 208, 0.16); } .home-cases h2, .home-cases h3 { color: var(--white); } .home-cases p { color: rgba(255, 255, 255, 0.72); } .compact-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } .case-mini { border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; background: rgba(255, 255, 255, 0.07); box-shadow: 0 16px 50px rgba(0, 0, 40, 0.12); } .case-mini.light { border: 1px solid var(--line); background: var(--white); box-shadow: 0 16px 50px rgba(0, 0, 40, 0.05); } .case-mini-img { height: 165px; background: var(--image) center/cover; } .case-mini-body { padding: 22px; } .case-mini-body small, .article-card small { display: block; color: var(--turquoise); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 900; margin-bottom: 10px; font-size: 11px; } .case-mini-body p { font-size: 14px; margin-top: 10px; } .page-hero .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; } .hero-image-container { position: relative; width: 100%; max-width: 500px; margin-left: auto; display: flex; justify-content: center; align-items: center; height: 400px; } .hero-rotate { position: absolute; bottom: 0; right: 0; width: 100%; max-width: 200px; animation: rotate 20s linear infinite; z-index: 0; } .hero-barterc { position: absolute; top: 50%; left: 45%; transform: translate(-50%, -50%); width: 60%; max-width: 250px; z-index: 1; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .page-hero { padding-bottom: 60px; margin-right: 0px; margin-top: 60px; } .page-hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center; } .page-visual { min-height: 380px; width: 570px; height: 390px; border-radius: 58px 58px 58px 12px; background: var(--image) center/cover; box-shadow: var(--shadow); position: relative; overflow: hidden; } .page-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 0, 40, 0.12), rgba(0, 230, 208, 0.12) ); } .content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* Bug real de la fuente encontrado en H4 (ver docs/design-source.md): `margin-left: 0px` pisaba solo el lado izquierdo del `margin: 0 auto` que centra `.container` (misma especificidad, `.content-grid` se declara después en la hoja de estilos) — el grid quedaba pegado al borde izquierdo del viewport en vez de centrado, con todo el espacio sobrante acumulado a la derecha. Confirmado en el sitio estático (misma regla, mismo bug) y por navegador en el tema. Eliminado: `.container` ya centra por sí solo. */ } .content-card { background: var(--soft); border: 1px solid var(--line); border-radius: 30px; padding: 30px; } .content-card h3 { margin-bottom: 12px; } .content-card p, .content-card li { font-size: 15px; color: var(--muted); } .content-card ul { margin-top: 16px; padding-left: 18px; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 38px; } .team-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--white); transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: none; } .team-card:hover { transform: scale(1.05); box-shadow: 0 20px 40px rgba(0, 0, 40, 0.15); } .team-photo { height: 350px; /* `center top`, no `center`: la tarjeta tiene una altura fija (350px) pero su ancho cambia mucho entre los cortes responsive del grid (4 → 2 → 1 columnas), así que el aspect ratio real que `cover` tiene que encajar varía bastante (~0.79 en 4 columnas, hasta ~1.18 en el corte de 2 columnas). Con `center` el recorte vertical necesario para llegar a un ratio tan ancho se repartía mitad arriba/mitad abajo y cortaba la frente o media cara en varios retratos — bug real encontrado en H3 (ver docs/design-source.md). Anclar arriba prioriza la cabeza y sacrifica hombros/torso, que es lo que se puede perder sin problema en un headshot. */ background: var(--image) center top/cover; } .team-body { padding: 22px; } .team-card-actions { display: flex; gap: 12px; padding: 0 22px 22px; } .team-card-actions a { color: var(--muted); transition: color 0.2s ease; } .team-card-actions a:hover { color: var(--navy); } .team-body p { font-size: 14px; margin-top: 4px; } /* H5: en la fuente (cases.html) el filtro entero vive en `style=` inline y el script alterna `btn.style.background`/`.color` a mano — se porta a clases reales, alternadas por assets/js/cases.js con classList.toggle. */ .cases-filter { display: flex; gap: 12px; flex-wrap: wrap; } .filter-btn { padding: 8px 20px; border-radius: 30px; border: 1px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .filter-btn:hover { background: rgba(0, 0, 40, 0.05); } .filter-btn.active { background: var(--navy); color: white; } .cases-list { display: grid; gap: 56px; } .case-row { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 42px; align-items: center; padding: 34px; border-radius: 42px; background: var(--soft); border: 1px solid var(--line); transition: transform 0.3s ease; } .case-row:hover { transform: translateY(-8px); } /* H5: era `.case-row:nth-child(even)` en la fuente — el filtro de categorías de cases.html oculta filas con `display: none`, y `:nth-child` sigue contando las ocultas, así que el zig-zag se desordenaba visualmente al filtrar (bug real, ver docs/design-source.md). Reescrito a una clase que assets/js/cases.js recalcula sobre las filas VISIBLES cada vez que cambia el filtro. */ .case-row.is-reversed { grid-template-columns: 1.05fr 0.95fr; } .case-row.is-reversed .case-row-img { order: 2; } .case-row-img { min-height: 290px; border-radius: 34px; background: var(--image) center/cover; } .method-panel { border-radius: 42px; background: var(--navy); padding: 42px; color: var(--white); } .method-panel h3, .method-panel p { color: var(--white); } .method-panel p { color: rgba(255, 255, 255, 0.72); } /* H6: la definición real de `.blog-grid` vive más abajo (3 columnas, el grid de tarjetas de blog.html) — esta primera versión (1.1fr/0.9fr, align-items: start) no la usa ninguna página de la fuente, y su `align-items: start` se filtraba sin resetear a la definición real porque `.blog-grid` estaba declarada dos veces (ver docs/design-source.md). */ .article-featured, .article-card { border: 1px solid var(--line); border-radius: 34px; overflow: hidden; background: var(--white); box-shadow: 0 16px 50px rgba(0, 0, 40, 0.05); } .article-img { height: 300px; background: var(--image) center/cover; } .article-body { padding: 30px; } .article-list { display: grid; gap: 18px; } .article-card { padding: 26px; } .blog-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; } .sustainability-strip { border-radius: 34px; background: var(--soft); border: 1px solid var(--line); padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .biosphere-card { display: flex; gap: 38px; align-items: center; border-radius: 42px; background: var(--soft); border: 1px solid var(--line); padding: 38px; } .biosphere-badge { min-height: 300px; border-radius: 34px; background: radial-gradient(circle at 35% 30%, #ff4438, transparent 18%), radial-gradient(circle at 55% 25%, #ffd400, transparent 16%), radial-gradient(circle at 65% 45%, #00b050, transparent 17%), radial-gradient(circle at 45% 58%, #0084ff, transparent 18%), #ffffff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 50px rgba(0, 0, 40, 0.05); position: relative; overflow: hidden; } .biosphere-badge strong { background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); border-radius: 999px; padding: 14px 20px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; text-align: center; } .prefooter { padding: 28px 0 76px; } .contact-panel { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; background: linear-gradient(135deg, var(--navy), #09094d); border-radius: 58px; padding: 68px; color: var(--white); position: relative; overflow: hidden; } .contact-panel::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; top: -220px; background: rgba(0, 230, 208, 0.22); } .contact-panel h2, .contact-panel p { color: var(--white); position: relative; z-index: 1; } .contact-panel p { color: rgba(255, 255, 255, 0.72); margin-top: 20px; } form { position: relative; z-index: 1; background: var(--white); border-radius: 34px; padding: 30px; display: grid; gap: 14px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } label { display: grid; gap: 7px; color: var(--navy); font-size: 14px; font-weight: 700; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; font: inherit; color: var(--navy); outline: none; background: #fbfcfd; } textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(0, 230, 208, 0.12); } .form-actions-contact { display: flex; flex-direction: column; gap: 16px; align-items: center; margin-top: 16px; } .cta-banner { border-radius: 42px; background: var(--navy); padding: 42px 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; overflow: hidden; position: relative; } .cta-banner::after { content: ""; position: absolute; right: -120px; top: -160px; width: 360px; height: 360px; border-radius: 50%; background: rgba(0, 230, 208, 0.2); } .cta-banner h3, .cta-banner p { color: var(--white); position: relative; z-index: 1; } .cta-banner p { color: rgba(255, 255, 255, 0.7); margin-top: 8px; } .cta-banner .btn { position: relative; z-index: 1; } .footer { background: var(--navy); color: var(--white); padding: 80px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer-col-1 p, .footer-col-1 .address p { color: rgba(255, 255, 255, 0.7); font-size: 16px; margin-top: 5px; } .footer-col-1 .address { margin-top: 20px; } .footer-col-2 { display: flex; flex-direction: column; justify-content: space-between; } .newsletter-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--turquoise); color: var(--white); padding: 10px 40px; border-radius: 999px; text-decoration: none; font-size: 20px; transition: all 0.3s ease; } .newsletter-btn:hover { background-color: var(--turquoise); color: var(--navy); } .footer-right-side { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; } .footer-legal-new { display: flex; gap: 15px; } .footer-legal-new a { color: rgba(255, 255, 255, 0.7); font-size: 14px; } .tagline { color: var(--turquoise); font-size: 32px; letter-spacing: -0.02em; } .social-icons { display: flex; gap: 20px; /* margin-top: 20px; // removed */ } .social-icons a { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--white); text-decoration: none; transition: 0.2s ease; } .social-icons a:hover { color: var(--turquoise); } .footer-bottom { display: flex; justify-content: space-between; color: rgba(255, 255, 255, 0.5); font-size: 14px; } .footer-legal a { margin-left: 20px; color: rgba(255, 255, 255, 0.5); } .features { gap: 12px; } .feature { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; padding: 16px; min-height: auto; } .feature .icon { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; font-size: 11px; margin-bottom: 0; } .feature h3 { font-size: 18px; margin: 1px 0 6px; } .feature p { font-size: 13px; line-height: 1.45; } .testimonials-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: stretch; } .quote-card { border-radius: 34px; background: var(--soft); border: 1px solid var(--line); padding: 30px; position: relative; overflow: hidden; } .quote-card.dark { background: var(--navy); } .quote-card.dark h3, .quote-card.dark p, .quote-card.dark strong { color: var(--white); } .quote-card.dark p { color: rgba(255, 255, 255, 0.74); } .quote-mark { font-size: 64px; line-height: 0.8; color: var(--turquoise); font-weight: 900; margin-bottom: 12px; } .quote-author { margin-top: 22px; color: var(--navy); font-size: 14px; } .benefit-list { display: grid; gap: 12px; margin-top: 22px; } .benefit-item { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, 0.78); font-size: 15px; } .benefit-item span { width: 24px; height: 24px; border-radius: 9px; background: rgba(0, 230, 208, 0.18); color: var(--turquoise-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex: 0 0 auto; } .service-detail-card { transition: background 0.3s ease; } .service-detail-card:hover { background: url("../img/servicecards.png") center/cover; } .service-detail-card:hover h3, .service-detail-card:hover p, .service-detail-card:hover li { color: #fff; } /* Reescrito de un selector posicional (H4, ver docs/design-source.md): las reglas de layout de `.service-cycle` vivían enteramente en selectores `div:nth-of-type(1) > main:nth-of-type(1) > section:nth-of-type(4) > ...` — nunca hubo una regla de clase base para `.service-cycle` en sí. Esa especificidad tan alta (varios tipos + pseudo-clases) hacía que el override móvil de más abajo (`@media (max-width:768px) { .service-cycle { grid-template-columns: 1fr } }`, sin !important) nunca ganara contra otro selector posicional posterior con !important (ver más abajo) — resultado: en mobile `.service-cycle` seguía forzado a 5 columnas con scroll horizontal, y el scroll arrancaba centrado (por el `justify- content: center` que quedaba vivo), mostrando los pasos 03/04 en vez del 01. Reescrito íntegro por clase — `.service-cycle` es única de services.html, así que no hay riesgo de afectar otras páginas. */ .service-cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 26px; width: 100%; } .cycle-step { background: var(--soft); border: 1px solid var(--line); border-radius: 22px; padding: 18px; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .cycle-step:hover { background: var(--navy); color: var(--white); transform: translateY(-8px); } .cycle-step:hover h3 { color: var(--white); } .stats-grid { display: grid; grid-template-columns: auto 1fr; gap: 60px; align-items: stretch; } .testimonial-section { background: var(--navy); color: var(--white); padding: 80px 0; overflow: hidden; position: relative; /* Bug real de la fuente (presente igual en el sitio estático, reportado por el usuario): al tener `height: 413px` fijo (ver más abajo) pero no ser un contenedor flex/grid, cuando el testimonio activo mide menos que el alto disponible el espacio sobrante se acumulaba entero abajo (el testimonio quedaba pegado arriba, ~40px de aire arriba vs ~120px abajo, medido por navegador) en vez de repartirse parejo. `display:flex` + `align-items: center` centra verticalmente el contenido dentro de la altura fija, sin cambiar el ancho (`.container` sigue fijando su propio ancho como hijo flex). */ display: flex; align-items: center; } .carousel { position: relative; width: 100%; /* Bug real de la fuente (presente igual en el sitio estático, ver docs/design-source.md): `.carousel` nunca tuvo `overflow: hidden`. `.carousel-inner` es un flex row de 3 `.testimonial-item` al 100% de ancho cada uno, desplazado con `translateX()` — sin recortar el viewport del carrusel, los testimonios anterior/siguiente quedaban visibles asomando por los bordes en vez de ocultos. Reportado por el usuario (fragmentos de texto del testimonio contiguo colándose por el borde izquierdo en mobile). Afecta tanto a Home como a Services, que comparten este mismo componente. */ overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease-in-out; } .testimonial-item { min-width: 100%; } .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin: 0 60px; } .testimonial-image img { width: 100%; border-radius: 20px; } .testimonial-content blockquote { font-size: 2rem; margin-bottom: 20px; font-weight: 600; } .testimonial-content p { color: rgba(255, 255, 255, 0.7); margin-bottom: 30px; } .testimonial-quote-icon { width: 100%; max-width: 40px; height: auto; margin-bottom: 20px; } .testimonial-content .btn { background: transparent; color: var(--white); border: 1px solid var(--white); } .testimonial-content .btn:hover { background: var(--turquoise); color: var(--navy); border-color: var(--turquoise); } .stats-container { padding: 60px 0; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-card { display: flex; flex-direction: column; gap: 10px; } .stat-value { color: #007bff; /* Similar blue */ font-size: 2.5rem; font-weight: 700; margin: 0; } .stat-label { color: #66708a; font-size: 1rem; } .stat-line { background: #007bff; height: 2px; width: 100%; margin-top: 10px; } .cycle-step:hover p { color: rgba(255, 255, 255, 0.7); } .cycle-step:hover small { color: var(--turquoise); } .cycle-step small { color: var(--turquoise); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; } .cycle-step h3 { font-size: 18px; margin-top: 8px; } .case-detail { background: var(--navy); border-radius: 52px; padding: 56px; color: var(--white); overflow: hidden; position: relative; } .case-detail::after { content: ""; position: absolute; right: -190px; top: -220px; width: 440px; height: 440px; border-radius: 50%; background: rgba(0, 230, 208, 0.18); } .case-detail h2, .case-detail h3, .case-detail p { color: var(--white); position: relative; z-index: 1; } .case-detail p { color: rgba(255, 255, 255, 0.74); } .case-detail-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 36px; align-items: start; position: relative; z-index: 1; } .case-detail-image { min-height: 390px; border-radius: 36px; background: var(--image) center/cover; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22); } .rsr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; } .rsr-card { border-radius: 24px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 22px; } .rsr-card small { color: var(--turquoise-bright); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; } .rsr-card h3 { font-size: 20px; margin: 10px 0 8px; } .blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .blog-card { border: 1px solid var(--line); border-radius: 34px; overflow: hidden; background: var(--white); box-shadow: 0 16px 50px rgba(0, 0, 40, 0.05); transition: 0.2s ease; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 24px 70px rgba(0, 0, 40, 0.1); } .blog-card.featured { grid-column: span 2; } .blog-thumb { height: 190px; background: var(--image) center/cover; } .blog-card.featured .blog-thumb { height: 260px; } .blog-card-body { padding: 26px; } .blog-card small { display: block; color: var(--turquoise); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 900; margin-bottom: 10px; font-size: 11px; } .blog-card p { margin-top: 10px; font-size: 15px; } #manifest-section { background: none; } .manifest-panel { display: flex; flex-direction: column; gap: 38px; border-radius: 66px 66px 66px 10px; background: var(--navy); padding: 48px; color: var(--white); overflow: hidden; position: relative; } .manifest-header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .manifest-carousel { overflow-x: auto; scrollbar-width: none; } .manifest-carousel::-webkit-scrollbar { display: none; } .manifest-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .manifest-item { border-radius: 24px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 30px; width: 100%; transition: background 0.3s ease; } .manifest-item:hover { background: rgba(255, 255, 255, 0.12); } .biosphere-logo-card { width: 300px; min-height: 300px; border-radius: 34px; background: #ffffff; border: 1px solid rgba(0, 0, 40, 0.08); display: flex; align-items: center; justify-content: center; padding: 34px; box-shadow: 0 16px 50px rgba(0, 0, 40, 0.05); } .biosphere-content { width: 800px; } .biosphere-logo-card img { width: min(330px, 100%); height: auto; } .cert-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .cert-pill { border-radius: 999px; background: var(--turquoise); border: none; color: var(--navy); padding: 10px 14px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } @media (max-width: 1050px) { /* H6: `.blog-grid` se saca de esta lista — a 992px hay una regla propia que lo pasa a 2 columnas (ver más abajo, junto al resto de reglas de `.blog-grid`), así que dejarlo aquí también producía un breakpoint no monótono: 1 columna a 1050px, 2 columnas otra vez a 992px (ver docs/design-source.md). */ .hero-grid, .split, .why-grid, .page-hero-grid, .case-row, .case-row.is-reversed, .case-detail-grid, .manifest-panel, .biosphere-card, .contact-panel { grid-template-columns: 1fr; } /* Cases (H5): el hero usa `.hero-grid` anidado dentro de `.page-hero` (única página que lo hace así — About/Services usan `.page-hero-grid`, que sí matchea el selector de una sola clase de arriba). La regla base `.page-hero .hero-grid` (dos clases) tiene más especificidad que `.hero-grid` sola de este breakpoint, así que ganaba en todos los viewports pese al orden en cascada — el grid nunca colapsaba a 1 columna en mobile y el bloque de animación (.hero-image-container) quedaba apachurrado en su propia columna angosta, superpuesto al párrafo. Selector con la misma especificidad para que el `1fr` de acá sí gane. */ .page-hero .hero-grid { grid-template-columns: 1fr; } } /* Blog Post Styles */ .post-header-section { background-color: #f6f7f9; padding-top: 100px; padding-bottom: 80px; } .post-header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 992px) { .post-header-grid { grid-template-columns: 1fr; gap: 32px; } } .post-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 32px; } .post-breadcrumb a { color: var(--navy); text-decoration: none; font-weight: 600; } .post-breadcrumb a:hover { text-decoration: underline; } .post-date { font-size: 14px; color: var(--muted); margin-bottom: 24px; display: block; } .post-author-box { display: flex; align-items: center; gap: 12px; margin-top: 32px; } .post-author-box img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .post-author-info { display: flex; flex-direction: column; } .post-author-name { color: var(--navy); font-weight: 700; font-size: 15px; } .post-author-role { color: var(--muted); font-size: 14px; } .post-featured-img { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08); } .post-content-section { padding-top: 80px; padding-bottom: 80px; background-color: var(--white); } .post-content-grid { display: grid; grid-template-columns: 1fr 280px; gap: 64px; } @media (max-width: 992px) { .post-content-grid { grid-template-columns: 1fr; gap: 48px; } /* H6: `.post-sidebar` (position: sticky; top: 120px) sigue pegajoso tras apilarse bajo el cuerpo del artículo — un sidebar "sticky" ya no tiene sentido cuando ambos ocupan el mismo ancho de columna, y se solapa con el contenido al hacer scroll. */ .post-sidebar { position: static; } } .post-sidebar { display: flex; flex-direction: column; gap: 48px; position: sticky; top: 120px; align-self: start; } .post-share { display: flex; gap: 20px; align-items: center; } .post-share a { color: var(--muted); transition: 0.2s ease; display: inline-flex; } .post-share a:hover { color: var(--navy); } .post-toc h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .post-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .post-toc a { color: var(--muted); text-decoration: none; font-size: 14px; transition: 0.2s ease; } .post-toc a:hover, .post-toc a.active { color: var(--navy); font-weight: 600; } .post-cta-card { background-color: #f6f7f9; border-radius: 16px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .post-cta-card h4 { font-size: 18px; margin: 0; line-height: 1.3; } .post-cta-card p { font-size: 14px; color: var(--muted); margin: 0; } .post-cta-card .btn { font-size: 11px; padding: 10px 20px; width: 100%; margin-top: 8px; } .post-body { font-size: 18px; line-height: 1.8; color: var(--navy); } .post-body p { margin-bottom: 24px; color: #444; font-size: 18px; } .post-body h2 { font-size: 28px; margin-top: 48px; margin-bottom: 24px; } .post-body h3 { font-size: 22px; margin-top: 40px; margin-bottom: 16px; } .post-body ul { padding-left: 24px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; } @media (max-width: 1050px) { .case-row.is-reversed .case-row-img { order: 0; } .hero-media { min-height: 560px; } .services-grid, .compact-cases, .content-grid, .team-grid, .blog-more, .blog-cards, .service-cycle, .rsr-grid { grid-template-columns: repeat(2, 1fr); } .logos { grid-template-columns: repeat(2, 1fr); } .sustainability-strip, .cta-banner { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nav-inner { height: auto; min-height: 82px; padding: 16px 0; align-items: flex-start; } .nav-links { display: flex; flex-direction: column; } } @media (max-width: 760px) { .container { width: min(100% - 30px, var(--max)); } .hero { padding-top: 52px; } .hero-media { min-height: 530px; } .video-card { height: 340px; border-radius: 42px 42px 42px 10px; } .floating-card { width: calc(100% - 24px); left: 12px; top: 370px; } .video-caption { left: 42px; right: 30px; bottom: 118px; } .play { bottom: 32px; } .trust-row, .section-head { grid-template-columns: 1fr; display: grid; } .services-grid, .features, .metric-grid, .form-grid, .compact-cases, .content-grid, .team-grid, .blog-more, .blog-cards, .service-cycle, .rsr-grid, .testimonials-grid { grid-template-columns: 1fr; } /* Bug real de la fuente encontrado en H4 (ver docs/design-source.md): `.transversal-card` lleva `grid-column: span 2` inline en el HTML. Con `.content-grid` ya colapsado a una sola columna explícita arriba, ese `span 2` no cabe y CSS Grid crea una columna implícita para acomodarlo — lo que además arrastra a las otras 4 tarjetas de servicio al auto-placement en 2 columnas, en vez de apilarse en 1. Confirmado por navegador a 390px: las tarjetas quedaban de ~178px de ancho en vez de ocupar el ancho completo. `!important` es necesario: un estilo inline siempre le gana a una regla de hoja de estilos sin él, sin importar la especificidad del selector. Se neutraliza el span en el mismo breakpoint donde el grid pasa a una columna. */ .transversal-card { grid-column: span 1 !important; } .why, .contact-panel { padding: 36px 22px; border-radius: 34px; } .section, .section-tight { padding: 56px 0; } } /* Senior UX refinement overrides */ .features { gap: 14px !important; align-content: start !important; } .feature { display: grid !important; grid-template-columns: 34px 1fr !important; grid-auto-rows: auto !important; column-gap: 14px !important; align-items: start !important; align-content: start !important; padding: 18px !important; min-height: 0 !important; height: auto !important; } .feature .icon, .icon { width: 34px !important; height: 34px !important; border-radius: 12px !important; font-size: 11px !important; margin-bottom: 0 !important; } .feature h3 { font-size: 18px !important; margin: 2px 0 6px !important; line-height: 1.12 !important; } .feature p { grid-column: 2 !important; font-size: 13px !important; line-height: 1.45 !important; } .faq { padding: 58px 0; } .proof-grid { display: grid; grid-template-columns: 2.33fr 1fr; gap: 20px; align-items: stretch; } .proof-card { border-radius: 40px; padding: 34px; position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; } .proof-card.dark { background: var(--navy); color: var(--white); } .proof-card.light { background: var(--soft); border: 1px solid var(--line); } .proof-card.dark h3, .proof-card.dark p, .proof-card.dark strong, .proof-card.dark .quote-author { color: var(--white); } .proof-card.dark p, .proof-card.dark .quote-author { color: rgba(255, 255, 255, 0.78); } .proof-card.light .benefit-item { color: var(--muted); } .proof-card.light .benefit-item strong { color: var(--navy); } .proof-card .quote-mark { font-size: 64px; line-height: 0.65; color: var(--turquoise-bright); font-weight: 900; margin-bottom: 22px; } .proof-card h3 { font-size: clamp(26px, 3vw, 38px); max-width: 780px; } .proof-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .proof-card .benefit-list { display: grid; gap: 16px; margin-top: 24px; } .proof-card .benefit-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; color: var(--muted); font-size: 15px; } .proof-card .benefit-item span { width: 28px; height: 28px; border-radius: 10px; background: rgba(0, 230, 208, 0.18); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex: 0 0 auto; } .delivery-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 42px; align-items: start; margin-bottom: 28px; } .delivery-intro p { max-width: 620px; } .cycle-step p { margin-top: 8px; font-size: 13px; line-height: 1.45; } .case-cta { cursor: pointer; } .case-cta:hover h2, .case-cta:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--turquoise); } .case-detail .rsr-grid { grid-template-columns: repeat(3, 1fr); } .manifest-panel h2 { max-width: 560px; } @media (max-width: 1050px) { .proof-grid, .delivery-intro, .case-detail-grid, .manifest-panel { grid-template-columns: 1fr !important; } .service-cycle, .case-detail .rsr-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 760px) { .proof-grid, .service-cycle, .case-detail .rsr-grid { grid-template-columns: 1fr !important; } } /* Final refinements */ .why::after { display: none !important; } .work-panel { background: var(--soft); border-radius: 52px; padding: 54px; border: 1px solid var(--line); } .work-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 44px; align-items: start; } .work-grid h2 { font-size: clamp(34px, 4.2vw, 56px); max-width: 560px; } .work-grid .lead { font-size: 19px; max-width: 520px; } .work-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .work-card { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: 0 10px 34px rgba(0, 0, 40, 0.035); } .work-card span { width: 34px; height: 34px; border-radius: 12px; background: rgba(0, 230, 208, 0.16); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; } .work-card h3 { font-size: 18px; margin-bottom: 6px; } .work-card p { font-size: 13px; line-height: 1.45; } .case-story-hero { padding: 54px; border-radius: 52px; background: var(--navy); color: var(--white); overflow: hidden; position: relative; } .case-story-hero::after { content: ""; position: absolute; right: -160px; top: -190px; width: 420px; height: 420px; border-radius: 50%; background: rgba(0, 230, 208, 0.17); } .case-story-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; position: relative; z-index: 1; } .case-story-image { min-height: 420px; border-radius: 36px; background: var(--image) center/cover; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22); } .case-story-hero h2, .case-story-hero h3, .case-story-hero p { color: var(--white); } .case-story-hero p { color: rgba(255, 255, 255, 0.76); } .case-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; } .case-meta { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); border-radius: 22px; padding: 18px; } .case-meta small, .story-block small { color: var(--turquoise-bright); display: block; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; font-weight: 900; margin-bottom: 8px; } .case-meta strong { color: var(--white); font-size: 17px; line-height: 1.15; display: block; } .case-story-body { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 28px; margin-top: 28px; } .story-sidebar, .story-content { border-radius: 34px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 16px 50px rgba(0, 0, 40, 0.045); padding: 30px; } .story-sidebar { align-self: start; position: sticky; top: 110px; } .story-sidebar h3, .story-content h3 { margin-bottom: 12px; } .story-sidebar ul, .story-content ul { padding-left: 18px; color: var(--muted); font-size: 15px; display: grid; gap: 9px; margin-top: 14px; } .story-block { padding: 24px 0; border-bottom: 1px solid var(--line); } .story-block:first-child { padding-top: 0; } .story-block:last-child { border-bottom: 0; padding-bottom: 0; } .story-block p { margin-top: 10px; } @media (max-width: 1050px) { .work-grid, .case-story-grid, .case-story-body { grid-template-columns: 1fr !important; } .case-meta-grid { grid-template-columns: repeat(2, 1fr) !important; } .story-sidebar { position: static; } } @media (max-width: 760px) { .work-panel, .case-story-hero { padding: 28px; border-radius: 34px; } .work-cards, .case-meta-grid { grid-template-columns: 1fr !important; } } /* Home international section */ .home-international { padding: 60px 0; } .intl-panel { border-radius: 52px; background: linear-gradient(135deg, var(--navy) 0%, #070743 100%); padding: 58px; position: relative; overflow: hidden; color: var(--white); box-shadow: var(--shadow); } .intl-panel::before { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 50%; right: -165px; top: -195px; background: rgba(0, 230, 208, 0.18); } .intl-panel::after { content: "Europe"; position: absolute; left: 44px; bottom: -34px; font-size: 112px; line-height: 1; font-weight: 900; letter-spacing: -0.07em; color: rgba(255, 255, 255, 0.035); pointer-events: none; } .intl-head { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 36px; align-items: end; position: relative; z-index: 1; margin-bottom: 34px; } .intl-panel .eyebrow, .intl-head h2, .intl-head p, .intl-card h3, .intl-card p { color: var(--white); } .intl-head p { color: rgba(255, 255, 255, 0.72); max-width: 560px; } .intl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; } .intl-card { display: grid; gap: 20px; min-height: 270px; border-radius: 32px; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.13); padding: 26px; transition: 0.22s ease; } .intl-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.11); border-color: rgba(0, 230, 208, 0.45); } .intl-code { width: 62px; height: 62px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 230, 208, 0.16); border: 1px solid rgba(0, 230, 208, 0.36); color: var(--turquoise-bright); font-size: 20px; font-weight: 900; letter-spacing: 0.08em; } .intl-card p { color: rgba(255, 255, 255, 0.72); font-size: 15px; } .intl-link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: var(--turquoise-bright); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; } .intl-link span { transition: 0.2s ease; } .intl-card:hover .intl-link span { transform: translateX(4px); } @media (max-width: 1050px) { .intl-head, .intl-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .intl-panel { padding: 34px 22px; border-radius: 34px; } .intl-panel::after { font-size: 68px; } } /* Blog Slider & Hero */ /* H6 fix: `.container` (regla global, ver más arriba) da `position: relative; z-index: 1` a CUALQUIER `.container` del sitio — así que el `.container` del hero (`.blog-header`) y el de cada sección siguiente (`.container py-16` del grid, la newsletter, etc.) quedan EMPATADOS en z-index:1. El empate lo rompe el orden del DOM (gana el que aparece después), así que la lupa/dropdown del hero (`.category-dropdown-content`/`.blog-search-form`, z-index:10) quedaban pintados DEBAJO de las tarjetas del grid sin importar cuánto se subiera ese z-index — estaban atrapados dentro del contexto de apilamiento aislado de su propio `.container`, que nunca podía ganarle al `.container` de una sección posterior. Se sube todo el `.blog-hero` (la sección completa, no solo su `.container`) a z-index:2, para que gane contra cualquier `.container` posterior del blog. */ .blog-hero { margin-top: 60px; position: relative; z-index: 2; } .blog-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .blog-title-wrap { display: flex; flex-direction: column; gap: 16px; } .title-cyan-stripe { width: 24px; height: 4px; background-color: var(--turquoise); border-radius: 999px; } .blog-header h1 { font-size: 48px; letter-spacing: -0.03em; margin: 0; } .blog-header-actions { display: flex; align-items: center; gap: 12px; } .icon-btn { background: white; border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); transition: 0.2s ease; } .icon-btn:hover { background: #f5f5f5; border-color: var(--navy); } .category-dropdown { position: relative; display: inline-block; } .category-dropdown-content { display: none; position: absolute; right: 0; top: calc(100% + 8px); background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1); border-radius: 8px; border: 1px solid var(--line); z-index: 10; flex-direction: column; } .category-dropdown-content a { color: var(--navy); padding: 12px 16px; text-decoration: none; display: block; font-size: 14px; transition: background-color 0.2s ease; } .category-dropdown-content a:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } .category-dropdown-content a:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .category-dropdown-content a:hover { background-color: #f6f7f9; } /* H6 fix: se reemplazó `:hover`/`:focus-within` puro por una clase `.is-open` controlada por JS (assets/js/blog.js, initCategoryDropdown()). El CSS-only `:hover` no tenía ningún margen: el hueco de 8px entre el botón y el panel (`top: calc(100% + 8px)` de arriba) es una zona muerta donde el cursor no está ni sobre `.category-dropdown` ni sobre `.category-dropdown-content` — al cruzarla, `display:none` se aplicaba al instante y el panel desaparecía antes de que el cursor pudiera llegar. `:focus-within` sí lo mantenía abierto (por eso solo con click "se pegaba"), pero eso es foco, no hover real. El JS da un pequeño margen de tiempo al salir con el mouse (para poder cruzar el hueco) y además soporta click para dejarlo abierto de forma persistente. */ .category-dropdown.is-open .category-dropdown-content { display: flex; } /* H6: utilidad estándar de WP Core (ausente en este tema 100% custom) — necesaria para el