/*
Theme Name: CPU Kadence
Template: kadence
Author: CPU Digitall
Author URI: http://cpudigitall.es
Description: Tema hijo de Kadence para CPU Digitall
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.2.9.1728906607
Updated: 2024-10-14 13:50:07

*/
/**
----------------------------------------
animation slide-in-fwd-top
----------------------------------------
*/
.slide-in-fwd-top {
	-webkit-animation: slide-in-fwd-top 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-top 2.0s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/****************************************/


/**
 * ----------------------------------------
 * animation slide-in-fwd-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-top {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(-800px);
            transform: translateZ(-1400px) translateY(-800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}


/* Cambio de color para mostrar submenús también cuando el menú padre está activo */
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
  color: var(--global-palette6);
  background: var(--global-palette9);
}



/****************************************/
/** Tarjetas Giratorias *****************/
/****************************************/

:root{
  --card-width: 260px;        /* referencia */
  --card-height: 360px;
  --gap: 24px;
  --card-border-radius: 12px;
  --card-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --transition: 0.6s;
}

/* CONTENEDOR: FLEX para centrar cada fila */
.flip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center; /* centra cada fila, incluso la incompleta */
  padding: 12px;
  box-sizing: border-box;
}

/* TARJETA: calculamos ancho para 4 por fila (con espacio entre ellos) */
.flip-card {
  flex: 0 0 calc((100% - (3 * var(--gap))) / 4);
  max-width: calc((100% - (3 * var(--gap))) / 4);
  perspective: 1200px;
  box-sizing: border-box;
}

/* Ajustes responsive -------------------------------------------------- */
/* 3 por fila */
@media (max-width: 1200px) {
  .flip-card {
    flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
    max-width: calc((100% - (2 * var(--gap))) / 3);
  }
}

/* 2 por fila */
@media (max-width: 900px) {
  .flip-card {
    flex: 0 0 calc((100% - (1 * var(--gap))) / 2);
    max-width: calc((100% - (1 * var(--gap))) / 2);
  }
}

/* 1 por fila (móvil) */
@media (max-width: 520px) {
  .flip-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* INNER (3D) y caras -------------------------------------------------- */
.flip-card-inner {
  width: 100%;
  height: var(--card-height);
  position: relative;
  transition: transform var(--transition);
  transform-style: preserve-3d;
}

/* flip on hover / class .is-flipped */
.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
}

.flip-card-back {
  background: #f2f2f2; /* gris claro */
}


/* FRONT */
.flip-card-front{
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
}

.flip-card-front .card-image{
  width: 100%;
  height: 60%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.flip-card-front .card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.flip-card-front .card-title{
  margin-top:36px;
  text-align:center;
  font-weight:800;
  font-size:1.25rem;
  line-height: 1.4;
}

/* BACK */
.flip-card-back{
  transform: rotateY(180deg);
  padding:16px;
  box-sizing:border-box;
  justify-content: space-between;
}

.flip-card-back .back-title {
  margin: 24px 0 -90px 0;
  text-align: center;
  font-weight: 800;
  font-size: 1.25rem;   /* similar a h4 */
  line-height: 1.4;
}

.flip-card-back .back-text{
  font-size:1.00rem;
  text-align: center;
  line-height:1.3;
  max-height: calc(100% - 56px); /* deja espacio para los iconos */
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 75px;
}

.flip-card-back .card-footer{
  display:flex;
  justify-content:space-around;
  gap:8px;
  margin-top:10px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,0.06);
}

.flip-card-back .card-footer a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:8px;
  text-decoration:none;
  background:transparent;
  transition: transform .18s ease, background .18s;
}

.flip-card-back .card-footer a:active,
.flip-card-back .card-footer a:focus,
.flip-card-back .card-footer a:hover{
  transform: translateY(-3px);
  background: rgba(0,0,0,0.04);
}

.flip-card-back .card-footer img{
  width:40px;
  height:40px;
  display:block;
}

/* utilidad */
.flip-card * { box-sizing: border-box; }

/* accesibilidad focus */
.flip-card-back .card-footer a:focus {
  outline: 3px solid rgba(21,156,228,0.25);
  outline-offset: 2px;
}

/****************************************/
/** FIN Tarjetas Giratorias *************/
/****************************************/



/****************************************/
/** AREAS ACTUACION *********************/
/** FLEX para centrar cada fila *********/
/****************************************/

/* CONTENEDOR PRINCIPAL */
.section-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  align-items: stretch; /* 🔹 Asegura que todas las tarjetas tengan igual altura por fila */
}

/* TARJETAS */
.section-card {
  flex: 0 0 calc((100% - (4 * var(--gap))) / 5);
  max-width: calc((100% - (4 * var(--gap))) / 5);
  box-sizing: border-box;
  perspective: 1200px;
  display: flex;               /* 🔹 Para que su contenido pueda estirarse */
  align-items: stretch;
}

/* CONTENEDOR INTERNO DE LA TARJETA */
.section-backgroud {
  position: relative;
  flex: 1; /* 🔹 Ocupa toda la altura del .section-card */
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  /* background: #fff; */
  height: 340px; /* 🔹 Más altura */

  text-decoration: none; /* Evita subrayado */
  color: inherit; /* Usa el color del texto */
}

/* IMAGEN DE FONDO DENTRO DE LA TARJETA */
.section-backgroud::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;     /* 🔹 La imagen cubre todo el espacio */
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--bg-image); /* 🔹 Usa una variable CSS para cada imagen */
  z-index: 0;
  transition: transform 0.4s ease;
}

/* EFECTO SUAVE AL PASAR EL MOUSE (opcional) */
.section-backgroud:hover::before {
  transform: scale(1.5);
  filter: brightness(0.8);
}

/* CONTENIDO DE TEXTO ENCIMA DE LA IMAGEN */
.section-title {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 16px;
  text-align: center;

  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #e3e12d;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3); /* 🔹 Mejora la legibilidad */
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
}

/* RESPONSIVE -------------------------------------------------- */
@media (max-width: 1200px) {
  .section-card {
    flex: 0 0 calc((100% - (2 * var(--gap))) / 3);
    max-width: calc((100% - (2 * var(--gap))) / 3);
  }
}

@media (max-width: 900px) {
  .section-card {
    flex: 0 0 calc((100% - var(--gap)) / 2);
    max-width: calc((100% - var(--gap)) / 2);
  }
}

@media (max-width: 520px) {
  .section-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}