/*
Theme Name: Axegra Custom Theme
Author: Ideal Agency
Version: 1.0
Text Domain: idealblocktheme
*/

:root {
  --spacing-8: var(--wp--preset--spacing--space-8);
  --spacing-12: var(--wp--preset--spacing--space-12);
  --spacing-16: var(--wp--preset--spacing--space-16);
  --spacing-24: var(--wp--preset--spacing--space-24);
  --spacing-32: var(--wp--preset--spacing--space-32);
  --spacing-40: var(--wp--preset--spacing--space-40);
  --spacing-48: var(--wp--preset--spacing--space-48);
  --spacing-64: var(--wp--preset--spacing--space-64);
  --spacing-80: var(--wp--preset--spacing--space-80);
  --spacing-96: var(--wp--preset--spacing--space-96);
  --spacing-160: var(--wp--preset--spacing--space-160);
  --transition-dur: 0.3s;
  --filter: invert(0);
  --border-radius: 16px;

  --color-bkg: var(--wp--preset--color--bkg);
  --color-text: var(--wp--preset--color--text);
  --color-accent: var(--wp--preset--color--accent);
  --color-core-black: var(--wp--preset--color--core-black);
  --color-graphite: var(--wp--preset--color--graphite);
  --color-bkg60: var(--wp--preset--color--bkg-60);

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--wp--preset--font-family--font-primary);
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 
}

/* ul / ol */
ul.wp-block-list, ol.wp-block-list { margin: var(--spacing-12); padding-inline-start: var(--spacing-16); }
ul { list-style-type: square; }
ul li::marker, ol li::marker { color: var(--color-accent); }
ol.wp-block-list li, .entry-content li { margin-bottom: var(--spacing-12); }


.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 158px; }
.wp-block-video video { height: 40vh !important; width: 100%; object-fit: cover; }
[id] { scroll-margin-top: 100px; }

.wp-block-image { overflow: hidden; }




/* === Effects === */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-core-black);
  z-index: 9999;
  transform: translateX(0);
  pointer-events: none;
}

/* === Cursor follower === */
@media (pointer: coarse) {
  .cursor-seguidor {
    display: none !important;
  }
}

.cursor-seguidor {
  width: 40px;
  height: 40px;
  border: 1px dashed var(--color-accent); 
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); 
  pointer-events: none; 
  z-index: 9999;
  will-change: transform;
  mix-blend-mode: multiply;
}






/* === Layout === */
.wp-block:not(.alignfull) { max-width: var(--wp--style--global--content-size, 800px); }
.wp-block.alignwide { max-width: var(--wp--style--global--wide-size, 100%); }
.hidden { display: none !important; }


/* === Buttons === */
button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background: inherit;
  color: inherit;
}

.btn a {
    padding-left: var(--spacing-64);
}

.wp-block-button__link {
  display: inline-block;
  overflow: hidden;
  position: relative;
  white-space: nowrap; 
}

.wp-block-button__link:hover {
  border-color: var(--color-text) !important;
}

/* wrapper */
.btn-text-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
}

/* texts */
.btn-text-inner,
.btn-text-inner-hover {
  display: block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

/* hover state text positioning */
.btn-text-inner-hover {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* animation */
.wp-block-button__link:hover .btn-text-inner {
  transform: translateY(-100%);
}

.wp-block-button__link:hover .btn-text-inner-hover {
  transform: translateY(-100%);
}





/* === Header === */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.header-scrolled {
  background-color: rgb(247 247 247 / 90%);
  backdrop-filter: blur(8px);
}

header .logo {
  max-width: 60%
}

div#modal-1 {
  height: 100vh;
}

header .wp-block-navigation .wp-block-navigation-item,
.wp-block-navigation-overlay-close,
header p {
  color: var(--color-bkg) !important;
}

/* Menu opened */
#modal-1 .wp-block-navigation-overlay-close svg {
    position: absolute;
    top: var(--spacing-16);
    right: var(--spacing-16);
}

#modal-1 .logo {
    position: absolute;
    top: var(--spacing-16);
    left: var(--spacing-16);
	max-width: 100% !important;
}

.has-large-font-size.items-justified-right.is-vertical.wp-block-navigation.has-font-secondary-font-family.is-content-justification-right.is-layout-flex.wp-container-core-navigation-is-layout-57edc1cb.wp-block-navigation-is-layout-flex {
    border-right: 3px solid #fff;
    padding-right: 40px;
}


footer a:hover, #modal-1 .wp-block-navigation__container a:hover {
    color: var(--wp--preset--color--bkg-60) !important;
}


/* === Footer === */
footer {
  background-color: var(--wp--preset--color--accent);
  color: var(--color-bkg);
  font-size: 14px;
}

footer .wp-block-column:not(:last-child) {
  border-right: 2px solid var(--wp--preset--color--bkg);
  padding-right: var(--spacing-24);
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-linkedin {
  background-color: transparent !important;
  border: 2px solid #fff;
}



/* === Linea animada === */
hr {
  height: 6px !important;
}

.wp-block-separator.linea-animada {
  transform-origin: left center;
}

.wp-block-separator.is-style-linea-fina { 
  height: 2px !important; 
  border: none !important; 
  width: 100% !important;
}


/* === Outline image === */
.outline-image {
  padding: var(--spacing-8);
  border: 3px solid var(--wp--preset--color--text);
  aspect-ratio:  1/1;
}

.outline-image img {
  width: 100%;
}

.outline-image:has(img[style*="border-top-left-radius:100%"]),
.outline-image:has(img[style*="border-radius:100%"]) {
  border-radius: 50% !important;
  display: inline-block;
  max-width: 100%;
}

.outline-image:has(img[style*="border-top-left-radius:100%"]) img {
  border-radius: 50% !important;
}

.solicita .outline-image {
  border-color: var(--color-accent);
}

.solicita .wp-block-heading {
  position: relative;
  background-color: var(--color-accent);
  padding: var(--spacing-64) var(--spacing-24) var(--spacing-24);
  color: var(--color-bkg);
}


.solicita .wp-block-heading::before {
    content: "";
    position: absolute;
    top: -42px;
    left: 20%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 36px solid transparent;
    border-bottom: 42px solid var(--color-accent);
}

.solicita hr {
    background-color: var(--color-accent) !important;
}


/* === Resultados bullets === */
.resultado-wrapper .wp-block-group {
    padding-left: var(--spacing-80) !important;
}

.resultado-wrapper .wp-block-group .title-blue,
.resultado-wrapper .wp-block-group .title-orange,
.resultado-wrapper .wp-block-group .title-black {
	position: relative;
}

.resultado-wrapper .wp-block-group .title-blue {
    --color-decoracion: var(--wp--preset--color--accent-blue);
}

.resultado-wrapper .wp-block-group .title-orange {
	--color-decoracion: var(--wp--preset--color--accent);
}

.resultado-wrapper .wp-block-group .title-black {
	--color-decoracion: var(--wp--preset--color--text);
}

.resultado-wrapper .wp-block-group .title-blue::before,
.resultado-wrapper .wp-block-group .title-orange::before,
.resultado-wrapper .wp-block-group .title-black::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -34px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-decoracion);
}

.resultado-wrapper .wp-block-group .title-blue::after,
.resultado-wrapper .wp-block-group .title-orange::after,
.resultado-wrapper .wp-block-group .title-black::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -80px;
    width: 58px;
    height: 3px;
    background-color: var(--color-decoracion);
    z-index: -1;
}




/* === Flip Card === */
.wp-block-cover.flip-card {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s !important;
  transform-style: preserve-3d;
  aspect-ratio: 1/1;
  min-height: auto;
  border: 12px solid #fff;
  outline: 2px solid black;
}

.wp-block-cover.flip-card .wp-block-cover__inner-container {
  opacity: 0; 
  transition: opacity 0.3s ease;
  transform: rotateY(180deg);
}

.wp-block-cover.flip-card:hover {
  transform: rotateY(180deg);
  color: var(--color-bkg);
  background: linear-gradient( 319deg, rgba(233, 81, 28, 1) 0%, rgba(204, 164, 86, 1) 40%, rgba(76, 186, 174, 1) 100%);
}

.wp-block-cover.flip-card:hover .wp-block-cover__inner-container {
  opacity: 1;
}



.wp-block-cover.flip-card:hover .wp-block-cover__image-background {
  opacity: 0 !important;
}

.servicios-bubbles .wp-block-group:nth-of-type(1) .wp-block-cover.flip-card:hover {
    background: linear-gradient(176deg, var(--color-accent), #bd9056);
}

.servicios-bubbles .wp-block-group:nth-of-type(2) .wp-block-cover.flip-card:hover {
	background: linear-gradient(172deg, #e14d26 0%, #d46f38 100%);
}

.servicios-bubbles .wp-block-group:nth-of-type(3) .wp-block-cover.flip-card:hover {
	background-color: #dc4b18;
}

.servicios-bubbles .wp-block-group:nth-of-type(4) .wp-block-cover.flip-card:hover {
	background-color: #079a7d;
}

.servicios-bubbles .wp-block-group:nth-of-type(5) .wp-block-cover.flip-card:hover {
	background: linear-gradient(269deg, #89b586 0%, #c0a657 100%);
}

.servicios-bubbles .wp-block-group:nth-of-type(6) .wp-block-cover.flip-card:hover {
	background: linear-gradient(250deg, #c2a655 0%, #ea8b26 100%);
}




/* === CTA BLOCK === */
.cta {
  border: 8px solid white;
  outline: 2px solid black;
  cursor: pointer;
  transition: all .5s ease; 
}

.cta:hover {
	transform: scale(.98);
}

.cta .wp-block-heading {
  color: var(--wp--preset--color--bkg);
}








/* === HERO GLOW EFFECT === */
.hero-glow-container {
  position: relative;
  overflow: hidden;
  padding-top: 12rem !important;
  width: 100vw;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100vw;
}

.hero-glow-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-hero-white.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}


.hero-glow-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, #ff4c07 0%, #df9c5c 35%, #ffd174 55%, #43d3b7 80%, #ff8900 100%);
  filter: drop-shadow(0 0 15px rgba(224, 90, 38, 0.6));
  -webkit-mask-image: 
    url('/wp-content/themes/idealblocktheme/assets/images/malla-hero-white.svg'),
    radial-gradient(circle 250px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, transparent 100%);
  -webkit-mask-composite: source-in; /* Clave en WebKit (Chrome/Safari) para cruzar las dos máscaras */
  mask-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-hero-white.svg'),
    radial-gradient(circle 250px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, transparent 100%);
  mask-composite: intersect; /* Estándar de Firefox/moderno para intersectar */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center right;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center right;
  transition: opacity 0.3s ease;
  opacity: 0;
}




.hero-glow-container:hover::after {
  opacity: 1;
}

.hero-glow-container > * {
  position: relative;
  z-index: 3;
}




/* === SERVICIOS BUBBLES === */
.servicios-bubbles {
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--spacing-64);
}

.servicios-bubbles .wp-block-group {
  flex-basis: 30% !important;
}





/* === Panel Formulario === */
.panel-formulario {
  position: fixed;
  top: 0;
  left: -100%; 
  width: 50%; 
  height: 100vh; 
  background-color: var(--color-accent); 
  z-index: 99999;
  box-shadow: 5px 0 25px rgba(0,0,0,0.15);
  transition: left 0.4s ease-in-out;
  padding: var(--spacing-40);
  overflow-y: auto; 
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.body-panel-abierto::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
  pointer-events: auto;
}

.panel-formulario.activo {
  left: 0;
}

.boton-cerrar-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--color-graphite);
  font-size: 24px; 
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  transition: color 0.3s ease, transform 0.3s ease;
}

.boton-cerrar-panel:hover {
  color: var(--color-text); 
  transform: rotate(90deg);
}

/* Submit form button */
.fluentform button[type="submit"] {
  background-color: var(--wp--preset--color--text) !important;
}

.ff-default .ff-el-form-control:focus {
  border-color: var(--wp--preset--color--text) !important;
}

.panel-formulario .logo {
    align-self: flex-end;
    width: auto;
    height: auto;
}

.panel-formulario .logo img {
    width: 172px;
}

.panel-formulario::before {
    content: "";
    position: absolute;
    top: 0%;
    left: -20%;
    width: 73%;
    height: 32%;
    background-image: url(/wp-content/themes/idealblocktheme/assets/images/malla-hero-white.svg);
    background-repeat: repeat;
    /* background-size: cover; */
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    background-position: bottom left;
}





/* === BANNER === */
.banner {
  position: relative;
  overflow: hidden;
  min-height: 38vh !important; 
  background: linear-gradient(135deg, 
    #fd672c 0%,    
    #efa053 35%,   
    #ccad6e 55%,   
    #60b3a3 80%,   
    #f08b16 100%   
  );
  background-size: cover;
  background-repeat: no-repeat;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-banner.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  pointer-events: none;
  opacity: .2;
}

.banner::after {
content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
    background: linear-gradient(-45deg, 
    #ff7a46 0%,    
    #df9c5c 25%,   
    #dfb765 50%,   
    #60b3a3 75%,   
    #f08b16 100%   
  );
  background-size: 400% 400%; 
  
  animation: automaticGlowFlow 3s ease infinite;

  filter: saturate(2) brightness(1.2) drop-shadow(0 0 15px rgba(224, 90, 38, 0.5));

  -webkit-mask-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-banner.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  
  mask-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-banner.svg');
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;

  opacity: 1; 
}

.banner > * {
  position: relative;
  z-index: 3;
}

@keyframes automaticGlowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Quienes block */
.quienes-block::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-banner.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  pointer-events: none;
  opacity: .2;
}

.quienes-block::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('/wp-content/themes/idealblocktheme/assets/images/malla-banner.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  
  filter: invert(1) brightness(2) drop-shadow(0 0 12px rgba(226, 226, 226, 0.9));
  -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, transparent 100%);
  mask-image: radial-gradient(circle 250px at var(--mouse-x, -999px) var(--mouse-y, -999px), black 0%, transparent 100%);
  transition: opacity 0.3s ease;
  opacity: 0; 
}

.quienes-block:hover::after {
  opacity: 1;
}



/* Banner orange */
.banner-orange {
    background-color: var(--wp--preset--color--accent);
    color: var(--color-bkg) !important;
}

.banner-orange .wrapper {
    width: 80rem;
    margin: auto;
}

.banner-orange .wrapper .wp-block-heading {
    color: var(--color-bkg);
}

.banner-orange .wrapper hr {
    background-color: var(--color-bkg) !important;
}



/* === QUIENES SOMOS === */
.quienes-block .row {
    position: relative;
}

.quienes-block .row:not(:last-child)::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background-color: var(--color-text);
}

.quienes-block .row:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 60px;
    background-color: var(--color-text);
}

.quienes-block .row:nth-of-type(2)::before {
    width: 270px; 
}


/* Animacion bkg */
.quienes-block {
  position: relative;
  overflow: hidden;}

.quienes-block::before {
  top: -25%;
  opacity: .1;
}

.quienes-block::after {
  top: -25%;
  filter: invert(1) brightness(0) drop-shadow(0 0 12px rgba(226, 226, 226, 0.9));
}







/* === LEGAL === */
.page-template-page-legal main {
    padding-top: var(--spacing-160);
}

.page-template-page-legal .wp-block-post-title {
    font-weight: 700;
    text-transform: uppercase;
}

.page-template-page-legal .wp-block-heading, .page-template-page-legal .wp-block-paragraph {
    margin-block-start: var(--spacing-32);
}


/* === ACCESO CLIENTES === */
.acceso-clientes {
    min-height: 100dvh;
}




/* --------------------------
* Responsive
* -------------------------- */
@media (max-width: 1440px) {

}


@media (max-width: 768px) {

  header .logo { max-width: 50% }
	
  .has-large-font-size.items-justified-right.is-vertical.wp-block-navigation.has-font-secondary-font-family.is-content-justification-right.is-layout-flex.wp-container-core-navigation-is-layout-57edc1cb.wp-block-navigation-is-layout-flex {
		padding-right: 0;
		border: none;
	}
	
  .wp-block-group.is-content-justification-center.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-346a235b.wp-block-group-is-layout-flex {
	  flex-direction: column;
	  align-items: flex-start;
	}
	
  #modal-1 ul { align-items: flex-start; width: 100%; }
  #modal-1 .logo { max-width: 80% !important; }

  footer { text-align: center; }
  footer .wp-block-column { border: none !important; }

  footer .is-layout-flex, 
  footer .wp-block-navigation ul, footer .wp-block-navigation ul li { 
  justify-content: center;
    width: 100%;
  }
	
  footer .copyright { flex-direction: column-reverse; }

  .panel-formulario { width: 90%; }
  .panel-formulario::before { left: -38%; }
  .flex-col-mobile {  flex-direction: column; gap: var(--spacing-32); }

  .servicios-bubbles { flex-wrap: nowrap; overflow-x: scroll; scroll-snap-type: x proximity; }
  .servicios-bubbles .wp-block-group { scroll-snap-align: center; }
	
	.quienes-block .row:not(:first-child) {
		margin-top: 95px;
	}
	
	.servicios-bubbles > .wp-block-group { flex: 0 0 66% !important; max-width: 66% !important; }
	.flip-card p { font-size: .8rem !important; }

}



@media (max-width: 599px) {


}