/* 
Theme Name: Frectaris Web Design
Theme URI: https://github.com/elementor/hello-theme/
Description: Tema hijo personalizado para Frectaris web design
Author: Frectaris
Author URI: https://www.frectaris.com/
Template: hello-elementor
Version: 1.0.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
    Add your custom styles here
*/

.submenuActivo .e-n-menu-content.e-active {
    position: initial !important;
    width: auto !important;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    max-width: 100%!important;
}

a.glink {
    font-size: 12px;
    margin: 0 7px;
}


/* Tarjeta */
.proyecto-card{
  position: relative;
  overflow: hidden;
}

/* Mantener proporción uniforme (cámbiala si quieres) */
.proyecto-card .elementor-widget-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: transform .35s ease;
  aspect-ratio: 3/2; /* 1/1, 4/3, 16/9... */
}

/* Banda inferior: fina y sutil */
.proyecto-band{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 25px 14px 15px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; line-height: 1.2;
  transform: translateY(100%); /* oculta fuera */
  opacity: 0;
  transition: all .25s ease;
  z-index: 2;
}

/* Hover: aparece la banda y leve zoom a la imagen */
.proyecto-card:hover .proyecto-band{
  transform: translateY(0);
  opacity: 1;
}
.proyecto-card:hover .elementor-widget-image img{
  transform: scale(1.04);
}

/* Accesibilidad / móviles sin hover: muéstrala siempre */
@media (hover: none){
  .proyecto-band{ transform: translateY(0); opacity: 1; }
}

/* Estilos de texto */
.proyecto-band .titulo{ font-weight: 600; }
.proyecto-band .info{ font-weight: 600; text-decoration: none; }


/* ===========================================
   CARRUSEL DE PROYECTOS (.proy-slider)
   =========================================== */

/* Contenedor principal del carrusel (desktop) */
.proy-slider .elementor-image-carousel-wrapper,
.proy-slider .elementor-swiper,
.proy-slider .swiper,
.proy-slider .swiper-container {
  height: 75vh !important;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #fff !important;
}

/* Cadena de wrappers */
.proy-slider .swiper-wrapper,
.proy-slider .swiper-slide,
.proy-slider .swiper-slide .swiper-slide-inner,
.proy-slider .swiper-slide a,
.proy-slider .swiper-slide figure {
  height: 100% !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Slide: centrado perfecto */
.proy-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagen base (desktop: ver entera) */
.proy-slider .swiper-slide img {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transition: transform .35s ease;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Clases automáticas añadidas por JS (solo afectan en desktop) */
.proy-slider .swiper-slide img.is-vertical {
  height: 100% !important;
  width: auto !important;
}
.proy-slider .swiper-slide img.is-horizontal {
  width: 100% !important;
  height: auto !important;
}

/* ===== SOLO TABLET Y MÓVIL: fijamos altura y evitamos "bailes" ===== */
@media (max-width: 1024px) {

  .proy-slider .elementor-image-carousel-wrapper,
  .proy-slider .elementor-swiper,
  .proy-slider .swiper,
  .proy-slider .swiper-container {
    height: 520px !important;
    background: #fff !important; /* mantenemos blanco también aquí */
  }

  .proy-slider .elementor-image-carousel,
  .proy-slider .swiper-wrapper,
  .proy-slider .swiper-slide,
  .proy-slider .swiper-slide .swiper-slide-inner,
  .proy-slider .swiper-slide a,
  .proy-slider .swiper-slide figure {
    background: #fff !important;
  }

  /* Imagen: rellenar y mantener altura estable (pisa contain/is-*) */
  .proy-slider .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* MÓVIL: un poco menos de alto para que respire */
@media (max-width: 767px) {
  .proy-slider .elementor-image-carousel-wrapper,
  .proy-slider .elementor-swiper,
  .proy-slider .swiper,
  .proy-slider .swiper-container {
    height: 540px !important;
  }
}

/* ===========================================
   ACORDEÓN DENTRO DEL SLIDER (DESPLEGAR HACIA ARRIBA)
   =========================================== */

/* El contenedor grande del carrusel + acordeón */
.proy-slider {
  position: relative;
}

/* El widget del acordeón dentro de .proy-slider pegado abajo */
.proy-slider .elementor-widget-n-accordion {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;              /* por encima del carrusel, pero NO tapa la cookie bar */
  margin: 0 !important;
}

/* El contenedor interno del acordeón ocupa todo el alto del slider
   y deja el <details> pegado abajo */
.proy-slider .elementor-widget-n-accordion .e-n-accordion {
  height: 100%;
  display: flex;
  align-items: flex-end;   /* el item del acordeón se queda abajo */
  margin: 0;
}

/* Item del acordeón (details):
   - cerrado: se queda como lo tengas maquetado (no tocamos estilos internos)
*/
.proy-slider .e-n-accordion-item {
  width: 100%;
}

/* Abierto: como mínimo tiene la altura completa del slider (75vh),
   así tapa TODO el carrusel aunque el contenido sea corto */
.proy-slider .e-n-accordion-item[open] {
  min-height: 100%;
}







/* ==== Alturas adaptadas ==== */
@media (max-width: 1024px) {
	.elementor-swiper-button.elementor-swiper-button-prev {
    left: -35px !important;
}
	.elementor-swiper-button.elementor-swiper-button-next {
    right: -35px !important;
}
}

@media (max-width: 767px) {
		.elementor-swiper-button.elementor-swiper-button-prev {
    left: -25px !important;
}
	.elementor-swiper-button.elementor-swiper-button-next {
    right: -25px !important;
}
}



.elementor-element .swiper .elementor-swiper-button{
    background: #fff;
    padding: 5px 3px 2px 3px;
}
.elementor-element .swiper .elementor-swiper-button-next{
    right: 20px;
}



/* ===== Mediaquerys ANGEL ===== */
@media (min-width: 767px) {
.submenuActivo div#e-n-menu-content-1652 {
    background: transparent!important;
}
}

@media (min-width: 1024px) {
	.submenuActivo .e-n-menu-content.e-active {
		position: initial !important;
		width: auto !important;
	}
}

@media (min-width: 1524px) {
	.AlturaPantallaGrande{
		--min-height: 41vh!important;
	}
}