/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/
/* =========================
   RDN — Logo + Menú por resolución
   ========================= */

/* Importante: en Porto Theme Options, dejá vacíos los "Logo Max Width" */

/* 4K y ultrawide (≥1921px): logo grande nativo */
@media (min-width:1921px){
  #header .logo img {
    max-width: 800px !important;
    max-height: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* FHD (1367px–1920px): 600×75, menú cómodo */
@media (max-width:1920px) and (min-width:1367px){
  #header .logo img {
    max-width: 600px !important;
    max-height: 75px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Menú más grande en FHD */
  #header #elementor-element-2fd2f66 #menu-main-menu-nuevo > li > a,
  #header .custom-menu .main-menu > li.menu-item > a,
  #header .main-menu > li > a {
    font-size: 20px !important;   /* 15 compacto | 16 equilibrado | 18 grande | 20 muy grande */
    padding: 0 20px !important;   /* 14 compacto | 16 equilibrado | 18 grande | 20 muy grande */
    line-height: 1.3 !important;  /* 1.22 compacto | 1.25 equilibrado | 1.28 grande | 1.3 muy grande */
    white-space: nowrap !important;
  }
}

/* WXGA y menores (≤1366px): 420×64 + menú compacto */
@media (max-width:1366px){
  #header .logo img {
    max-width: 420px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
  }

  #header #elementor-element-2fd2f66 #menu-main-menu-nuevo > li > a,
  #header .custom-menu .main-menu > li.menu-item > a,
  #header .main-menu > li > a {
    font-size: 14px !important;   /* 13.2 actual | 14 leve aumento | 15 medio | 16 grande */
    padding: 0 9px !important;    /* 8 actual | 9 leve aumento | 10 medio | 11 grande */
    line-height: 1.22 !important; /* 1.2 actual | 1.22 leve aumento | 1.25 medio | 1.28 grande */
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  #header #elementor-element-2fd2f66 #menu-main-menu-nuevo { gap: 0 !important; column-gap: 0 !important; }
  #header #elementor-element-2fd2f66 { transform: scale(0.94) !important; transform-origin: left center !important; }
  #header .header-main.e-con-full { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ===== Estilo línea menú como en el demo de Porto ===== */
/* Base: sin línea */
#header .custom-menu .main-menu > li.menu-item > a {
  border-top: none !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 6px !important;
}

/* Hover: línea abajo en TODOS */
#header .custom-menu .main-menu > li.menu-item:hover > a {
  border-bottom: 2px solid currentColor !important;
}

/* Activo: línea fija en la página actual, excepto "Contacto" */
#header .custom-menu .main-menu > li.menu-item.current-menu-item:not(#nav-menu-item-6736) > a {
  border-bottom: 2px solid currentColor !important;
}

/* ===== Contacto: matar la raya fija (border o pseudo) y dejar solo hover ===== */
#header .custom-menu .main-menu > li#nav-menu-item-6736 > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative;
}
#header .custom-menu .main-menu > li#nav-menu-item-6736 > a::before,
#header .custom-menu .main-menu > li#nav-menu-item-6736 > a::after {
  content: none !important;
  display: none !important;
}
#header .custom-menu .main-menu > li#nav-menu-item-6736:hover > a {
  border-bottom: 2px solid currentColor !important;
}


/* RDN — Logo móvil: tope 320px (y un poco menos en sticky) */
@media (max-width: 575px) {
  #header .logo img {
    max-width: 320px !important;
    height: auto !important;
  }
  #header .header-main.sticky .logo img {
    max-width: 300px !important;
  }
}

/* Fancy fijo: el slot no empuja nada */
.rdn-fancy .elementor-headline,
.rdn-fancy .porto-fancy-text { display: inline-flex; align-items: baseline; }
.rdn-fancy .elementor-headline-dynamic-wrapper,
.rdn-fancy .porto-fancy-text-wrapper {
  display: inline-block;
  overflow: hidden;           /* oculta el texto que rota fuera del slot */
  vertical-align: baseline;
}


/* === Ticker de marcas (solo velocidad, sin tocar layout) === */
/* === Ticker de marcas (mantener layout Porto + ajustar velocidad) === */
.brand-ticker [class*="marquee"] {
  animation-duration: 110s !important;  /* desktop */
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  white-space: nowrap;
}

/* móviles */
@media (max-width: 767px) {
  .brand-ticker [class*="marquee"] {
    animation-duration: 200s !important;
  }
}

/* móviles chicos */
@media (max-width: 480px) {
  .brand-ticker [class*="marquee"] {
    animation-duration: 230s !important;
  }
}



/* ===== Base (igual) ===== */
.hero-flag{
  --celeste-top:#9edcff; --celeste-mid:#c8ecff; --blanco:#fff; --dorado:#FFD100;
  --sol-x:50%; --sol-y:50%;
  --r1:0%; --r2:8%; --r3:14%; --r4:20%; --r5:28%;
  --sol-a1:0.85; --sol-a2:0.28; --sol-a3:0.14; --sol-a4:0.05;
  --white-start:29%; --white-end:65%;
  background:
    radial-gradient(circle at var(--sol-x) var(--sol-y),
      rgba(255,209,0,var(--sol-a1)) var(--r1),
      rgba(255,209,0,var(--sol-a2)) var(--r2),
      rgba(255,209,0,var(--sol-a3)) var(--r3),
      rgba(255,209,0,var(--sol-a4)) var(--r4),
      rgba(255,209,0,0)             var(--r5)
    ),
    linear-gradient(to bottom,
      var(--celeste-top) 0%,
      var(--celeste-mid) calc(var(--white-start) - 14%),
      var(--blanco)      var(--white-start),
      var(--blanco)      var(--white-end),
      var(--celeste-mid) calc(var(--white-end) + 14%),
      var(--celeste-top) 100%
    ) !important;
  background-repeat:no-repeat,no-repeat;
  background-size:100% 100%,100% 100%;
  background-position:center,center;
}
.hero-flag > .elementor-background-overlay{ background:none!important; opacity:0!important; }

/* ===== MOBILE FORZADO (+45% tamaño aprox. e igual intensidad) ===== */
/* WordPress suele usar 767/782. Cubro ambos + tablet chica */
@media (max-width: 1024px){
  .elementor .elementor-section.hero-flag,
  .elementor .hero-flag.hero-flag{
    /* subo un toque el sol y lo agrando fuerte para que se note */
    --sol-y: 50%;
    --r2: 11.6%;  /* 8%  → +45% */
    --r3: 20.3%;  /* 14% → +45% */
    --r4: 29%;    /* 20% → +45% */
    --r5: 40.6%;  /* 28% → +45% */

    /* misma intensidad que desktop */
    --sol-a1: 0.85; --sol-a2: 0.28; --sol-a3: 0.14; --sol-a4: 0.05;

    /* reescribo el background para asegurarnos el override */
    background:
      radial-gradient(circle at var(--sol-x) var(--sol-y),
        rgba(255,209,0,var(--sol-a1)) var(--r1),
        rgba(255,209,0,var(--sol-a2)) var(--r2),
        rgba(255,209,0,var(--sol-a3)) var(--r3),
        rgba(255,209,0,var(--sol-a4)) var(--r4),
        rgba(255,209,0,0)             var(--r5)
      ),
      linear-gradient(to bottom,
        var(--celeste-top) 0%,
        var(--celeste-mid) calc(var(--white-start) - 14%),
        var(--blanco)      var(--white-start),
        var(--blanco)      var(--white-end),
        var(--celeste-mid) calc(var(--white-end) + 14%),
        var(--celeste-top) 100%
      ) !important;
    background-size:100% 100%,100% 100% !important;
  }
}

/* Por si tu “Mobile” en Elementor es 767px */
@media (max-width: 767.98px){
  .elementor .elementor-section.hero-flag,
  .elementor .hero-flag.hero-flag{
    --r2: 11.6%; --r3: 20.3%; --r4: 29%; --r5: 40.6%;
  }
}

/* Notebook debajo del bloque de marcas (en layouts flex) */
@media (max-width: 1024px){
  .notebook-hero{ order:2; margin-top:20px; }
}


.hero-wrap {
  min-height: 800px; /* alto fijo para la prueba */
  position: relative;
  overflow: hidden;
}

/* ===== Contenedor hero-stage (reservado para futuros objetos) ===== */
.hero-stage {
  position: relative; /* marco para posicionar elementos absolutos si se usan */
}

.grecaptcha-badge {
  visibility: hidden;
}

/* Caja del formulario */
#contacto-form{
  --primary: var(--porto-primary-color, #0073e6);
  --text:#111; --muted:#666;
  max-width:950px; margin:40px auto; padding:30px;
  background:rgba(255,255,255,.95);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.15);
}
#contacto-form h2{margin:0 0 22px; text-align:center; font-size:28px; font-weight:700}

/* Campos: blancos, redondeados, texto negro */
#contacto-form input[type="text"],
#contacto-form input[type="email"],
#contacto-form input[type="tel"],
#contacto-form textarea{
  width:100% !important;
  padding:12px 14px !important;
  border:1px solid #ccc !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--text) !important;
  font-size:15px !important;
  margin-bottom:18px !important;
  box-shadow:0 2px 5px rgba(0,0,0,.06) !important;
}
#contacto-form textarea{min-height:120px !important}

/* Teléfono con banderita (intl-tel-input del plugin) */
#contacto-form .iti{
  width:100% !important;
  position: relative !important;
}
#contacto-form .iti__flag-container{
  position: absolute !important;
  left: 8px;
  top: 0;
  bottom: 0;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  z-index: 2;
}
#contacto-form .iti__selected-flag {
  padding: 0 !important;
  background: transparent !important;
}
#contacto-form .iti__dial-code {
  margin-left: 6px;
  color: var(--text) !important;
}
#contacto-form .iti__tel-input{
  width:100% !important;
  background:#fff !important;
  border:0 !important; 
  box-shadow:none !important;
  padding:12px 14px 12px 82px !important; /* espacio extra para bandera y código */
  color:var(--text) !important;
}

/* Placeholders visibles */
#contacto-form ::placeholder{color:var(--muted) !important; opacity:1}

/* Focus */
#contacto-form input:not([type="submit"]):focus,
#contacto-form textarea:focus,
#contacto-form .iti__tel-input:focus{
  outline:none !important;
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(0,115,230,.15) !important;
}

/* Checkbox + texto en la misma línea */
#contacto-form .wpcf7-acceptance,
#contacto-form .wpcf7-list-item,
#contacto-form .wpcf7-list-item label{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:14px !important; margin:8px 0 18px !important;
}

/* Botón AZUL */
#contacto-form input[type="submit"]{
  width:100% !important; padding:14px !important;
  background:var(--primary) !important;
  border:none !important; border-radius:10px !important;
  color:#fff !important; font-size:16px !important; font-weight:700 !important;
  cursor:pointer !important; transition:background .25s ease !important;
}
#contacto-form input[type="submit"]:hover{background:#006bb3 !important}

/* Errores CF7 (campo + mensaje + aviso general) */
#contacto-form .wpcf7-not-valid{
  border-color:#e53935 !important;
  box-shadow:0 0 0 3px rgba(229,57,53,.12) !important;
}
#contacto-form .wpcf7-not-valid-tip{
  color:#c62828 !important; font-size:12px !important; margin-top:6px !important;
}
#contacto-form .wpcf7-response-output{
  border-radius:8px !important; font-size:14px !important;
  padding:10px !important; margin:0 0 12px !important;
}
/* Éxito: forzar texto negro (cubre skins/clases de CF7) */
#contacto-form .wpcf7 form.sent .wpcf7-response-output,
#contacto-form .wpcf7-response-output.wpcf7-mail-sent-ok,
#contacto-form .wpcf7 .wpcf7-response-output {
  color:#000 !important;
  background:#e8f5e9 !important;
  border:1px solid #4caf50 !important;
}
#contacto-form .wpcf7 form.invalid .wpcf7-response-output,
#contacto-form .wpcf7 form.failed .wpcf7-response-output{
  background:#ffebee !important; border:1px solid #f44336 !important; color:#c62828 !important;
}

/* Responsive */
@media (max-width:767px){
  #contacto-form{
    margin:15px;
    padding:20px;
    max-width:95% !important; /* ocupa casi todo el ancho en móviles */
  }
  #contacto-form .iti__tel-input {
    padding-left: 78px !important;
  }
}

/* --- Ocultar bandera/código del plugin (usa flag-container) SOLO en #contacto-form --- */
#contacto-form .flag-container,
#contacto-form .flag-container * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Volver el input de teléfono a padding normal y 100% de ancho */
#contacto-form input[name="phonetext-559"] {
  width: 100% !important;
  padding-left: 14px !important;  /* sin hueco de bandera */
  text-indent: 0 !important;
}

/* Forzar texto negro en el mensaje de éxito de CF7 */
#contacto-form .wpcf7-response-output {
  color: #000 !important; /* texto negro */
  background: #e8f5e9 !important; /* verde claro éxito */
  border: 1px solid #4caf50 !important;
}


.akismet-fields-container{ display:none !important; }