.elementor-kit-6{--e-global-color-primary:#FA4100;--e-global-color-secondary:#101010;--e-global-color-text:#6E6E6E;--e-global-color-accent:#FA4100;--e-global-color-an_naranja_cl:#FF7F3F;--e-global-color-an_naranja_os:#B8480C;--e-global-color-an_negro:#101010;--e-global-color-an_tinta:#111111;--e-global-color-an_hueso:#FAFAFA;--e-global-color-an_gris_cl:#9B9B9B;--e-global-color-an_gris:#6E6E6E;--e-global-color-an_gris_os:#4A4A4A;--e-global-color-an_fondo:#F4F4F4;--e-global-color-an_fondo2:#F2F2F2;--e-global-color-an_borde:#E2E2E2;--e-global-color-an_blanco:#FFFFFF;--e-global-color-6f76df1:#000000;--e-global-color-cc6c290:#C3C3C3;--e-global-color-d44ada5:#B8B8B8;--e-global-typography-primary-font-family:"Barlow Condensed";--e-global-typography-primary-font-size:64px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-font-style:italic;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"IBM Plex Mono";--e-global-typography-secondary-font-size:11px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.4em;--e-global-typography-secondary-letter-spacing:1.8px;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:1.2px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#FA4100;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}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 *//* ================= Austral Nautica · CSS del Kit =================
   Solo lo que Elementor no expone como control. Se engancha por _element_id
   (las _css_classes no se renderizan en contenedores) y se agrupa con :is()
   para ganarle al CSS por-elemento de Elementor.                          */

/* ---- hero: corte diagonal + gradiente de 3 paradas + reticula ----
   El control de gradiente de Elementor solo admite DOS paradas, y su div
   .elementor-background-overlay no se renderiza a menos que el overlay este
   completo en los settings. Ambas capas van como pseudo-elementos. */
#an-hero{
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 46px));
}
#an-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(100deg,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.25) 100%);
}
#an-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px);
  background-size: 72px 72px, 72px 72px;
}
#an-hero > .e-con-inner,
#an-hero > .elementor-element{ position: relative; z-index: 1; }

/* ---- botones: esquina inferior derecha recortada ---- */
:is(#an-btn-hero-1,#an-btn-hero-2,#an-btn-promo,#an-btn-taller,#an-btn-cotizar){
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
:is(#an-btn-hero-1,#an-btn-promo,#an-btn-taller,#an-btn-cotizar):hover{
  background-color: #B8480C !important;
}
#an-btn-hero-2:hover{
  background-color: rgba(250,250,250,.12) !important;
  border-color: rgba(250,250,250,.55) !important;
}

/* ---- barra de navegacion pegada arriba ---- */
:is(#an-topbar,#an-nav){ clip-path: none; }
#an-nav{
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ---- velo del hero: gradiente de 3 paradas + reticula ----
   Un ::before sobre el contenedor NO pinta (Elementor lo vuelve flex item),
   por eso el velo es un contenedor real posicionado sobre la foto. */
#an-hero-velo{
  position: absolute !important;
  inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.25) 100%),
    linear-gradient(rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px);
  background-size: auto, 72px 72px, 72px 72px;
  background-repeat: no-repeat, repeat, repeat;
}
#an-hero-velo{ z-index: 0 !important; }
#an-hero > .elementor-element:not(#an-hero-velo){ position: relative; z-index: 2; }


/* ---- tarjetas de equipamiento: velo inferior para que lea el rotulo ---- */
:is(#an-equipo-1,#an-equipo-2,#an-equipo-3,#an-equipo-4,#an-equipo-5){
  position: relative; overflow: hidden;
  background-size: cover !important;
  background-position: center center !important;
}
:is(#an-equipo-1,#an-equipo-2,#an-equipo-3,#an-equipo-4,#an-equipo-5) > .elementor-element{
  position: relative; z-index: 1;
}


/* ---- simbolo de peso en los precios de las tarjetas ----
   El dynamic tag post-custom-field devuelve el meta en crudo ("2.999.900") y no
   admite prefijo. El simbolo va por CSS para no tocar los datos del cliente. */
/* solo motores: los precios de embarcaciones ya vienen con "USD" en el dato */
:is(#an-precio,#an-precio-antes) .elementor-heading-title::before{
  content: "$";
}
:is(#an-precio-antes,#an-emb-precio-antes) .elementor-heading-title{
  text-decoration: line-through;
}


/* ---- formulario de cotizacion: alto de campo del diseño ----
   El control `input_size` del widget form no cambia nada (probado sm/md);
   el input queda en 40px y el diseño lo tiene en 34, lo que suma 40px al
   bloque entero. */
[id^="an-cotizar"] .elementor-field-textual{
  min-height: 34px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
[id^="an-cotizar"] textarea.elementor-field-textual{
  min-height: 70px !important;
}


/* ---- velo de los heros interiores (mismo tratamiento que el del home) ---- */
:is(#an-hero-serv,#an-hero-emb){ position: relative; }
:is(#an-hero-serv-velo,#an-hero-emb-velo){
  position: absolute !important; inset: 0; pointer-events: none;
  z-index: 0 !important;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.42) 100%),
    linear-gradient(rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px),
    linear-gradient(90deg, rgba(250,250,250,.05) 1px, rgba(0,0,0,0) 1px);
  background-size: auto, 72px 72px, 72px 72px;
  background-repeat: no-repeat, repeat, repeat;
}
#an-hero-serv > .elementor-element:not(#an-hero-serv-velo),
#an-hero-emb  > .elementor-element:not(#an-hero-emb-velo){ position: relative; z-index: 2; }

/* botones del hero de servicio: mismo chaflan que el resto */
:is(#an-btn-serv-1,#an-btn-serv-2,#an-btn-salmonera){
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
  transition: background-color .25s ease, border-color .25s ease;
}
:is(#an-btn-serv-1,#an-btn-salmonera):hover{ background-color: #B8480C !important; }
#an-btn-serv-2:hover{
  background-color: rgba(250,250,250,.12) !important;
  border-color: rgba(250,250,250,.55) !important;
}


/* ================= MOVIL (<= 767px) =================
   El diseño movil NO apila los grids: los convierte en carruseles de scroll
   horizontal con la tarjeta a ancho fijo. Apilarlos multiplica el alto de la
   pagina por tres (la seccion de equipamiento pasaba de 360 a 1663px).      */
@media (max-width: 767px){

  /* --- carruseles: el grid se vuelve una fila que desborda --- */
  :is(#an-equipo,#an-motores,#an-embarcaciones) .e-con[class*="e-con"] > .e-con-inner,
  #an-equipo .e-con-full:has(> .e-con),
  #an-motores .elementor-widget-loop-grid .elementor-grid,
  #an-embarcaciones .elementor-widget-loop-grid .elementor-grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 14px;
  }
  :is(#an-equipo,#an-motores,#an-embarcaciones) *::-webkit-scrollbar{ display: none; }

  /* anchos de tarjeta del diseño movil */
  #an-equipo .e-con-full > .e-con{
    flex: 0 0 190px !important; width: 190px !important;
    min-height: 250px !important; scroll-snap-align: start;
  }
  #an-motores .elementor-grid > *{
    flex: 0 0 314px !important; width: 314px !important; scroll-snap-align: start;
  }
  #an-embarcaciones .elementor-grid > *{
    flex: 0 0 314px !important; width: 314px !important; scroll-snap-align: start;
  }

  /* el carrusel sangra hasta el borde: el padding lo pone la fila */
  :is(#an-equipo,#an-motores) > .e-con-inner{ padding-left: 0 !important; padding-right: 0 !important; }

  /* --- topbar: solo el rotulo, los telefonos ya estan en el menu --- */
  #an-topbar .e-con-full{ display: none !important; }

  /* --- header movil: marca + hamburguesa en UNA fila de 65px ---
     OJO con el .elementor-kit-6: entre #an-nav y .e-con-inner hay un .e-con-boxed
     (el wrap del ancho). `#an-nav > .e-con-inner` no matchea nada. */
  #an-nav .e-con-inner{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    gap: 12px !important;
  }
  #an-nav .e-con-inner > .e-con{ padding: 0 !important; width: auto !important; }
  #an-nav .e-con-full{ flex-wrap: nowrap !important; }
  #an-btn-cotizar{ display: none !important; }          /* el CTA vive en el menu */
  #an-nav .elementor-widget-image img{ width: 35px !important; height: 34px !important; }
  #an-nav .elementor-heading-title{ white-space: nowrap; }
  /* el diseño movil no muestra el subtitulo de la marca */
  #an-nav .e-con-full .e-con-full .elementor-widget-heading:last-child{ display: none !important; }
  #an-nav .e-con-full .e-con-full .elementor-heading-title{ font-size: 23px !important; }

  /* --- topbar movil: solo el rotulo, a dos lineas de 15px --- */
  #an-topbar .elementor-heading-title{ font-size: 10px !important; line-height: 1.5 !important; }

  /* --- promo movil: tarjeta vertical, la imagen ARRIBA --- */
  #an-promo .e-con-full[class*="e-con"]{ flex-direction: column !important; }
  #an-promo-img{ order: -1; min-height: 170px !important; }
  #an-promo-txt{ padding: 22px 18px !important; }
  #an-promo-txt .e-con{ padding: 0 !important; }

  /* --- footer movil: logo 57x56 y wordmark 26px --- */
  #an-footer .elementor-widget-image img{ width: 57px !important; height: 56px !important; }

  /* --- hero mas bajo --- */
  #an-hero{ min-height: 580px !important; }

}


/* ---- barra CTA fija de movil (vive en el footer, sale en todas las paginas) ---- */
#an-cta-movil{ display: none !important; }
@media (max-width: 767px){
  #an-cta-movil{
    display: flex !important;
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 90;
  }
  #an-cta-movil .e-con-inner > .e-con,
  #an-cta-movil > .e-con{ width: 100% !important; }
  /* hueco al final para que la barra no tape el ultimo bloque */
  #an-footer{ padding-bottom: 100px !important; }
  :is(#an-cta-llamar,#an-cta-wsp){
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  }
}/* End custom CSS */