/*
Theme Name: Conecta +
Theme URI: https://conecta-mas.org/
Template: generatepress
Author: David Gutierrez
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1781015111
Updated: 2026-06-09 09:25:11

*/
/* ==============================
    VARIABLES
============================== */

:root {
  --mint: #06d6a0;
  --blue: #073b4c;
  --white: #ffffff;
  --yellow: #ffd166;
  --light-blue: #118ab2;
  --light: #f6f6f6;
  --dark-gray: #1e1e1e;
  --bounce: linear(
    0 0%,
    0.22 2.1%,
    0.86 6.5%,
    1.11 8.6%,
    1.3 10.7%,
    1.35 11.8%,
    1.37 12.9%,
    1.37 13.7%,
    1.36 14.5%,
    1.32 16.2%,
    1.03 21.8%,
    0.94 24%,
    0.89 25.9%,
    0.88 26.85%,
    0.87 27.8%,
    0.87 29.25%,
    0.88 30.7%,
    0.91 32.4%,
    0.98 36.4%,
    1.01 38.3%,
    1.04 40.5%,
    1.05 42.7%,
    1.05 44.1%,
    1.04 45.7%,
    1 53.3%,
    0.99 55.4%,
    0.98 57.5%,
    0.99 60.7%,
    1 68.1%,
    1.01 72.2%,
    1 86.7%,
    1 100%
  );
}

.pum-theme-hello-box {
  backdrop-filter: blur(10px) saturate(0.5) !important;
}

/* ==========================================================================
   EL ROMPEMUROS: Liberando el Header de GeneratePress
   ========================================================================== */
/* Atacamos las clases clásicas del header de GP y sus estados sticky */
/* 1. EL CRISTAL DEL MENÚ PRINCIPAL (El bloque vacío) */
.fondo-cristal-real {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 8px 32px 0 rgba(7, 59, 76, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none; /* Crucial para que los clics pasen al menú */
}

/* 2. EL SUBMENÚ FLOTANTE (¡Libre al fin!) */
#mega-menu-wrap-primary ul.mega-sub-menu {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 24px !important;
  box-shadow:
    0 8px 32px 0 rgba(7, 59, 76, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  padding: 10px !important;
  margin-top: 15px !important;
}

/* Puente invisible para mantener el hover */
#mega-menu-wrap-primary ul.mega-sub-menu::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
  backdrop-filter: none !important;
}

/* Limpieza de los enlaces internos */
#mega-menu-wrap-primary ul.mega-sub-menu li.mega-menu-item a {
  background: transparent !important;
  border-radius: 12px !important;
  padding: 5px 10px !important;
}

#mega-menu-wrap-primary ul.mega-sub-menu li.mega-menu-item:hover > a {
  background: var(--mint) !important;
}

.fondo-cristal-real::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    300px circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.9),
    transparent 80%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* 2. EL TRUCO: Cuando el mouse toque al padre, el hijo brilla */
.envoltura-menu:hover .fondo-cristal-real::before {
  opacity: 1;
}

/* ==============================
   1. GENERAL STYLES
============================== */

html,
body {
  overflow-x: hidden; /* Evita que CUALQUIER elemento rebelde te ensanche la página hacia los lados */
  position: relative;
}

 .wpc-filters-section {
    margin-bottom: 0px !important;
  }

.ficha-lego {
  transition: none !important;
  opacity: 1 !important;
  will-change:
    transform, opacity; /* Le avisa al navegador que optimice estas propiedades */
}

/* Configuramos la cuadrícula base de 4 columnas */
.bento-grid-wrapper {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Estilo por defecto de las tarjetas para que ocupen todo su espacio */
.bento-card {
  border-radius: 20px;
  overflow: hidden;
  height: fit-content;
  color: var(--global-color-14);
  justify-content: flex-start;
}

/* --- AQUÍ EMPIEZA EL DESORDEN ORGANIZADO (BENTO) --- */

/* Tarjeta 1 (Arriba Izquierda): Pequeña y ancha */
.bento-grid-wrapper > .bento-card:nth-child(1),
.bento-grid-wrapper > .bento-card:nth-child(3) {
  grid-column: span 7;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* Tarjeta 2 (Derecha): Alta, ocupa dos filas */
.bento-grid-wrapper > .bento-card:nth-child(2) {
  grid-column: span 5;
  grid-row: span 2;
}

.bento-grid-wrapper > .bento-card:nth-child(3) > * {
  flex: 1;
}

.bento-grid-wrapper > .bento-card:nth-child(1) > img,
.bento-grid-wrapper > .bento-card:nth-child(3) > img {
  max-width: 40%;
  display: block;
  margin: auto;
  aspect-ratio: 1;
}

.bento-grid-wrapper > .bento-card:nth-child(4),
.bento-grid-wrapper > .bento-card:nth-child(5),
.bento-grid-wrapper > .bento-card:nth-child(6) {
  grid-column: span 4;
  grid-row: span 1; /* Nos aseguramos de que no hereden alturas raras */
}

.bento-grid-wrapper > .bento-card:nth-child(n + 7) {
  grid-column: span 3;
  grid-row: span 1; /* Nos aseguramos de que no hereden alturas raras */
}

.bento-grid-wrapper > .bento-card:nth-child(3n + 1) {
  background-color: var(--yellow);
  color: var(--yellow);
}

.bento-grid-wrapper > .bento-card:nth-child(3n + 2) {
  background-color: var(--mint);
  color: var(--mint);
}

.bento-grid-wrapper > .bento-card:nth-child(3n) {
  background-color: var(--global-color-14);
  color: var(--global-color-14);
}

/* Para móviles: Volvemos a una sola columna para que no explote la pantalla */
@media (max-width: 1024px) {
  /* Tablet: Podemos pasar a 2 columnas */
  .bento-grid-wrapper > .bento-card {
    grid-column: span 6 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 768px) {
  /* Móvil: 1 columna y rompemos el flex de la tarjeta 3 */
  .bento-grid-wrapper {
    display: flex !important;
    flex-direction: column;
  }

  .bento-grid-wrapper > .bento-card:nth-child(1),
  .bento-grid-wrapper > .bento-card:nth-child(3) {
    flex-direction: column;
  }

  .bento-grid-wrapper > .bento-card:nth-child(1) > img,
  .bento-grid-wrapper > .bento-card:nth-child(3) > img {
    max-width: 100%;
  }
}

/* mask images at hero */

.efecto-popout {
  clip-path: inset(0 0 0 0);
}

.mascara-plus {
  -webkit-mask-image: url("https://staging.wrocolombia.org/wp-content/uploads/2026/07/plus-mask.svg");
  mask-image: url("https://staging.wrocolombia.org/wp-content/uploads/2026/07/plus-mask.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(rgb(0 0 0 / 79%) 0 10px 20px);
}

.foto-flotante {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90% !important;
  height: auto;
}

.foto-libre {
  clip-path: inset(0 0 48% 0);
}

.valores:hover svg {
  animation: gelatine 0.7s linear;
}
/* ==============================
      2. HEADINGS & TEXT
============================== */

li.involucrate a {
  transition: background-color linear 0.2s !important;
}

li.involucrate:hover a:before {
  animation: gelatine 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

/* ==============================
      3. LINKS & BUTTONS
============================== */

.button_glass-ui,
.button_glass-ui_white {
  backdrop-filter: blur(3px) saturate(160%);
  -webkit-backdrop-filter: blur(3px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid #97ffe5;
  border-left: 1px solid #50f3c9;
  box-shadow:
    0 8px 32px 0 rgba(7, 59, 76, 0.15),
    rgba(255, 255, 255, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.button_glass-ui_white {
  border-top: 1px solid #ffffff !important;
  border-left: 1px solid #ececec !important;
}

.button_conecta:hover ~ .icon_button {
  transform: rotateZ(90deg);
  transition: all 0.3s
    linear(
      0 0%,
      0 2.27%,
      0.02 4.53%,
      0.04 6.8%,
      0.06 9.07%,
      0.1 11.33%,
      0.14 13.6%,
      0.25 18.15%,
      0.39 22.7%,
      0.56 27.25%,
      0.77 31.8%,
      1 36.35%,
      0.89 40.9%,
      0.85 43.18%,
      0.81 45.45%,
      0.79 47.72%,
      0.77 50%,
      0.75 52.27%,
      0.75 54.55%,
      0.75 56.82%,
      0.77 59.1%,
      0.79 61.38%,
      0.81 63.65%,
      0.85 65.93%,
      0.89 68.2%,
      1 72.7%,
      0.97 74.98%,
      0.95 77.25%,
      0.94 79.53%,
      0.94 81.8%,
      0.94 84.08%,
      0.95 86.35%,
      0.97 88.63%,
      1 90.9%,
      0.99 93.18%,
      0.98 95.45%,
      0.99 97.73%,
      1 100%
    );
  transition-delay: 0.2s;
}

.button_conecta:hover ~ .icon_button svg {
  transform: rotateZ(-90deg);
  transition: all 0.5s ease-in-out;
  transition-delay: 0.1s;
}

/* ==============================
      4. HEADER & NAVIGATION
============================== */

/* ==============================
      5. FOOTER
============================== */
.site-footer {
  background: var(--dark-gray);
  color: var(--white);
  text-align: center;
  border: none;
  position: relative;
  padding: 40px 0 20px 0;
  overflow-y: hidden;
}

.site-footer a,
.footer-widgets a {
  color: var(--white);
}

.site-footer a:hover {
  color: var(--light);
}

.conecta_after_footer div:nth-child(1) {
  flex: 1;
}
.conecta_after_footer div:nth-child(2) {
  flex: 3;
  text-align: end;
}

.footer-widgets {
  background: var(--dark-gray);
  border: none;
  font-size: 15px;
  color: var(--white);
  position: relative;
}

.footer-widgets > .wrap div .widget-wrap h3 {
  text-align: left;
  font-family: "Poppins", serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 16px;
  color: var(--white);
}

.footer-widgets > .wrap div .widget-wrap ul li a,
.footer-widgets > .wrap div .widget-wrap ul li {
  color: var(--white);
  line-height: 100%;
  margin: 0;
  padding: 5px 0;
}

.footer-widgets > .wrap div .widget-wrap ul li a:hover {
  color: var(--mint);
}

/* ==============================
      7. CARDS
============================== */

.conecta-dynamic-card:hover {
  background-color: var(--bg-hover) !important;
}

.bio.conecta-dynamic-card .card-front {
  background-color: var(--bg-hover) !important;
}

.bio.conecta-dynamic-card {
  background-color: transparent !important;
  min-height: 530px;
}

.conecta-dynamic-card .card-tags {
  background-color: var(--shape-color);
}

.conecta-dynamic-card .card-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.conecta-dynamic-card .shape {
  position: absolute;
  background-color: var(--shape-color);
}

/* PRESET: Olas */
.conecta-dynamic-card.preset-olas .shape-1 {
  width: 89px;
  height: 148px;
  right: 0;
  top: 20px;
  z-index: 1;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 89 148" xmlns="http://www.w3.org/2000/svg"><path d="M144.219 0.161614C149.654 -0.822004 154.856 2.78581 155.84 8.22021C156.824 13.6547 153.216 18.8576 147.782 19.8413C125.179 23.9322 86.8513 34.2251 73.8402 71.436C66.1608 93.3989 57.3202 112.043 47.2983 125.35C37.4509 138.425 24.958 148.245 9.83634 147.997C4.31424 147.906 -0.0894201 143.356 0.00137928 137.833C0.0923938 132.312 4.64266 127.909 10.1645 128C15.718 128.091 22.9012 124.499 31.3227 113.318C39.5695 102.368 47.5909 85.9109 54.9604 64.8345C72.0473 15.9668 121.742 4.22987 144.219 0.161614Z"/></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  animation: floatrot 3s
    linear(
      0 0%,
      0 1.8%,
      0.01 3.6%,
      0.03 6.35%,
      0.07 9.1%,
      0.13 11.4%,
      0.19 13.4%,
      0.27 15%,
      0.34 16.1%,
      0.54 18.35%,
      0.66 20.6%,
      0.72 22.4%,
      0.77 24.6%,
      0.81 27.3%,
      0.85 30.4%,
      0.88 35.1%,
      0.92 40.6%,
      0.94 47.2%,
      0.96 55%,
      0.98 64%,
      0.99 74.4%,
      1 86.4%,
      1 100%
    )
    infinite;
}

.conecta-dynamic-card.preset-trazos .shape-2 {
  width: 103px;
  height: 260px;
  z-index: 1;
  left: 0;
  top: 20%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 103 260" xmlns="http://www.w3.org/2000/svg"><path d="M83 130C83 69.2487 33.7513 20 -27 20C-87.7513 20 -137 69.2487 -137 130C-137 190.751 -87.7513 240 -27 240V260C-98.797 260 -157 201.797 -157 130C-157 58.203 -98.797 0 -27 0C44.797 0 103 58.203 103 130C103 201.797 44.797 260 -27 260V240C33.7513 240 83 190.751 83 130Z" /></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  animation: float 2s
    linear(
      0 0%,
      0 1.8%,
      0.01 3.6%,
      0.03 6.35%,
      0.07 9.1%,
      0.13 11.4%,
      0.19 13.4%,
      0.27 15%,
      0.34 16.1%,
      0.54 18.35%,
      0.66 20.6%,
      0.72 22.4%,
      0.77 24.6%,
      0.81 27.3%,
      0.85 30.4%,
      0.88 35.1%,
      0.92 40.6%,
      0.94 47.2%,
      0.96 55%,
      0.98 64%,
      0.99 74.4%,
      1 86.4%,
      1 100%
    )
    infinite;
}

.cards-container
  .proyectos:nth-child(even)
  .conecta-dynamic-card.preset-olas
  .shape-1,
.cards-container
  .team:nth-child(even)
  .conecta-dynamic-card.preset-olas
  .shape-1 {
  top: -20px;
  right: -50px;
  rotate: 75deg;
  animation-delay: 0.8s;
}

.shape_blur {
  animation: floating 3s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
}

.cards-container
  .proyectos:nth-child(even)
  .conecta-dynamic-card.preset-olas
  .shape-2,
.cards-container
  .team:nth-child(even)
  .conecta-dynamic-card.preset-olas
  .shape-2 {
  top: -100px;
  right: -50px;
  animation-delay: 1.5s;
}

.card-back,
.card-front {
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.card-front {
  transform-style: preserve-3d;
}

.bio.conecta-dynamic-card .card-shapes {
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
  opacity: 1;
  transition-delay: 0.4s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  clip-path: inset(0 round 40px);
}

.card-front img {
  transition:
    transform 0.3s
      linear(
        0 0%,
        0 1.8%,
        0.01 3.6%,
        0.03 6.35%,
        0.07 9.1%,
        0.13 11.4%,
        0.19 13.4%,
        0.27 15%,
        0.34 16.1%,
        0.54 18.35%,
        0.66 20.6%,
        0.72 22.4%,
        0.77 24.6%,
        0.81 27.3%,
        0.85 30.4%,
        0.88 35.1%,
        0.92 40.6%,
        0.94 47.2%,
        0.96 55%,
        0.98 64%,
        0.99 74.4%,
        1 86.4%,
        1 100%
      ),
    filter 0.5s ease;
  transform: translateZ(0px) scale(1);
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-front .bio_name {
  transition:
    transform 0.3s
      linear(
        0 0%,
        0 1.8%,
        0.01 3.6%,
        0.03 6.35%,
        0.07 9.1%,
        0.13 11.4%,
        0.19 13.4%,
        0.27 15%,
        0.34 16.1%,
        0.54 18.35%,
        0.66 20.6%,
        0.72 22.4%,
        0.77 24.6%,
        0.81 27.3%,
        0.85 30.4%,
        0.88 35.1%,
        0.92 40.6%,
        0.94 47.2%,
        0.96 55%,
        0.98 64%,
        0.99 74.4%,
        1 86.4%,
        1 100%
      ),
    opacity 1s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  transform: translateZ(0px) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 1;
}

.card-back {
  transform: rotateY(180deg);
}

.bio.conecta-dynamic-card:hover .card-front {
  transform: rotateY(-180deg);
  transition-delay: 0.5s;
}

.bio.conecta-dynamic-card:hover .card-back {
  transform: rotateY(0deg);
  transition-delay: 0.5s;
}

.card-back .descripcion-interna {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0s;
}

.bio.conecta-dynamic-card:hover .card-shapes {
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
  opacity: 0;
  transition-delay: 0.6s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bio.conecta-dynamic-card:hover .card-back .descripcion-interna {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.bio.conecta-dynamic-card:hover .card-front img {
  transform: translateZ(75px) scale(1.05);
  filter: drop-shadow(0px 20px 25px rgba(0, 0, 0, 0.4));
  transition-delay: 0.08s;
}

.bio.conecta-dynamic-card:hover .card-front .bio_name {
  transform:
    translate3d(20px, -20px, 75px),
    opacity 1s cubic-bezier(0.6, -0.28, 0.74, 0.05);
  opacity: 0;
  transition-delay: 0s;
}

/* ==============================
      8. MEGA MENU
============================== */

.mega-menu-logo a:hover img {
  animation: 1s shake linear;
}

.mega-menu-logo a:hover img {
  animation: shake-horizontal 0.3s ease-in-out;
  animation-iteration-count: 1;
}

ul#mega-menu-primary li:last-child {
  margin: 0 !important;
}

@keyframes shake-horizontal {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* ==============================
      9. CONTENT
============================== */
.float_image {
  animation: float 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

.float_image_2 {
  animation: pulse 2s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
}
.float_image_3 {
  animation: float 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
/* 1. Solapamiento base y sombra */
.galeria-spread-cards .gb-carousel-item {
  flex-shrink: 0;
  margin-left: -5%;
  transform: rotate(4deg);
  filter: drop-shadow(-8px 5px 12px rgba(0, 0, 0, 0.15));
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

/* 2. Evitar que la primera imagen se salga de la pantalla por el margen */
.galeria-spread-cards .gb-carousel-item:first-child {
  margin-left: 0;
}

/* 3. Desorden controlado: rotar las imágenes pares hacia el otro lado */
.galeria-spread-cards .gb-carousel-item:nth-child(even) {
  transform: rotate(-3deg) translateY(10px);
}

/* 4. Efecto Hover: traer la imagen al frente y enderezarla */
.galeria-spread-cards .gb-carousel-item:hover,
.galeria-spread-cards .gb-carousel-item:focus-within {
  transform: rotate(0deg) scale(1.05) translateY(-15px);
  z-index: 50; /* Fuerza a que la tarjeta activa pase por encima de las demás */
  cursor: pointer;
}

/* 5. Forzar el freno del scroll en el último elemento para eliminar el espacio fantasma */
.galeria-spread-cards .gb-carousel-item:last-child {
  scroll-snap-align: end;
  /* Añadimos un pequeño margen derecho para que la sombra de la última tarjeta no se corte con el borde del contenedor */
  margin-right: 20px;
}

/* Opcional: Asegurar que el contenedor principal no guarde padding residual a la derecha */
.galeria-spread-cards {
  scroll-padding-right: 0;
}

.contact_container {
  mask-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 1246 502' xmlns='http://www.w3.org/2000/svg'><path d='M950 87C950 109.091 967.909 127 990 127H1206C1228.09 127 1246 144.909 1246 167V462C1246 484.091 1228.09 502 1206 502H40C17.9086 502 0 484.091 0 462V40C0 17.9086 17.9086 0 40 0H910C932.091 0 950 17.9086 950 40V87Z'/></svg>");
  mask-size: auto;
  mask-position: center;
  mask-repeat: no-repeat;
  z-index: 1;
}

/* ==============================
      10. ANIMATIONS
============================== */

@keyframes blocks {
  0% {
    transform: translateX(0px) rotate(90deg);
  }
  50% {
    transform: translateX(-20px) rotate(90deg);
  }
  100% {
    transform: translateX(0px) rotate(90deg);
  }
}

@keyframes blocksreverse {
  0% {
    transform: translateX(0px) rotate(90deg);
  }
  50% {
    transform: translateX(20px) rotate(90deg);
  }
  100% {
    transform: translateX(0px) rotate(90deg);
  }
}

@keyframes blocks-vertical {
  0% {
    transform: translateY(0px) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(140deg);
  }
  100% {
    transform: translateY(0px) rotate(0);
  }
}

@keyframes blocks-horizontal {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes floating {
  0% {
    transform: translate3d(30px, 20px, 0px);
  }
  50% {
    transform: translate3d(20px, -20px, 0px);
  }
  100% {
    transform: translate3d(30px, 20px, 0px);
  }
}
@keyframes gelatine {
  from,
  to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes hithere {
  30% {
    transform: scale(1.2);
  }
  40%,
  60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}

@keyframes floatrot {
  0% {
    -webkit-transform: translateY(10px) rotate(15deg);
    transform: translateY(10px) rotate(15deg);
  }
  50% {
    -webkit-transform: translateY(20px) rotate(25deg);
    transform: translateY(20px) rotate(25deg);
  }
  to {
    -webkit-transform: translateY(10px) rotate(15deg);
    transform: translateY(10px) rotate(15deg);
  }
}

/* ==============================
      11. CONTACT FORMS
============================== */
/* --- Contenedores Base --- */
.akila_contact_forms {
  gap: 10px;
  font-size: 14px;
  color: #383838;
  display: flex;
  flex-wrap: wrap;
}

.input_container {
  position: relative;
  display: flex;
  flex-direction: column;
}

.input_container.row50 {
  flex: 1 0 46%;
}
.input_container.row100 {
  flex: 1 0 100%;
}
.mb-20 {
  margin-bottom: 10px;
}

.policies span {
  font-size: 10px;
  line-height: 1.4;
}

/* Evitar que CF7 rompa el diseño con sus capas extra */
.input_container span.wpcf7-form-control-wrap {
  width: 100%;
}

/* --- Estilos del Input y Textarea --- */
.akila_contact_forms input[type="text"],
.akila_contact_forms input[type="email"],
.akila_contact_forms textarea {
  width: 100%;
  padding: 5px; /* Un poco más de padding para que respire */
  font-size: 16px;
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  background: transparent;
  outline: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  box-sizing: border-box;
}

.akila_contact_forms textarea {
  resize: none;
  height: 120px;
}

/* Estado Focus del Input (Estilo Google) */
.akila_contact_forms input:focus,
.akila_contact_forms textarea:focus {
  border-color: #1a73e8; /* Azul Google (puedes cambiarlo por tu color de marca) */
  background-color: rgba(26, 115, 232, 0.02); /* Sutil tinte de fondo */
}
/* --- 1. Domar la estructura automática de CF7 --- */
.akila_contact_forms .input_container p {
  position: relative; /* Hacemos que el <p> sea el punto de referencia para el label */
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.akila_contact_forms .input_container br {
  display: none; /* Ocultamos los saltos de línea que rompen el diseño */
}

.akila_contact_forms .wpcf7-form-control-wrap {
  width: 100%; /* Aseguramos que el span de CF7 ocupe todo el ancho */
}

/* --- 2. Ajuste del Label Flotante --- */
.label_form {
  position: absolute;
  left: 12px;
  top: 6px;
  padding: 0 4px;
  color: #80868b;
  cursor: text;
  transition:
    transform 0.2s ease,
    font-size 0.2s ease,
    color 0.2s ease;
  pointer-events: none;
  background-color: transparent;
  transform-origin: left top;
  z-index: 2; /* Para que quede por encima del span de CF7 */
}

/* --- 3. LA MAGIA: Animación usando :has() --- */
/* Si el contenedor TIENE un input/textarea con focus o que no esté vacío */
.akila_contact_forms .input_container:has(input:focus) .label_form,
.akila_contact_forms
  .input_container:has(input:not(:placeholder-shown))
  .label_form,
.akila_contact_forms .input_container:has(textarea:focus) .label_form,
.akila_contact_forms
  .input_container:has(textarea:not(:placeholder-shown))
  .label_form {
  transform: translateY(-23px) scale(0.85);
  color: var(--blue);
  background-color: var(--mint);
  font-weight: 500;
}

/* Si el input tiene texto pero el usuario hace click fuera (pierde el foco) */
.akila_contact_forms
  .input_container:has(input:not(:placeholder-shown):not(:focus))
  .label_form,
.akila_contact_forms
  .input_container:has(textarea:not(:placeholder-shown):not(:focus))
  .label_form {
  color: #80868b;
}

/* --- 4. Autocompletado (igual que antes pero adaptado con :has) --- */
.akila_contact_forms input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
}

.akila_contact_forms .input_container:has(input:-webkit-autofill) .label_form {
  transform: translateY(-23px) scale(0.85);
  color: #80868b;
  background-color: #ffffff;
}

input.wpcf7-form-control.wpcf7-submit {
  margin: 0;
  width: 100%;
  background: var(--mint, #00bfa5);
  color: #ffffff;
  padding: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: 0.2s;
}

input.wpcf7-form-control.wpcf7-submit:hover {
  filter: brightness(0.9);
}

input.wpcf7-form-control.wpcf7-submit[disabled] {
  filter: grayscale(1) opacity(0.6);
  transition: 0.2s;
}
/* ==============================
      12. MOBILE
============================== */

@media (width <=768px) {
  .wpc-filters-section {
    margin-bottom: 0px !important;
  }
  .mec-wrap {
    display: flex !important;
    justify-content: center !important;
  }
  .contact_container {
    mask-image: none !important;
  }
  #mega-menu-wrap-primary
    #mega-menu-primary
    > li.mega-menu-item
    > a.mega-menu-link {
    line-height: 50px !important;
  }

  #mega-menu-wrap-primary
    #mega-menu-primary
    li#mega-menu-item-7167
    > a.mega-menu-link:before {
    background-size: cover !important;
    width: 100% !important;
    height: 200px !important;
    border-radius: 10px !important;
  }

  li.btn_donar a::after {
    content: "heart_smile";
    font-family: var(--wp--preset--font-family--material-symbols);
    display: block !important;
    position: absolute;
    z-index: 3;
    bottom: 0;
    color: rgb(255, 218, 132);
    width: 200px;
    mix-blend-mode: hard-light;
    font-size: 150px;
    font-weight: 300;
    right: -80px;
    height: 200px;
    bottom: -120px;
  }

  .btn_donar a {
    position: relative !important;
    overflow: hidden !important;
  }
}