/*
Theme Name:   Panaseg Modern (Enfold Child)
Theme URI:    https://www.panaseg.net
Description:  Child theme de Enfold para panaseg.net. Modernización visual (tipografía, color, layout, tarjetas de producto, formularios) manteniendo la estructura, textos e imágenes actuales del sitio. 100% responsive.
Author:       Nubeek
Template:     enfold
Version:      1.0.0
Text Domain:  panaseg-modern
*/

/* =========================================================================
   1. TOKENS DE DISEÑO
   Basados en la marca real de Panaseg (logo PANA en negro + SEG en rojo,
   "PANAMERICANA DE SEGURIDAD"). Ajusta los valores de color aquí si el
   rojo/negro exactos de tu logo difieren un poco de estos.
   ========================================================================= */
:root{
  /* Color */
  --pnsg-red:        #C8102E;   /* rojo de marca (acento principal) */
  --pnsg-red-dark:   #9E0B23;   /* hover / estados activos */
  --pnsg-ink:        #17191C;   /* negro cálido para texto y fondos oscuros */
  --pnsg-ink-soft:   #4A4F57;   /* texto secundario */
  --pnsg-bg:         #F6F6F7;   /* fondo de secciones alternas */
  --pnsg-surface:    #FFFFFF;   /* tarjetas / superficies */
  --pnsg-border:     #E4E5E8;
  --pnsg-ok:         #1E8E5A;   /* uso puntual: disponibilidad / garantía */

  /* Tipografía */
  --pnsg-font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --pnsg-font-body:     'Source Sans 3', -apple-system, Segoe UI, Arial, sans-serif;
  --pnsg-font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --pnsg-radius:  10px;
  --pnsg-shadow:  0 12px 30px -16px rgba(23,25,28,.25);
  --pnsg-gutter:  clamp(20px, 5vw, 60px);
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* =========================================================================
   2. BASE — tipografía y color general
   ========================================================================= */
body,
#top{
  font-family: var(--pnsg-font-body);
  color: var(--pnsg-ink);
  background: var(--pnsg-surface);
}

#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
.av-special-heading-tag{
  font-family: var(--pnsg-font-display);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--pnsg-ink);
  text-wrap: balance;
}

#top a{ color: var(--pnsg-red); }
#top a:hover{ color: var(--pnsg-red-dark); }

/* Selección de texto con el color de marca */
::selection{ background: var(--pnsg-red); color:#fff; }

/* =========================================================================
   3. CABECERA — más limpia, con sombra sólo al hacer scroll
   ========================================================================= */
#header{
  border-bottom: 1px solid var(--pnsg-border);
  background: var(--pnsg-surface) !important;
}
#header.av_scroll_header_sticky_shadow,
#header.header-scrolled{
  box-shadow: var(--pnsg-shadow);
}
#header_main{ padding-top: 4px; padding-bottom: 4px; }

#top #main_menu ul li a{
  font-family: var(--pnsg-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#top #main_menu ul li.current-menu-item > a,
#top #main_menu ul li a:hover{
  color: var(--pnsg-red);
}
/* Subrayado animado bajo el ítem activo/hover, sutil y moderno */
#top #main_menu ul:not(.sub-menu) > li > a{ position:relative; }
#top #main_menu ul:not(.sub-menu) > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:6px; height:2px;
  background:var(--pnsg-red); transition:right .18s ease;
}
#top #main_menu ul:not(.sub-menu) > li:hover > a::after,
#top #main_menu ul:not(.sub-menu) > li.current-menu-item > a::after{ right:0; }

/* Botón destacado opcional en el menú (añade la clase "pnsg-nav-cta" al
   ítem de menú "Contacto" desde Apariencia > Menús > casillas de pantalla) */
#top #main_menu li.pnsg-nav-cta > a{
  background: var(--pnsg-red); color:#fff !important; padding:10px 18px !important;
  border-radius: 6px;
}
#top #main_menu li.pnsg-nav-cta > a::after{ display:none; }

/* =========================================================================
   4. CLASES DE UTILIDAD PARA EL CONSTRUCTOR (Advanced Layout Editor)
   Aplica estas clases en el campo "Element CSS Class" (pestaña Advanced)
   de cada sección/color-section/columna en el editor de Enfold. Es la
   forma más fiable de que el estilo llegue exactamente a donde quieres,
   sin depender de la versión interna de marcado de Enfold.
   ========================================================================= */

/* --- pnsg-hero: sección de cabecera de página (Inicio, Servicios...) --- */
.av_section.pnsg-hero{
  position: relative;
}
.av_section.pnsg-hero .container{
  padding-block: clamp(48px, 8vw, 96px);
}
.av_section.pnsg-hero .av-special-heading-tag{
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.05;
}
.av_section.pnsg-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(23,25,28,.04), transparent 60%);
}

/* --- pnsg-eyebrow: rótulo corto encima de un título (p.ej. "DISTRIBUIDOR AUTORIZADO") --- */
.pnsg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--pnsg-font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pnsg-red);
  margin-bottom:12px;
}
.pnsg-eyebrow::before{ content:""; width:16px; height:2px; background:var(--pnsg-red); }

/* --- pnsg-card: convierte una color-section o columna en tarjeta moderna --- */
.pnsg-card{
  background: var(--pnsg-surface);
  border: 1px solid var(--pnsg-border);
  border-radius: var(--pnsg-radius);
  padding: 28px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pnsg-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--pnsg-shadow);
}
.pnsg-card .av-icon_box-icon{ color: var(--pnsg-red); }

/* --- pnsg-band: franja oscura para CTAs o cifras de confianza --- */
.pnsg-band{ background: var(--pnsg-ink) !important; color:#fff; }
.pnsg-band h1, .pnsg-band h2, .pnsg-band h3, .pnsg-band p{ color:#fff; }
.pnsg-band .av-special-heading-tag{ color:#fff; }

/* --- pnsg-stat: número grande de confianza (años, marcas, clientes) --- */
.pnsg-stat .av-special-heading-tag{
  font-size: clamp(28px, 4vw, 44px); color: var(--pnsg-red);
}
.pnsg-band .pnsg-stat .av-special-heading-tag{ color:#fff; }

/* --- pnsg-mono: para nombres de referencia/modelo de producto --- */
.pnsg-mono{ font-family: var(--pnsg-font-mono); font-size: 13px; letter-spacing:.02em; }

/* =========================================================================
   5. BOTONES
   ========================================================================= */
#top .avia-button,
#top .avia_button{
  font-family: var(--pnsg-font-display);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 6px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
#top .avia-button:hover{ transform: translateY(-1px); box-shadow: var(--pnsg-shadow); }
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-custom{
  background: var(--pnsg-red) !important;
  border-color: var(--pnsg-red) !important;
}
#top .avia-button.avia-color-theme-color:hover,
#top .avia-button.avia-color-custom:hover{
  background: var(--pnsg-red-dark) !important;
  border-color: var(--pnsg-red-dark) !important;
}

/* =========================================================================
   6. GRID DE PRODUCTOS / PORTFOLIO (categoría de producto, marcas)
   ========================================================================= */
#top .isotope_wrap .portfolio-entry,
#top .grid-image-container{
  border-radius: var(--pnsg-radius);
  overflow: hidden;
  transition: transform .2s ease;
}
#top .isotope_wrap .portfolio-entry:hover{
  transform: translateY(-4px);
}
#top .grid-sort-container li a{
  font-family: var(--pnsg-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 13.5px;
}
#top .grid-sort-container li a.active-category,
#top .grid-sort-container li a:hover{
  color: var(--pnsg-red);
}
#top .isotope_wrap .slide-entry-title{
  font-family: var(--pnsg-font-mono);
  font-size: 13px;
  letter-spacing: .01em;
}

/* =========================================================================
   7. FORMULARIOS (Contacto, Club de Instaladores, Inscripción a cursos)
   ========================================================================= */
#top input[type="text"],
#top input[type="email"],
#top input[type="tel"],
#top textarea,
#top select{
  border: 1px solid var(--pnsg-border) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  font-family: var(--pnsg-font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#top input[type="text"]:focus,
#top input[type="email"]:focus,
#top textarea:focus{
  border-color: var(--pnsg-red) !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.12);
  outline: none;
}
#top .wpcf7-submit,
#top input[type="submit"]{
  background: var(--pnsg-red) !important;
  color:#fff !important;
  border:none !important;
  border-radius:6px !important;
  font-family: var(--pnsg-font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding: 13px 22px !important;
}
#top .wpcf7-submit:hover,
#top input[type="submit"]:hover{ background: var(--pnsg-red-dark) !important; }

/* =========================================================================
   8. CALENDARIO DE CURSOS (Events Calendar) — limpieza visual
   ========================================================================= */
#top .tribe-events-calendar th{
  background: var(--pnsg-ink); color:#fff;
  font-family: var(--pnsg-font-display); text-transform:uppercase; font-size:12.5px;
}
#top .tribe-events-calendar td.tribe-events-present{
  outline: 2px solid var(--pnsg-red);
}

/* =========================================================================
   9. FOOTER
   ========================================================================= */
#footer, #socket{
  background: var(--pnsg-ink) !important;
  color: #C8CBD1;
}
#footer .widgettitle{
  font-family: var(--pnsg-font-display);
  color:#fff; text-transform:uppercase; letter-spacing:.04em; font-size:15px;
}
#footer a{ color:#C8CBD1; }
#footer a:hover{ color: var(--pnsg-red); }
#socket a{ color: var(--pnsg-red); }

/* =========================================================================
   10. RESPONSIVE — refuerzos para móvil (<768px) y muy pequeño (<480px)
   ========================================================================= */
@media only screen and (max-width: 767px){
  .av_section.pnsg-hero .container{ padding-block: 40px; }
  .av_section.pnsg-hero .av-special-heading-tag{ font-size: 30px; }
  #top .isotope_wrap .column-content-mask,
  #top .grid-image-info{ padding: 14px !important; }
}
@media only screen and (max-width: 479px){
  #top .avia-button, #top .avia_button{ width:100%; text-align:center; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  #top .avia-button, #top .pnsg-card, #top .isotope_wrap .portfolio-entry{ transition:none; }
}

/* =========================================================================
   11. INTERACCIONES DE custom.js — revelado suave y botón "volver arriba"
   ========================================================================= */
.pnsg-fade-init{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.pnsg-fade-init.pnsg-in-view{ opacity:1; transform:none; }

.pnsg-back-to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--pnsg-ink); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: var(--pnsg-shadow);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.pnsg-back-to-top.pnsg-visible{ opacity:1; transform:none; pointer-events:auto; }
.pnsg-back-to-top:hover{ background: var(--pnsg-red); }