/*--------------------------------------------------------------------------------------*/
/*                                   PAGINA DE INICIO                                   */
/*--------------------------------------------------------------------------------------*/

/*------------------ MÓDULO B: INTRO Y TRUST STATS CARDS -------------------------------*/
/* Contenedor Principal */
.nxp-intro-group {
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: #0f1115;
    margin-top: 0;
}

.nxp-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

/* Tipografía */
.nxp-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    max-width: 900px;
    margin: 40px auto 70px;
}

.nxp-text-blue {
    color: #1e73be;
}

.nxp-text-pink {
    color: #D8225D;
}

/* Grid de Columnas */
.nxp-stats-columns {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
}

/* Tarjetas (Stats Cards) */
.nxp-stat-card {
    background-color: #1a1c23;
    padding: 25px 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333333;
    height: 100%; /* Asegura que todas midan lo mismo */
}

/* Variante para la tarjeta rosa */
.nxp-stat-card--highlight {
    border-color: #D8225D;
}

.nxp-stat-value {
    font-size: 36px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 10px;
}

.nxp-stat-label {
    font-size: 12px;
    font-weight: 700;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*------------------ MÓDULO C: CORE LINECARD -------------------------------*/
/* Contenedor de Sección */
.nxp-section-light {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #f9f9f9;
    margin-top: 0;
}

/* Título de Sección */
.nxp-section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin: 0 auto 50px;
}

/* Grid de Tarjetas */
.nxp-linecard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tarjeta Individual */
.nxp-linecard {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    height: 100%;
}

.nxp-linecard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #1e73be;
}

/* Iconos (SVG) */
.nxp-linecard-icon {
    width: 48px;
    height: 48px;
    stroke: #1e73be; /* Color corporativo */
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 25px;
}

/* Textos dentro de Tarjeta */
.nxp-linecard-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 15px;
}

.nxp-linecard-desc {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Contenedor de Etiquetas (Pills) */
.nxp-linecard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nxp-linecard-pill {
    background-color: #f0f0f0;
    color: #444444;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.nxp-linecard:hover .nxp-linecard-pill {
    background-color: #e2e8f0;
}

/*------------------ MÓDULO D: SERVICIOS DE VALOR AÑADIDO -------------------------------*/

/* Contenedor Principal (Fondo Oscuro) */
.nxp-section-dark {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #0f1115;
    margin-top: 0;
}

/* Encabezados */
.nxp-title-white {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 auto 10px;
}

.nxp-subtitle-gray {
    text-align: center;
    color: #aaaaaa;
    font-size: 16px;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* Grid del Flowchart (Servicios) */
.nxp-flowchart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Nodo / Item de Servicio */
.nxp-flowchart-node {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contenedor del Icono */
.nxp-service-icon-wrapper {
    background-color: #1a1c23;
    width: 80px;
    height: 80px;
    border-radius: 50%; /* Forma circular */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #333333;
    transition: all 0.3s ease;
}

.nxp-flowchart-node:hover .nxp-service-icon-wrapper {
    border-color: #1e73be; /* Color corporativo al pasar el ratón */
    transform: scale(1.05);
}

/* Estilo del Icono SVG */
.nxp-service-icon {
    width: 32px;
    height: 32px;
    stroke: #1e73be;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Textos del Servicio */
.nxp-service-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nxp-service-desc {
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1.5;
}

/*------------------ MÓDULO E: VERTICALES Y SOLUCIONES -------------------------------*/
/* Contenedor General */
.nxp-section-white {
    margin-top: 0;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #ffffff;
}

.nxp-header-container {
    max-width: 1200px;
    margin: 0 auto 50px;
    text-align: center;
    padding: 0 20px;
}

.nxp-main-title {
    font-size: 38px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.nxp-main-desc {
    font-size: 18px;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid de Verticales */
.nxp-verticals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0; /* Estilo de paneles pegados o puedes poner 20px si prefieres separación */
    width: 100%;
}

/* Panel Individual */
.nxp-vertical-panel {
    position: relative;
    display: block;
    height: 500px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    overflow: hidden;
}

/* Overlay para legibilidad del texto */
.nxp-vertical-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 90%);
    transition: opacity 0.3s ease;
}

.nxp-vertical-panel:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 90%);
}

/* Contenido del Panel */
.nxp-vertical-content {
    position: absolute;
    bottom: 0;
    padding: 40px;
    z-index: 1;
    transition: transform 0.3s ease;
}

.nxp-vertical-panel:hover .nxp-vertical-content {
    transform: translateY(-10px);
}

.nxp-vertical-eyebrow {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.nxp-vertical-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.nxp-vertical-desc {
    font-size: 15px;
    color: #dddddd;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Botón/Acción inferior */
.nxp-vertical-action {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nxp-vertical-action svg {
    transition: transform 0.3s ease;
}

.nxp-vertical-panel:hover .nxp-vertical-action svg {
    transform: translateX(5px);
}

/* Variantes de color para Eyebrows */
.text-pink { color: #D8225D !important; }
.text-blue { color: #1e73be !important; }
.text-orange { color: #FBB03B !important; }
.text-teal { color: #00A99D !important; }

/*------------------ MÓDULO F: CALIDAD Y GRADO AEROESPACIAL -------------------------------*/
/* Contenedor Principal Calidad */
.nxp-quality-group {
    background-color: #121212;
    margin-top: 0;
    padding: 80px 0;
}

.nxp-quality-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px;
    padding: 0 20px;
}

/* Columna de Texto */
.nxp-quality-content {
    flex: 1;
    min-width: 300px;
}

.nxp-quality-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.nxp-quality-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #aaaaaa;
    margin-bottom: 30px;
}

/* Enlace a Política */
.nxp-quality-link {
    color: #1e73be;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.nxp-quality-link:hover {
    color: #3b94e6;
}

.nxp-quality-link svg {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

/* Columna de Badges / Certificados */
.nxp-quality-badges {
    flex: 1;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.nxp-badge-card {
    background-color: #1a1c23;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    width: 100%;
    max-width: 220px;
    transition: all 0.3s ease;
}

.nxp-badge-card:hover {
    transform: translateY(-5px);
    border-color: #D8225D;
    background-color: #22252e;
}

.nxp-badge-card svg {
    width: 40px;
    height: 40px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 1.5;
    margin-bottom: 15px;
}

.nxp-badge-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 5px;
}

.nxp-badge-subtitle {
    font-size: 13px;
    color: #888888;
}

/* Botón de Descarga dentro del Badge */
.nxp-badge-download {
    margin-top: 15px;
    font-size: 11px;
    color: #D8225D;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.nxp-badge-download svg {
    width: 12px;
    height: 12px;
    margin-bottom: 0; /* Reseteo del margin del svg general */
    stroke: currentColor;
}

/*------------------ MÓDULO G: BLOG Y NOTICIAS - NO NECESITA CSS -------------*/

/*------------------ MÓDULO H: FIELD APPLICATION ENGINEERS (CTA FINAL) -------------------------------*/
/* Contenedor Principal del CTA */
.nxp-cta-wrapper {
    background-color: #121212;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* Rejilla de dos columnas (Imagen | Texto) */
.nxp-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 500px;
}

/* Columna de Contenido */
.nxp-cta-content {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #121212;
}

/* Elementos de Texto */
.nxp-cta-eyebrow {
    color: #1e73be;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.nxp-cta-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

.nxp-cta-desc {
    color: #aaaaaa;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Botón Estilizado */
.nxp-cta-button {
    background-color: #D8225D;
    color: #ffffff;
    padding: 16px 32px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 4px;
    align-self: flex-start; /* Evita que el botón ocupe todo el ancho */
    transition: all 0.3s ease;
}

.nxp-cta-button:hover {
    background-color: #A81A48;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.nxp-cta-button svg {
    transition: transform 0.3s ease;
}

.nxp-cta-button:hover svg {
    transform: translateX(5px);
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .nxp-cta-grid {
        grid-template-columns: 1fr;
    }
    
    .nxp-cta-content {
        padding: 50px 30px;
    }
    
    .nxp-cta-title {
        font-size: 26px;
    }
}

/*--------------------------------------------------------------------------------------*/
/*                                  PAGINA DIVISIONES                                   */
/*--------------------------------------------------------------------------------------*/

/*-------------------------------------- BANNER ----------------------------------------*/
/* 1. CLASE BASE: Contiene todo el diseño estructural */
.hero-banner-main {
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px 40px 0px 40px;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 380px;
}

/* 2. CLASES MODIFICADORAS: Solo para las imágenes */
.hero-semiconductores {
    background-image: url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=80');
}

.hero-electromecanicos {
    background-image: url('/wp-content/uploads/2026/04/electromecanicos_hero_train.jpg');
}

.hero-pasivos {
    background-image: url('/wp-content/uploads/pasivos_hero.png');
}

.hero-arm-x86 {
    background-image: url('/wp-content/uploads/arm_x86_hero.png');
}

.hero-boxpc {
    background-image: url('/wp-content/uploads/box_pc_hero.png');
}

.hero-redes-industriales {
    background-image: url('/wp-content/uploads/redes_hero.png');
}

.hero-redes-inalambricas {
    background-image: url('/wp-content/uploads/inalambricas_hero.png');
}

/* Tarjeta Blanca Hero */
.hero-card-floating {
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px 40px;
    width: 100%;
    max-width: 550px !important;
    float: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #ffffff; /* Asegura el fondo blanco */
}

/* Etiqueta de División (Tagline) */
.hero-tagline-blue {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e73be;
    margin-bottom: 10px;
}

/* Título (Utilizando la clase ya existente nxp-hero-title) */
.nxp-hero-title {
    font-weight: 700;
    font-size: 42px;
    line-height: 1.2;
    margin-top: 20px;
}

/* Texto de descripción */
.hero-description-text {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.5;
}

/* Botón Personalizado */
.hero-btn-cta {
    background-color: #D8225D;
    border-radius: 30px;
    padding: 12px 24px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    color: #ffffff; /* Color de texto por defecto para botones */
}

/* Utilidad de limpieza de floats */
.hero-clearfix {
    clear: both;
}

/*--------------------------------- COPY -------------------------------*/

/* Etiqueta de Distribuidor B2B */
.distributor-badge-tag {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important; /* Espaciado entre letras para un look moderno */
    margin-bottom: 20px !important;
    display: block; /* Asegura que el margen inferior se aplique correctamente */
}

/*------- Párrafo subcopy No nos limitamos a mover cajas de silicio......*/
.hero-intro-lead {
    font-size: 18px !important;
    color: #aaaaaa !important;
    line-height: 1.6 !important;
    margin-bottom: 40px !important;
}

/*-------- Botones Ver Portfolio / Marcas Representadas --------------*/ 

.hero-btn-base {
    border-radius: 30px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease;
}

/* Botón Sólido (Portfolio) */
.btn-solid-pink {
    background-color: #D8225D !important;
    color: #ffffff !important;
    border: 2px solid #D8225D !important; /* Añadido para que midan lo mismo */
}

.btn-solid-pink:hover {
    background-color: #b01b4c !important;
    border-color: #b01b4c !important;
}

/* Botón Outline (Marcas) */
.btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.btn-outline-white:hover {
    background-color: #ffffff !important;
    color: #000000 !important; /* O el color de fondo de tu sección */
}

/*--------------------------------- ARQUITECTURAS SOPORTADAS -------------------------------*/
/*---------------- No necesita CSS extra, usa el mismo que la pagina de incio --------------*/

/*--------------------------------------- FABRICANTES --------------------------------------*/
/* Contenedor de la Sección de Fabricantes */
.manufacturers-section.wp-block-group {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #0f1115 !important;
    margin-top: 0 !important;
}

/* Título de la Sección */
.manufacturers-title {
    text-align: center !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    /* Margen: 0 arriba, auto a los lados, 50px abajo */
    margin: 0 auto 50px !important; 
}

/*---------------------------------------- BLOG --------------------------------------------*/
/*---------------- No necesita CSS extra, usa el mismo que la pagina de incio --------------*/

/*----------------------------------------- CTA --------------------------------------------*/
.nxp-cta-image {
    background-size: cover !important;
    background-position: center !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    margin-left: 40px !important;
    min-height: 400px !important; /* Altura necesaria para que la imagen sea visible */
    border-radius: 12px !important; /* Consistencia con la estética técnica anterior */
    display: block !important;
}

/* Ajuste para móviles: eliminamos el margen izquierdo para que no se descuadre */
@media (max-width: 768px) {
    .nxp-cta-image {
        margin-left: 0 !important;
        margin-top: 20px !important;
        min-height: 250px !important;
    }
}

.cta-semiconductores {
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/semiconductors_cta.png');
}

.cta-electromecanicos {
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/electromecanicos_cta.png');
}

.cta-pasivos {
    background-image: url('/wp-content/uploads/capacitor_bank_cta.png');
}

.cta-arm-x86 {
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/arm_x86_cta.png');
}

.cta-boxpc {
    background-image: url('/wp-content/uploads/box_pc_cta.png');
}

.cta-redes-industriales {
    background-image: url('/wp-content/uploads/redes_cta.png');
}

.cta-redes-inalambricas {
    background-image: url('/wp-content/uploads/inalambricas_cta.png');
}
/*--------------------------------------------------------------------------------------*/
/*                           PAGINA INGENIERIA Y CONSULTORIA                            */
/*--------------------------------------------------------------------------------------*/

/*---------------------------------------- HERO SECTION --------------------------------------------*/
/* 1. Contenedor Padre: Aseguramos altura y espacio inferior */
.hero-engineering-main.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 120px !important;
    /* Sumamos los 50px originales + los 90px del espaciador eliminado = 140px */
    padding-bottom: 140px !important; 
    padding-left: 40px !important;
    padding-right: 40px !important;
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/ingenieria_hero_v6.png') !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    min-height: 580px !important; /* <--- Forzamos la altura original */
    display: block !important;
    overflow: hidden; /* Ayuda a contener los floats internos */
}

/* Hero de Ingeniería y Consultoría */
.hero-engineering-main.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Padding: 120px arriba, 40px lados, 50px abajo */
    padding: 120px 40px 50px 40px !important;
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/ingenieria_hero_v6.png') !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    min-height: 580px !important;
    display: flow-root; /* Asegura que el contenido interno no rompa el layout */
}

/* 2. Tarjeta: Quitamos el margen inferior que ya no necesitamos */
.hero-card-compact.wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Lo quitamos de aquí */
    padding: 15px 40px !important;
    width: 100% !important;
    max-width: 550px !important;
    float: left !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    background-color: #ffffff !important;
}

/* 2. Estilos para el subtítulo (que no los teníamos) */
.nxp-hero-subtitle {
    color: #4a4a4a !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

/* 3. La forma profesional de hacer el "clear:both" sin div extras:
   Se aplica al CONTENEDOR PADRE (el que tiene la imagen de fondo) */
.hero-engineering-main.wp-block-group::after {
    content: "";
    display: table;
    clear: both;
}

/* Variante de título para Ingeniería (más compacto) */
h1.nxp-hero-title.is-engineering {
    font-size: 38px !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important; /* Mantenemos la consistencia del grosor */
    margin-top: 0 !important;    /* Aseguramos que no haya espacio extra arriba */
    line-height: 1.2 !important;
}

/* Botón de Capacidades (Rosa Corporativo) */
.btn-capabilities.wp-block-button__link {
    background-color: #D8225D !important;
    border-radius: 30px !important;
    padding: 12px 24px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* Aseguramos el texto blanco */
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}

/* Efecto al pasar el ratón */
.btn-capabilities.wp-block-button__link:hover {
    background-color: #b01b4c !important;
}

/* Capa de degradado inferior para banners */
.hero-bottom-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 120px !important;
    /* Degradado de negro (80% opacidad) a transparente hacia arriba */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important; /* Permite hacer clic a través de la capa */
}

/* Contenedor de pestañas del Hero */
.nxp-hero-tabs {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 1400px !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: -40px !important; /* Compensa el padding del contenedor padre */
    z-index: 2 !important;
}

/* Estilo base de cada pestaña */
.hero-tab-link {
    text-decoration: none !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: white !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important; /* Soporte para Safari */
    margin-left: 5px !important;
    transition: all 0.3s ease !important;
}

/* Efecto Hover para todas las pestañas */
.hero-tab-link:hover {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom-color: rgba(216, 34, 93, 0.4) !important; /* Rosa sutil al pasar el ratón */
}

/* Pestaña Activa (la que tiene el borde rosa fuerte) */
.hero-tab-link.is-active {
    background: rgba(0, 0, 0, 0.9) !important;
    border-bottom-color: #D8225D !important;
}

/* Eliminar el margen de la primera pestaña para un ajuste perfecto */
.hero-tab-link:first-child {
    margin-left: 0 !important;
}

/*------------------ MÓDULO B: INTRO Y TRUST STATS CARDS -------------------------------*/
/*--------------------------- No necesita CSS ------------------------------------------*/

/*---------- MÓDULO C: INGENIERÍA ELECTROMECÁNICA (GESTIÓN TÉRMICA) --------------------*/
/* Sección de Contenido Blanco (Estandarizada) */
.section-white-spacing.wp-block-group {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    margin-top: 0 !important;
}

/* Contenedor de columnas centrado a 1400px */
.container-custom-grid.wp-block-columns {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    /* Aseguramos que no haya márgenes externos que descentren el bloque */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important; /* Mantiene el comportamiento de columnas de WordPress */
}

/* Columna de Texto (55% de ancho) */
.col-main-55.wp-block-column {
    flex-basis: 55% !important;
    padding-right: 40px !important;
    /* Aseguramos que el flex no se estire más de lo debido */
    flex-grow: 0 !important;
}

/* Opcional: Ajuste para móviles */
@media (max-width: 781px) {
    .col-main-55.wp-block-column {
        flex-basis: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 30px !important; /* Espacio inferior al apilarse */
    }
}

/* Título Principal de Sección (Estilo Robusto) */
.section-title-robust {
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    color: #000000 !important;
    margin-top: 0 !important; /* Reseteo para evitar espacios inesperados arriba */
}

/* Resaltado de texto en Rosa Corporativo */
.text-pink-highlight {
    color: #D8225D !important;
}

/* Ajuste para pantallas pequeñas (Mobile) */
@media (max-width: 768px) {
    .section-title-robust {
        font-size: 32px !important; /* Reducimos el tamaño en móviles para evitar cortes */
    }
}

/* Párrafo descriptivo principal (Lead) */
.section-description-lead {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    margin-bottom: 40px !important;
    font-weight: 400 !important; /* Peso normal para contraste con el título bold */
}

/* Ajuste sutil para móviles */
@media (max-width: 768px) {
    .section-description-lead {
        font-size: 17px !important; /* Ligeramente más pequeño en pantallas pequeñas */
        margin-bottom: 30px !important;
    }
}

/* Contenedor de Línea de Tiempo / Procesos */
.nxp-process-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* Espaciado uniforme entre los pasos del proceso */
    width: 100% !important;
}

/* Ajuste opcional para móviles (reducir el hueco si es necesario) */
@media (max-width: 768px) {
    .nxp-process-timeline {
        gap: 20px !important;
    }
}

/* Contenedor de cada paso (Fila) */
.timeline-step-row {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important; /* Mantiene el número arriba si hay mucho texto */
}

/* El círculo con el número */
.timeline-step-badge {
    flex-shrink: 0 !important; /* Evita que el círculo se aplaste si el texto es largo */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #1e73be !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 40px !important; /* Centrado vertical perfecto del número */
    font-weight: 900 !important;
    font-size: 20px !important;
    box-shadow: 0 0 15px rgba(30, 115, 190, 0.3) !important; /* Efecto de resplandor azul */
    display: block !important;
}

/* Título de cada paso del proceso */
.timeline-step-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important; /* Margen: 0 arriba/lados, 8px abajo */
    color: #000000 !important;
    line-height: 1.2 !important;
}

/* Descripción de cada paso en la línea de tiempo */
.timeline-step-desc {
    font-size: 15px !important;
    color: #666666 !important;
    margin: 0 !important; /* El espacio lo controla el título superior */
    line-height: 1.5 !important;
}

/* Columna Lateral (45% de ancho) */
.col-side-45.wp-block-column {
    flex-basis: 45% !important;
    /* Aseguramos que no crezca más de su espacio asignado */
    flex-grow: 0 !important;
}

/* Ajuste Responsivo (Coincidiendo con el breakpoint de WordPress) */
@media (max-width: 781px) {
    .col-side-45.wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }
}

/* Contenedor de medios (imagen/gráfico) centrado */
.centered-media-wrapper {
    display: flex !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
    width: 100% !important; /* Aseguramos que ocupe todo el ancho de su columna */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .centered-media-wrapper {
        min-height: 300px !important; /* Reducimos un poco la altura en móviles */
    }
}

/* Contenedor de la imagen técnica */
.tech-figure-container {
    margin: 0 !important;
}

/* Imagen técnica con acabado Premium */
.tech-illustration-main {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important; /* Bordes suavizados modernos */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; /* Sombra de profundidad */
    display: block; /* Elimina el pequeño espacio inferior de las imágenes */
    transition: transform 0.3s ease !important; /* Preparado para efectos hover */
}

/* Efecto opcional: ligera elevación al pasar el ratón */
.tech-illustration-main:hover {
    transform: translateY(-5px);
}

/*---------- MÓDULO D: CONSULTORÍA DEFENSA Y AEROESPACIAL --------------------*/
/* Sección Oscura de Gran Formato (Defensa/Aero) */
.section-dark-large.wp-block-group {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    background-color: #0f1115 !important;
    color: #ffffff !important;
    margin-top: 0 !important;
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .section-dark-large.wp-block-group {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
}

/* Columna Lateral (45% de ancho) */
.col-side-45.wp-block-column {
    flex-basis: 45% !important;
    /* Evita que la columna crezca o se encoja fuera de su proporción */
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Ajuste Responsivo para móviles (Breakpoint estándar de WordPress) */
@media (max-width: 781px) {
    .col-side-45.wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-top: 20px !important; /* Espacio superior cuando se apilan */
    }
}

/* Columna de Texto Derecha (55% con aire a la izquierda) */
.col-main-55-inverted.wp-block-column {
    flex-basis: 55% !important;
    padding-left: 40px !important; /* El aire ahora separa el texto de la imagen a su izquierda */
    padding-right: 0 !important;
    flex-grow: 0 !important;
}

/* Ajuste Responsivo */
@media (max-width: 781px) {
    .col-main-55-inverted.wp-block-column {
        flex-basis: 100% !important;
        padding-left: 0 !important;
        /* En móvil, al estar debajo de la imagen, le damos un margen superior */
        margin-top: 30px !important; 
    }
}

/* Etiqueta de Certificación (Badge) */
.badge-certification {
    display: inline-block !important;
    border: 1px solid #D8225D !important;
    color: #D8225D !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
    letter-spacing: 1px !important; /* Mejora la legibilidad en mayúsculas pequeñas */
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Efecto hover sutil */
.badge-certification:hover {
    background-color: rgba(216, 34, 93, 0.05); /* Fondo rosado casi imperceptible */
    cursor: default;
}

/* Título Principal de Sección (Estilo Robusto) */
.section-title-robust-white {
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
    margin-top: 0 !important; /* Reseteo para evitar espacios inesperados arriba */
}

/* Ajuste para pantallas pequeñas (Mobile) */
@media (max-width: 768px) {
    .section-title-robust-white {
        font-size: 32px !important; /* Reducimos el tamaño en móviles para evitar cortes */
    }
}

/* Párrafo descriptivo principal (Lead) */
.section-description-lead-claro {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #cccccc !important;
    margin-bottom: 40px !important;
    font-weight: 400 !important; /* Peso normal para contraste con el título bold */
}

/* Ajuste sutil para móviles */
@media (max-width: 768px) {
    .section-description-lead-claro {
        font-size: 17px !important; /* Ligeramente más pequeño en pantallas pequeñas */
        margin-bottom: 30px !important;
    }
}

/* Subtítulos de secciones técnicas */
.tech-subsection-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important; /* Evita desplazamientos inesperados */
    line-height: 1.3 !important;
}

/* Contenedor de la lista técnica */
.tech-feature-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
}

/* Cada ítem de la lista */
.tech-feature-item {
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: flex-start !important; /* Mantiene el icono/viñeta arriba si el texto es largo */
    gap: 10px !important;
    color: #ffffff; /* Heredado de la sección oscura */
}

/* Eliminar margen del último elemento para precisión en el layout */
.tech-feature-item:last-child {
    margin-bottom: 0 !important;
}

/* Iconos de las listas técnicas */
.tech-list-icon {
    flex-shrink: 0 !important; /* Imprescindible para que no se aplaste el icono */
    color: #D8225D !important; /* Rosa corporativo */
    width: 24px !important;
    height: 24px !important;
    /* Movido desde los atributos para mayor limpieza */
    fill: none !important;
    stroke: currentColor !important; 
    stroke-width: 2; /* Grosor del trazo si es necesario ajustarlo */
}

/* Texto descriptivo de los puntos de la lista */
.tech-item-text {
    color: #cccccc !important;
    line-height: 1.5 !important;
    font-size: 15px; /* Tamaño consistente con el resto de descripciones */
    display: inline-block; /* Permite que el line-height funcione correctamente */
}

/*------------ MÓDULO E: SISTEMAS EMBEBIDOS (ARM / x86) ----------------------*/
/* Contenedor de columnas estrecho (1200px) con espaciado vertical */
.container-narrow-grid.wp-block-columns {
    box-sizing: border-box !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* 80px arriba/abajo para separar de otras secciones, 40px a los lados */
    padding: 80px 40px !important; 
    display: flex !important; 
}

/* Ajuste para tablets/móviles */
@media (max-width: 781px) {
    .container-narrow-grid.wp-block-columns {
        padding: 50px 20px !important; /* Reducimos el aire en pantallas pequeñas */
        flex-direction: column !important;
    }
}

/* Resaltado de texto en Azul Corporativo */
.text-blue-highlight {
    color: #1e73be !important;
}

/* El círculo con el número */
.timeline-pink-badge {
    flex-shrink: 0 !important; /* Evita que el círculo se aplaste si el texto es largo */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #D8225D !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 40px !important; /* Centrado vertical perfecto del número */
    font-weight: 900 !important;
    font-size: 20px !important;
    box-shadow: 0 0 15px rgba(30, 115, 190, 0.3) !important; /* Efecto de resplandor azul */
    display: block !important;
}

/*------------------------------------- MÓDULO F: CTA FINAL ---------------------------------*/
.cta-ingenieria-consultoria {
    background-image: url('/wp-content/themes/anatronic-nxp/assets/images/engineering_cta_final.png');
}

/*--------------------------------------------------------------------------------------*/
/*                                         PAGINA EMPRESA                               */
/*--------------------------------------------------------------------------------------*/

/*--------- MÓDULO A: BANNER FULL-WIDTH (Sobre Anatronic) -----*/
/* Hero de Empresa (Limpio y Centrado) */
.nxp-empresa-hero.wp-block-group {
    /* 1. Imagen de fondo */
    background-image: url('/wp-content/themes/anatronic-nxp/images/hero_empresa.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 2. Estructura y Altura */
    min-height: 500px !important; /* Ajusta este valor según la altura deseada */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 40px !important;

    /* 3. Corrección de Alineación (Flexbox) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Esto baja el texto al centro vertical */
    align-items: flex-start !important; /* Mantiene el texto alineado a la izquierda */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .nxp-empresa-hero.wp-block-group {
        min-height: 350px !important;
        padding: 20px !important;
        align-items: center !important; /* Opcional: centra el texto horizontalmente en móvil */
        text-align: center;
    }
}

/* --- 15. Empresa NXP --- */
.nxp-empresa-hero {
    margin-top:0;
    margin-bottom:0;
    padding-top:40px;
    padding-bottom:40px;
    padding-left:20px;
    padding-right:20px;
    background-image: url('images/hero_empresa.png');
    background-size:cover;
    background-position:center;
    position:relative;
    min-height: 580px;
    display: flex;
    align-items: center;
}

.nxp-empresa-hero-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:0;
}

.nxp-empresa-hero-content {
    position:relative;
    z-index:1;
    width:100%;
    max-width:900px;
    margin:0 auto;
    text-align:left;
}

.nxp-empresa-hero-eyebrow {
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#D8225D;
    margin-bottom:15px;
}

.nxp-empresa-hero-title {
    font-size:48px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:20px;
    color:#ffffff;
    text-shadow:0 2px 10px rgba(0,0,0,0.3);
}

.nxp-empresa-hero-desc {
    color:#f1f1f1;
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
    max-width:650px;
    text-shadow:0 2px 10px rgba(0,0,0,0.3);
}

/*---------------------------- MÓDULO B: VALORES Y CAPACIDADES --------------------------*/
/* 1. CLASE BASE: Solo Estructura (Sin color) */
.nxp-empresa-valor-icon {
    width: 60px !important;  
    height: 60px !important;
    border-radius: 50% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important; 
}

.nxp-empresa-valores {
    padding-top:80px;
    padding-bottom:80px;
    background-color:#ffffff;
    margin-top:0;
}

.nxp-empresa-container {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.nxp-empresa-title {
    text-align:center;
    font-size:32px;
    font-weight:700;
    line-height:1.2;
    color:#000000;
    margin:0 auto 10px;
}

.nxp-empresa-desc {
    text-align:center;
    color:#666666;
    font-size:16px;
    max-width:800px;
    margin:0 auto 60px;
}

.nxp-empresa-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:40px;
}

.nxp-empresa-valor-card {
    text-align:center;
    padding:30px;
    background:#fdfdfd;
    border:1px solid #eaeaea;
    border-radius:8px;
    box-shadow:0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.nxp-empresa-valor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.nxp-empresa-valor-icon {
    width:60px;
    height:60px;
    margin:0 auto 20px;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nxp-empresa-valor-title {
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
    color:#333;
}

.nxp-empresa-valor-desc {
    font-size:15px;
    color:#555;
    line-height:1.6;
}

/* 2. CLASES MODIFICADORAS: Solo Color y Sombra */

/* Variante Rosa Corporativo */
.nxp-empresa-valor-icon.is-pink {
    background-color: #D8225D !important;
    box-shadow: 0 10px 20px rgba(216, 34, 93, 0.2) !important;
}

/* Variante Azul (Ejemplo - pon tu color exacto) */
.nxp-empresa-valor-icon.is-blue {
    background-color: #1e73be !important;
    box-shadow: 0 10px 20px rgba(30, 115, 190, 0.2) !important;
}

/* Variante Oscura (Ejemplo - pon tu color exacto) */
.nxp-empresa-valor-icon.is-dark {
    background-color: #000000 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Estilo para los SVG internos (común a todos) */
.nxp-empresa-valor-icon svg {
    width: 30px !important;
    height: 30px !important;
    color: #ffffff !important;
    fill: currentColor;
}

/*- MÓDULO C: CALIDAD Y DESCARGAS (Heredado NXP con 4 Badges) -*/

.nxp-quality-section {
    background-color: #1a1a1a; /* Fondo oscuro sugerido */
    padding: 40px;
    border-radius: 8px;
}

.nxp-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.nxp-description {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 25px;
}

.nxp-cert-list {
    list-style: none;
    padding: 0;
    font-size: 14px;
    color: #aaaaaa;
}

.nxp-cert-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.nxp-cert-list li::before {
    content: "✔";
    color: #007bff; /* Un azul corporativo para resaltar el check */
    margin-right: 10px;
    font-weight: bold;
}

/* Contenedor principal de la sección de Calidad */
.nxp-quality-section {
    padding: 80px 40px;
    background-color: #121212;
}

.nxp-quality-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row; /* Desktop: Texto a un lado, badges al otro */
    gap: 60px;
    align-items: center;
}

/* Bloque de texto */
.nxp-quality-content {
    flex: 1;
}

.nxp-quality-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.nxp-quality-content p {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* LISTA DE CHECKMARKS */
.nxp-quality-checks {
    margin-top: 20px;
    font-size: 14px;
    color: #aaa;
    list-style: none;
    padding: 0;
}

.nxp-quality-checks li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CONTENEDOR DE BADGES (FORZADO 2x2) */
.nxp-quality-badges {
    flex: 1;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* <--- Esto garantiza las 2 columnas */
    grid-template-rows: repeat(2, auto) !important;    /* <--- Esto garantiza las 2 filas */
    gap: 20px !important;
    max-width: 600px; /* Limitamos el ancho para que no se estiren demasiado */
}

/* TARJETAS DE BADGE */
.nxp-badge-card {
    background: #1e1e1e;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid #333;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nxp-badge-card:hover {
    border-color: #D8225D;
    background: #252525;
    transform: translateY(-5px);
}

.nxp-badge-card svg {
    width: 35px;
    height: 35px;
    stroke: #D8225D;
    fill: none;
    stroke-width: 2;
    margin-bottom: 15px;
}

.nxp-badge-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.nxp-badge-subtitle {
    color: #888;
    font-size: 12px;
}

/* Botón de descarga */
.nxp-badge-download-label {
    margin-top: 15px;
    font-size: 11px;
    color: #D8225D;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .nxp-quality-container {
        flex-direction: column; /* Apilamos texto arriba y badges abajo */
    }
    .nxp-quality-badges {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .nxp-quality-badges {
        grid-template-columns: 1fr !important; /* 1 columna en móviles muy pequeños */
    }
}

/*-------------------------------- MÓDULO D: RED DE DELEGACIONES Y CONTACTO ----------------------*/
.nxp-empresa-delegaciones {
    padding-top:80px;
    padding-bottom:100px;
    background-color:#f4f4f4;
    margin-top:0;
}

.nxp-office-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
}

.nxp-office-card {
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
    transition:transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.nxp-office-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.nxp-office-img {
    height:150px;
    width:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.nxp-office-content {
    padding:25px;
    flex-grow: 1;
}

.nxp-office-region {
    font-size:12px;
    color:#1e73be;
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:5px;
}

.nxp-office-region.hq {
    color:#D8225D;
}

.nxp-office-title {
    font-size:22px;
    font-weight:700;
    color:#111;
    margin-bottom:15px;
}

.nxp-office-detail {
    font-size:14px;
    color:#666;
    margin-bottom:10px;
    display:flex;
    align-items:flex-start;
}

.nxp-office-detail svg {
    min-width:16px;
    width:16px;
    height:16px;
    margin-right:8px;
    margin-top:2px;
    color: inherit;
}

.nxp-office-detail.center {
    align-items:center;
}

.nxp-office-detail.center svg {
    margin-top: 0;
}

.nxp-office-detail a {
    color:#1e73be;
    text-decoration:none;
}

/*--------------------------------------------------------------------------------------*/
/*                                        PAGINA CONTACTO                               */
/*--------------------------------------------------------------------------------------*/

/*--------------- MÓDULO A: BANNER FULL-WIDTH (Contacto) ----------*/
/* Hero de Empresa (Limpio y Centrado) */
.nxp-contacto-hero.wp-block-group {
    /* 1. Imagen de fondo */
    background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 2. Estructura y Altura */
    min-height: 500px !important; /* Ajusta este valor según la altura deseada */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 40px !important;

    /* 3. Corrección de Alineación (Flexbox) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Esto baja el texto al centro vertical */
    align-items: flex-start !important; /* Mantiene el texto alineado a la izquierda */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .nxp-contacto-hero.wp-block-group {
        min-height: 350px !important;
        padding: 20px !important;
        align-items: center !important; /* Opcional: centra el texto horizontalmente en móvil */
        text-align: center;
    }
}

.nxp-contact-hero {
    margin-top:0;
    margin-bottom:0;
    padding-top:170px !important;
    padding-bottom:170px !important;
    padding-left:20px;
    padding-right:20px;
    background-size:cover;
    background-position:center;
    position:relative;
    min-height: 600px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nxp-contact-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:0;
}

.nxp-contact-hero-content {
    position:relative;
    z-index:1;
    width:100%;
    max-width:900px;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
}

.nxp-contact-hero-eyebrow {
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#D8225D;
    margin-bottom:15px;
}

.nxp-contact-hero-title {
    font-size:48px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:20px;
    color:#ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.nxp-contact-hero-desc {
    color:#f1f1f1;
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
    max-width:650px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/*--------------- MÓDULO B: SPLIT SCREEN CONTACT GRID ----------*/

.nxp-contact-container {
    background-color: #f9f9f9;
    margin-top: 0 !important;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Opcional: ajustar el ancho interno si el tema no lo hace */
.nxp-contact-container .wp-block-group__inner-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.nxp-intro-centered {
    text-align: center !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 50px !important;
    margin-top: 0 !important;
    width: 100%;
    display: block; /* Asegura que se comporte como un bloque */
}

.nxp-contact-social {
    margin-top: 30px !important;
    display: flex;
    gap: 20px;            /* Espacio entre iconos */
    justify-content: center; /* Centra los iconos si el texto de arriba está centrado */
    align-items: center;
}

/* Por si los iconos son enlaces, para que no tengan el subrayado feo */
.nxp-contact-social a {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nxp-contact-social a:hover {
    opacity: 0.7;
}

.nxp-social-label {
    margin-bottom: 15px !important;
    font-weight: normal; /* El grosor lo controla el <strong> o puedes poner bold aquí */
    display: block;      /* Asegura que el margen inferior se aplique correctamente */
}

.nxp-flex-container {
    display: flex !important;
    gap: 15px !important;
    align-items: center; /* Alinea los elementos verticalmente al centro */
    flex-wrap: wrap;     /* Permite que los elementos salten de línea en móviles */
}

/* Estilo base del círculo */
.nxp-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #333333;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Efecto Hover (reemplaza al onmouseover/onmouseout) */
.nxp-social-link:hover {
    background-color: #D8225D !important;
    color: #ffffff !important;
}

/* Asegurar que los SVGs hereden el color del padre */
.nxp-social-link svg {
    stroke: currentColor; /* Para RSS y YouTube */
    fill: none;           /* Reset para evitar rellenos extraños en stroke icons */
}

/* Caso especial para LinkedIn que usa fill en lugar de stroke */
.nxp-social-link.is-linkedin svg {
    fill: currentColor;
    stroke: none;
}