/*
Theme Name: Baianai
Template: hello-elementor
Version: 1.0.0
Description: Baianai is a child theme of Hello Elementor.
Author: baianai
Author URI: https://www.baianai.es/
Text Domain: baianai
*/

/* General */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2 !important;
}

.noseve {
	display: none;
}

.enlace a, a {
    color: var(--e-global-color-primary);
}

a:active, a:hover{
  color: #fff;
}

.enlace a:hover {
    color: var(--e-global-color-secondary);
}

.sinmar p {
    margin-block-end: 0rem;
}

/* Cookies */
.cky-audit-table-element h3 {
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;
    font-size: var( --e-global-typography-text-font-size );
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2 !important;
}

.resaltado{
    color: #ff680d;
}

#ul-hero ul{
  padding-left: 0;
  list-style: none;
  font-size: 1rem;     
  line-height: 1.4;
}

.elementor-widget-theme-site-logo a img{
  width: 120px;
  height: auto;
}

/* ============================================================
   ESTILOS GENERALES SERVICIO
   ============================================================ */

.stat-num {
    font-family: 'Lato', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #ff680d;
    line-height: 1;
    margin-bottom: 4px;
}
.stat-label {
    font-size: 13px;
    color: #9a9a9a;
    line-height: 1.4;
}

.steps-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .step-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
.step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #F46A00;
    color: #f5f4f2;
    font-family: 'lato', sans-serif;
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section-dark{
    font-size: 15px;
    color: #aaa;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 18px;
}

#section-dark strong {
  color:#f5f4f2;
}
h4.e-n-accordion-item-title-text{
  padding: 22px 0;
}
/* ============================================================
   CARRUSEL PIRAMIDAL DTCOM — v5.1 FINAL (cross-browser)
   ============================================================ */

.elementor-227 .elementor-element.elementor-element-de884a4 {
  --overlay-opacity: 1!important;  /* cambiar a 0.8, 0.9 o 1 */
}

/* 2. Ahora el gradiente solo en la parte inferior */
.carrusel-servicios .elementor-element-de884a4::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.10) 35%,
    transparent 60%
  );
  z-index: 1;
  pointer-events: none;
}

.elementor .carrusel-servicios {
  width: 100%;
 /* height: 800px; */
 /* min-height: 800px;*/
 /* max-width: 1440px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.elementor-element-ca28489 {
  overflow-x: hidden !important;
}

.carrusel-servicios .swiper {
  overflow: visible !important;
  cursor: grab !important;
}

.carrusel-servicios .swiper:active {
  cursor: grabbing !important;
}

/* Wrapper con altura FIJA — nunca cambia → cero reflow */
.carrusel-servicios .swiper-wrapper {
  -webkit-box-align: end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: 520px !important;
}

/* Todos los slides a 520px fijo */
.carrusel-servicios .swiper-slide {
  height: 520px !important;
}

/* Contenido: clip-path lo recorta, el layout nunca cambia */
.carrusel-servicios .elementor-element-de884a4 {
  border-radius: 8px !important;
  width: 100% !important;
  height: 520px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  -webkit-transition: none !important;
  transition: none !important;
  will-change: transform;
}

.carrusel-servicios .elementor-element-de884a4::before {
  background-size: cover !important;
  background-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Slide central: encima del resto */
.carrusel-servicios .pyramid-pos-3 .elementor-element-de884a4 {
  position: relative !important;
  z-index: 5 !important;
}

/* Texto al pie */
.carrusel-servicios .elementor-element-de884a4 .e-con-inner {
  height: 100% !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
  padding: 16px 20px 20px !important;
}

/* Título en naranja */
.carrusel-servicios .elementor-heading-title {
  text-align: center !important;
  font-weight: bold !important;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6) !important;
  color: #ff6600 !important;
  white-space: normal !important;
  /* Fallback para Safari < 17.4 y Firefox < 121 */
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
  text-wrap: balance !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
}

.carrusel-servicios .pyramid-pos-3 .elementor-heading-title {
  font-size: 1rem !important;
}

/* Ocultar navegación */
.carrusel-servicios .swiper-pagination,
.carrusel-servicios .elementor-swiper-button-prev,
.carrusel-servicios .elementor-swiper-button-next {
  display: none !important;
}

/* ── Responsive: móvil ──────────────────────────────────────── */
@media (max-width: 767px) {
  .elementor .carrusel-servicios {
   /* height: 420px;
    min-height: 420px;*/
  }
  .carrusel-servicios .swiper-wrapper {
    height: 380px !important;
  }
  .carrusel-servicios .swiper-slide {
    height: 380px !important;
  }
  .carrusel-servicios .elementor-element-de884a4 {
    height: 380px !important;
  }
}

/* ── Responsive: tablet ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .elementor .carrusel-servicios {
    height: 560px;
    min-height: 560px;
  }
  .carrusel-servicios .swiper-wrapper {
    height: 460px !important;
  }
  .carrusel-servicios .swiper-slide {
    height: 460px !important;
  }
  .carrusel-servicios .elementor-element-de884a4 {
    height: 460px !important;
  }
}

#tag-portfolio{
    align-self: flex-start;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: #ff6600;
    color: #fff;
    padding: 5px 12px;
    display: inline-block;
    margin-bottom: 16px;
    margin-top: 16px;
}
#tag-portfolio a, .breadcrumb_last{
color: #fff!important;
}


.hq-val .elementor-heading-title.elementor-size-default{
  font-family: 'Lato', sans-serif;
  text-align: right;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}
.hq-lbl{
  text-align: right;
  font-size: 11px;
  color: #C2C0BD;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
}
.elementor-element.elementor-element-389f6e2.e-con.e-atomic-element.e-div-block-base .f-val {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}
.elementor-element.e-con.e-atomic-element.e-div-block-base .f-lbl {
    font-family: var(--head-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C2C0BD;
    display: block;
    margin-bottom: 6px;
  }

#aside-portfolio{
    background: #1e1e1e;
    padding: 32px 28px;
    margin-bottom: 6px;
}
.aside-titulo-portolio{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C2C0BD;
    margin-bottom: 20px;
    display: block;
}
#aside-cta {
    background: #ff6600;
    padding: 32px 28px;
  }
#aside-cta h4 {
    font-size: 22px;
    font-weight: 800;
    color: #0e0e0e;
    line-height: 1.1;
    margin-bottom: 8px;
  }
.aside-cta p {
    font-size: 1rem;
    color: rgba(0, 0, 0, .6);
    line-height: 1.6;
    margin-bottom: 20px;
  }
.btn-d {
    background: #0e0e0e;
    color: #f5f4f2;
    font-family: var(--head-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 24px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity .2s;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.desc-eyebrow{
  font-family: var(--head-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff6600;
    margin-bottom: 18px;
    display: block;
}

h1#titulo-portfolio{
  font-family: 'Lato', sans-serif;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 800;
    line-height: .95;
    color: #f5f4f2;
    text-wrap: balance;
}

h2#desc-title{
  font-family: var(--head-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    color: #f5f4f2;
    line-height: 1.05;
    margin-bottom: 28px;
}
.single-proyecto_metalico .elementor-widget-theme-post-content p{
  color: #C2C0BD;
}
.single-proyecto_metalico .elementor-widget-theme-post-content b, .single-proyecto_metalico .elementor-widget-theme-post-content strong {
  color: #f5f4f2;
}

.car-tag .elementor-heading-title a{
  font-family: var(--head-font);
    font-size: 10px!important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #ff6600;
    color: #ffffff!important;
    padding: 3px 9px;
    display: inline-block;
    margin-bottom: 8px;
}
.car-meta ul li span.elementor-icon-list-text{
  font-size: 11px!important;
  color: #777;
  letter-spacing: .04em;
}

.car-card {    
    overflow: hidden;
    background: var(--dark3);
    cursor: pointer;
    aspect-ratio: 4/3!important;
    padding: 28px 22px 22px;
}
.car-info h3{
  font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    color: #f5f4f2!important;
    line-height: 1.2;
    margin-bottom: 4px;
}

.aside-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

.aside-row{
  display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid #1e1e1e;
}
.aside-row .ar-lbl {
    font-size: 12px;
    color: #C2C0BD;
  }
.aside-row .ar-val {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #f5f4f2;
    text-align: right;
  }

/* =========================================
   PÁGINA ESTRUCTURAS
   ========================================= */
.hero-sub{
    margin-top: 16px;
    font-size: 16px;
    color: #aaa;
    max-width: 560px;
    line-height: 1.6;
}
.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
.ventaja-card {
    background: #1e1e1e;
    padding: 36px 32px;
    border-top: 2px solid transparent;
    transition: border-color 0.2s;
  }
.ventaja-card:hover {
    border-top-color: #F46A00;
}
.ventaja-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ventaja-card h3, .tipo-body h3{
  font-family: var(--head-font);
    font-size: 20px;
    font-weight: 700;
    color: #f5f4f2;
    margin-bottom: 10px;
    line-height: 1.2;
}
.ventaja-card p, .tipo-body p, #pgriscatorce {
    font-size: 0.95rem;
    color: #c2c0bd;
    line-height: 1.425rem;
}
.tipos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tipo-card {
    background: #161616;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    overflow: hidden;
}
.tipo-img {
    position: relative;
    background: #222;
    min-height: 140px;
    overflow: hidden; /* Corta lo que sobre de la imagen */
    height: 100%;
}
.tipo-img img {
  position: absolute; /* CLAVE: La imagen deja de empujar el contenedor */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Por debajo de la etiqueta data-label */
}
.tipo-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark); /* Un fondo sólido por si la imagen tarda en cargar */
  z-index: 1;
}
.tipo-img::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font-family: monospace;
  font-size: 10px;
  color: white; /* Texto en blanco para resaltar sobre la foto */
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Degradado oscuro abajo para que el texto siempre se lea */
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  z-index: 2; 
}
.tipo-body {
    padding: 28px 28px 28px 24px;
}
.hero-badges {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
  }
.badge.highlight {
    border-color: #F46A00;
    color: #F46A00;
  }
.badge {
    font-family: var(--head-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    border: 1px solid #333;
    color: #888;
    padding: 5px 12px;
}

.proceso-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.proceso-step {
    background: rgba(0, 0, 0, 0.08);
    padding: 32px 24px;
}
.proceso-step-num {
    font-family: var(--head-font);
    font-size: 48px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.15);
    line-height: 1;
    margin-bottom: 16px;
}
.proceso-step h3 {
    font-family: var(--head-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.2;
}
.proceso-step p {
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.425rem;
}
.proceso-step a {
  color: #fff;
}
.proceso-step a:hover {
  color: #888;
}

.calidad-certs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.cert-badge {
    border: 1px solid #333;
    padding: 16px 24px;
    text-align: center;
    min-width: 110px;
}
.cert-badge .cert-name {
    font-family: var(--head-font);
    font-size: 20px;
    font-weight: 800;
    color: #F46A00;
    display: block;
    line-height: 1;
}
.cert-badge .cert-desc {
    font-size: 10px;
    color: #c2c0bd;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
    text-transform: uppercase;
}
#section-ver-mas{
  margin-top: 28px;
    display: flex;
    justify-content: flex-end;
}

.footer-bottom {
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .footer-bottom p {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.04em;
}

/* =========================================
   1. GRID BENTO - SOLUCIÓN ETIQUETAS STYLE
   ========================================= */
@media (min-width: 768px) {
    .portfolio-inicio .elementor-loop-container {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr !important;
        grid-template-rows: repeat(2, 280px) !important; /* Altura de cada bloque pequeño */
        gap: 6px !important;
    }
    .single-estructura_metalica .portfolio-inicio .elementor-loop-container {
        gap: 6px !important;
    }

    /* Usamos nth-of-type para ignorar las etiquetas <style> de Elementor */
    .portfolio-inicio div.e-loop-item:nth-of-type(1) {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important; 
    }

    .portfolio-inicio div.e-loop-item:nth-of-type(2) {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
    }

    .portfolio-inicio div.e-loop-item:nth-of-type(3) {
        grid-column: 3 / 4 !important;
        grid-row: 1 / 2 !important;
    }

    .portfolio-inicio div.e-loop-item:nth-of-type(4) {
        grid-column: 2 / 4 !important;
        grid-row: 2 / 3 !important;
    }

    /* Forzamos a que las cajas respeten el tamaño del grid */
    .portfolio-inicio div.e-loop-item,
    .portfolio-inicio div.e-loop-item .elementor-element-a875cb6,
    .portfolio-inicio div.e-loop-item .e-con-inner {
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
    }
}

/* =========================================
   2. HOVER OVERLAY A PRUEBA DE ELEMENTOR
   ========================================= */

/* A. Contenedor padre con overflow hidden para que el texto no se salga */
.portfolio-inicio .e-loop-item .elementor-element-a875cb6 {
    position: relative !important;
    overflow: hidden !important; 
}

/* B. Capa de texto (Overlay) - ESTADO NORMAL (Oculto abajo) */
.portfolio-inicio .e-loop-item .elementor-element-47aa844 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    
    /* Forzamos la posición inicial y sobreescribimos las variables de Elementor */
    transform: translateY(30px) !important; 
    --e-con-transform-translateY: 0px !important; 
    
    transition: all 0.4s ease-out !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%) !important;
    padding: 30px !important;
    justify-content: flex-end !important; /* Mantiene el texto abajo */
}

/* C. Capa de texto - ESTADO HOVER (Visible y en su sitio) */
.portfolio-inicio .e-loop-item:hover .elementor-element-47aa844 {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================
   1. ESTRUCTURA GRID DEL FORMULARIO
   ========================================= */
/* Apuntamos al contenedor principal del formulario */
form[data-form-name="Formulario"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Creamos 2 columnas iguales */
    column-gap: 20px !important; /* Espacio entre Nombre y Apellidos */
    row-gap: 8px !important; /* Espacio entre la etiqueta y su campo */
}

/* Por defecto, hacemos que TODOS los elementos ocupen las 2 columnas (ancho completo) */
form[data-form-name="Formulario"] > * {
    grid-column: 1 / -1 !important;
}

/* Damos margen inferior a los inputs para separarlos de la siguiente etiqueta */
form[data-form-name="Formulario"] > input, 
form[data-form-name="Formulario"] > textarea,
form[data-form-name="Formulario"] > .e-form-checkbox-row {
    margin-bottom: 15px !important;
}

/* =========================================
   2. MAGIA: NOMBRE Y APELLIDOS EN UNA FILA
   ========================================= */
/* Obligamos a que las etiquetas vayan en la Fila 1 */
form[data-form-name="Formulario"] > label[for="e-form-first-name"],
form[data-form-name="Formulario"] > label[for="e-form-last-name"] {
    grid-row: 1 !important;
}

/* Obligamos a que los inputs vayan en la Fila 2 */
form[data-form-name="Formulario"] > input#e-form-first-name,
form[data-form-name="Formulario"] > input#e-form-last-name {
    grid-row: 2 !important;
}

/* Columna Izquierda: First Name (Etiqueta + Input) */
form[data-form-name="Formulario"] > label[for="e-form-first-name"],
form[data-form-name="Formulario"] > input#e-form-first-name {
    grid-column: 1 / 2 !important;
}

/* Columna Derecha: Last Name (Etiqueta + Input) */
form[data-form-name="Formulario"] > label[for="e-form-last-name"],
form[data-form-name="Formulario"] > input#e-form-last-name {
    grid-column: 2 / 3 !important;
}

/* =========================================
   3. ESTILOS VISUALES (Dark Mode + Botón Naranja)
   ========================================= */
/* Estilo de las etiquetas */
form[data-form-name="Formulario"] > label {
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
}

/* Estilo de los campos de texto */
form[data-form-name="Formulario"] > input.e-form-input-base, 
form[data-form-name="Formulario"] > textarea.e-form-textarea-base {
    background-color: transparent !important;
    border: 1px solid #444444 !important; /* Borde gris oscuro */
    color: #ffffff !important;
    padding: 12px 15px !important;
    border-radius: 0px !important; /* Bordes rectos como en la captura */
}

/* Estilo del botón ENVIAR */
form[data-form-name="Formulario"] > button[type="submit"] {
    background-color: #ed7331 !important; /* Naranja corporativo */
    color: #ffffff !important;
    border: none !important;
    border-radius: 25px !important; /* Botón en forma de píldora */
    padding: 12px 35px !important;
    font-weight: 600 !important;
    width: max-content !important; /* Para que no ocupe el 100% del ancho */
    margin-top: 10px !important;
    cursor: pointer !important;
}

#btn-primary2{
    background: white;
    color: #F46A00;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}


#btn-primary {
    background: #F46A00;
    color: #ffffff;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
#btn-primary:hover {
    background: #d95f00;
}
#btn-primary1{
    background: transparent;
    color: #F46A00;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid #F46A00;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

#btn-primary4{
    background: transparent;
    color: white;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid white;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

#btn-primary4:hover {
    background: #ff680d;
    color: white;
    border: 1px solid #ff680d;
    transition: background 0.2s;
}

#btn-ghost {
    background: transparent;
    color: #111111;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border: 1px solid #444;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s;
}
#btn-portfolio {
    background: transparent;
    color: #fff;
    font-family: var(--head-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 13px 28px;
    border: 1px solid #444;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.2s;
}
#btn-portfolio:hover {
    border-color: #fff;
}
.cta-final-servicios {
    font-family: var(--head-font);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    max-width: 600px;
}
#cta-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
/* Efecto hover del botón */
form[data-form-name="Formulario"] > button[type="submit"]:hover {
    background-color: #d66427 !important; /* Un poco más oscuro al pasar el ratón */
}

/* =========================================
   4. RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 767px) {
    /* Desactivamos el Grid en móviles y pasamos a Flexbox en columna */
    form[data-form-name="Formulario"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Nos aseguramos de que todos los campos ocupen el 100% de la pantalla */
    form[data-form-name="Formulario"] > * {
        width: 100% !important;
    }
    
    /* Separación extra entre campos para que sea más fácil tocar con el dedo */
    form[data-form-name="Formulario"] > input, 
    form[data-form-name="Formulario"] > textarea,
    form[data-form-name="Formulario"] > .e-form-checkbox-row {
        margin-bottom: 20px !important;
    }

    /* El botón ocupará todo el ancho en móvil para mejor usabilidad */
    form[data-form-name="Formulario"] > button[type="submit"] {
        width: 100% !important;
    }
}

.p-acordeon{
  color:#f5f4f2;
}
.p-acordeon-gris{
  color:#1e1e1e;
}
  
@media (max-width: 767px) {
  .hq-val .elementor-heading-title.elementor-size-default{
    margin-right:20px;
    font-size: 22px;
  }
  .ventajas-grid, .tipos-grid{
        grid-template-columns: 1fr;
      }
  .proceso-steps {
        grid-template-columns: 1fr 1fr;
    }
    .proceso-steps{
    display: flex;
    flex-direction: column;
}
.calidad-certs{
  display: flex;
  flex-direction: column;
}
.cta-buttons a{
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-top: 8px;
}

}

.efecto-hover .titulo{
transition: all 0.3s ease;
position: relative;
top:50px;
opacity: 0;
}
.efecto-hover:hover .titulo{
opacity: 1;
top:0px;
}
@media (max-width: 1024px) {
.efecto-hover .titulo{
top:0px;
opacity: 1;}
}


/* ═══════════════════════════════════════════════════
   HERO ANIMATIONS — DTCOM
═══════════════════════════════════════════════════ */


/* ── KEYFRAMES ── */

@keyframes dtcom-rev-left {
  0%   { opacity: 0; transform: translateX(-44px) translateY(8px); }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes dtcom-rev-right {
  0%   { opacity: 0; transform: translateX(34px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes dtcom-rev-up {
  0%   { opacity: 0; transform: translateY(55px); clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0% 0); }
}

@keyframes dtcom-fade-scale {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes dtcom-line-grow {
  0%   { width: 0; opacity: 0; }
  100% { width: 60px; opacity: 1; }
}

@keyframes dtcom-naranja {
  0%   { color: #ffffff; text-shadow: none; }
  55%  { color: #ff680d; text-shadow: 0 0 40px rgba(255, 104, 13, 0.65); }
  100% { color: #ff680d; text-shadow: none; }
}

@keyframes dtcom-bg-zoom {
  0%   { transform: scale(1.09); }
  100% { transform: scale(1.00); }
}

@keyframes dtcom-warm-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/* ── IMAGEN DE FONDO: Ken Burns ── */

.elementor-element-2496b5c {
  overflow: hidden;
}

.elementor-element-2496b5c::before {
  animation: dtcom-bg-zoom 16s ease-out forwards !important;
  transform-origin: 60% 50% !important;
}


/* ── TINTE CÁLIDO ── */

.elementor-element-2496b5c::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 45% at 5% 95%,
    rgba(255, 104, 13, 0.22) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 2;
  animation: dtcom-warm-in 2s ease-out 0.3s both;
}


/* ── RESET: visibilidad para todos, sin forzar opacity ── */

.elementor-element-6af213c,
.elementor-element-0278e6a,
.elementor-element-1761d73,
.elementor-element-e098d8f,
.elementor-element-b9a8b7a {
  visibility: visible !important;
  animation-fill-mode: both !important;
}


/* ══════════════════════════════════════════════
   BLOQUE 1 — 0.3s · Línea + Tagline
══════════════════════════════════════════════ */

.elementor-element-6af213c::before {
  content: '';
  display: block;
  height: 3px;
  background: #ff680d;
  border-radius: 2px;
  margin-bottom: 14px;
  animation: dtcom-line-grow 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.elementor-element-6af213c {
  animation: dtcom-rev-left 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both !important;
}


/* ══════════════════════════════════════════════
   BLOQUE 2 — 1.2s · H1 "Líderes..."
══════════════════════════════════════════════ */

.elementor-element-0278e6a {
  animation: dtcom-rev-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both !important;
}

.elementor-element-0278e6a .resaltado {
  display: inline-block;
  animation: dtcom-naranja 0.85s ease-out 2.1s both !important;
}


/* ══════════════════════════════════════════════
   BLOQUE 3 — 2.5s+ · Columna derecha en cascada
══════════════════════════════════════════════ */

.elementor-element-1761d73 {
  animation: dtcom-rev-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both !important;
}

.elementor-element-b9a8b7a {
  animation: dtcom-fade-scale 0.7s cubic-bezier(0.16, 1, 0.3, 1) 2.75s both !important;
}

.elementor-element-e098d8f {
  animation: dtcom-rev-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) 3.0s both !important;
}


/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — DTCOM
   Animaciones de entrada al hacer scroll (fuera del hero)
   Técnica: CSS @keyframes + clase .dtcom-visible via JS
   Impact en PageSpeed: NINGUNO (solo opacity + transform,
   animadas en compositor, sin layout shift)
═══════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────
   KEYFRAMES REUTILIZABLES
   Los mismos del hero más uno nuevo para elementos que
   entran "desde abajo" (el más habitual en scroll)
──────────────────────────────────────────────────────── */

@keyframes dtcom-scroll-up {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dtcom-scroll-left {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes dtcom-scroll-right {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes dtcom-scroll-fade {
  0%   { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}


/* ────────────────────────────────────────────────────────
   ESTADO INICIAL: todos los elementos animables
   empiezan invisibles hasta que .dtcom-visible los activa.
   Visibility: visible evita que Elementor los oculte.
──────────────────────────────────────────────────────── */

.dtcom-anim {
  opacity: 0;
  visibility: visible !important;
  /* Sin transform aquí: cada keyframe define su propio start */
}


/* ────────────────────────────────────────────────────────
   ESTADO FINAL: cuando el Observer añade .dtcom-visible
   se lanza la animación correspondiente.
   animation-fill-mode: both garantiza que al terminar
   el elemento quede en opacity:1 sin parpadeos.
──────────────────────────────────────────────────────── */

/* Desde abajo (uso más frecuente) */
.dtcom-anim.dtcom-up.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Desde la izquierda */
.dtcom-anim.dtcom-left.dtcom-visible {
  animation: dtcom-scroll-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Desde la derecha */
.dtcom-anim.dtcom-right.dtcom-visible {
  animation: dtcom-scroll-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fade + micro-scale (botones y elementos secundarios) */
.dtcom-anim.dtcom-fade.dtcom-visible {
  animation: dtcom-scroll-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Delay de 150ms para el segundo elemento de un par */
.dtcom-anim.dtcom-d1.dtcom-visible { animation-delay: 0.15s; }

/* Delay de 300ms para el tercer elemento */
.dtcom-anim.dtcom-d2.dtcom-visible { animation-delay: 0.30s; }

/* Delay de 450ms para el cuarto elemento */
.dtcom-anim.dtcom-d3.dtcom-visible { animation-delay: 0.45s; }


/* ════════════════════════════════════════════════════════
   SECCIÓN 2 — QUIÉNES SOMOS
   (texto izq + imagen centro + "Firme, Sólido, Preciso.")
════════════════════════════════════════════════════════ */

/* Párrafo 1 — "En DTCOM no vendemos vigas..."
   Entra desde abajo al llegar a la sección */
.elementor-element-55bdbc8 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-55bdbc8.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Párrafo 2 — "En nuestras instalaciones de más de 22.000 m²..."
   Igual pero con 150ms de delay para efecto cascada */
.elementor-element-cde9bde {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-cde9bde.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Imagen central — fade simple (nunca mover imágenes con transform
   si pueden ser LCP candidate; aquí es seguro porque está below fold) */
.elementor-element-a7c3e5e {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-a7c3e5e.dtcom-visible {
  animation: dtcom-scroll-fade 0.9s ease-out 0.1s both;
}

/* Botón PEDIR PRESUPUESTO — fade+scale tras los párrafos */
.elementor-element-79b120d {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-79b120d.dtcom-visible {
  animation: dtcom-scroll-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* "Firme, Sólido, Preciso." — entra desde la derecha
   cuando la imagen ya es visible */
.elementor-element-9a8b12c {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-9a8b12c.dtcom-visible {
  animation: dtcom-scroll-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}


/* ════════════════════════════════════════════════════════
   SECCIÓN 3 — DE LA INGENIERÍA A LA OBRA
   (título izq + texto izq + 4 bloques de servicios)
════════════════════════════════════════════════════════ */

/* Título "De la ingeniería a la obra" — desde la izquierda */
.elementor-element-570e64f {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-570e64f.dtcom-visible {
  animation: dtcom-scroll-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Texto introductorio — desde abajo con pequeño delay */
.elementor-element-1b6a26f {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-1b6a26f.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Servicio 1 — Fabricación metálica a medida
   Primer bloque, sin delay */
.elementor-element-28b9f89 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-28b9f89.dtcom-visible {
  animation: dtcom-scroll-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Servicio 2 — Cálculo y diseño
   Entra 120ms después del primero */
.elementor-element-cfa38bb {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-cfa38bb.dtcom-visible {
  animation: dtcom-scroll-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

/* Servicio 3 — Transporte de estructuras
   Entra 240ms después del primero */
.elementor-element-16693ae {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-16693ae.dtcom-visible {
  animation: dtcom-scroll-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

/* Servicio 4 — Montaje de estructuras
   Cierra la cascada a 360ms */
.elementor-element-e0e95e3 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-e0e95e3.dtcom-visible {
  animation: dtcom-scroll-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}


/* ════════════════════════════════════════════════════════
   SECCIÓN 4 — FRANJA "FIABLES. SEGURAS. HECHAS PARA DURAR."
   (heading grande + cita en cursiva)
════════════════════════════════════════════════════════ */

/* "Fiables. Seguras. Hechas para durar."
   Clip-reveal desde abajo, igual que el H1 del hero
   pero más rápido porque es scroll, no carga inicial */
.elementor-element-d6f7d33 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-d6f7d33.dtcom-visible {
  animation: dtcom-scroll-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Cita "El verdadero cliente de una estructura metálica..."
   En cursiva, entra con fade suave tras el heading */
.elementor-element-b09c4a9 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-b09c4a9.dtcom-visible {
  animation: dtcom-scroll-fade 0.8s ease-out 0.4s both;
}


/* ════════════════════════════════════════════════════════
   SECCIÓN 5 — TIPOS DE ESTRUCTURAS
   (heading centrado + carousel)
   El carousel NO se anima (imágenes = posible LCP)
════════════════════════════════════════════════════════ */

/* "Tipos de estructuras metálicas que fabricamos"
   Centrado, entra desde abajo */
.elementor-element-ca28489 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-ca28489.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ════════════════════════════════════════════════════════
   SECCIÓN 6 — PROYECTOS METÁLICOS REALIZADOS
   (texto izquierda + grid de fotos)
   El grid de fotos NO se anima (múltiples imágenes)
════════════════════════════════════════════════════════ */

/* Container izquierdo: heading "Proyectos metálicos realizados"
   + párrafo + botón VER PORTFOLIO — todo el bloque desde la izquierda */
.elementor-element-8d032a1 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-8d032a1.dtcom-visible {
  animation: dtcom-scroll-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ════════════════════════════════════════════════════════
   SECCIÓN 7 — CLIENTES QUE CONFÍAN EN DTCOM
   (heading + logos carousel)
   Los logos NO se animan (imágenes múltiples)
════════════════════════════════════════════════════════ */

/* "Clientes que confían en DTCOM" — sube desde abajo */
.elementor-element-e921034 {
  opacity: 0;
  visibility: visible !important;
}
.elementor-element-e921034.dtcom-visible {
  animation: dtcom-scroll-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero { position: relative; overflow: hidden; }
.hero > .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero > .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* velado oscuro para que el texto blanco se lea (mismo gradiente que usan tus tarjetas) */
.single-proyecto_metalico .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,27,27,.38) 30%, #000 100%);
}
/* el contenido por encima de imagen + velado */
.hero > .ancho1440 { position: relative; z-index: 2; }

.t-certificado ul{
  text-align: left;
}
.t-certificado p{
  padding-top: 20px;
  padding-left: 20px;
  text-align: left;
}
.t-certificado h3{
  font-size: 24px;
}