/* ========================================================================= Navifreight - Diseño · Capa base v1 Solo tipografía, botones y microinteracciones. NO toca maquetación: ni tamaños de sección, ni anchos, ni rejillas. Verificada sobre el marcado real de navifreight.com.pe, sin desbordes. Se revierte desactivando el plugin. ========================================================================= */ :root{ --nf-navy:#0B2545; --nf-navy-2:#1A2B3C; --nf-teal:#14596E; --nf-amber:#F2A900; --nf-ink:#334155; --nf-ink-2:#5B6B7C; --nf-mist:#EAF0F6; --nf-line:#E3E9F0; --nf-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --nf-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } /* --- Tipografía --------------------------------------------------------- */ body,button,input,select,textarea,.entry-content{font-family:var(--nf-body)} h1,h2,h3,h4,h5,h6, .nf-h2,.nf-step-title,.nf-stat-num,.nf-hero-stat-num, .nf-step-num,.nf-why-num,.nf-num,.site-title{ font-family:var(--nf-head); letter-spacing:-.015em; } h1,h2,.nf-h2{text-wrap:balance} .nf-eyebrow,.nf-hero-eyebrow{ font-family:var(--nf-body); font-weight:600; letter-spacing:.14em; } .main-header-menu a, .ast-header-break-point .main-header-menu a{ font-family:var(--nf-body); font-weight:500; } /* --- Botones: dejan de parecer enlaces subrayados ------------------------ */ .nf-btn,.nf-btn-primary,.nf-btn-secondary,.nf-btn-wa,.wp-block-button__link{ font-family:var(--nf-body); font-weight:600; text-decoration:none!important; border-radius:8px; transition:transform .15s ease,box-shadow .15s ease; } .nf-btn:hover,.nf-btn-primary:hover, .nf-btn-secondary:hover,.nf-btn-wa:hover{ transform:translateY(-2px); text-decoration:none!important; } .nf-btn-primary{box-shadow:0 6px 18px rgba(242,169,0,.28)} .nf-btn-primary:hover{box-shadow:0 10px 26px rgba(242,169,0,.36)} .nf-btn:focus-visible, .nf-btn-primary:focus-visible, .nf-btn-secondary:focus-visible, .nf-btn-wa:focus-visible{ outline:3px solid var(--nf-amber); outline-offset:3px; } /* --- Tarjetas: solo el gesto al pasar el cursor -------------------------- */ .nf-service-card,.nf-why-card,.nf-philosophy-card,.nf-mvc-card{ transition:transform .2s ease,box-shadow .2s ease; } .nf-service-card:hover,.nf-why-card:hover, .nf-philosophy-card:hover,.nf-mvc-card:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(11,37,69,.06),0 10px 26px rgba(11,37,69,.09); } /* --- Tablas: cifras alineadas ------------------------------------------- */ .nf-tabla{font-variant-numeric:tabular-nums} .nf-tabla th{ font-family:var(--nf-body); font-weight:600; letter-spacing:.09em; } /* --- Respeto al movimiento reducido ------------------------------------- */ @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ========================================================================== CAPA 2 — Maqueta Lovable llevada al sitio real Anadido el 7 de septiembre de 2026. Para revertir: desactivar el plugin. ========================================================================== */ :root{ --nf-amber-2:#FFB81C; --nf-hero-img:url("/wp-content/uploads/2026/09/hero-bow-dawn.jpg"); } /* --- Filete ambar delante de los antetitulos de seccion --- */ .nf-eyebrow{position:relative;padding-left:38px} .nf-eyebrow::before{content:"";position:absolute;left:0;top:.62em; width:26px;height:2px;background:var(--nf-amber)} /* --- "Cotiza tu Embarque" del menu, como boton ambar --- */ .menu-item-39 > a{background:var(--nf-amber);color:var(--nf-navy)!important; border-radius:8px;padding:10px 20px!important;margin-block:auto!important; height:auto!important;line-height:1.3!important;font-weight:700; transition:background-color .18s ease,transform .18s ease} .menu-item-39 > a:hover{background:var(--nf-amber-2);transform:translateY(-1px)} /* --- HERO a todo el ancho --- El ancho exacto lo calcula diseno.js midiendo la posicion real del bloque: el contenedor de Astra no esta centrado en la ventana. Lo de abajo es el respaldo si el JavaScript no llega a ejecutarse. --- */ html,body{overflow-x:clip} .nf-hero{position:relative;margin-inline:calc(50% - 50vw);width:auto; border-radius:0!important;min-height:660px;display:flex;align-items:center; padding:110px 0!important; background-image:linear-gradient(100deg,rgba(9,30,56,.95) 0%,rgba(11,37,69,.82) 34%, rgba(11,37,69,.42) 66%,rgba(11,37,69,.12) 100%),var(--nf-hero-img)!important; background-size:cover!important;background-position:center 30%!important; background-repeat:no-repeat} .nf-hero > svg{display:none} .nf-hero-inner{max-width:1240px;margin:0 auto;padding:0 40px;width:100%} .nf-hero-inner > *{max-width:820px} .nf-hero-eyebrow{color:var(--nf-amber)!important;letter-spacing:.16em} .nf-hero-inner h2,.nf-hero-inner .nf-h2{font-size:clamp(2.5rem,4.4vw,3.9rem)!important; line-height:1.05!important;color:#fff;text-shadow:0 2px 24px rgba(6,20,38,.45)} .nf-hero-sub{font-size:1.15rem;color:rgba(255,255,255,.9);max-width:580px} .nf-hero-ctas .nf-btn{padding:16px 28px;font-size:1rem} /* --- Franja de confianza: antes partia "NAVIFREIGHT DESDE / 2007" --- */ .nf-trust{padding-bottom:0!important} .nf-trust-inner{grid-template-columns:260px repeat(auto-fit,minmax(180px,1fr))!important; align-items:start;padding-bottom:56px} .nf-trust-badge{font-size:1.45rem!important;line-height:1.15;letter-spacing:-.01em} .nf-trust-badge span{display:block;font-size:2.6rem;color:var(--nf-amber);line-height:1} /* --- Tarjetas: profundidad y sin el hueco vacio bajo "Ver mas" --- */ .nf-service-card,.nf-why-card,.nf-step{display:flex;flex-direction:column; border-radius:14px;border:1px solid var(--nf-line); box-shadow:0 1px 2px rgba(11,37,69,.05),0 8px 24px rgba(11,37,69,.06); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .nf-service-card:hover,.nf-why-card:hover,.nf-step:hover{transform:translateY(-4px); border-color:var(--nf-amber); box-shadow:0 2px 4px rgba(11,37,69,.06),0 18px 40px rgba(11,37,69,.13)} .nf-service-card > *:last-child,.nf-why-card > *:last-child, .nf-step > *:last-child{margin-bottom:0!important} .nf-service-card > p:last-child{margin-top:auto!important;padding-top:16px} .nf-why-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))!important;gap:20px!important} .nf-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:20px!important} .nf-why-num,.nf-step-num{color:var(--nf-amber)!important;opacity:1!important} /* --- Apariciones al hacer scroll --- Solo se activan si diseno.js pone la clase nf-anim en el . Sin JavaScript no se oculta nada: la pagina se ve completa. --- */ .nf-anim .nf-reveal{opacity:0;transform:translateY(16px)} .nf-anim .nf-reveal.nf-visible{opacity:1;transform:none; transition:opacity .5s ease,transform .5s ease} /* --- Movil --- */ @media (max-width:781px){ .nf-hero{min-height:520px;padding:76px 0!important;background-position:center!important} .nf-hero-inner{padding:0 22px} .nf-trust-inner{grid-template-columns:1fr!important} .menu-item-39 > a{display:inline-block;margin:8px 0!important} } @media (prefers-reduced-motion:reduce){ .nf-anim .nf-reveal{opacity:1;transform:none} } /* --- Correccion de la franja de confianza --- El bloque decia "NAVIFREIGHT DESDE" en grande y "2007" pequenio debajo. Ahora es una sola frase, y las cinco columnas caben en una fila. --- */ .nf-trust .nf-trust-inner{grid-template-columns:1.35fr 1fr 1fr 1fr 1fr!important; gap:28px!important;align-items:start;padding-bottom:56px} .nf-trust .nf-trust-badge{font-size:1.5rem!important;line-height:1.2;letter-spacing:-.01em} .nf-trust .nf-trust-badge span{display:inline!important;font-size:inherit!important; color:inherit!important;font-weight:inherit!important;line-height:inherit!important} @media (max-width:781px){.nf-trust .nf-trust-inner{grid-template-columns:1fr!important}} /* --- El hueco vacio de las tarjetas --- El CSS antiguo forzaba min-height:64px en los parrafos para igualar alturas. Ya no hace falta: la tarjeta es flex y el enlace se ancla abajo solo. Con el min-height puesto quedaba un agujero bajo "Ver mas". --- */ .nf-service-card p,.nf-why-card p,.nf-step p{min-height:0!important} .nf-service-card > p:last-child{margin-top:auto!important;padding-top:14px} /* --- Franja de cifras bajo el hero (seccion .nf-stats) --- Las cuatro cifras ya estaban publicadas en /cotiza-tu-embarque/. Van escritas en el HTML: sin JavaScript se leen igual. --- */ .nf-stats{background:#fff;border-bottom:1px solid var(--nf-line); margin-inline:calc(50% - 50vw);width:auto;padding:34px 0} .nf-stats-inner{max-width:1240px;margin:0 auto;padding:0 40px;display:grid; grid-template-columns:repeat(4,1fr);gap:24px} .nf-stat{display:flex;flex-direction:column;gap:4px;padding-left:20px; border-left:2px solid var(--nf-line)} .nf-stat-num{font-family:var(--nf-head);font-weight:800;font-size:2.15rem; line-height:1;color:var(--nf-navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .nf-stat-lbl{font-size:.86rem;color:var(--nf-ink-2);line-height:1.35} @media (max-width:781px){ .nf-stats{padding:26px 0} .nf-stats-inner{grid-template-columns:1fr 1fr;gap:18px;padding:0 22px} .nf-stat-num{font-size:1.7rem} } /* --- Foto en las tarjetas de servicio --- La imagen sale del borde de la tarjeta hacia arriba usando margenes negativos, para que no haya que tocar el padding de la tarjeta. --- */ .nf-service-card{overflow:hidden;padding-top:0!important} .nf-service-img{display:block;max-width:none;width:calc(100% + 52px);height:172px;object-fit:cover; margin:0 -26px 20px;border-radius:14px 14px 0 0; transition:transform .4s ease;background:var(--nf-mist)} .nf-service-card:hover .nf-service-img{transform:scale(1.045)} @media (max-width:781px){.nf-service-img{height:150px}} /* ========================================================================== PAGINAS INTERIORES — hero con foto a todo el ancho -------------------------------------------------------------------------- Solo CSS. No se toca el contenido de ninguna pagina, asi que no cambia ni un enlace, ni un anclaje, ni un identificador del formulario. La foto de cada pagina se elige por su clase body.page-id-N que pone WordPress. Si una pagina no tiene foto asignada, cae en la del hero. ========================================================================== */ .nf-about-hero,.nf-svc-hub-hero,.nf-svc-hero,.nf-quote-hero, .nf-track-hero,.nf-contact-hero{ position:relative;margin-inline:calc(50% - 50vw);width:auto; border-radius:0!important;min-height:420px;display:flex;align-items:center; padding:96px 0!important; background-image: linear-gradient(100deg,rgba(9,30,56,.95) 0%,rgba(11,37,69,.84) 36%, rgba(11,37,69,.48) 70%,rgba(11,37,69,.18) 100%), var(--nf-pag-img,var(--nf-hero-img))!important; background-size:cover!important;background-position:center 35%!important; background-repeat:no-repeat; } .nf-about-hero > svg,.nf-svc-hub-hero > svg,.nf-svc-hero > svg, .nf-quote-hero > svg,.nf-track-hero > svg,.nf-contact-hero > svg{display:none} .nf-about-hero-inner,.nf-svc-hub-hero-inner,.nf-svc-hero-inner, .nf-quote-hero-inner,.nf-contact-hero-inner{ max-width:1240px!important;margin:0 auto;padding:0 40px;width:100%; } .nf-about-hero-inner > *,.nf-svc-hub-hero-inner > *,.nf-svc-hero-inner > *, .nf-quote-hero-inner > *,.nf-contact-hero-inner > *{max-width:820px} /* Una foto por pagina */ body.page-id-12{--nf-pag-img:url("/wp-content/uploads/2026/09/about-terminal-dawn.jpg")} /* Nosotros */ body.page-id-14{--nf-pag-img:url("/wp-content/uploads/2026/09/hero-cranes-dusk.jpg")} /* Servicios */ body.page-id-16{--nf-pag-img:url("/wp-content/uploads/2026/09/hero-deck-horizon.jpg")} /* Transporte maritimo */ body.page-id-18{--nf-pag-img:url("/wp-content/uploads/2026/09/service-air.jpg")} /* Transporte aereo */ body.page-id-22{--nf-pag-img:url("/wp-content/uploads/2026/09/service-import.jpg")} /* Importaciones */ body.page-id-24{--nf-pag-img:url("/wp-content/uploads/2026/09/service-export.jpg")} /* Exportaciones */ body.page-id-26{--nf-pag-img:url("/wp-content/uploads/2026/09/service-customs.jpg")} /* Servicios complementarios */ body.page-id-28{--nf-pag-img:url("/wp-content/uploads/2026/09/navifreight-port-aerial.jpg")} /* Cotiza tu embarque */ body.page-id-30{--nf-pag-img:url("/wp-content/uploads/2026/09/navifreight-night.jpg")} /* Rastrea tu carga */ body.page-id-32{--nf-pag-img:url("/wp-content/uploads/2026/09/hero-cranes-dusk.jpg")} /* Contacto */ body.page-id-292{--nf-pag-img:url("/wp-content/uploads/2026/09/china-hero.jpg")} /* Importar desde China */ body.page-id-351{--nf-pag-img:url("/wp-content/uploads/2026/09/service-lcl.jpg")} /* Carga consolidada LCL */ body.page-id-353{--nf-pag-img:url("/wp-content/uploads/2026/09/china-south-hero.jpg")} /* Shenzhen y sur de China */ body.page-id-354{--nf-pag-img:url("/wp-content/uploads/2026/09/china-east-hero.jpg")} /* Yiwu, Shanghai y Ningbo */ body.page-id-355{--nf-pag-img:url("/wp-content/uploads/2026/09/china-north-hero.jpg")} /* Qingdao y Tianjin */ @media (max-width:781px){ .nf-about-hero,.nf-svc-hub-hero,.nf-svc-hero,.nf-quote-hero, .nf-track-hero,.nf-contact-hero{min-height:340px;padding:64px 0!important; background-position:center!important} .nf-about-hero-inner,.nf-svc-hub-hero-inner,.nf-svc-hero-inner, .nf-quote-hero-inner,.nf-contact-hero-inner{padding:0 22px} } /* ========================================================================== CABECERA — como en la maqueta -------------------------------------------------------------------------- Antes: 161 px de alto, logo de 250 px y el menu partido en dos filas. Ahora: una sola fila de 103 px, logo a la izquierda, menu a la derecha y el boton ambar al final. Se queda pegada arriba al hacer scroll. Todo por CSS: el menu de WordPress no se toca, asi que el orden real de las entradas y sus enlaces siguen intactos. ========================================================================== */ .site-header{ position:sticky;top:0;z-index:99;background:#fff; box-shadow:0 1px 0 rgba(11,37,69,.08); } body.admin-bar .site-header{top:32px} .custom-logo{max-width:186px!important;height:auto!important} .site-primary-header-wrap{padding-top:8px!important;padding-bottom:8px!important} .ast-builder-grid-row.ast-builder-grid-row-has-sides{grid-template-columns:200px 1fr!important} ul.main-header-menu{ display:flex!important;flex-wrap:nowrap!important; justify-content:flex-end!important;align-items:center; } ul.main-header-menu > li > a{ padding-left:11px!important;padding-right:11px!important; font-size:.92rem;white-space:nowrap; } /* El boton de cotizar, al final del menu como en la maqueta. */ ul.main-header-menu > li.menu-item-39{order:99;margin-left:8px} .menu-item-39 > a{padding-left:18px!important;padding-right:18px!important} /* El hero pegado a la cabecera, sin el hueco blanco de Astra. Solo en las paginas que tienen hero: el blog y las legales lo conservan. */ #primary:has(.nf-hero,.nf-about-hero,.nf-svc-hub-hero,.nf-svc-hero, .nf-quote-hero,.nf-track-hero,.nf-contact-hero){margin-top:0!important} @media (max-width:921px){ .ast-builder-grid-row.ast-builder-grid-row-has-sides{grid-template-columns:1fr auto!important} .custom-logo{max-width:150px!important} ul.main-header-menu{flex-wrap:wrap!important;justify-content:flex-start!important} ul.main-header-menu > li.menu-item-39{order:0;margin-left:0} } /* --- Foto ancha bajo la cabecera de las paginas interiores --- Es la imagen grande que la maqueta pone debajo del hero. Se anadio como
en el contenido, sin tocar ni un texto. --- */ .nf-foto-ancha{margin:0 0 8px;padding:0;overflow:hidden;background:var(--nf-mist)} .nf-foto-ancha img{display:block;width:100%;max-width:none;height:clamp(240px,30vw,420px); object-fit:cover;margin:0} @media (max-width:781px){.nf-foto-ancha img{height:200px}} /* --- Secuencia de fotos del hero de la portada --- Tres imagenes que se cruzan cada 7 segundos, con parallax al hacer scroll. Es lo mismo que hace la maqueta de Lovable en src/routes/index.tsx. El escenario lo monta diseno.js. Sin JavaScript, o con prefers-reduced-motion, se queda la foto de fondo del CSS y ya. --- */ .nf-hero{overflow:hidden} html.nf-secuencia .nf-hero{background-image:none!important;background-color:var(--nf-navy)!important} /* El escenario NO recorta: el recorte lo hace .nf-hero. Si recortara aqui, al desplazarse por el parallax se llevaria el recorte consigo y dejaria una franja sin foto abajo, justo del tamano del desplazamiento. */ .nf-hero-stage{position:absolute;inset:0;overflow:visible;z-index:0;will-change:transform} .nf-hero-frame{position:absolute;left:0;right:0;top:-90px;bottom:-90px; background-size:cover;background-position:center 40%;background-repeat:no-repeat; opacity:0;transition:opacity 1.6s ease} .nf-hero-frame.nf-activo{opacity:1} .nf-hero-velo{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg,rgba(9,30,56,.95) 0%,rgba(11,37,69,.82) 34%, rgba(11,37,69,.42) 66%,rgba(11,37,69,.12) 100%)} .nf-hero > .nf-hero-inner{position:relative;z-index:2} @media (prefers-reduced-motion:reduce){ .nf-hero-frame{transition:none} .nf-hero-stage{transform:none!important} } /* --- Franja "Carga y aduanas", como en la maqueta --- */ .nf-aduanas-inner{max-width:1240px;margin:0 auto;padding:0 40px;display:grid; grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center} .nf-aduanas .nf-h2{margin-top:12px} .nf-aduanas-frase{border-left:4px solid var(--nf-amber);padding-left:28px; font-family:var(--nf-head);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.85rem); line-height:1.3;color:var(--nf-navy);margin:0} @media (max-width:781px){ .nf-aduanas-inner{grid-template-columns:1fr;gap:24px;padding:0 22px} .nf-aduanas-frase{padding-left:18px} } /* --- Foto dentro de las tarjetas FCL y LCL de la pagina de maritimo --- */ .nf-modal-card{overflow:hidden;padding-top:0!important} .nf-card-img{display:block;max-width:none;width:calc(100% + 56px);height:180px; object-fit:cover;margin:0 -28px 22px;border-radius:12px 12px 0 0;background:var(--nf-mist)} /* --- Textura de fondo en rutas y en la llamada final, como en la maqueta --- */ .nf-routes-bg{position:relative;isolation:isolate} .nf-routes-bg::before{content:"";position:absolute;inset:0;z-index:-1; background-image:linear-gradient(180deg,rgba(11,37,69,.93),rgba(11,37,69,.97)), url("/wp-content/uploads/2026/09/navifreight-port-aerial.jpg"); background-size:cover;background-position:center;filter:grayscale(1)} .nf-final-cta{position:relative;isolation:isolate} .nf-final-cta::before{content:"";position:absolute;inset:0;z-index:-1; background-image:linear-gradient(180deg,rgba(9,30,56,.88),rgba(9,30,56,.94)), url("/wp-content/uploads/2026/09/navifreight-night.jpg"); background-size:cover;background-position:center} /* --- Correcciones de las cuatro landings (LCL y las tres de China) --- 1. Astra limita a 1200 px los hijos directos de .entry-content, y eso impedia que el hero llegara al borde. 2. El parrafo de entrada iba en gris oscuro y quedaba ilegible sobre la foto: dentro del hero va en blanco. --- */ .nf-hero,.nf-stats,.nf-about-hero,.nf-svc-hub-hero,.nf-svc-hero, .nf-quote-hero,.nf-track-hero,.nf-contact-hero{max-width:none!important} .nf-svc-hero .nf-entradilla,.nf-about-hero .nf-entradilla, .nf-svc-hero p,.nf-about-hero p,.nf-svc-hub-hero p, .nf-quote-hero p,.nf-track-hero p,.nf-contact-hero p{color:rgba(255,255,255,.9)} .nf-svc-hero h1,.nf-svc-hero h2,.nf-about-hero h1,.nf-svc-hub-hero h1, .nf-quote-hero h1,.nf-track-hero h1,.nf-contact-hero h1{color:#fff} .nf-svc-hero .nf-entradilla{font-size:1.12rem;line-height:1.6;max-width:720px} .nf-svc-hero strong,.nf-about-hero strong{color:#fff} .nf-svc-hero a,.nf-about-hero a{color:var(--nf-amber)} /* ========================================================================== INICIO (id 10) — ajustes visuales autorizados por Luis el 7/09 -------------------------------------------------------------------------- TODO acotado a body.page-id-10. No afecta a ninguna otra pagina. Solo presentacion: no toca textos, encabezados, enlaces, WhatsApp, schema, imagenes, alt, formularios ni contenido SEO. ========================================================================== */ /* 1. Contenido interior de 1116 a 1200 px. La causa de los 1116 era el padding derecho de 84 px que Astra reserva para una barra lateral que esta pagina no usa. */ /* Astra fija padding-right:84px mediante el selector de id #main: es la canaleta reservada a una barra lateral que esta pagina no usa. Un selector solo de clases no puede ganarle en especificidad, por eso se incluye el mismo id. Se gana por especificidad, no con !important. */ body.page-id-10 #main.site-main{padding-right:0} /* 2. H2 de seccion de 30 a 44 px, como en la maqueta. Baja solo en pantallas pequenias gracias a clamp. */ /* Ajuste 1 del 7/09, autorizado por Luis: el minimo pasa de 2rem a 32px. En movil Astra reduce el tamano base del documento, de modo que 2rem se quedaba en 29,18 px. Con el minimo en pixeles la escala reproduce la de Lovable en las siete resoluciones: 44 / 44 / 35,84 / 32 / 32 / 32 / 32. */ body.page-id-10 .nf-h2{font-size:clamp(32px,3.5vw,44px);line-height:1.12} /* Ajuste 2 del 7/09, autorizado por Luis: botones del hero a ancho completo en movil, como en la maqueta. Solo geometria: no toca destinos ni textos. */ @media (max-width:544px){ body.page-id-10 .nf-hero .nf-hero-ctas{flex-direction:column;align-items:stretch} body.page-id-10 .nf-hero .nf-hero-ctas .nf-btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center} } /* 3. Franjas de fondo a todo el ancho; su contenido se centra a 1200 px. El ancho exacto lo calcula diseno.js midiendo la posicion real. */ body.page-id-10 .nf-services-bg, body.page-id-10 .nf-routes-bg, body.page-id-10 .nf-trust, body.page-id-10 .nf-final-cta{max-width:none} body.page-id-10 .nf-services-bg > .nf-section, body.page-id-10 .nf-routes-bg > .nf-section, body.page-id-10 .nf-trust-inner, body.page-id-10 .nf-final-cta > *{ max-width:1200px;margin-left:auto;margin-right:auto; padding-left:clamp(1.25rem,4vw,2rem); padding-right:clamp(1.25rem,4vw,2rem); box-sizing:border-box; } /* ========================================================================== BARRA FIJA INFERIOR EN MOVIL — reproduce .mobile-cta de la maqueta de Lovable. Autorizado por Luis el 8/09. ALCANCE GLOBAL desde el 8/09: se aplica a TODAS las paginas, como en la maqueta. Se usa el prefijo «html body» solo para ganar especificidad a las reglas de los plugins de contacto y de cookies sin recurrir a !important. Las demas reglas de Inicio siguen acotadas a page-id-10. Medidas tomadas del render real de la maqueta, no estimadas: alto 72 · relleno 10.4px 16px · separacion 9.6px · z-index 45 · fondo blanco al 96% · borde superior de 1px · sombra 0 -6px 20px al 12% · boton flexible de 50 de alto y radio 8 · boton de WhatsApp de 54x50. Punto de corte: por debajo de 768 px, igual que la maqueta. ========================================================================== */ .nf-barra-movil{display:none} @media (max-width:767.98px){ html body .nf-barra-movil{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45; box-sizing:border-box;padding:10.4px 16px;gap:9.6px; background:rgba(255,255,255,.96); border-top:1px solid var(--nf-line,#E3E9F0); box-shadow:0 -6px 20px rgba(8,41,74,.12); /* Respeta la franja inferior de los moviles con gesto de inicio. */ padding-bottom:calc(10.4px + env(safe-area-inset-bottom,0px)); } html body .nf-barra-movil .nf-barra-cotiza{ flex:1 1 0%;display:flex;align-items:center;justify-content:center; height:50px;padding:12px 22.4px;box-sizing:border-box;border-radius:8px; background:var(--nf-amber,#F2A900);color:var(--nf-navy,#0B2545); font-family:var(--nf-body,inherit);font-size:15px;font-weight:600; line-height:1;text-decoration:none;white-space:nowrap; } html body .nf-barra-movil .nf-barra-wa{ flex:0 0 auto;display:grid;place-items:center;width:54px;height:50px; border-radius:8px;background:var(--nf-teal,#14596E);color:#fff; text-decoration:none; } html body .nf-barra-movil .nf-barra-wa svg{width:24px;height:24px;fill:currentColor} /* La maqueta reserva 80 px al pie para que la barra no tape contenido. Aqui se suman al relleno inferior propio del pie (80 px en movil), asi el fondo navy se prolonga y no aparece una franja blanca bajo el pie. */ html body #colophon.site-footer{padding-bottom:160px} /* En la maqueta la barra SUSTITUYE al globo flotante por debajo de 768 px. El enlace sigue en el documento y su destino no cambia: la misma accion y el mismo vinculo pasan a la barra. Por encima de 768 px el globo vuelve a mostrarse tal cual estaba. */ html body .nf-floating-wa{display:none} /* Astra saca su boton de «volver arriba» al hacer scroll, con z-index 99, y caia justo encima del boton de WhatsApp de la barra. La maqueta no tiene ese control, asi que no hay referencia visual: se sube por encima de la barra en lugar de ocultarlo, para no quitar una funcion existente. Su posicion original era bottom:29px; aqui pasa a la altura de la barra (72) mas 14 de separacion. */ html body #ast-scroll-top{bottom:calc(86px + env(safe-area-inset-bottom,0px))} /* El boton permanente de preferencias de cookies (50x50, abajo a la izquierda, z-index 99999) tambien caia sobre la barra. Se sube por encima conservando su separacion original de 15 px. No se oculta: es un control de consentimiento y debe seguir siendo accesible. El aviso de cookies en si NO se toca: tiene z-index superior, aparece por encima de la barra y es temporal. */ html body button.cookieadmin_re_consent{bottom:calc(87px + env(safe-area-inset-bottom,0px))} } /* ========================================================================== NOSOTROS (id 12) — cinco ajustes visuales autorizados por Luis el 8/09. TODO acotado a body.page-id-12. Solo CSS: no toca contenido, encabezados, enlaces, SEO, schema, imagenes, alt, formularios ni funcionamiento. ========================================================================== */ /* 2. Contenido interior de 1.116 a 1.200 px y centrado. Astra reserva 84 px a la derecha con el selector de id #main (canaleta de una barra lateral que esta pagina no usa); hay que incluir el mismo id para ganarle por especificidad, sin !important. */ body.page-id-12 #main.site-main{padding-right:0} body.page-id-12 .nf-about > .nf-section, body.page-id-12 .nf-values-bg > .nf-section{max-width:1200px} /* 1. H2 de seccion con la misma escala que la maqueta: 44 / 35,84 / 32. */ body.page-id-12 .nf-h2{font-size:clamp(32px,3.5vw,44px);line-height:1.12} /* 3. Franjas de fondo a todo el ancho. Se pintan con una sombra proyectada en lugar de ensanchar la caja: la sombra NO ocupa espacio, asi que no puede provocar desbordamiento horizontal, y el recorte la limita a la altura exacta de la franja. El interior sigue centrado a 1.200 px. */ body.page-id-12 .nf-values-bg{ box-shadow:0 0 0 100vmax #F7F9FC; clip-path:inset(0 -100vmax); } /* 5. Tarjetas de «Pilares»: 1 columna en movil (por defecto). */ body.page-id-12 .nf-philosophy-grid{grid-template-columns:1fr} @media (min-width:768px){ /* 4. Relleno vertical de 56 a 72 px en tableta y escritorio. En movil se conserva en 56, tal como pidio Luis. */ body.page-id-12 .nf-about > .nf-section, body.page-id-12 .nf-values-bg > .nf-section{padding-top:72px;padding-bottom:72px} /* 5. Dos columnas en tableta. */ body.page-id-12 .nf-philosophy-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1024px){ /* 5. Cuatro columnas en escritorio, como en la maqueta. */ body.page-id-12 .nf-philosophy-grid{grid-template-columns:repeat(4,1fr)} } /* ========================================================================== SERVICIOS (id 14) — diez ajustes visuales autorizados por Luis el 8/09. TODO acotado a body.page-id-14. Solo CSS: no toca textos, H1, H2, etiquetas «Servicio propio», enlaces, imagenes, alt, metadatos, schema ni el formulario. El selector interactivo sigue congelado. ========================================================================== */ /* 1. Contenido interior a 1.200 px y centrado (canaleta #main de Astra). */ body.page-id-14 #main.site-main{padding-right:0} /* 9. Cabecera clara, como en la maqueta. La fotografia NO se borra del servidor ni de la biblioteca: solo se deja de mostrar en esta pagina, y basta con quitar estas reglas para recuperarla. Hacen falta !important por dos motivos concretos, no por comodidad: la imagen llega por estilo en linea y el relleno del hero ya venia declarado !important en la propia hoja del plugin. El hueco de 48 px sobre el titulo y los 40 px inferiores son los de la maqueta; la altura final la marca el texto real de WordPress. */ body.page-id-14 .nf-svc-hub-hero{ background-image:none !important; background-color:var(--nf-mist,#EAF0F6) !important; min-height:0 !important; padding:48px 0 40px !important; } /* 2 y 9. H1: escala de la maqueta y color navy sobre el fondo claro. */ body.page-id-14 .nf-svc-hub-hero h1{ font-size:clamp(40px,4.2vw,60px);line-height:1.1;color:var(--nf-navy,#0B2545); } body.page-id-14 .nf-svc-hub-hero p{color:var(--nf-ink-2,#5B6B7C)} body.page-id-14 .nf-svc-hub-hero .nf-eyebrow{color:var(--nf-teal,#14596E)} /* 3. H2 de la seccion del selector. */ body.page-id-14 .nf-svc-cta h2{font-size:clamp(32px,3.5vw,44px);line-height:1.12} /* 5, 6, 7 y 8. Tarjetas: separacion, titulo, radio, sombra y proporcion. La imagen ya declara 1024/576; solo estorbaba el alto fijo de 172 px. */ body.page-id-14 .nf-services-grid{gap:16px} body.page-id-14 .nf-service-card{border-radius:8px;box-shadow:none} body.page-id-14 .nf-service-card h2{font-size:20px} body.page-id-14 .nf-service-img{height:auto;aspect-ratio:16/9;object-fit:cover} /* 10. En movil la tarjeta ocupa los 350 px del contenedor, como en la maqueta, quitando el margen interior de 24 px de la seccion. */ @media (max-width:767.98px){ body.page-id-14 .nf-svc-hub > .nf-section{padding-left:0;padding-right:0} } /* 4. Relleno vertical de 56 a 72 px en tableta y escritorio; movil sigue en 56. */ @media (min-width:768px){ body.page-id-14 .nf-svc-hub > .nf-section, body.page-id-14 .nf-svc-cta{padding-top:72px;padding-bottom:72px} } /* Cierre visual de Servicios, autorizado por Luis el 8/09. Solo a partir de 1280 px, que es donde el contenido llega a sus 1.200 px: sin el margen interior de 24 px la tarjeta mide 389, igual que la maqueta. Por debajo de 1280 no cambia nada: 1024 sigue en 301, 768 en 332 y el movil conserva sus 350 / 390 / 320 ya verificados. */ @media (min-width:1280px){ body.page-id-14 .nf-svc-hub > .nf-section{padding-left:0;padding-right:0} } /* ============================================================ COTIZA TU EMBARQUE — pagina ID 28 Autorizado por Luis el 8/09: ocho ajustes exclusivamente visuales. Todo va acotado a body.page-id-28 y es reversible borrando este bloque. No se toca el HTML del formulario, ni sus 16 identificadores, ni el PHP, ni el JavaScript, ni el script de atribucion. ============================================================ */ /* 1. Contenedor interior a 1.200 px. Astra reserva 84 px a la derecha mediante el selector de id #main, para una barra lateral que esta pagina no usa. Se incluye el mismo id para ganar por especificidad, no con !important. */ body.page-id-28 #main.site-main{padding-right:0} /* 8. Cabecera clara al estilo de Lovable. La fotografia NO se borra del servidor ni de la biblioteca: la variable --nf-pag-img sigue declarada mas arriba y basta con retirar estas lineas para que vuelva a verse. Hacen falta !important por dos motivos concretos: la imagen llega por estilo en linea y el relleno del hero ya venia declarado !important en la propia hoja del plugin. */ body.page-id-28 .nf-quote-hero{ background-image:none !important; background-color:var(--nf-mist,#EAF0F6) !important; min-height:0 !important; padding:48px 0 40px !important; } /* 2. H1 en navy, con la misma escala de las demas paginas cerradas. */ body.page-id-28 .nf-quote-hero h1{ font-size:clamp(32px,3.5vw,44px);line-height:1.12;color:var(--nf-navy,#0B2545); } /* Sobre fondo claro el texto blanco del hero dejaria de leerse. Se recolorea; no se elimina ni se oculta ninguna palabra, encabezado ni cifra: las cuatro cifras comerciales siguen visibles y en su sitio. */ body.page-id-28 .nf-quote-hero .nf-quote-hero-subtitle-heading{color:var(--nf-navy,#0B2545)} body.page-id-28 .nf-quote-hero .nf-quote-hero-lead{color:var(--nf-ink-2,#5B6B7C)} body.page-id-28 .nf-quote-hero .nf-hero-stat-num{color:var(--nf-navy,#0B2545)} body.page-id-28 .nf-quote-hero .nf-hero-stat-label{color:var(--nf-ink-2,#5B6B7C)} @media (max-width:767.98px){ /* La cabecera media 833 px en movil porque las cuatro cifras se apilaban en una sola columna. Pasan a dos columnas y se ajustan los margenes: el contenido es el mismo, ocupa menos alto. */ body.page-id-28 .nf-quote-hero{padding:36px 0 32px !important} body.page-id-28 .nf-quote-hero .nf-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:10px 0} body.page-id-28 .nf-quote-hero .nf-quote-hero-lead{margin-top:10px;margin-bottom:10px} body.page-id-28 .nf-quote-hero .nf-quote-hero-subtitle-heading{margin-top:8px;margin-bottom:8px} body.page-id-28 .nf-quote-hero .nf-hero-stat-num{font-size:22px} } /* 3 y 7. Ancho del formulario igual al de la maqueta: 848 px en escritorio, 707 en tableta y todo el ancho disponible en movil. Queda centrado mientras no exista la columna lateral, que continua congelada. */ body.page-id-28 .nf-quote-wrap{max-width:848px;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto} @media (min-width:768px) and (max-width:1023.98px){ body.page-id-28 .nf-quote-wrap{max-width:707px} } /* 4. Radio exterior y sombra ligera como en Lovable. */ body.page-id-28 #nf-quote-form{ border-radius:8px; border:1px solid var(--nf-line,#E3E9F0); box-shadow:0 18px 45px rgba(0,42,71,.07); } /* 6. Radio de los campos. Solo apariencia: no se renombra, mueve, duplica ni elimina ningun campo ni identificador. */ body.page-id-28 #nf-quote-form input[type=text], body.page-id-28 #nf-quote-form input[type=email], body.page-id-28 #nf-quote-form input[type=tel], body.page-id-28 #nf-quote-form input[type=number], body.page-id-28 #nf-quote-form select, body.page-id-28 #nf-quote-form textarea{border-radius:8px} /* 5. Altura del boton de envio. min-height y no height, para que el boton siga creciendo si el texto se parte en dos lineas. */ body.page-id-28 #nf-submit-btn{min-height:50px} /* CIERRE VISUAL DE COTIZA TU EMBARQUE — autorizado por Luis el 8/09. Dos correcciones, ambas solo de presentacion y acotadas a page-id-28. */ /* 1. Los siete saltos de linea que siguen a los campos ocultos de atribucion dejaban 140 px de hueco en blanco antes del primer campo visible. El selector adyacente alcanza EXCLUSIVAMENTE a esos siete
: los seis que siguen a un campo oculto y el que sigue al campo trampa antispam. Ningun otro
resulta afectado, y no se usa una regla general sobre los
hijos del formulario. Los siete campos ocultos siguen presentes, operativos y con sus identificadores, nombres y valores intactos. Un
no es contenido ni SEO: no se oculta informacion, se retira un salto de linea. */ body.page-id-28 #nf-quote-form input[type=hidden] + br, body.page-id-28 #nf-quote-form input.nf-hidden + br{display:none} /* 2. El boton ambar del hero se dibujaba subrayado. Se retira el subrayado en reposo, al pasar el raton, al recibir el foco y al pulsarlo, conservando color, vinculo y funcionamiento. */ body.page-id-28 .nf-quote-hero .nf-cta-primary, body.page-id-28 .nf-quote-hero .nf-cta-primary:hover, body.page-id-28 .nf-quote-hero .nf-cta-primary:focus, body.page-id-28 .nf-quote-hero .nf-cta-primary:focus-visible, body.page-id-28 .nf-quote-hero .nf-cta-primary:active{text-decoration:none} /* La senal de accesibilidad no se pierde: se declara sobre :focus, de modo que el contorno aparece SIEMPRE que el boton recibe el foco, tambien con teclado y en navegadores sin :focus-visible. La segunda regla lo retira unicamente cuando el foco NO viene del teclado, para que el raton no lo dibuje. Si el navegador no entiende :focus-visible, ignora esa segunda regla y el contorno se conserva: nunca se pierde por degradacion. */ body.page-id-28 .nf-quote-hero .nf-cta-primary:focus{ outline:3px solid var(--nf-navy,#0B2545); outline-offset:3px; } body.page-id-28 .nf-quote-hero .nf-cta-primary:focus:not(:focus-visible){ outline:none; } /* ============================================================ IMPORTAR DESDE CHINA A PERU — pagina ID 292 Autorizado por Luis el 8/09. Solo presentacion, acotado a body.page-id-292 y reversible borrando este bloque. No se toca contenido, encabezados, textos, tabla, datos de transito, imagenes, alt, enlaces, metadatos, canonical ni schema. ============================================================ */ /* 1 y 2. Fuera la canaleta de 84 px que Astra reserva para una barra lateral que esta pagina no usa. Se incluye el mismo id #main para ganar por especificidad, no con !important. El contenido queda en 1.200 px centrado, como en la maqueta. */ body.page-id-292 #main.site-main{padding-right:0} /* 5. Escala del H1 de la maqueta: clamp(40px,5vw,60px). 60 / 60 / 51,2 / 40 / 40 / 40 / 40 px en las siete resoluciones. */ body.page-id-292 .nf-svc-hero h1{font-size:clamp(40px,5vw,60px);line-height:1.1} /* 6. Escala del H2, la misma de las paginas ya cerradas: 44 / 35,84 / 32. */ body.page-id-292 .nf-h2, body.page-id-292 .nf-svc-cta h2{font-size:clamp(32px,3.5vw,44px);line-height:1.15} /* 7. Hero: 520 px de alto minimo y el reparto 128 / 64 de la maqueta. */ body.page-id-292 .nf-svc-hero{min-height:520px;padding-top:128px;padding-bottom:64px} @media (max-width:781px){ /* Aqui hace falta !important por un motivo concreto: la hoja del plugin declara para todos los heroes min-height y padding con !important en este mismo punto de corte. Sin el, la regla no gana. */ body.page-id-292 .nf-svc-hero{min-height:520px !important;padding:112px 0 56px !important} } /* 8. Relleno vertical de seccion igual a la maqueta: 36 px, y 28 px por debajo de 768, que es donde Lovable tambien lo reduce. */ body.page-id-292 .nf-svc .nf-section, body.page-id-292 .nf-svc > .nf-svc-cta{padding-top:36px;padding-bottom:36px} @media (max-width:767.98px){ body.page-id-292 .nf-svc .nf-section, body.page-id-292 .nf-svc > .nf-svc-cta{padding-top:28px;padding-bottom:28px} } /* Los doce destinos del indice son los propios H2. Con cabecera fija hay que reservarles hueco para que al saltar no queden debajo de ella. Es solo desplazamiento: no cambia ni una letra del encabezado. */ body.page-id-292 .nf-svc h2[id]{scroll-margin-top:120px} /* 3 y 4. LA COMPOSICION DE DOS COLUMNAS. La seccion que abre la guia contiene DOS cosas: el parrafo de entrada, que es contenido indexado, y el indice. display:contents disuelve la caja de esa seccion, no su contenido: el parrafo se queda en la columna de lectura y el indice puede irse a la columna lateral y mantenerse fijo durante todo el recorrido. No se oculta ni se mueve texto alguno. */ body.page-id-292 .nf-svc > .nf-section:has(.nf-indice){display:contents} body.page-id-292 .nf-svc > .nf-section:has(.nf-indice) > p:first-child{margin-top:36px} @media (min-width:1024px){ /* Mismo reparto que la maqueta: 232 + 48 + 920 = 1.200 px. */ body.page-id-292 .nf-svc{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:48px} body.page-id-292 .nf-svc > .nf-svc-hero, body.page-id-292 .nf-svc > .nf-foto-ancha{grid-column:1 / -1} body.page-id-292 .nf-svc > .nf-includes, body.page-id-292 .nf-svc > .nf-svc-cta, body.page-id-292 .nf-svc > .nf-section:not(:has(.nf-indice)), body.page-id-292 .nf-svc > .nf-section:has(.nf-indice) > p{ grid-column:2;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0; } body.page-id-292 .nf-svc > .nf-includes > .nf-section{ max-width:none;margin:0;padding-left:24px;padding-right:24px; } /* El indice ocupa la columna izquierda desde la fila 3 hasta el final. El span generoso crea filas vacias de altura cero, sin efecto visual, y es lo que le da recorrido al sticky en toda la pagina. */ body.page-id-292 .nf-svc .nf-indice{ grid-column:1;grid-row:3 / span 40;align-self:start; position:sticky;top:110px; background:none;border:0;border-radius:0;padding:0;margin:0; } body.page-id-292 .nf-svc .nf-indice-titulo{ font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--nf-ink-2,#5B6B7C);margin:0 0 12px; } body.page-id-292 .nf-svc .nf-indice ul{display:block;gap:0;margin:0;padding:0;list-style:none} body.page-id-292 .nf-svc .nf-indice li{margin:0} body.page-id-292 .nf-svc .nf-indice a{ display:block;padding:7.2px 13.6px;border-left:2px solid var(--nf-line,#E3E9F0); font-size:14.4px;font-weight:600;line-height:1.65; color:var(--nf-ink-2,#5B6B7C);text-decoration:none; } body.page-id-292 .nf-svc .nf-indice a:hover{color:var(--nf-navy,#0B2545)} body.page-id-292 .nf-svc .nf-indice a.is-active{ border-left-color:var(--nf-amber,#F2A900);color:var(--nf-navy,#0B2545); } } /* Por debajo de 1.024 px la maqueta NO mantiene la barra lateral: la convierte en una tira horizontal de pastillas, fija bajo la cabecera y desplazable de lado. Se reproduce ese mismo comportamiento. El rotulo «En esta guia» se conserva y viaja dentro de la tira: no se oculta ningun texto. */ @media (max-width:1023.98px){ body.page-id-292 .nf-svc .nf-indice{ position:sticky;top:97px;z-index:40; display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:9.6px 20px; background:#fff;border:0;border-bottom:1px solid var(--nf-line,#E3E9F0);border-radius:0; overflow-x:auto;scrollbar-width:none; } body.page-id-292 .nf-svc .nf-indice::-webkit-scrollbar{display:none} body.page-id-292 .nf-svc .nf-indice-titulo{ flex:0 0 auto;margin:0;font-size:12px;font-weight:700;letter-spacing:1.2px; text-transform:uppercase;color:var(--nf-ink-2,#5B6B7C);white-space:nowrap; } body.page-id-292 .nf-svc .nf-indice ul{display:flex;gap:8px;margin:0;padding:0;list-style:none} body.page-id-292 .nf-svc .nf-indice li{flex:0 0 auto;margin:0} body.page-id-292 .nf-svc .nf-indice a{ display:block;white-space:nowrap;border:1px solid var(--nf-line,#E3E9F0);border-radius:999px; padding:7.2px 14.4px;font-size:13.12px;font-weight:600; color:var(--nf-navy,#0B2545);text-decoration:none; } body.page-id-292 .nf-svc .nf-indice a.is-active{ border-color:var(--nf-amber,#F2A900);background:rgba(242,169,0,.16); } /* Cabecera fija (97) mas tira de pastillas (47) mas holgura. */ body.page-id-292 .nf-svc h2[id]{scroll-margin-top:170px} } /* ------------------------------------------------------------ CIERRE DEFINITIVO DE IMPORTAR DESDE CHINA A PERU — 8/09. Tres correcciones autorizadas por Luis. Solo presentacion. ------------------------------------------------------------ */ /* 1. El titular se limita a 768 px, el mismo ancho que la maqueta usa para el bloque del hero (max-w-3xl). Es un maximo, asi que por debajo de esa anchura no hace absolutamente nada: tableta y movil quedan igual. No cambia ni una palabra del H1: solo parte la linea donde la parte Lovable. Se limita el propio H1 y no todo el bloque, para no ensanchar la entradilla, que ya tiene su propio tope de 680 px. */ body.page-id-292 .nf-svc-hero h1{max-width:768px} /* 2. Entre 1.024 y 1.280 px la maqueta deja 32 px de margen a cada lado, no los 20 de Astra: 1024 - 64 = 960 de contenedor, y 960 - 232 de indice - 48 de separacion = 680 de columna de lectura. El tope de 1.224 px mantiene el contenido en 1.200 justo antes del corte, igual que la maqueta. Fuera de este tramo no cambia nada. */ @media (min-width:1024px) and (max-width:1279.98px){ body.page-id-292 #main.site-main{ padding-left:12px;padding-right:12px; max-width:1224px;margin-left:auto;margin-right:auto; } } /* 3. Los dos botones del hero. La maqueta los apila por debajo de 640 px y los alinea en fila a partir de ahi, con 12 px de separacion y 32 px por encima. Los destinos NO se inventaron: se copiaron literalmente de los que ya existian en la pagina, de modo que los destinos unicos no varian. Ningun telefono, ningun enlace tel:. */ body.page-id-292 .nf-svc-hero-ctas{ display:flex;flex-direction:column;gap:12px;margin-top:32px; } body.page-id-292 .nf-svc-hero-ctas .nf-btn{justify-content:center;text-align:center} @media (min-width:640px){ body.page-id-292 .nf-svc-hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center} body.page-id-292 .nf-svc-hero-ctas .nf-btn{flex:0 0 auto} } /* La hoja del plugin pinta en ambar TODOS los enlaces dentro de un hero (.nf-svc-hero a), con mas peso que .nf-btn-primary. Eso dejaba el rotulo del boton ambar en ambar sobre ambar, es decir, invisible. Se devuelve a cada boton su color de texto, acotado al hero de esta pagina y ganando por especificidad, sin !important. El boton de WhatsApp ya trae de serie el fondo translucido y el borde claro de la maqueta: solo le faltaba el texto en blanco. */ body.page-id-292 .nf-svc-hero-ctas .nf-btn-primary{color:#1a1200} body.page-id-292 .nf-svc-hero-ctas .nf-btn-wa{color:#fff} /* ============================================================ SHENZHEN Y EL SUR DE CHINA — pagina ID 353 Autorizado por Luis el 9/09: seis ajustes visuales mas la correccion de la tabla en movil. Solo presentacion, acotado a body.page-id-353 y reversible borrando este bloque. No se toca contenido, encabezados, textos, datos, enlaces, destinos, anchor text, metadatos, canonical, schema ni alt. Cero !important. ============================================================ */ /* 1. Fuera la canaleta de 84 px que Astra reserva para una barra lateral que esta pagina no usa. Se incluye el mismo id #main para ganar por especificidad. El contenido queda en 1.200 px centrado. */ body.page-id-353 #main.site-main{padding-right:0} /* 5. Medida de lectura de la maqueta: 920 px. Va CENTRADA porque el indice lateral sigue congelado; alinearla a la izquierda dejaria 280 px de hueco vacio a la derecha. El dia que se autorice el indice, este mismo bloque se desplaza a su sitio sin tocar nada mas. Se excluye el hero, que va a sangre completa. */ body.page-id-353 .entry-content > *:not(.nf-svc-hero){ max-width:920px;margin-left:auto;margin-right:auto; } /* 2. H1 con la escala de la maqueta: 60 / 60 / 51,2 / 40 / 40 / 40 / 40. En pixeles y no en rem: en movil Astra reduce el tamano base del documento y una escala relativa se quedaria corta. */ body.page-id-353 .nf-svc-hero h1{font-size:clamp(40px,5vw,60px);line-height:1.1} /* 3 y 6. H2 con la escala comun a las paginas ya cerradas, y el ritmo entre secciones de la maqueta: sus .lp-section separan 36 px arriba y 36 abajo, 72 en total, y 28+28 en movil. Aqui no hay contenedor de seccion, asi que ese espacio se aplica sobre el H2 que abre cada una. Los margenes contiguos se funden, de modo que el resultado es exactamente 72 y 56 px. */ body.page-id-353 .entry-content h2{ font-size:clamp(32px,3.5vw,44px);line-height:1.15;margin-top:72px; } /* 4. Hero: los 520 px de alto minimo de la maqueta. Solo min-height; el relleno se deja como esta porque el hero centra su contenido y forzar el reparto de Lovable lo alejaria, como quedo comprobado en la pagina 292. */ body.page-id-353 .nf-svc-hero{min-height:520px} @media (max-width:767.98px){ body.page-id-353 .entry-content h2{margin-top:56px} /* CORRECCION DE LA TABLA. La primera tabla no baja de 377 px de ancho por su propio contenido, y sin contenedor propio se salia de la pantalla: a 390 px sobraban 27 y a 360 px, 57. Como html y body llevan overflow-x:clip, no habia desplazamiento visible pero la columna «Salidas» quedaba inalcanzable. display:block convierte la tabla en su propia caja desplazable, sin wrapper nuevo y sin tocar el HTML: el desplazamiento ocurre DENTRO de la tabla y nunca en la pagina. La estructura de la tabla se conserva mediante la caja anonima que genera el propio CSS. */ body.page-id-353 .entry-content .nf-tabla{ display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch; } } /* ============================================================ SHENZHEN Y EL SUR DE CHINA (id 353) - SEGUNDA FASE VISUAL Autorizada por Luis el 9 de septiembre de 2026. Pasos 1 y 2: banda del hero con los dos CTA ya existentes, tarjetas FCL/LCL, tablas, FAQ con separadores e indice de navegacion. Todo acotado a body.page-id-353. No se oculta ningun contenido en ningun punto. ============================================================ */ body.page-id-353 .nf-svc-hero{ padding:96px 0 40px !important; background-image: linear-gradient(to bottom,rgba(9,30,56,0) 55%,rgba(9,30,56,.6) 84%,#0B2545 100%), linear-gradient(100deg,rgba(9,30,56,.95) 0%,rgba(11,37,69,.84) 36%,rgba(11,37,69,.48) 70%,rgba(11,37,69,.18) 100%), var(--nf-pag-img,var(--nf-hero-img)) !important; } body.page-id-353 .entry-content > .nf-svc-hero + p, body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario{ margin-inline:calc(50% - 50vw);width:auto;max-width:none; padding-inline:max(40px,calc(50vw - 580px)); background:var(--nf-navy,#0B2545);color:rgba(255,255,255,.9); } body.page-id-353 .entry-content > .nf-svc-hero + p{ margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:22px;font-size:15px;line-height:1.6; } body.page-id-353 .entry-content > .nf-svc-hero + p strong{color:#fff} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario{ margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:56px; display:flex;flex-wrap:wrap;align-items:center;gap:12px; color:rgba(255,255,255,.45);font-size:14px; } body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a{ display:inline-flex;align-items:center;justify-content:center; min-height:50px;padding:12px 22.4px;border-radius:8px; font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;border:1px solid transparent; } body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:first-of-type{background:var(--nf-amber,#F2A900);color:#1a1200} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:last-of-type{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)} @media (max-width:639.98px){ body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario{flex-direction:column;align-items:stretch} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a{width:100%} } body.page-id-353 .entry-content > ul:first-of-type{list-style:none;margin:28px 0 24px;padding:0;display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:768px){ body.page-id-353 .entry-content > ul:first-of-type{grid-template-columns:1fr 1fr} } body.page-id-353 .entry-content > ul:first-of-type > li{ margin:0;padding:22.4px;background:#fff;border:1px solid var(--nf-line,#E3E9F0);border-radius:8px; color:var(--nf-ink-2,#5B6B7C);font-size:17px;line-height:1.6; } body.page-id-353 .entry-content > ul:first-of-type > li strong{display:block;margin-bottom:10px;font-size:20px;font-weight:700;color:var(--nf-navy,#0B2545)} body.page-id-353 .entry-content .nf-tabla{ width:100%;background:#fff;border:1px solid var(--nf-line,#E3E9F0);border-radius:8px; border-collapse:separate;border-spacing:0;overflow:hidden; } body.page-id-353 .entry-content .nf-tabla th{ background:var(--nf-navy,#0B2545);color:#fff;font-size:12px;font-weight:600;letter-spacing:.96px; text-transform:uppercase;padding:12.8px 16px;text-align:left;border:0;border-bottom:1px solid var(--nf-line,#E3E9F0); } body.page-id-353 .entry-content .nf-tabla td{ padding:12.8px 16px;font-size:14.4px;line-height:1.55;color:var(--nf-ink-2,#5B6B7C); border:0;border-bottom:1px solid var(--nf-line,#E3E9F0); } body.page-id-353 .entry-content .nf-tabla tr:last-child td{border-bottom:0} @media (max-width:767.98px){ body.page-id-353 .entry-content .nf-tabla{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} } body.page-id-353 .entry-content > #faq ~ h3{ margin:0;padding:18px 0 0;font-size:16.8px;font-weight:700;line-height:1.4; color:var(--nf-navy,#0B2545);border-top:1px solid var(--nf-line,#E3E9F0); } body.page-id-353 .entry-content > #faq + h3{margin-top:28px} body.page-id-353 .entry-content > #faq ~ h3 + p{margin:8px 0 0;padding:0 0 18px;font-size:16px;line-height:1.65;color:var(--nf-ink-2,#5B6B7C)} body.page-id-353 .entry-content > #faq ~ h3:last-of-type + p{border-bottom:1px solid var(--nf-line,#E3E9F0)} @media (min-width:1024px){ body.page-id-353 .entry-content{display:grid;grid-template-columns:232px minmax(0,1fr);column-gap:48px;align-items:start} body.page-id-353 .entry-content > *:not(.nf-svc-hero){grid-column:2;max-width:920px;margin-left:0;margin-right:0} body.page-id-353 .entry-content > .nf-svc-hero{grid-column:1 / -1} body.page-id-353 .entry-content > .nf-svc-hero + p, body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario{grid-column:1 / -1;max-width:none} body.page-id-353 .entry-content > .nf-indice{ grid-column:1;grid-row:4 / span 60;align-self:start;position:sticky;top:110px; margin:0;padding:0;border:0;background:none;max-width:none; } body.page-id-353 .nf-indice a{ display:block;padding:7.2px 13.6px;border-left:2px solid var(--nf-line,#E3E9F0); font-size:14.4px;font-weight:600;line-height:1.45;color:var(--nf-ink-2,#5B6B7C);text-decoration:none; } body.page-id-353 .nf-indice a.is-active{border-left-color:var(--nf-amber,#F2A900);color:var(--nf-navy,#0B2545)} body.page-id-353 .entry-content h2[id]{scroll-margin-top:120px} } @media (max-width:1023.98px){ body.page-id-353 .entry-content > .nf-indice{ position:sticky;top:97px;z-index:40;margin:0 0 4px;margin-inline:calc(50% - 50vw); width:auto;max-width:none;padding:9.6px 20px;background:#fff; border:0;border-bottom:1px solid var(--nf-line,#E3E9F0);overflow-x:auto;scrollbar-width:none; } body.page-id-353 .nf-indice ul{display:flex;align-items:center;gap:8px} body.page-id-353 .nf-indice li{flex:0 0 auto} body.page-id-353 .nf-indice a{ display:block;white-space:nowrap;border:1px solid var(--nf-line,#E3E9F0);border-radius:999px; padding:7.2px 14.4px;font-size:13.12px;font-weight:600;color:var(--nf-navy,#0B2545);text-decoration:none; } body.page-id-353 .nf-indice a.is-active{border-color:var(--nf-amber,#F2A900);background:rgba(242,169,0,.16)} body.page-id-353 .entry-content h2[id]{scroll-margin-top:170px} } body.page-id-353 .nf-indice ul{list-style:none;margin:0;padding:0} body.page-id-353 .nf-indice li{margin:0;padding:0} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:hover, body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:focus, body.page-id-353 .nf-indice a:hover, body.page-id-353 .nf-indice a:focus{text-decoration:none} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:first-of-type:hover{background:#D99700;color:#1a1200} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:last-of-type:hover{background:rgba(255,255,255,.14);color:#fff} body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a:focus-visible, body.page-id-353 .nf-indice a:focus-visible{outline:3px solid var(--nf-amber,#F2A900);outline-offset:3px} /* ============================================================ SHENZHEN Y EL SUR DE CHINA (id 353) - CORRECCIONES 09/09/2026 Autorizacion: Luis, 09/09/2026 - correcciones 2, 3, 5 y 6 del informe shenzhen-353-auditoria-posterior-solo-lectura-09-09. Alcance: exclusivamente body.page-id-353. REVERSION: borrar integro este bloque rotulado. ============================================================ */ /* 2 - Hueco de 17 px entre la cabecera y la tira del indice. Finalidad: fijar la tira a la altura real de la cabecera (80 px) por debajo de 921,98 px. Especificidad (0,3,1) para igualar la regla ya publicada; sin !important, gana por especificidad y orden. Residuo conocido y aceptado: ~12,95 px exactamente a 922 px. */ @media (max-width:921.98px){ body.page-id-353 .entry-content > .nf-indice{ top:80px } } /* 3 - Contenedor entre 1024 y 1263,98 px. Finalidad: igualar la composicion de Lovable, contenido = min(ancho-64, 1200). Actua sobre .ast-container, que es el contenedor real. Sin !important. */ @media (min-width:1024px) and (max-width:1263.98px){ body.page-id-353 .ast-container{ max-width:1264px; padding-left:32px; padding-right:32px; } } /* 5 - Banda hero+CTA, solo movil. Finalidad: reducir relleno sin tocar contenido. !important unicamente en padding-bottom del hero, porque la regla ya publicada del propio plugin lo declara con !important y ninguna especificidad la vence. Las otras tres declaraciones van sin !important. Nada se oculta. */ @media (max-width:767.98px){ body.page-id-353 .entry-content > .nf-svc-hero{ padding-bottom:24px !important } body.page-id-353 .entry-content > .nf-svc-hero + p{ padding-bottom:16px } body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario{ padding-bottom:40px; font-size:12px; line-height:1; gap:10px; } body.page-id-353 .entry-content > .nf-svc-hero + p + p.nf-cta-primario a{ margin:0; line-height:1.2; } } /* 6 - Filas alternas en las dos tablas. Finalidad: igualar Lovable. Tono identico al ya publicado en la 292. Contraste 5,19:1 (AA). */ body.page-id-353 .entry-content tbody tr:nth-child(even){ background-color:#F7F9FC } /* ============================================================ PAGINAS DE SERVICIO (id 16, 18, 22, 24, 26) - CORRECCION 10/09/2026 Autorizacion: Luis, 10/09/2026 - retirar el fondo fotografico decorativo de la cabecera, que duplicaba la fotografia del contenido. En 18, 22, 24 y 26 era literalmente el mismo archivo. Alcance: exclusivamente esas cinco paginas. NO incluye la 292, que ya coincide con la maqueta y no se toca. Solo presentacion: no toca HTML, contenido, texto, enlaces, alt, schema, canonical ni SEO. La fotografia del contenido, con su alt, se conserva intacta y visible. El unico !important es el de background-image, demostrado necesario: la regla ya publicada declara el fondo con !important. Los colores de texto ganan sin !important y van sin el. Contraste medido sobre el fondo claro: H1 13,4:1 - entradilla 9,02:1 - antetitulo 6,82:1. Todos superan el umbral AA. REVERSION: borrar integro este bloque rotulado. ============================================================ */ body.page-id-16 .nf-svc-hero, body.page-id-18 .nf-svc-hero, body.page-id-22 .nf-svc-hero, body.page-id-24 .nf-svc-hero, body.page-id-26 .nf-svc-hero{ background-image:none !important; background-color:var(--nf-mist,#EAF0F6); } body.page-id-16 .nf-svc-hero h1, body.page-id-18 .nf-svc-hero h1, body.page-id-22 .nf-svc-hero h1, body.page-id-24 .nf-svc-hero h1, body.page-id-26 .nf-svc-hero h1{ color:var(--nf-navy,#0B2545) } body.page-id-16 .nf-svc-hero p, body.page-id-18 .nf-svc-hero p, body.page-id-22 .nf-svc-hero p, body.page-id-24 .nf-svc-hero p, body.page-id-26 .nf-svc-hero p{ color:var(--nf-ink,#334155) } body.page-id-16 .nf-svc-hero .nf-eyebrow, body.page-id-18 .nf-svc-hero .nf-eyebrow, body.page-id-22 .nf-svc-hero .nf-eyebrow, body.page-id-24 .nf-svc-hero .nf-eyebrow, body.page-id-26 .nf-svc-hero .nf-eyebrow{ color:var(--nf-teal,#14596E) } /* ============================================================ BOTON DE PREFERENCIAS - CORRECCION GLOBAL 10/09/2026 Alcance: las 28 URLs del sitio, solo por debajo de 601 px. Solo se cambia la POSICION VERTICAL del boton flotante de preferencias, para que deje de taparse con el CTA "Cotiza tu Embarque" de la barra fija movil (72 px de alto). El !important es OBLIGATORIO y esta demostrado: el propio plugin declara bottom con !important en @media (max-width:600px). Sin !important la regla no tiene ningun efecto. NO se oculta, NO se desactiva y NO se redimensiona el boton. Reversion: borrar este bloque integro. ============================================================ */ @media (max-width:600px){ html body button.cookieadmin_re_consent{ bottom: calc(87px + env(safe-area-inset-bottom,0px)) !important; } } /* ============================================================ IMPORTAR DESDE CHINA A PERU (id 292) - CORRECCION VISUAL 10/09/2026 Autorizada por Luis. SOLO CSS. Todo acotado a body.page-id-292. Cero !important. No se oculta ningun elemento. A) La fotografia editorial (china-air-cargo.jpg) no tenia separacion con el hero (margin-top:0) y ocupaba todo el ancho del contenedor por la regla grid-column:1/-1. Se le da separacion y se lleva a la columna de lectura, que es donde Lovable la situa. B) Hueco de 17 px: la tira del indice usa top:97px y la cabecera real de Astra mide 80 px por debajo de 922 px. C) Salto de 24 px entre 1264 y 1279 px: lo causa el tope max-width:1224px sobre #main.site-main publicado el 08/09. Se neutraliza ese tope y se acota por .ast-container, que es el contenedor real de la pagina. NO se toca HTML, contenido, SEO, enlaces, anclajes, schema, canonical, imagenes, alt, JavaScript ni plugins. Reversion: borrar este bloque integro. ============================================================ */ /* A - fotografia editorial */ body.page-id-292 .nf-foto-ancha{ margin-top:56px; border-radius:8px; } @media (min-width:1024px){ body.page-id-292 .nf-svc > .nf-foto-ancha{ grid-column:2 / -1; } } body.page-id-292 .nf-foto-ancha img{ height:clamp(220px,24vw,340px); } @media (max-width:781px){ body.page-id-292 .nf-foto-ancha{ margin-top:32px; } body.page-id-292 .nf-foto-ancha img{ height:220px; } } /* B - hueco de 17 px bajo la cabecera */ @media (max-width:921.98px){ body.page-id-292 .nf-svc .nf-indice{ top:80px; } } /* C - salto de 24 px entre 1264 y 1279 px */ @media (min-width:1024px) and (max-width:1279.98px){ body.page-id-292 #main.site-main{ padding-left:0; padding-right:0; max-width:none; } body.page-id-292 .ast-container{ max-width:1264px; padding-left:32px; padding-right:32px; } } /* ===== IMPORTAR DESDE CHINA A PERU (id 292) - BLOQUE A DOS COLUMNAS EN #aereo - 11/09/2026 ===== Autorizado expresamente por Luis el 11/09/2026. SOLO PRESENTACION. Reproduce el .lp-split de la maqueta: imagen editorial a la izquierda, texto a la derecha, columnas 0.95fr / 1.05fr, separacion 24 px, alineacion centrada, igual que Lovable. No modifica ningun texto, atributo, enlace, encabezado, anclaje, schema, canonical ni contenido. No oculta nada. No reordena el DOM: el orden visual coincide con el orden del documento. CERO !important: todas las reglas ganan por especificidad, demostrado por simulacion. Por debajo de 768 px no aplica nada y la seccion conserva su comportamiento actual, exactamente como hace la maqueta, que tambien apila en una sola columna. REVERSION: borrar integro este bloque, desde este comentario hasta la linea FIN DEL BLOQUE. */ @media (min-width:768px){ body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo){ display:grid; grid-template-columns:0.95fr 1.05fr; column-gap:24px; align-items:center; } body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo) > h2{ grid-column:1 / -1; } body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo) > figure.nf-foto-ancha{ grid-column:1; margin-top:8px; margin-bottom:8px; } body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo) > p:nth-of-type(1){ grid-column:2; margin-top:0; margin-bottom:0; } body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo) > p:nth-of-type(n+2){ grid-column:1 / -1; } body.page-id-292 section.nf-section.nf-prosa:has(> h2#aereo) > ul{ grid-column:1 / -1; } body.page-id-292 .nf-section .nf-foto-ancha img{ height:auto; aspect-ratio:4 / 3; } } /* ===== FIN DEL BLOQUE - IMPORTAR DESDE CHINA A PERU (id 292) 11/09/2026 ===== */ /* ===== PAGINAS DE SERVICIO (id 16, 18, 22, 24, 26) - ACERCAMIENTO VISUAL A LOVABLE - 11/09/2026 ===== Autorizado expresamente por Luis el 11/09/2026. SOLO PRESENTACION, y solo sobre estas cinco paginas. Reproduce las reglas reales del componente service-landing de la maqueta: .lp-h2 -> escala de titular clamp(2rem,3.5vw,2.75rem) con interlineado 1.15 .lp-content / .lp-section -> medida de lectura 920 px y ritmo vertical 36 px (28 px en movil) .svc-timeline li -> radio 8 px y barra ambar de 4 px a la izquierda .svc-timeline-num -> numero pequeno de 12.8 px con espaciado 0.1em .svc-figure -> borde, radio 8 px y saturacion 0.75 .faq-item summary -> alto minimo 66 px y cuerpo de 16.8 px La escala del H2 y el ritmo de 36/28 px son los MISMOS ya publicados y aprobados en las paginas 10, 12 y 292. No modifica ningun texto, encabezado, enlace, anclaje, imagen, atributo, schema, canonical ni contenido. No oculta nada. No aplica enlaces tel:. No toca ninguna otra pagina. CERO !important: todas las reglas ganan por especificidad (0,2,0) frente al