.elementor-2901 .elementor-element.elementor-element-e0b6a21{--display:flex;--min-height:397px;--overlay-opacity:0.5;--border-radius:0px 0px 71px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:050px;--padding-bottom:050px;--padding-left:0px;--padding-right:0px;}.elementor-2901 .elementor-element.elementor-element-e0b6a21:not(.elementor-motion-effects-element-type-background), .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://agenciacodicedigital.com/wp-content/uploads/2026/03/fondo-banner-landing.png");}.elementor-2901 .elementor-element.elementor-element-e0b6a21::before, .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .elementor-background-video-container::before, .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .e-con-inner > .elementor-background-video-container::before, .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .elementor-background-slideshow::before, .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2901 .elementor-element.elementor-element-e0b6a21 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-2901 .elementor-element.elementor-element-a6a1078{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#FFE051;}.elementor-2901 .elementor-element.elementor-element-a6a1078 .elementor-headline{text-align:center;font-family:"Bruno Ace", Sans-serif;font-size:56px;}.elementor-2901 .elementor-element.elementor-element-a6a1078 .elementor-headline-dynamic-wrapper path{stroke:#F7CC27;stroke-width:9px;}.elementor-2901 .elementor-element.elementor-element-a6a1078 .elementor-headline-plain-text{color:#FFFFFF;}.elementor-2901 .elementor-element.elementor-element-2448e39{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-7232c37 > .elementor-widget-container{padding:60px 60px 60px 60px;}.elementor-2901 .elementor-element.elementor-element-7232c37 .elementor-heading-title{font-family:"Mukta", Sans-serif;font-size:35px;font-weight:400;-webkit-text-stroke-color:#000;stroke:#000;color:#FFFFFF;}.elementor-2901 .elementor-element.elementor-element-b6a3c70{--display:flex;}.elementor-2901 .elementor-element.elementor-element-c5b8bff{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:54px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2901 .elementor-element.elementor-element-a018ed1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2901 .elementor-element.elementor-element-274af85 .elementor-heading-title{font-family:"Bruno Ace", Sans-serif;font-size:62px;color:#FFFFFF;}.elementor-2901 .elementor-element.elementor-element-20515b0 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2901 .elementor-element.elementor-element-20515b0 .elementor-heading-title{font-family:"Mukta", Sans-serif;font-size:40px;font-weight:500;}.elementor-2901 .elementor-element.elementor-element-f83ee64{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2901 .elementor-element.elementor-element-30eff40{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-2901 .elementor-element.elementor-element-5df20f4{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2901 .elementor-element.elementor-element-ca3317c{text-align:center;}.elementor-2901 .elementor-element.elementor-element-ca3317c .elementor-heading-title{font-family:"Mukta", Sans-serif;font-size:26px;}.elementor-2901 .elementor-element.elementor-element-19ef5f4 .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-2901 .elementor-element.elementor-element-5313f1d{text-align:center;}.elementor-2901 .elementor-element.elementor-element-5313f1d .elementor-heading-title{font-family:"Mukta", Sans-serif;font-size:26px;}.elementor-2901 .elementor-element.elementor-element-a628f6e .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-2901 .elementor-element.elementor-element-3682187{text-align:center;}.elementor-2901 .elementor-element.elementor-element-3682187 .elementor-heading-title{font-family:"Bruno Ace", Sans-serif;font-size:53px;text-shadow:2px 5px 0px rgba(0, 249.9, 240.12130434782608, 0.97);}.elementor-2901 .elementor-element.elementor-element-64c8f42{--display:flex;}.elementor-2901 .elementor-element.elementor-element-833e46a{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-6c4ca4d{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2 .elementor-image-box-title{font-family:"Bruno Ace", Sans-serif;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2 .elementor-image-box-description{font-family:"Mukta", Sans-serif;font-size:25px;font-weight:700;}.elementor-2901 .elementor-element.elementor-element-3a3800c.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-2901 .elementor-element.elementor-element-3a3800c.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-2901 .elementor-element.elementor-element-3a3800c.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-3a3800c .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-2901 .elementor-element.elementor-element-3a3800c .elementor-image-box-img img{transition-duration:0.3s;}.elementor-2901 .elementor-element.elementor-element-3a3800c .elementor-image-box-title{font-family:"Bruno Ace", Sans-serif;}.elementor-2901 .elementor-element.elementor-element-3a3800c .elementor-image-box-description{font-family:"Mukta", Sans-serif;font-size:25px;font-weight:700;}.elementor-2901 .elementor-element.elementor-element-1e70440.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-2901 .elementor-element.elementor-element-1e70440.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-2901 .elementor-element.elementor-element-1e70440.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-1e70440 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-2901 .elementor-element.elementor-element-1e70440 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-2901 .elementor-element.elementor-element-1e70440 .elementor-image-box-title{font-family:"Bruno Ace", Sans-serif;}.elementor-2901 .elementor-element.elementor-element-1e70440 .elementor-image-box-description{font-family:"Mukta", Sans-serif;font-size:25px;font-weight:700;}.elementor-2901 .elementor-element.elementor-element-8d5daa7.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-2901 .elementor-element.elementor-element-8d5daa7.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-2901 .elementor-element.elementor-element-8d5daa7.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-8d5daa7 .elementor-image-box-wrapper .elementor-image-box-img{width:30%;}.elementor-2901 .elementor-element.elementor-element-8d5daa7 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-2901 .elementor-element.elementor-element-8d5daa7 .elementor-image-box-title{font-family:"Bruno Ace", Sans-serif;}.elementor-2901 .elementor-element.elementor-element-8d5daa7 .elementor-image-box-description{font-family:"Mukta", Sans-serif;font-size:25px;font-weight:700;}.elementor-2901 .elementor-element.elementor-element-c5638eb{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-2901 .elementor-element.elementor-element-c5638eb:not(.elementor-motion-effects-element-type-background), .elementor-2901 .elementor-element.elementor-element-c5638eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0E98B2 0%, #000000 100%);}.elementor-2901 .elementor-element.elementor-element-7decfaf{--display:flex;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2901 .elementor-element.elementor-element-3379d3b > .elementor-widget-container{padding:13px 13px 13px 13px;}.elementor-2901 .elementor-element.elementor-element-3379d3b{text-align:center;}.elementor-2901 .elementor-element.elementor-element-3379d3b .elementor-heading-title{font-family:"Bruno Ace", Sans-serif;font-size:32px;color:#000000;}.elementor-2901 .elementor-element.elementor-element-4b834a2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2901 .elementor-element.elementor-element-4b834a2:not(.elementor-motion-effects-element-type-background), .elementor-2901 .elementor-element.elementor-element-4b834a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #0E98B2 100%);}.elementor-2901 .elementor-element.elementor-element-7260bec{--display:flex;}.elementor-2901 .elementor-element.elementor-element-2801206 .elementor-heading-title{font-family:"Bruno Ace", Sans-serif;color:#FFFFFF;}.elementor-2901 .elementor-element.elementor-element-716dcff .elementor-icon-list-icon i{color:#31FF66;transition:color 0.3s;}.elementor-2901 .elementor-element.elementor-element-716dcff .elementor-icon-list-icon svg{fill:#31FF66;transition:fill 0.3s;}.elementor-2901 .elementor-element.elementor-element-716dcff{--e-icon-list-icon-size:26px;--icon-vertical-offset:0px;}.elementor-2901 .elementor-element.elementor-element-716dcff .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}body.elementor-page-2901:not(.elementor-motion-effects-element-type-background), body.elementor-page-2901 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://agenciacodicedigital.com/wp-content/uploads/2026/03/FondoCodice-2-scaled.png");background-size:100% auto;}@media(max-width:1024px){.elementor-2901 .elementor-element.elementor-element-2448e39{--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-833e46a{--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-6c4ca4d{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-2901 .elementor-element.elementor-element-e0b6a21{--width:100%;}.elementor-2901 .elementor-element.elementor-element-a018ed1{--width:50%;}.elementor-2901 .elementor-element.elementor-element-f83ee64{--width:50%;}.elementor-2901 .elementor-element.elementor-element-30eff40{--content-width:954px;}.elementor-2901 .elementor-element.elementor-element-7decfaf{--width:44%;}}@media(max-width:767px){.elementor-2901 .elementor-element.elementor-element-a6a1078 .elementor-headline{font-size:38px;}.elementor-2901 .elementor-element.elementor-element-2448e39{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-7232c37 .elementor-heading-title{font-size:25px;}.elementor-2901 .elementor-element.elementor-element-274af85 .elementor-heading-title{font-size:38px;}.elementor-2901 .elementor-element.elementor-element-3682187 .elementor-heading-title{font-size:40px;}.elementor-2901 .elementor-element.elementor-element-833e46a{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-6c4ca4d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2901 .elementor-element.elementor-element-dc0a3f2 .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-3a3800c .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-1e70440 .elementor-image-box-img{margin-bottom:15px;}.elementor-2901 .elementor-element.elementor-element-8d5daa7 .elementor-image-box-img{margin-bottom:15px;}}/* Start custom CSS for heading, class: .elementor-element-7232c37 */.pixel-highlight {
    color: #e1653a;
    font-weight: bold;
    display: inline-block;
    opacity: 0;
    /* La animación dura 6 segundos en total y se repite infinitamente */
    animation: pixelLoop 6s steps(15, end) infinite;
}

@keyframes pixelLoop {
    /* 0% a 10%: Aparición con efecto pixel/blur */
    0% {
        opacity: 0;
        filter: blur(15px) contrast(200%);
        transform: scale(0.9);
    }
    10% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
    /* 10% a 80%: El texto se mantiene visible (aprox. 4.2 segundos) */
    80% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
    /* 80% a 90%: Desaparición rápida */
    90% {
        opacity: 0;
        filter: blur(10px);
    }
    /* 90% a 100%: Silencio antes de reiniciar el ciclo */
    100% {
        opacity: 0;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-20515b0 *//* Estilo para todo el párrafo */
.frase-destacada {
    font-size: 24px;       /* Tamaño de letra 24 */
    font-weight: 700;      /* Peso Semi-Negrita */
    line-height: 1.4;      /* Mejora la legibilidad */
    color: #333;           /* Color base (ajústalo según tu fondo) */
}

/* Efecto Neón para la frase final */
.neon-glow {
    color: #fff; 
    font-weight: 800;      /* Un poco más de peso para resaltar el brillo */
    display: inline-block;
    padding: 0 5px;
    animation: neonPulse 3s ease-in-out infinite;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #00f3ff,
        0 0 20px #00f3ff;
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow: 
            0 0 4px #fff,
            0 0 10px #00f3ff,
            0 0 20px #00f3ff;
        transform: scale(1);
    }
    50% {
        text-shadow: 
            0 0 4px #fff,
            0 0 15px #00f3ff,
            0 0 30px #00f3ff,
            0 0 45px #08f7fe;
        transform: scale(1.05); /* Crece un 5% en el punto máximo */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-19ef5f4 *//* Variables de color */
.elementor-2901 .elementor-element.elementor-element-19ef5f4 {
  --primary-color: #ff3d3d;
  --secondary-color: #3d3dff;
  --text-color: #000000;
  --accent-color: #ffef00;
  --panel-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.75);
}

.comic-brutal-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
}

/* Ajuste clave para que el link funcione como el botón original */
.comic-brutal-button {
  position: relative;
  font-size: 1.5em;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: inline-block; /* Crucial para el diseño */
  text-decoration: none; /* Quita el subrayado */
}

.button-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 0.8em 1.5em;
  z-index: 3;
  overflow: hidden;
  transform: skew(-3deg, 1deg);
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: polygon(0% 10%, 3% 0%, 97% 0%, 100% 10%, 100% 90%, 97% 100%, 3% 100%, 0% 90%);
}

.button-text {
  position: relative;
  font-weight: 900;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
  color: var(--text-color);
  text-shadow: 0.05em 0.05em 0 var(--panel-color), -0.05em -0.05em 0 var(--panel-color), 0.05em -0.05em 0 var(--panel-color), -0.05em 0.05em 0 var(--panel-color);
  transform: rotate(2deg);
  font-family: sans-serif; /* Puedes cambiar esto a Bruno Ace si la tienes cargada */
}

.button-frame {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  right: -0.3em;
  bottom: -0.3em;
  background-color: var(--accent-color);
  border: 0.15em solid var(--text-color);
  z-index: 1;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button-shadow {
  position: absolute;
  top: 0.4em;
  left: 0.4em;
  right: -0.4em;
  bottom: -0.4em;
  background-color: var(--shadow-color);
  z-index: 0;
  transition: all 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Efectos visuales */
.halftone-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.2) 0.1em, transparent 0.1em);
  background-size: 0.5em 0.5em;
  opacity: 0.3;
  z-index: 2;
  mix-blend-mode: multiply;
}

.ink-splatter {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.15) 0%, transparent 50%),
              radial-gradient(circle at 70% 65%, rgba(0,0,0,0.15) 0%, transparent 50%);
}

/* Estados Hover */
.comic-brutal-button:hover {
  transform: rotate(-1deg) scale(1.05);
}

.comic-brutal-button:hover .button-inner {
  transform: skew(-5deg, 2deg);
  background-color: var(--secondary-color);
}

.comic-brutal-button:hover .button-text {
  color: var(--panel-color);
  text-shadow: 0.05em 0.05em 0 var(--text-color), -0.05em -0.05em 0 var(--text-color);
}

.comic-brutal-button:hover .button-shadow {
  transform: translate(0.2em, 0.2em);
}

.comic-brutal-button:hover .ink-splatter {
  opacity: 1;
}

/* Animaciones de acción */
@keyframes burst {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.comic-brutal-button:active .button-text {
  animation: burst 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a628f6e *//* Variables de color */
.elementor-2901 .elementor-element.elementor-element-a628f6e {
  --primary-color: #ff3d3d;
  --secondary-color: #3d3dff;
  --text-color: #000000;
  --accent-color: #ffef00;
  --panel-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.75);
}

.comic-brutal-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
}

/* Ajuste clave para que el link funcione como el botón original */
.comic-brutal-button {
  position: relative;
  font-size: 1.5em;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: inline-block; /* Crucial para el diseño */
  text-decoration: none; /* Quita el subrayado */
}

.button-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 0.8em 1.5em;
  z-index: 3;
  overflow: hidden;
  transform: skew(-3deg, 1deg);
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: polygon(0% 10%, 3% 0%, 97% 0%, 100% 10%, 100% 90%, 97% 100%, 3% 100%, 0% 90%);
}

.button-text {
  position: relative;
  font-weight: 900;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
  color: var(--text-color);
  text-shadow: 0.05em 0.05em 0 var(--panel-color), -0.05em -0.05em 0 var(--panel-color), 0.05em -0.05em 0 var(--panel-color), -0.05em 0.05em 0 var(--panel-color);
  transform: rotate(2deg);
  font-family: sans-serif; /* Puedes cambiar esto a Bruno Ace si la tienes cargada */
}

.button-frame {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  right: -0.3em;
  bottom: -0.3em;
  background-color: var(--accent-color);
  border: 0.15em solid var(--text-color);
  z-index: 1;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button-shadow {
  position: absolute;
  top: 0.4em;
  left: 0.4em;
  right: -0.4em;
  bottom: -0.4em;
  background-color: var(--shadow-color);
  z-index: 0;
  transition: all 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Efectos visuales */
.halftone-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.2) 0.1em, transparent 0.1em);
  background-size: 0.5em 0.5em;
  opacity: 0.3;
  z-index: 2;
  mix-blend-mode: multiply;
}

.ink-splatter {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.15) 0%, transparent 50%),
              radial-gradient(circle at 70% 65%, rgba(0,0,0,0.15) 0%, transparent 50%);
}

/* Estados Hover */
.comic-brutal-button:hover {
  transform: rotate(-1deg) scale(1.05);
}

.comic-brutal-button:hover .button-inner {
  transform: skew(-5deg, 2deg);
  background-color: var(--secondary-color);
}

.comic-brutal-button:hover .button-text {
  color: var(--panel-color);
  text-shadow: 0.05em 0.05em 0 var(--text-color), -0.05em -0.05em 0 var(--text-color);
}

.comic-brutal-button:hover .button-shadow {
  transform: translate(0.2em, 0.2em);
}

.comic-brutal-button:hover .ink-splatter {
  opacity: 1;
}

/* Animaciones de acción */
@keyframes burst {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.comic-brutal-button:active .button-text {
  animation: burst 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-dc0a3f2 */@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');

.seo-animated {
    font-family: 'Bruno Ace', sans-serif; /* Tipografía técnica */
    font-size: 50px; 
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    
    /* Configuración del nuevo degradado suave */
    background: linear-gradient(
        90deg, 
        #e0fff1, 
        #efca86, 
        #e0fff1
    );
    background-size: 200% auto;
    
    /* Aplicación del degradado al texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Sombra paralela: 2px derecha, 2px abajo, color negro */
    /* Nota: Usamos filter: drop-shadow porque text-shadow a veces interfiere con background-clip */
    filter: drop-shadow(2px 2px 0px #000000);
    
    /* Animación en loop de 5 segundos */
    animation: gradientMove 5s linear infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-3a3800c */@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');

.seo-animated {
    font-family: 'Bruno Ace', sans-serif; /* Tipografía técnica */
    font-size: 50px; 
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    
    /* Configuración del nuevo degradado suave */
    background: linear-gradient(
        90deg, 
        #e0fff1, 
        #efca86, 
        #e0fff1
    );
    background-size: 200% auto;
    
    /* Aplicación del degradado al texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Sombra paralela: 2px derecha, 2px abajo, color negro */
    /* Nota: Usamos filter: drop-shadow porque text-shadow a veces interfiere con background-clip */
    filter: drop-shadow(2px 2px 0px #000000);
    
    /* Animación en loop de 5 segundos */
    animation: gradientMove 5s linear infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-1e70440 *//* 1. Contenedor Maestro - Altura reducida para fuente pequeña */
.main-effect-container {
    position: relative;
    width: 100%;
    min-height: 80px; /* Altura mínima ajustada a la fuente de 25px */
    padding: 15px 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #000;
}

/* 2. Capas de Fondo Deslizante (Mantenemos el efecto diagonal) */
.bg-layer {
    animation: slide-bg 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #e1653a 50%, #28ebd3 50%);
    bottom: 0;
    left: -50%;
    opacity: .15; /* Bajamos la opacidad para que no opaque la letra pequeña */
    position: absolute;
    right: -50%;
    top: 0;
    z-index: 1;
}

.bg2 { animation-direction: alternate-reverse; animation-duration: 4s; }
.bg3 { animation-duration: 5s; }

/* 3. Contenedor del Texto */
.content-overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    line-height: 1; 
}

/* 4. Estilo del Texto PORTAFOLIO - 25px */
.striped-text {
    font-family: 'Bungee Shade', cursive;
    font-size: 55px; /* Tamaño solicitado */
    margin: 0;
    padding: 0;
    letter-spacing: 2px; /* Un poco de espacio entre letras ayuda a la legibilidad en 25px */
    
    background: linear-gradient(
        -45deg, 
        #e1653a 25%, 
        transparent 25%, 
        transparent 50%, 
        #e1653a 50%, 
        #e1653a 75%, 
        transparent 75%, 
        transparent
    );
    background-color: #28ebd3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Reducimos el tamaño de las rayas (de 30px a 15px) para que escalen con el texto */
    background-size: 15px 15px; 
    animation: stripes-move 1s linear infinite;
}

/* Animaciones */
@keyframes slide-bg {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
}

@keyframes stripes-move {
    100% { background-position: 15px 0; }
}

/* Ajuste para dispositivos muy pequeños */
@media (max-width: 480px) {
    .striped-text { font-size: 20px; }
    .main-effect-container { min-height: 60px; }
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-8d5daa7 */@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');

.seo-animated {
    font-family: 'Bruno Ace', sans-serif; /* Tipografía técnica */
    font-size: 50px; 
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    
    /* Configuración del nuevo degradado suave */
    background: linear-gradient(
        90deg, 
        #e0fff1, 
        #efca86, 
        #e0fff1
    );
    background-size: 200% auto;
    
    /* Aplicación del degradado al texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Sombra paralela: 2px derecha, 2px abajo, color negro */
    /* Nota: Usamos filter: drop-shadow porque text-shadow a veces interfiere con background-clip */
    filter: drop-shadow(2px 2px 0px #000000);
    
    /* Animación en loop de 5 segundos */
    animation: gradientMove 5s linear infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e9bc877 *//* Eliminamos estilos de enlace por defecto */
.portfolio-link-wrapper {
    text-decoration: none !important;
    display: block; /* Para que ocupe todo el ancho */
    width: 100%;
    cursor: pointer;
}

/* Contenedor Maestro con altura de 80px */
.main-effect-container {
    position: relative;
    width: 100%;
    min-height: 80px; 
    padding: 15px 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #000;
    transition: transform 0.3s ease; /* Para el efecto de hover */
}

/* Efecto al pasar el mouse (Hover) */
.portfolio-link-wrapper:hover .main-effect-container {
    transform: scale(1.02); /* Crece ligeramente */
    filter: brightness(1.2); /* Se ilumina un poco */
}

/* Estilos de las capas (Igual que antes) */
.bg-layer {
    animation: slide-bg 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #e1653a 50%, #28ebd3 50%);
    bottom: 0;
    left: -50%;
    opacity: .15;
    position: absolute;
    right: -50%;
    top: 0;
    z-index: 1;
}

.bg2 { animation-direction: alternate-reverse; animation-duration: 4s; }
.bg3 { animation-duration: 5s; }

.content-overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    line-height: 1; 
}

/* Texto PORTAFOLIO 25px */
.striped-text {
    font-family: 'Bungee Shade', cursive;
    font-size: 45px;
    margin: 0;
    padding: 0;
    letter-spacing: 2px;
    background: linear-gradient(
        -45deg, 
        #e1653a 25%, 
        transparent 25%, 
        transparent 50%, 
        #e1653a 50%, 
        #e1653a 75%, 
        transparent 75%, 
        transparent
    );
    background-color: #28ebd3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 15px 15px;
    animation: stripes-move 1s linear infinite;
}

@keyframes slide-bg {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
}

@keyframes stripes-move {
    100% { background-position: 15px 0; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c5638eb */.elementor-2901 .elementor-element.elementor-element-c5638eb {
    position: relative;
    overflow: hidden;
}

.elementor-2901 .elementor-element.elementor-element-c5638eb::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-image: 
        radial-gradient(1.5px 1.5px at 10% 10%, #ffffff, transparent),
        radial-gradient(1px 1px at 25% 30%, #ffffff, transparent),
        radial-gradient(2px 2px at 40% 70%, #ffffff, transparent),
        radial-gradient(1px 1px at 60% 20%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 80% 80%, #ffffff, transparent),
        radial-gradient(1px 1px at 95% 45%, #ffffff, transparent);
    background-size: 250px 250px;
    animation: starFall 15s linear infinite;
    opacity: 0.6; /* Cambia este número entre 0.1 y 1 para hacerlas más o menos visibles */
    z-index: 0;
    pointer-events: none;
}

@keyframes starFall {
    from { transform: translateY(0); }
    to { transform: translateY(250px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5dccab2 *//* Variables de color */
.elementor-2901 .elementor-element.elementor-element-5dccab2 {
  --primary-color: #ff3d3d;
  --secondary-color: #3d3dff;
  --text-color: #000000;
  --accent-color: #ffef00;
  --panel-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.75);
}

.comic-brutal-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em;
}

/* Ajuste clave para que el link funcione como el botón original */
.comic-brutal-button {
  position: relative;
  font-size: 1.5em;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transform: rotate(-2deg);
  transform-origin: center;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: inline-block; /* Crucial para el diseño */
  text-decoration: none; /* Quita el subrayado */
}

.button-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 0.8em 1.5em;
  z-index: 3;
  overflow: hidden;
  transform: skew(-3deg, 1deg);
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  clip-path: polygon(0% 10%, 3% 0%, 97% 0%, 100% 10%, 100% 90%, 97% 100%, 3% 100%, 0% 90%);
}

.button-text {
  position: relative;
  font-weight: 900;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
  color: var(--text-color);
  text-shadow: 0.05em 0.05em 0 var(--panel-color), -0.05em -0.05em 0 var(--panel-color), 0.05em -0.05em 0 var(--panel-color), -0.05em 0.05em 0 var(--panel-color);
  transform: rotate(2deg);
  font-family: sans-serif; /* Puedes cambiar esto a Bruno Ace si la tienes cargada */
}

.button-frame {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  right: -0.3em;
  bottom: -0.3em;
  background-color: var(--accent-color);
  border: 0.15em solid var(--text-color);
  z-index: 1;
  transition: transform 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button-shadow {
  position: absolute;
  top: 0.4em;
  left: 0.4em;
  right: -0.4em;
  bottom: -0.4em;
  background-color: var(--shadow-color);
  z-index: 0;
  transition: all 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Efectos visuales */
.halftone-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.2) 0.1em, transparent 0.1em);
  background-size: 0.5em 0.5em;
  opacity: 0.3;
  z-index: 2;
  mix-blend-mode: multiply;
}

.ink-splatter {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.15) 0%, transparent 50%),
              radial-gradient(circle at 70% 65%, rgba(0,0,0,0.15) 0%, transparent 50%);
}

/* Estados Hover */
.comic-brutal-button:hover {
  transform: rotate(-1deg) scale(1.05);
}

.comic-brutal-button:hover .button-inner {
  transform: skew(-5deg, 2deg);
  background-color: var(--secondary-color);
}

.comic-brutal-button:hover .button-text {
  color: var(--panel-color);
  text-shadow: 0.05em 0.05em 0 var(--text-color), -0.05em -0.05em 0 var(--text-color);
}

.comic-brutal-button:hover .button-shadow {
  transform: translate(0.2em, 0.2em);
}

.comic-brutal-button:hover .ink-splatter {
  opacity: 1;
}

/* Animaciones de acción */
@keyframes burst {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.comic-brutal-button:active .button-text {
  animation: burst 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b834a2 */.elementor-2901 .elementor-element.elementor-element-4b834a2 {
    position: relative;
    overflow: hidden;
}

.elementor-2901 .elementor-element.elementor-element-4b834a2::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background-image: 
        radial-gradient(1.5px 1.5px at 10% 10%, #ffffff, transparent),
        radial-gradient(1px 1px at 25% 30%, #ffffff, transparent),
        radial-gradient(2px 2px at 40% 70%, #ffffff, transparent),
        radial-gradient(1px 1px at 60% 20%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 80% 80%, #ffffff, transparent),
        radial-gradient(1px 1px at 95% 45%, #ffffff, transparent);
    background-size: 250px 250px;
    animation: starFall 15s linear infinite;
    opacity: 0.6; /* Cambia este número entre 0.1 y 1 para hacerlas más o menos visibles */
    z-index: 0;
    pointer-events: none;
}

@keyframes starFall {
    from { transform: translateY(0); }
    to { transform: translateY(250px); }
}/* End custom CSS */