.elementor-kit-13{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Lato", Sans-serif;font-size:18px;line-height:1.45px;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ======================================================================
   SISTEMA CSS BASE – Estética Molecular
   ----------------------------------------------------------------------
   Propósito
   - Un set mínimo, consistente y escalable de utilidades para maquetar en Elementor Pro
   - Misma lógica para Header / Secciones / Footer con anchos y gutters coherentes

   Principios
   - Estructura recomendada por bloque:
       <div class="section [section-?]">         ← padding lateral + vertical
         <div class="section-narrow[-xs]">       ← ancho máximo y centrado
           <!-- contenido -->
         </div>
       </div>
   - No fijar “Max Width” en Elementor cuando uses section-narrow/-xs.
   - Evitar “Boxed” en el inner: el ancho máximo lo da esta hoja de estilos.

   Nomenclador clave
   - .section           → aplica el gutter lateral fluido (izq/der)
   - .section-s / -m / -l → padding vertical (arriba/abajo) escalable por contexto
   - .section-narrow    → ancho máximo ~contenidos (1140px)
   - .section-narrow-xs → ancho máximo reducido (720px)
   - .section-hero      → alto pantalla; .pull-up para solapar bajo header fijo
   - Header: .site-header + .section-narrow + .site-logo
   - Footer: .site-footer + .section-narrow.footer-wrap + 3 .footer-col

   ====================================================================== */


/* ========== 1) Variables globales ========== */
:root{
  /* Contenedores (anchos máx. centrados) */
  --container-narrow: 1140px;
  --container-narrow-xs: 720px;

  /* Header fijo (alto) */
  --header-height: 100px;

  /* Gutter lateral fluido (para .section) */
  --side-padding-min: 1.25rem; /* ~20px */
  --side-padding-max: 5rem;    /* ~80px */

  /* Ritmo vertical (padding arriba/abajo por tamaño de sección) */
  --section-s-padding-min: 2.5rem;   /* 40px */
  --section-s-padding-max: 3.125rem; /* 50px */
  --section-m-padding-min: 4rem;     /* 64px */
  --section-m-padding-max: 5rem;     /* 80px */
  --section-l-padding-min: 5.625rem; /* 90px */
  --section-l-padding-max: 6.25rem;  /* 100px */

}

/* ========== 2) Secciones / contenedores ========== */

/* Gutter lateral para cualquier bloque (izq/der) */
.section{
  padding-inline: clamp(var(--side-padding-min), 5vw, var(--side-padding-max));
}

/* Anchos máximos centrados: versión normal y XS */
.section-narrow,
.section-narrow-xs{
  width: 100%;
  margin-inline: auto;
}
.section-narrow{    max-width: var(--container-narrow); }
.section-narrow-xs{ max-width: var(--container-narrow-xs); }

/* Ritmo vertical (arriba/abajo). Usar UNA por sección. */
.section-s{
  padding-block: clamp(var(--section-s-padding-min), 2.5vw, var(--section-s-padding-max));
}
.section-m{
  padding-block: clamp(var(--section-m-padding-min), 1.5vw + 3rem, var(--section-m-padding-max));
}
.section-l{
  padding-block: clamp(var(--section-l-padding-min), 1vw + 5rem, var(--section-l-padding-max));
}

/* (Opcional) Full-bleed (ej. fondos a sangre): quita gutter lateral */
.section-full{ padding-inline: 0; width: 100%; }

/* ========== 3) Hero ========== */
.section-hero{
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Hero a pantalla completa sólo en desktop */
@media (min-width:1025px){
  .section-hero{ min-height:100vh; }
}

/* Hero a pantalla completa sólo en desktop */
@media (min-width:1025px){
  .section-hero-intern{ min-height:50vh; }
}

/* Solapar el hero bajo el header fijo transparente */
.section-hero.pull-up{ margin-top: calc(-1 * var(--header-height)); }

/* Anclas con offset del header */
html{ scroll-padding-top: var(--header-height); }


/* ========== 5) Header fijo y transparente ========== */
.site-header{
  position: fixed; inset: 0 auto auto 0; right: 0;
  z-index: 1000;
  background: transparent;
  box-shadow: none;
}
.site-header .section-narrow{
  height: var(--header-height);
  display:flex; align-items:center; justify-content:space-between;
}
.site-logo img{
  display:block; height:auto; width:auto;
  max-height: calc(var(--header-height) - 24px);
}

/* ========== 6) Footer coherente (mismo ancho visual que el header) ========== */
/* Estructura:
   <div class="section site-footer section-s">
     <div class="section-narrow footer-wrap">
       <div class="footer-col footer-left">…</div>
       <div class="footer-col footer-center">…</div>
       <div class="footer-col footer-right">…</div>
     </div>
   </div>
*/
.site-footer{
  position: relative; overflow: hidden;
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* Distribución base (desktop) */
.footer-wrap{
  display:flex; align-items:center; gap:24px;
  flex-wrap: nowrap;                 /* una sola fila por defecto */
  justify-content: space-between;
}
.footer-col{  flex: 0 1 auto; min-width: 0; } /* que puedan encoger sin romper */
.footer-left{  min-width: 320px; }
.footer-right{ min-width: 200px; display:flex; justify-content:flex-end; gap:12px; }
.footer-center{ flex: 1 1 auto; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }

/* Tipografía / links */
.site-footer a{ color:var(--footer-link); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.site-footer a:hover{ color:var(--footer-link-hover); border-color:var(--footer-link-hover); }
.footer-legal{ color:var(--footer-text-muted); text-align:center; font-size:var(--text-base); line-height:var(--lh-normal); }
.footer-logo img{ display:block; height:auto; width:auto; max-height:56px; }

/* ====== Footer responsive ====== */
/* Tablet + Mobile: “modo celular” (stack) hasta 1200px */
@media (max-width:1200px){
  .footer-wrap{
    flex-wrap: wrap;
    justify-content: center; text-align: center;
    row-gap:16px; column-gap:16px;
  }
  .footer-col{ flex: 0 0 100%; min-width:0; order: initial; }
  .footer-center{ order:1; }
  .footer-left{   order:2; }
  .footer-right{  order:3; justify-content:center; gap:16px; }
  .footer-logo img{ max-height:52px; }
}

/* ========== 7) Header height responsive ========== */
@media (max-width:1024px){ :root{ --header-height:88px; } }
@media (max-width:768px){  :root{ --header-height:80px; } }

/* ===== (Opcional) Aros decorativos del footer (descomentá si querés) =====
.site-footer::before,
.site-footer::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.site-footer::before{
  background: radial-gradient(740px 740px at 118% 50%, transparent 66%, var(--footer-arc) 66.8%, transparent 67.6%);
}
.site-footer::after{
  background: radial-gradient(520px 520px at 110% 50%, transparent 66%, var(--footer-arc) 66.8%, transparent 67.6%);
}
*/



/* ===========================
   Header: color y sombra al hacer scroll
=========================== */

/* Estado inicial (hero visible) */
.site-header{
  transition: background-color .3s ease, box-shadow .3s ease;
  background-color: transparent;
  box-shadow: none;
}

/* Estado al scrollear (clase agregada por JS) */
.site-header.scrolled{
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}


/* === Max width utilidades (compatibles con widgets de Elementor) === */

/* 600 */
.max-600,
.max-600 > .elementor-widget-container,
.elementor-element.max-600 > .elementor-widget-container{
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 700 */
.max-700,
.max-700 > .elementor-widget-container,
.elementor-element.max-700 > .elementor-widget-container{
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 800 */
.max-800,
.max-800 > .elementor-widget-container,
.elementor-element.max-800 > .elementor-widget-container{
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 900 */
.max-900,
.max-900 > .elementor-widget-container,
.elementor-element.max-900 > .elementor-widget-container{
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}/* End custom CSS */