/*
 Theme Name: TECNOMODULAR
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Grupo LOGON
 Author URI: https://logon.es
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */


/* ============================================================
   CSS PERSONALIZADO — instalaciondemamparas.com
   Pegar en: Divi > Theme Options > General > Custom CSS
   Versión: 1.0 | Cliente: Tecno-Modular
   ============================================================ */

/* ----------------------------------------------------------
   VARIABLES Y TIPOGRAFÍA BASE
   ---------------------------------------------------------- */

:root {
  --tm-azul:       #1a3a5c;
  --tm-azul-claro: #a8c8e8;
  --tm-fondo:      #f4f7fa;
  --tm-texto:      #333333;
  --tm-gris:       #666666;
  --tm-blanco:     #ffffff;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--tm-texto);
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------
   CABECERA — borde inferior sutil al hacer scroll
   ---------------------------------------------------------- */

/* Línea de acento azul en la parte inferior del header */
.et-fixed-header {
  border-bottom: 3px solid var(--tm-azul) !important;
}

/* Logo responsive: altura máxima en móvil */
@media (max-width: 767px) {
  #main-header .et-pb-menu__logo img,
  .et_pb_menu .et-pb-menu__logo img {
    max-height: 44px !important;
  }
}

/* ----------------------------------------------------------
   MENÚ DE NAVEGACIÓN
   ---------------------------------------------------------- */

/* Elemento activo del menú */
#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a {
  color: var(--tm-azul) !important;
  border-bottom: 2px solid var(--tm-azul);
  padding-bottom: 2px;
}

/* Hover en menú mobile */
#et_mobile_nav_menu .mobile_nav .et_mobile_menu li a:hover {
  color: var(--tm-azul-claro) !important;
}

/* ----------------------------------------------------------
   SECCIÓN HERO — ajuste de overlay y min-height
   ---------------------------------------------------------- */

/* Capa semi-transparente sobre la imagen del hero */
.et_pb_section[data-et-admin-label="SECCIÓN 1 — Hero"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(13, 37, 64, 0.72) 0%,
    rgba(26, 58, 92, 0.45) 100%
  );
  z-index: 0;
}

.et_pb_section[data-et-admin-label="SECCIÓN 1 — Hero"] .et_pb_row {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   CARDS DE PRODUCTO (sección 4)
   ---------------------------------------------------------- */

/* Efecto hover en las cards de tipos de mampara */
.et_pb_section .et_pb_image_wrap img {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.et_pb_section .et_pb_image_wrap:hover img {
  transform: scale(1.025);
  box-shadow: 0 8px 28px rgba(26, 58, 92, 0.18);
}

/* ----------------------------------------------------------
   BLOBS DE CERTIFICACIÓN — badges (sección 6)
   ---------------------------------------------------------- */

.cert-badge {
  display: inline-block;
  background: var(--tm-blanco);
  color: var(--tm-azul);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 16px 12px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cert-badge:hover {
  box-shadow: 0 4px 20px rgba(26,58,92,0.16);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   BOTONES GLOBALES
   ---------------------------------------------------------- */

/* Transición suave en todos los botones Divi */
.et_pb_button {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.2s ease !important;
}

.et_pb_button:hover {
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

/* Links del footer: underline al hover */
.et_pb_footer_tabbed_page a:hover,
footer a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(168, 200, 232, 0.5);
}

/* Separador visual entre columnas del footer en tablet */
@media (max-width: 980px) {
  footer .et_pb_column {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 24px !important;
    margin-bottom: 8px !important;
  }
  footer .et_pb_column:last-child {
    border-bottom: none;
  }
}

/* ----------------------------------------------------------
   ACCESIBILIDAD — contraste y foco
   ---------------------------------------------------------- */

/* Foco visible para navegación por teclado (WCAG 2.1 AA) */
a:focus,
button:focus,
.et_pb_button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--tm-azul) !important;
  outline-offset: 3px !important;
}

/* Skip-to-content link (accesibilidad) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 16px;
  z-index: 99999;
  background: var(--tm-azul);
  color: var(--tm-blanco) !important;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------
   RESPONSIVE — ajustes móvil
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  /* Reducir padding en secciones en móvil */
  .et_pb_section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Hero: asegurar altura mínima en móvil */
  .et_pb_section[data-et-admin-label="SECCIÓN 1 — Hero"] {
    min-height: 400px !important;
  }

  /* Cards en grid de 1 columna en móvil ya las gestiona Divi,
     pero forzamos ancho completo en imágenes */
  .et_pb_column .et_pb_image {
    width: 100% !important;
  }

  /* Certificaciones: 2 por fila en móvil */
  .et_pb_section .et_pb_row_6 .et_pb_column {
    width: 50% !important;
    float: left !important;
    margin-bottom: 12px !important;
  }
}

/* ----------------------------------------------------------
   PÁGINA EN BLANCO (Home usa plantilla sin sidebar)
   ---------------------------------------------------------- */

/* Elimina padding superior que Divi añade cuando no hay header de WP */
.et_pb_pagebuilder_layout.et_full_width_page #page-container {
  padding-top: 0 !important;
}

/* ============================================================
   FIN DEL CSS PERSONALIZADO
   ============================================================ */
   
   
   /* Displays titles above the fields */
.et_pb_contact_form_label {
    display: block;
    font-family: 'Playfair Display';
    color: #000000;
    font-size: 15pt;
    font-style: italic;
    margin-bottom: 15px;
}
 
/* Hides placeholder text */
.et_pb_contact_form_container .input::placeholder {
    color: transparent;
}
 
/* Hides duplicate titles on checkboxes and radios */
.et_pb_contact_field_options_title {
    display: none;
}
 
 
/* Remove title above dropdown */
.et_pb_contact_field[data-type=select] .et_pb_contact_form_label {
    display: none;
}