/*
Theme Name:   Sydney Child IET
Theme URI:    https://iet.upb.edu/
Description:  Tema hijo de Sydney con identidad visual IET-UPB (Cochabamba)
Author:       IET UPB
Template:     sydney
Version:      1.0.0
Text Domain:  sydney-child-iet
*/

/* ─── Fuentes: encoladas desde functions.php, no @import aquí ─── */

/* ══════════════════════════════════════════
   VARIABLES GLOBALES
══════════════════════════════════════════ */
:root {
  --iet-primary:       #001a4d;
  --iet-primary-dark:  #001233;
  --iet-accent:        #e6ac00;
  --iet-accent-hover:  transparent; /* ◄ CAMBIAR ESTO: De #ffffff a #e6ac00 para mantener el fondo encendido */
  --iet-surface:       #f4f6f9;
  --iet-white:         #ffffff;
  --iet-text:          #1a1a2e;
  --iet-text-muted:    #5c6370;
  --iet-border:        rgba(0, 26, 77, 0.08);
  --iet-footer-bg:     #001233;
  --iet-radius-sm:     4px;
  --iet-radius:        50px;    /* ◄ CAMBIAR ESTO: De 6px a 50px para el look de cápsula premium de los botones */
  --iet-radius-lg:     10px;
  --iet-shadow:        0 4px 14px rgba(0, 26, 77, 0.08);
  --iet-shadow-lg:     0 8px 28px rgba(0, 26, 77, 0.14);
  --iet-section-pad:   clamp(3rem, 6vw, 5rem);
}

/* ══════════════════════════════════════════
   TIPOGRAFÍA GLOBAL
══════════════════════════════════════════ */
body,
.site-title,
.entry-title,
h1, h2, h3, h4, h5, h6,
.main-navigation a,
button, input, textarea, select {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  color: var(--iet-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

a { color: var(--iet-primary); }
a:hover, a:focus { color: var(--iet-accent-hover); text-decoration: none; }

h1, h2, h3 { color: var(--iet-primary); font-weight: 700; line-height: 1.25; }
h4, h5, h6 { color: var(--iet-primary); font-weight: 600; }

.entry-title a,
.site-title a { color: var(--iet-primary); }

/* ══════════════════════════════════════════
   HEADER / NAVEGACIÓN
══════════════════════════════════════════ */

/* Header blanco sticky */
.site-header,
.site-header.fixed,
.site-header.sticky-header,
.header-clone {
  background: var(--iet-white) !important;
  box-shadow: 0 2px 10px rgba(0, 26, 77, 0.08);
}

/* Logo IET UPB — texto en dos líneas en negrita */
.site-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--iet-primary) !important;
  line-height: 1.2;
}

.site-title a {
  color: var(--iet-primary) !important;
}

/* Links de menú */
.main-navigation a,
#mainnav ul li a {
  color: var(--iet-primary) !important;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
}

.main-navigation a:hover,
#mainnav ul li a:hover {
  color: var(--iet-accent) !important;
}

/* Ítem activo del menú con subrayado dorado */
.main-navigation .current-menu-item > a,
#mainnav .current-menu-item > a {
  color: var(--iet-primary) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--iet-accent);
}

/* Botón ADMISIONES en el menú */
.main-navigation .iet-menu-cta > a,
#mainnav .iet-menu-cta > a,
.nav-menu .iet-menu-cta > a {
  background: var(--iet-accent) !important;
  color: var(--iet-primary) !important;
  border-radius: var(--iet-radius);
  padding: 0.45rem 1rem !important;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin-left: 0.5rem;
  text-transform: uppercase;
  transition: background 0.2s;
}

.main-navigation .iet-menu-cta > a:hover,
#mainnav .iet-menu-cta > a:hover {
  background: var(--iet-accent-hover) !important;
  color: var(--iet-primary) !important;
}

/* ══════════════════════════════════════════
   HERO — Sección portada principal
══════════════════════════════════════════ */

.wp-block-cover.iet-hero,
.iet-hero.cover-block {
  min-height: 72vh !important;
  position: relative;
}

/* Overlay oscuro sobre la imagen de fondo */
.wp-block-cover.iet-hero .wp-block-cover__background,
.iet-hero .wp-block-cover__background {
  background-color: rgba(0, 10, 30, 0.55) !important;
  opacity: 1 !important;
}

/* Contenedor centrado del hero */
.iet-hero .wp-block-cover__inner-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* H1 del hero: blanco, grande */
.iet-hero h1,
.wp-block-cover.iet-hero h1 {
  color: #ffffff !important; /* Forzamos blanco para el texto base */
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.2;
}

/* ─── AQUÍ ESTÁ EL CAMBIO CLAVE: DETECTA LA NEGRITA COMO SUBTÍTULO DORADO ─── */
.iet-hero h1 strong,
.wp-block-cover.iet-hero h1 strong {
    color: #e6ac00 !important;   /* Cambia el texto a dorado institucional */
    display: block !important;   /* Provoca el salto de línea elegante automáticamente */
    font-weight: 700 !important; /* Mantiene la presencia de la fuente */
    margin-top: 10px !important; /* Separa sutilmente el subtítulo dorado del texto blanco */
}

/* Subtítulo del hero */
.iet-hero p,
.wp-block-cover.iet-hero p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.95rem;
  max-width: 500px;
  margin: 0 auto;
}
/* ==========================================================================
   BOTÓN CTA HERO - RESOLUCIÓN PREMIUM DESDE ESTILO OUTLINE
   ========================================================================== */

/* 1. Resetear el contenedor nativo del bloque */
.wp-block-button.iet-btn,
div.iet-btn {
    border-radius: 50px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 2. Estado Inicial: Forzar la cápsula dorada premium */
.wp-block-button.iet-btn .wp-block-button__link.is-style-outline,
.wp-block-button.iet-btn .wp-block-button__link,
.iet-btn .wp-block-button__link,
a.iet-btn {
    background-color: #e6ac00 !important;        /* Fondo dorado sólido */
    background: #e6ac00 !important;
    color: #001a4d !important;                   /* Texto azul marino limpio */
    
    /* look de cápsula premium alargada */
    border-radius: 50px !important;              
    padding: 12px 30px !important;               
    border: 1px solid #e6ac00 !important;        /* Contorno dorado inicial */
    
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;                 
    font-size: 13px !important;                  
    letter-spacing: 0.8px !important;            
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1 !important;
    
    /* Sombra inicial difuminada */
    box-shadow: 0 4px 15px rgba(230, 172, 0, 0.15) !important;
    
    /* Animación fluida idéntica a Admisiones */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. Estado Hover: Vaciar fondo y mantener bordes/letras doradas */
.wp-block-button.iet-btn .wp-block-button__link.is-style-outline:hover,
.wp-block-button.iet-btn .wp-block-button__link:hover,
.iet-btn .wp-block-button__link:hover,
a.iet-btn:hover {
    background-color: transparent !important;    /* Se vuelve totalmente transparente */
    background: transparent !important;
    color: #e6ac00 !important;                   /* El texto pasa a dorado */
    border: 1px solid #e6ac00 !important;        /* Resalta el contorno dorado */
    
    /* Efecto Glow premium inferior */
    box-shadow: 0 4px 20px rgba(230, 172, 0, 0.3) !important;
    
    /* Elevación interactiva suave */
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════
   SECCIONES GENÉRICAS
══════════════════════════════════════════ */

.iet-section {
  padding-top: var(--iet-section-pad);
  padding-bottom: var(--iet-section-pad);
}

/* Fondo gris claro (noticias, etc.) */
.iet-section--surface {
  background-color: var(--iet-surface);
}

/* Fondo azul oscuro (contacto) */
.iet-section--primary {
  background-color: var(--iet-primary);
  color: var(--iet-white);
}

.iet-section--primary h2,
.iet-section--primary h3,
.iet-section--primary p,
.iet-section--primary label {
  color: var(--iet-white) !important;
}

/* ══════════════════════════════════════════
   SECCIÓN "SOBRE LA CARRERA"
   Layout: 2 columnas — texto | imagen
══════════════════════════════════════════ */

.iet-sobre-carrera {
  padding-top: var(--iet-section-pad);
  padding-bottom: var(--iet-section-pad);
  background: var(--iet-white);
}

/* Imagen de la derecha redondeada */
.iet-sobre-carrera .wp-block-column:last-child img,
.iet-sobre-img img {
  border-radius: var(--iet-radius-lg);
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
  box-shadow: var(--iet-shadow-lg);
}

/* ══════════════════════════════════════════
   ETIQUETA "Sobre la Carrera" (eyebrow)
══════════════════════════════════════════ */

.iet-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--iet-text-muted);
  background: var(--iet-surface);
  border: 1px solid var(--iet-border);
  border-radius: var(--iet-radius-sm);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════
   DESTACADO MERCOSUR (Corrección de Espacio)
   ══════════════════════════════════════════ */

.iet-mercosur {
    border-left: 4px solid var(--iet-accent);
    background: var(--iet-surface);
    padding: 0.9rem 1.25rem;
    border-radius: 0 var(--iet-radius) var(--iet-radius) 0;
    margin-top: 0.5rem !important;    /* ◄ CAMBIADO: Reducido para que no empuje hacia abajo */
    margin-bottom: 0px !important;    /* ◄ NUEVO: Elimina el espacio que empuja a Últimas Noticias */
}

.iet-mercosur p, 
.iet-mercosur strong {
    color: var(--iet-primary);
    font-weight: 700;
    margin-bottom: 0 !important;      /* ◄ NUEVO: Evita márgenes ocultos del párrafo */
}


/* ══════════════════════════════════════════
   ESTILOS CONTROLADOS: ÚLTIMAS NOTICIAS (Compacto)
   ══════════════════════════════════════════ */

.iet-noticias {
    padding-top: 1rem !important;     /* ◄ CAMBIADO: De var(--iet-section-pad) a solo 1rem para pegarlo al MERCOSUR */
    padding-bottom: var(--iet-section-pad, 4rem);
    background: #ffffff !important;
}

/* Alineación limpia del encabezado */
.iet-noticias-header {
    display: flex !important;
    align-items: center !important; 
    justify-content: space-between !important;
    margin-top: 0 !important;         /* ◄ NUEVO: Asegura que el contenedor no tenga margen superior */
    margin-bottom: 2rem !important;
    flex-wrap: wrap;
    gap: 1rem;
}
.iet-noticias-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.iet-noticias-header h2 {
  margin: 0 !important;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
  color: #001a4d !important; /* Color primario azul oscuro */
}

.iet-noticias-header p {
  color: #666666 !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

/* Enlace "Ver todas →": Solución al camuflaje blanco */
.iet-ver-todas {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #e6ac00 !important; /* Dorado base estático */
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease-in-out !important;
}

/* EVITA EL TRANSPARENTE: Al hacer hover cambia a una variante más oscura y elegante, nunca blanca */
.iet-ver-todas:hover {
  color: #b38600 !important; 
  text-decoration: underline !important;
}

/* Grilla responsive */
.iet-noticias-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 1.5rem !important;
}

/* Noticia destacada (Izquierda) */
.iet-noticia-featured {
  grid-row: 1 / 3 !important;
  position: relative;
  border-radius: 12px !important;
  overflow: hidden;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  display: flex;
  flex-direction: column;
}

.iet-noticia-featured img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block !important;
}

.iet-noticia-featured .iet-noticia-body {
  padding: 1.5rem !important;
}

/* Tarjetas secundarias (Derecha) */
.iet-noticia-card {
  background: #ffffff !important;
  border: 1px solid #e1e8ed !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.iet-noticia-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-3px) !important;
}

/* Títulos internos de las noticias */
.iet-noticia-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0.4rem 0 !important;
  line-height: 1.3 !important;
}

.iet-noticia-title a {
  color: #001a4d !important;
  text-decoration: none !important;
}

.iet-noticia-title a:hover {
  color: #e6ac00 !important; /* El título de la noticia cambia a dorado al pasar el cursor */
}

.iet-noticia-date {
  font-size: 0.75rem !important;
  color: #888888 !important;
  margin: 0 !important;
}

.iet-noticia-excerpt {
  font-size: 0.85rem !important;
  color: #555555 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Configuración de las etiquetas (Tags) */
.iet-tag {
  display: inline-block !important;
  align-self: flex-start;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  margin-bottom: 0.5rem;
}

.iet-tag--internacional {
  background: #001a4d !important;
  color: #ffffff !important;
}

.iet-tag--premios {
  background: #fff9e6 !important;
  color: #b38600 !important;
  border: 1px solid #ffe0b3 !important;
}

/* Forzar que el tag flote correctamente sobre la foto destacada */
.iet-noticia-featured .iet-tag {
    position: absolute !important;
    top: 15px !important;       /* Separación desde arriba */
    left: 15px !important;      /* Separación desde la izquierda */
    z-index: 10 !important;      /* Se asegura de estar sobre la imagen */
    margin: 0 !important;       /* Elimina márgenes antiguos que causaban conflicto */
    
    /* Mejoras de legibilidad */
    background: rgba(0, 26, 77, 0.9) !important; /* Fondo azul oscuro semi-transparente */
    backdrop-filter: blur(4px); /* Sutil efecto borroso detrás del tag */
    padding: 5px 10px !important; /* Más espaciado interno */
}

/* Ajuste móvil */
@media (max-width: 768px) {
  .iet-noticias-grid {
    grid-template-columns: 1fr !important;
  }
  .iet-noticia-featured {
    grid-row: auto !important;
  }
  .iet-noticias-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* ══════════════════════════════════════════
   SECCIÓN DE CONTACTO: PROPORCIONES PREMUM
   ══════════════════════════════════════════ */

/* Contenedor Principal (Fuerza la distribución de columnas idéntica a la referencia) */
.iet-contacto-section {
    background-color: #001a4d !important; /* Azul oscuro de fondo general */
    padding: 6rem 2rem !important;        /* Más aire arriba y abajo */
    color: #ffffff !important;
}

/* Forzar que el bloque de columnas nativo de WP use proporciones estables */
.iet-contacto-section .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;      /* Hace que ambas columnas midan lo mismo de alto */
    justify-content: center !important;
    gap: 3.5rem !important;               /* Separación elegante entre las dos mitades */
    max-width: 1100px !important;         /* Ancho máximo contenedor general */
    margin: 0 auto !important;
}

/* Equilibrio proporcional para cada columna en pantallas de escritorio */
@media (min-width: 782px) {
    .iet-contacto-section .wp-block-column:nth-child(1) {
        flex-basis: 45% !important;       /* Columna de información izquierda */
    }
    .iet-contacto-section .wp-block-column:nth-child(2) {
        flex-basis: 55% !important;       /* Columna del formulario derecho */
    }
}

/* Ajustes de Títulos e Información (Columna Izquierda) */
.iet-contacto-section h2 {
    font-size: 2.5rem !important;         /* Un poco más grande para balancear */
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 1.2rem !important;
}

.iet-contacto-section p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.05rem !important;
    margin-bottom: 2rem !important;
}
/* Tarjetas de Información de la Izquierda (Email y Teléfono) */
.iet-contacto-card-info {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 0.8rem 1.5rem !important;    /* ◄ Reducido de 1.4rem a 0.8rem para quitar espacio vertical */
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;        /* ◄ Asegura la alineación vertical perfecta del icono y texto */
    justify-content: flex-start !important;/* ◄ Alinea todo al inicio izquierdo */
    gap: 1rem !important;
}

/* Forzar que los textos (p, span o enlaces) dentro de la tarjeta no tengan márgenes heredados */
.iet-contacto-card-info p,
.iet-contacto-card-info a,
.iet-contacto-card-info span {
    margin: 0 !important;
    line-height: 1 !important;
}

/* ──────────────────────────────────────────
   LA TARJETA BLANCA (Compactada y Alineada)
   ────────────────────────────────────────── */

/* Asegúrate de ponerle 'iet-contacto-form-box' en clases avanzadas al bloque GROUP derecho */
.iet-contacto-section .iet-contacto-form-box {
    background: #ffffff !important;       
    color: #333333 !important;
    padding: 2.2rem 2.5rem !important;    /* Reducido para que la caja no sea alta */
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
    width: 100% !important;               
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    align-self: center !important;        /* Evita que la caja se estire verticalmente en exceso */
}

/* Título H3 interno: "Envíanos un mensaje" */
.iet-contacto-form-box h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #001a4d !important;            
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;     /* ◄ REDUCIDO: Menos espacio bajo el título principal */
}

/* Corrección de Márgenes del Formulario Nativo */
.iet-contacto-form-box form,
.iet-contacto-form-box .wp-block-form {
    margin: 0 !important;                 /* ◄ CORREGIDO: Elimina cualquier margen residual del bloque */
    padding: 0 !important;     
    width: 100% !important;
}

/* Espaciado súper compacto entre bloques de campos (Nombre, Email, Consulta) */
.iet-contacto-form-box .wp-block-form-input,
.iet-contacto-form-box .wp-block-form-input__container {
    margin-bottom: 0.5rem !important;     /* ◄ REDUCIDO de 1.2rem a 0.5rem: Text fields más juntos */
    padding-bottom: 0 !important;
}

/* Estilo y separación de las etiquetas de los campos */
.iet-contacto-form-box label,
.iet-contacto-form-box .wp-block-form-input__label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1a202c !important; 
    display: block !important;
    margin-bottom: 0.15rem !important;    /* ◄ REDUCIDO: Pega la etiqueta de texto a su respectivo input */
    margin-top: 0 !important;
}

/* Inputs de texto y Textarea nativos */
.iet-contacto-form-box input[type="text"],
.iet-contacto-form-box input[type="email"],
.iet-contacto-form-box textarea,
.iet-contacto-form-box .wp-block-form-input__field {
    width: 100% !important;
    background: #f8fafc !important;       
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;        /* Altura interna de los campos balanceada */
    font-size: 0.95rem !important;
    color: #1a202c !important; 
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   MÁRGENES DEL BOTÓN (ELIMINAR ESPACIO EXCESIVO ARRIBA/ABAJO DEL BOTÓN)
   ========================================================================== */

.wp-block-button.iet-btn,
div.iet-btn,
.iet-contacto-form-box .wp-block-buttons,
.iet-contacto-form-box .wp-block-button,
.iet-contacto-form-box .wp-block-form-submit {
    border-radius: 50px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    margin-top: 0.8rem !important;        /* ◄ REDUCIDO de 1.5rem a 0.8rem: Acerca el botón a la caja de Consulta */
    margin-bottom: 0 !important;          /* ◄ CORREGIDO: Elimina espacio vacío debajo del botón */
    text-align: center !important;        
    display: block !important;
    width: 100% !important;
}

/* 2. Estado Inicial: Cápsula dorada premium idéntica a "Admisiones" */
.wp-block-button.iet-btn .wp-block-button__link.is-style-outline,
.wp-block-button.iet-btn .wp-block-button__link,
.iet-btn .wp-block-button__link,
a.iet-btn,
.iet-contacto-form-box button[type="submit"],
.iet-contacto-form-box .wp-block-form-submit__button {
    background-color: #e6ac00 !important;   
    background: #e6ac00 !important;
    color: #001a4d !important;               /* Texto azul marino limpio */
    
    /* Forma de cápsula alargada impecable */
    border-radius: 50px !important;              
    padding: 14px 50px !important;        /* Relleno ideal y proporcional al ancho */
    min-width: 220px !important;          /* Ancho mínimo estético */
    border: 1px solid #e6ac00 !important;   
    
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;                 
    font-size: 13px !important;                  
    letter-spacing: 0.8px !important;            
    text-transform: uppercase !important;
    text-decoration: none !important;
    
    display: inline-block !important;     /* Permite ser centrado por el text-align padre */
    width: auto !important;                 
    line-height: 1 !important;
    cursor: pointer !important;
    text-align: center !important;
    margin: 0 auto !important;
    
    /* Sombra inicial suave */
    box-shadow: 0 4px 15px rgba(230, 172, 0, 0.15) !important;
    
    /* Animación fluida premium */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Bloquear fondos accidentales de bloques en hover */
.iet-contacto-form-box .wp-block-buttons:hover,
.iet-contacto-form-box .wp-block-button:hover {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Estado Hover: Fondo vacío transparente con bordes y letras doradas */
.wp-block-button.iet-btn .wp-block-button__link.is-style-outline:hover,
.wp-block-button.iet-btn .wp-block-button__link:hover,
.iet-btn .wp-block-button__link:hover,
a.iet-btn:hover,
.iet-contacto-form-box button[type="submit"]:hover,
.iet-contacto-form-box .wp-block-form-submit__button:hover {
    background-color: transparent !important;    
    background: transparent !important;
    color: #e6ac00 !important;                   /* Texto cambia a dorado */
    border: 1px solid #e6ac00 !important;        /* Resalta el contorno */
    
    /* Efecto Glow inferior premium e interacción interactiva hacia arriba */
    box-shadow: 0 4px 20px rgba(230, 172, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Adaptabilidad para dispositivos móviles (Responsive) */
@media (max-width: 781px) {
    .iet-contacto-section .wp-block-columns {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    .iet-contacto-section .iet-contacto-form-box {
        padding: 2.5rem 1.5rem !important;
    }
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */

.site-footer,
#colophon {
  background-color: var(--iet-footer-bg) !important;
  color: rgba(255, 255, 255, 0.75);
  padding: 2rem 0 !important;
}

/* Logo / nombre en el footer */
.site-footer .site-title,
#colophon .site-title {
  color: var(--iet-white) !important;
  font-weight: 700;
  font-size: 1rem;
}

/* Links del footer */
.site-footer a,
#colophon a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--iet-accent);
}

/* Menú de links del footer (Privacidad, Directorio…) */
.site-footer .footer-menu,
#colophon .footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

/* Copyright */
.site-footer .site-info,
#colophon .site-info {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  text-align: center;
  margin-top: 1rem;
}

/* ══════════════════════════════════════════
   TARJETAS GENÉRICAS
══════════════════════════════════════════ */

.iet-card {
  background: var(--iet-white);
  border-radius: var(--iet-radius-lg);
  box-shadow: var(--iet-shadow);
  padding: 1.5rem;
  height: 100%;
  border: 1px solid var(--iet-border);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.iet-card:hover {
  box-shadow: var(--iet-shadow-lg);
  transform: translateY(-2px);
}

.iet-card h3 { margin-top: 0; font-size: 1.1rem; }
.iet-card p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════
   GLASSMORPHISM (laboratorios / estadísticas)
══════════════════════════════════════════ */

.iet-glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--iet-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--iet-shadow);
  padding: 1.5rem 2rem;
}

.iet-glass h3 { margin-top: 0; }

.iet-glass .iet-stat {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--iet-accent);
  line-height: 1.1;
}

/* ══════════════════════════════════════════
   TARJETA JEFE DE CARRERA
══════════════════════════════════════════ */

.iet-jefe-carrera {
  background: var(--iet-white);
  border-radius: var(--iet-radius-lg);
  box-shadow: var(--iet-shadow-lg);
  overflow: hidden;
  border: 2px solid var(--iet-accent);
}

.iet-jefe-carrera .wp-block-column:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 280px;
}

/* ══════════════════════════════════════════
   GRILLA DOCENTES
══════════════════════════════════════════ */

.iet-docente-card img {
  border-radius: var(--iet-radius);
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.iet-docente-card .iet-especialidad {
  color: var(--iet-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ══════════════════════════════════════════
   UTILIDADES
══════════════════════════════════════════ */

.iet-text-center  { text-align: center; }
.iet-mb-0         { margin-bottom: 0 !important; }
.iet-mt-0         { margin-top: 0 !important; }
.iet-max-width    { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Separador dorado decorativo */
.iet-divider {
  width: 48px;
  height: 3px;
  background: var(--iet-accent);
  border: none;
  margin: 0 0 1.5rem 0;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

@media (max-width: 768px) {
  .iet-noticias-grid {
    grid-template-columns: 1fr;
  }
  .iet-noticia-featured {
    grid-row: auto;
  }
  .iet-contacto-section .wp-block-columns {
    flex-direction: column;
  }
  .iet-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
}


/* ══════════════════════════════════════════
   ELIMINAR ESPACIO EN BLANCO BAJO EL HEADER
   ══════════════════════════════════════════ */

/* Quita el relleno superior nativo de la página de inicio en Sydney */
.home .content-area,
.home .site-content,
.home #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remueve márgenes del contenedor principal solo en la portada */
.home .entry-content {
    margin-top: 0 !important;
}

/* Ajusta el espaciado en caso de que el contenedor del Cover tenga margen superior */
.home .wp-block-cover.iet-hero, 
.home .iet-hero {
    margin-top: 0 !important;
    top: 0 !important;
}




/* ==========================================================================
equipo  docente
========================================================================== */

/* ──────────────────────────────────────────
   1. FILA SUPERIOR: JEFE DE CARRERA + BANNER DUDAS
   ────────────────────────────────────────── */

/* Contenedor de bloque de columnas de WordPress para la fila del jefe */
.iet-fila-jefe .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Forza a que el banner de dudas y el jefe midan lo mismo */
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
}

/* Ajuste proporcional de columnas en escritorio */
@media (min-width: 782px) {
    .iet-fila-jefe .wp-block-column:nth-child(1) {
        flex-basis: 66% !important; /* Tarjeta Jefe */
    }
    .iet-fila-jefe .wp-block-column:nth-child(2) {
        flex-basis: 34% !important; /* Banner Dudas */
    }
}

/* Tarjeta del Jefe de Carrera (Izquierda) */
.iet-jefe-carrera {
    background: var(--iet-white) !important;
    border-radius: 10px !important; /* Mismo radio de la imagen */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    border: none !important; /* Quitamos el borde antiguo para igualar el mockup */
    height: 100% !important;
}

/* Forzar las 2 subcolumnas internas: Foto | Datos */
.iet-jefe-carrera .wp-block-columns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
}

.iet-jefe-carrera .wp-block-column:first-child {
    flex-basis: 40% !important;
}

.iet-jefe-carrera .wp-block-column:last-child {
    flex-basis: 60% !important;
    padding: 2rem !important; /* Espaciado interno de los textos */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Imagen del Jefe de Carrera */
.iet-jefe-carrera .wp-block-column:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Bloque de datos de contacto del Jefe (Icono + Texto) */
.iet-jefe-datos-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.88rem !important;
    color: var(--iet-text-muted) !important;
}

.iet-jefe-datos-item p,
.iet-jefe-datos-item a {
    margin: 0 !important;
    color: var(--iet-text-muted) !important;
    text-decoration: none !important;
}


/* ──────────────────────────────────────────
   2. BANNER DE DUDAS ACADÉMICAS (Derecha)
   ────────────────────────────────────────── */

.iet-banner-dudas {
    background: #001f5c !important; /* Azul marino intenso idéntico a la imagen */
    border-radius: 10px !important;
    padding: 2.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Icono flotante amarillo */
.iet-banner-dudas-icon {
    font-size: 2rem !important;
    color: var(--iet-accent) !important;
    margin-bottom: 0.8rem !important;
}

.iet-banner-dudas h3 {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.6rem !important;
    margin-top: 0 !important;
}

.iet-banner-dudas p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
    max-width: 260px;
}

/* Botón plano amarillo "ENVIAR MENSAJE" */
.iet-banner-dudas .wp-block-button__link,
.iet-banner-dudas a.wp-block-button__link {
    background-color: var(--iet-accent) !important;
    color: var(--iet-primary) !important;
    border-radius: 4px !important; /* Botón rectangular/semi-redondeado según la foto */
    padding: 10px 24px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    width: 100% !important;
    display: block !important;
    transition: background 0.2s ease !important;
}

.iet-banner-dudas .wp-block-button__link:hover {
    background-color: #cc9900 !important; /* Dorado un toque más oscuro en hover */
}


/* ──────────────────────────────────────────
   3. GRILLA INFERIOR: TARJETAS DE DOCENTES
   ────────────────────────────────────────── */

/* Grilla contenedora para las 3 columnas de docentes */
.iet-docentes-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Anular comportamiento flex de WP que rompe las grillas */
@media (min-width: 782px) {
    .iet-docentes-grid .wp-block-columns {
        display: grid !important;
    }
    .iet-docentes-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Tarjeta individual de docente (Sobrescribe tu versión antigua) */
.iet-docente-card {
    background: var(--iet-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Foto del docente (Arriba, rectangular con aspect-ratio controlado) */
.iet-docente-card img,
.iet-docente-card .wp-block-image img {
    width: 100% !important;
    height: 200px !important; /* Altura ideal fija según el diseño */
    object-fit: cover !important;
    border-radius: 0 !important; /* Cancela el radio circular que tenías configurado */
    display: block !important;
}

/* Cuerpo interno de textos */
.iet-docente-body {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Fila de etiquetas (Tags pequeños grises) */
.iet-docente-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-bottom: 0.8rem !important;
}

.iet-docente-tag {
    background: #f1f5f9 !important; /* Gris ultra claro */
    color: #475569 !important; /* Texto slate */
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* Título del docente */
.iet-docente-card h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary) !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
}

/* Extracto/Descripción corta */
.iet-docente-card p,
.iet-docente-card .iet-especialidad {
    font-size: 0.85rem !important;
    color: var(--iet-text-muted) !important;
    line-height: 1.5 !important;
    margin-bottom: 1.2rem !important;
}

/* Enlace inferior "Ver Perfil Completo →" */
.iet-docente-link {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    margin-top: auto !important; /* Lo empuja siempre al fondo de la tarjeta */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    transition: color 0.2s ease;
}

.iet-docente-link:hover {
    color: var(--iet-accent) !important; /* Pasa a dorado al hacer hover */
}

/* ──────────────────────────────────────────
   RESPONSIVE ADAPTABILITY
   ────────────────────────────────────────── */
@media (max-width: 991px) {
    .iet-docentes-grid .wp-block-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 781px) {
    .iet-fila-jefe .wp-block-columns {
        flex-direction: column !important;
    }
    .iet-jefe-carrera .wp-block-columns {
        flex-direction: column !important;
    }
    .iet-docentes-grid .wp-block-columns {
        grid-template-columns: 1fr !important;
    }
}





/* ==========================================================================
plan de estudios
========================================================================== */

/* Contenedor general de la sección */
.iet-curriculo-section {
    padding: var(--iet-section-pad) 2rem;
    background-color: var(--iet-surface); /* Fondo gris claro sutil */
}

/* Título centralizado */
.iet-curriculo-title {
    text-align: center;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: var(--iet-primary) !important;
    margin-bottom: 2.5rem !important;
}

/* Grilla Asimétrica Premium */
.iet-curriculo-grid {
    max-width: 1140px;
    margin: 0 auto;
}

/* Usamos Grid nativo para lograr el efecto asimétrico de la imagen */
.iet-curriculo-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1.7fr 1.1fr !important; /* Columna izquierda es más ancha */
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* En resoluciones menores a escritorio, forzamos comportamiento uniforme */
@media (min-width: 782px) {
    .iet-curriculo-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Tarjeta base blanca */
.iet-curriculo-card {
    background: var(--iet-white) !important;
    border-radius: 10px !important;
    padding: 2.2rem !important;
    box-shadow: 0 4px 20px rgba(0, 26, 77, 0.03) !important;
    border: 1px solid rgba(0, 26, 77, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Encabezado interno (Icono + Título) */
.iet-curriculo-header {
    display: flex !important;
    align-items: center !important;
    gap: 1.2rem !important;
    margin-bottom: 1.2rem !important;
}

/* Título del área de estudio */
.iet-curriculo-header h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary) !important;
    margin: 0 !important;
}

/* Contenedor base de los iconos redondeados */
.iet-curriculo-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 1.2rem !important;
}

/* 🎨 Variaciones de Color de las Cajas de Iconos según la imagen_9.png */
.iet-icon-blue {
    background-color: #e0e7ff !important; /* Azul/Morado claro */
    color: #4f46e5 !important;
}

.iet-icon-navy {
    background-color: #e0f2fe !important; /* Celeste claro */
    color: #0369a1 !important;
}

.iet-icon-darkblue {
    background-color: #e0e7ff !important; /* Azul oscuro suave */
    color: #1e3a8a !important;
}

.iet-icon-yellow {
    background-color: #fef3c7 !important; /* Amarillo claro institucional */
    color: #d97706 !important;
}

/* Párrafo descriptivo */
.iet-curriculo-card p {
    color: var(--iet-text-muted) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
}

/* Lista de sub-materias con Checks dorados */
.iet-curriculo-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.iet-curriculo-list li {
    position: relative !important;
    padding-left: 1.8rem !important;
    margin-bottom: 0.6rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--iet-text) !important;
}

/* Generador del Checkmark Dorado usando Dashicons o FontAwesome (por CSS) */
.iet-curriculo-list li::before {
    content: "✓" !important; /* Check unicode limpio */
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-color: var(--iet-accent) !important; /* Fondo Dorado */
    color: var(--iet-white) !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ──────────────────────────────────────────
   RESPONSIVE (Para celulares y tablets)
   ────────────────────────────────────────── */
@media (max-width: 781px) {
    .iet-curriculo-grid .wp-block-columns {
        grid-template-columns: 1fr !important; /* En móviles pasa a ser una sola columna recta */
        gap: 1.2rem !important;
    }
    .iet-curriculo-card {
        padding: 1.5rem !important;
    }
}


/* ==========================================================================
   LABORATORIOS DE LA CARRERA
   ========================================================================== */

/* Contenedor general */
.iet-labs-section {
    padding: var(--iet-section-pad, 4rem) 2rem;
    background-color: var(--iet-surface, #f8fafc);
}

/* Encabezado: Título + Descripción + Enlace derecho */
.iet-labs-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 2rem;
    margin-bottom: 2.5rem !important;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.iet-labs-header-text {
    max-width: 650px;
}

.iet-labs-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
}

.iet-labs-header p {
    font-size: 0.95rem !important;
    color: var(--iet-text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Enlace derecho "Visitar los laboratorios →" */
.iet-labs-link-top {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    white-space: nowrap;
    transition: color 0.2s ease;
    padding-bottom: 0.2rem;
}

.iet-labs-link-top:hover {
    color: var(--iet-accent, #e5a93b) !important;
}

/* ──────────────────────────────────────────
   GRILLA Y TARJETAS DE LABS (Efecto Vidrio)
   ────────────────────────────────────────── */

/* Fila de columnas de WordPress */
.iet-labs-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Dos columnas exactas */
    gap: 1.5rem !important;
    max-width: 1140px;
    margin: 0 auto !important;
}

@media (min-width: 782px) {
    .iet-labs-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Estructura de la Tarjeta */
.iet-lab-card {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important; /* Mantiene la proporción horizontal perfecta de la imagen */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Empuja el contenido al fondo */
}

/* Forzar que la imagen interna ocupe todo el fondo */
.iet-lab-card img,
.iet-lab-card .wp-block-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transition: transform 0.4s ease;
}

.iet-lab-card:hover img {
    transform: scale(1.04); /* Efecto sutil de zoom al pasar el mouse */
}

/* Barra inferior con efecto Esmerilado (Glassmorphism) */
.iet-lab-overlay-info {
    position: relative !important;
    z-index: 2 !important; /* Por encima de la foto */
    background: rgba(255, 255, 255, 0.65) !important; /* Fondo translúcido */
    backdrop-filter: blur(12px) saturate(160%) !important; /* El truco del desenfoque de vidrio */
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    padding: 1.25rem 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* Divide texto a la izquierda, icono a la derecha */
    align-items: center !important;
}

/* Contenedor del Título y Badge */
.iet-lab-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem;
}

.iet-lab-details h3 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

/* Badges (Etiquetas de Espacios) */
.iet-lab-badge {
    display: inline-block !important;
    align-self: flex-start !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* Variaciones de color para las etiquetas */
.iet-lab-badge.badge-dark {
    background-color: #0f172a !important; /* Negro/Azul oscuro */
    color: #ffffff !important;
}

.iet-lab-badge.badge-yellow {
    background-color: var(--iet-accent, #e5a93b) !important; /* Amarillo institucional */
    color: #0f172a !important;
}

/* Iconos de la derecha (Matraz, Gorro, etc.) */
.iet-lab-icon {
    font-size: 1.4rem !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.8;
}

/* ──────────────────────────────────────────
   RESPONSIVE (Adaptabilidad a Móviles)
   ────────────────────────────────────────── */
@media (max-width: 781px) {
    .iet-labs-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    .iet-labs-grid .wp-block-columns {
        grid-template-columns: 1fr !important; /* Una tarjeta por fila en móviles */
    }
    .iet-lab-card {
        aspect-ratio: 4 / 3 !important; /* Un poco más cuadrada en móviles para mejor visibilidad */
    }
}




/* ==========================================================================
internacionalizacion / MERCOSUR 
========================================================================== */

/* Contenedor general */
.iet-mercosur-section {
    padding: var(--iet-section-pad, 4rem) 2rem;
    background-color: var(--iet-surface, #f8fafc);
}

/* Encabezado de la Sección */
.iet-mercosur-section .iet-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.iet-mercosur-section h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
}

.iet-mercosur-section p.iet-subtitle {
    font-size: 0.95rem !important;
    color: var(--iet-text-muted, #64748b) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Grilla de 3 Columnas */
.iet-mercosur-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1140px;
    margin: 0 auto !important;
}

@media (min-width: 782px) {
    .iet-mercosur-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ──────────────────────────────────────────
   TARJETAS MEJORADAS (ESTILO PREMIUM)
   ────────────────────────────────────────── */
.iet-mercosur-card {
    background: var(--iet-white, #ffffff) !important;
    border-radius: 10px !important;
    padding: 2.2rem 2rem !important;
    box-shadow: 0 4px 15px rgba(0, 26, 77, 0.02) !important;
    border: 1px solid rgba(0, 26, 77, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    height: 100% !important;
}

/* Efecto dinámico al pasar el mouse */
.iet-mercosur-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(0, 26, 77, 0.07) !important;
    border-color: transparent !important;
}

/* Caja de Icono Estilizada */
.iet-mercosur-card-icon {
    width: 46px !important;
    height: 46px !important;
    background-color: #e0e7ff !important; /* Fondo azul/morado sutil */
    color: #4f46e5 !important;            /* Icono interno */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.2rem !important;
    font-size: 1.25rem !important;
    transition: transform 0.3s ease;
}

.iet-mercosur-card:hover .iet-mercosur-card-icon {
    transform: scale(1.05);
}

/* Títulos internos de las Tarjetas */
.iet-mercosur-card h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    margin-top: 0 !important;
    margin-bottom: 0.8rem !important;
}

/* Párrafo descriptivo interno */
.iet-mercosur-card p {
    font-size: 0.9rem !important;
    color: var(--iet-text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Enlaces Inferiores ("Leer más →", "Ver detalles →", etc.) */
.iet-mercosur-card-link {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--iet-accent, #e5a93b) !important; /* Dorado institucional */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem;
    margin-top: auto !important; /* Empuja el enlace siempre abajo */
    transition: gap 0.2s ease;
}

.iet-mercosur-card-link:hover {
    gap: 0.6rem; /* Animación sutil en la flecha */
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media (max-width: 991px) {
    .iet-mercosur-grid .wp-block-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 781px) {
    .iet-mercosur-grid .wp-block-columns {
        grid-template-columns: 1fr !important;
    }
    .iet-mercosur-card {
        padding: 1.8rem !important;
    }
}





/* ==========================================================================
 * PRESENCIA INTERNACIONAL (REFERENCIA: imagen_3.jpg)
   ========================================================================== */

/* Contenedor general de la sección */
.iet-presencia-section {
    padding: var(--iet-section-pad, 4rem) 2rem;
    background-color: var(--iet-surface, #ffffff); /* Fondo blanco limpio */
}

/* Encabezado Dinámico (Título + Enlace Derecho) */
.iet-presencia-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 2rem;
    margin-bottom: 2.5rem !important;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.iet-presencia-header-text {
    max-width: 650px;
}

.iet-presencia-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
}

.iet-presencia-header p {
    font-size: 0.95rem !important;
    color: var(--iet-text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Enlace "Ver todo →" corregido a una sola línea */
.iet-presencia-link-all {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem;
    white-space: nowrap; /* Evita que se rompa en dos líneas */
    transition: color 0.2s ease, transform 0.2s ease;
    padding-bottom: 0.2rem;
}

.iet-presencia-link-all:hover {
    color: var(--iet-accent, #e5a93b) !important;
    transform: translateX(3px);
}

/* Grilla de Artículos (3 Columnas) */
.iet-presencia-grid .wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1140px;
    margin: 0 auto !important;
}

@media (min-width: 782px) {
    .iet-presencia-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ──────────────────────────────────────────
   TARJETAS MEJORADAS (ESTILO NOTICIAS PREMIUM)
   ────────────────────────────────────────── */
.iet-presencia-card {
    background: var(--iet-white, #ffffff) !important;
    border-radius: 10px !important;
    overflow: hidden !important; /* Mantiene la imagen recortada en los bordes superiores */
    box-shadow: 0 4px 20px rgba(0, 26, 77, 0.03) !important;
    border: 1px solid rgba(0, 26, 77, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.iet-presencia-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(0, 26, 77, 0.08) !important;
}

/* Imagen del artículo */
.iet-presencia-card img,
.iet-presencia-card .wp-block-image img {
    width: 100% !important;
    height: 200px !important; /* Altura controlada para simular proporción fotográfica */
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.iet-presencia-card:hover img {
    transform: scale(1.03) !important;
}

/* Cuerpo de textos interno */
.iet-presencia-body {
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Fila de Etiquetas (Tags) */
.iet-presencia-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-bottom: 0.8rem !important;
}

.iet-presencia-tag {
    background: #f1f5f9 !important; /* Gris suave de fondo */
    color: #475569 !important;       /* Slate text */
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 4px !important;
    line-height: 1 !important;
}

/* Títulos de los Artículos */
.iet-presencia-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--iet-primary, #001a4d) !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
}

/* Extracto o Resumen descriptivo */
.iet-presencia-card p {
    font-size: 0.88rem !important;
    color: var(--iet-text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Enlace inferior "Leer artículo →" */
.iet-presencia-link-read {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--iet-accent, #e5a93b) !important; /* Tu dorado corporativo */
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem;
    margin-top: auto !important; /* Lo empuja siempre de manera exacta al fondo */
    transition: gap 0.2s ease;
}

.iet-presencia-link-read:hover {
    gap: 0.5rem;
}

/* ──────────────────────────────────────────
   RESPONSIVE (Adaptabilidad Móvil)
   ────────────────────────────────────────── */
@media (max-width: 991px) {
    .iet-presencia-grid .wp-block-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 781px) {
    .iet-presencia-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    .iet-presencia-grid .wp-block-columns {
        grid-template-columns: 1fr !important;
    }
    .iet-presencia-body {
        padding: 1.25rem !important;
    }
}