:root {
    --main-azul: #009dff;
    --main-enfasis-2: #bdf2e3;
    --main-enfasis-1: #00ffbf;
    --main-blanco: #F7F7F7;
    --main-negro: #1A1A1A;
    }

body {
    margin: 0;
    font-family: Arial,sans-serif;
}
html body {
  background: var(--token-83828db4-baa9-4f0e-a052-5da6f80af1ef, rgb(10, 10, 10));}


.header {
    position: relative;
    overflow: hidden;
}

/* Animación del gradiente */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
        background-color: var(--main-azul);

    }
    50% {
        background-position: 100% 30%;
        background-color: var(--main-celeste);

    }
    100% {
        background-position: 0% 50%;
        background-color: var(--main-azul);

    }
}



.cookie-consent {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:10px;
    background-color: var(--main-negro);
    text-align:center;
    z-index:9999;
    color: var(--main-blanco);
  }
  .cookie-message {
    display:inline-block;
    margin-right:10px
  }


.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    padding-top: 120px;
      flex-flow: column;
  max-width: 1200px;
  margin: auto;
  padding-bottom: 200px;
}



.hero .text-container {
    text-wrap: wrap;
word-break: break-word;
color: white;
  text-align: center;
  font-size: 1.2rem;
}

.text-container p{
    margin-top: 20px;
}

.hero li {
 list-style: none;
}


.hero .description {
    font-size: 1.2rem;
    line-height: 1.5;
}

.hero .image-container {
    position: relative;
    min-width: 30rem;
    margin: auto;
}

.image-container{
    z-index: 3;
}

.hero img {
    width: 100%;
    z-index: 2;
    position: relative;
}

.hero-imageqx{
    background-position: -1930px;
    height: 30rem;
    background-image: url('/src/sprites.webp'); 
    background-size: cover;
    background-repeat: no-repeat; 
    overflow: hidden; 
}

.hero-image{
    background-position: -960px;
    height: 30rem;
    background-image: url('/src/sprites.webp'); 
    background-size: cover;
    background-repeat: no-repeat; 
    overflow: hidden; 
}

.hero-imageex{
    height: 30rem;
    background-image: url('/src/sprites.webp'); 
    background-size: cover;
    background-repeat: no-repeat; 
    overflow: hidden; 
}


.h1-tittle{
border-radius: 188px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff57;
  background: radial-gradient(81.14% 431.6% at 50.68% 170.49%, #FFF 0%, rgba(255, 255, 255, 0.753) 55%, rgba(255, 255, 255, 0) 100%);
    background-clip: border-box;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
  text-align: center;
margin-left: 20%;
  margin-right: 20%;
  margin-top: 0px;
}

.hello {
font-size: 3.5em;
  font-weight: bold;
  color: var(--main-blanco);
  text-align: center;
  margin: 20px;
}

.name {
  color: var(--main-blanco); /* Color inicial del texto */
  background: linear-gradient(90deg, var(--main-azul) 50%, var(--main-enfasis-1) 100%); /* Gradiente de blanco a azul */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}








.grid3x4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
  grid-template-rows: auto 1fr 1fr auto; /* Cuatro filas */
  gap: 10px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.grid3x4 > div {
  background-color: #121212;
  color: white;
  border-radius: 15px;
  border: 1px solid #333;
  padding: 20px;
  display: flex;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Posicionamiento de las cajas */
.about {
  grid-column: 1; /* Ocupa la primera columna */
  grid-row: 1 / -1; /* Ocupa desde la primera hasta la última fila */
  flex-direction: column; /* Organizar el contenido interno verticalmente si es necesario */
  gap: 20px;
}

.exprerience {
  grid-column: 2; /* Ocupa la segunda columna */
  grid-row: 1 / 3; /* Ocupa las dos primeras filas */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.descript {
  grid-column: 2; /* Ocupa la segunda columna */
  grid-row: 3 / -1; /* Ocupa las dos últimas filas */
}

.skills {
  grid-column: 3; /* Ocupa la tercera columna */
  grid-row: 1 / 3; /* Ocupa las dos primeras filas */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.skills span img {
  max-width: 50px;
  height: auto;
  margin: 5px; /* Espacio entre los iconos */
}

.emoji {
    background-color: #12121200!important;
  border: 1px solid #3330!important;
  grid-column: 3; /* Ocupa la tercera columna */
  grid-row: 3 / -1; /* Ocupa las dos últimas filas */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.emoji img {
    width: auto;
  height: 200px;
}


/* Estilos internos para la caja "about" */
.foto-name {
  display: flex;
  align-items: center;
  gap: 20px;
}

.foto {
  border-radius: 50%;
  overflow: hidden;
  width: 128px;
  height: 100px;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.firt-name {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 5px;
}

.holasoy {
  color: var(--main-blanco);
  font-size: 1.1em;
    min-height: 1.3em;
    display: block;
  min-height: 4em;
  max-width: 220px;
  text-wrap: auto;
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 15px;
}

.items span {
  background-color: #222;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1em;
}

.contact-me {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.cta-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.1em;
}

.cta-button:hover {
  background-color: #0056b3;
}

/* Estilos internos para "exprerience" */
.expe-tittle {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.expe-description {
  font-size: 1.1em;
  color: #ccc;
  line-height: 1.4;
}

.portafolioh2{
    font-size: 3.5em;
  font-weight: bold;
  text-align: center;
}

.portafoliolist{
    max-width: 1200px;
  margin: auto;
}

.portafoliolist{
    display: flex;
    flex-direction: column;
}

.portafolioconteniner{
        display: flex;
    flex-direction: row;
    margin: auto;
    max-width: 85%;
}

.portafoliodatos{
    color: var(--main-blanco);
            display: flex;
    flex-direction: column;
    padding: 20px;
    flex-flow: wrap;
    max-width: 20%;
    min-width: 0;
}

.portafoliotitle{
    font-size: 1.5em;
  font-weight: bold;
  text-align: left;
  word-break: break-word;
}


.portafoliolink{
    color: var(--main-blanco);
    border-radius: 188px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff57;

padding: 10px;
padding-right: 30px;
padding-left: 30px;
  align-content: center;
  margin: auto;
  margin-top: 20px;
  max-width: 150px;
  word-break: break-word;
}

.portafolioimgcentro{
  padding: 20px;
border-radius: 20px;
width: 60%;
  height: 400px;
}

.portafolioimgcentro img{
    border-radius: 20px;
    width: 100%;
  height: 100%;
}

.portafolioimgder{
      padding: 20px;
border-radius: 20px;
width: 20%;
  height: 400px;
}

.portafolioimgder img{
    border-radius: 20px;
    height: 550px;
    width: 100%;
  height: 100%;
}







        /* Contenedor principal de la sección */
        .plans-section-container {
            width: 90%;
            max-width: 1200px; /* Similar a container de Tailwind */
            margin-left: auto;
            margin-right: auto;
            padding: 3rem 1rem; /* py-12 md:py-20, px-4 */
        }
        @media (min-width: 768px) { /* md breakpoint */
            .plans-section-container {
                padding-top: 5rem;
                padding-bottom: 5rem;
            }
        }


        /* Título principal */
        .main-heading {
            color: var(--main-blanco);
            font-size: 1.875rem; /* text-3xl */
            font-weight: 700; /* font-bold */
            text-align: center;
            margin-bottom: 3rem; /* mb-12 */
        }
        @media (min-width: 768px) { /* md breakpoint */
            .main-heading {
                font-size: 2.25rem; /* md:text-4xl */
            }
        }

        /* Contenedor de los botones de Pestañas (Individuos/Empresas) */
        .plans-toggle-container {
            display: flex;
            justify-content: center;
            margin-bottom: 2.5rem; /* mb-10 */
            border-radius: 15rem; /* rounded-lg */
            padding: 0.25rem; /* p-1 */
            max-width: 28rem; /* max-w-md */
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #333; /* Borde blanco */
            height: 70px;
            margin-top: 2.5rem;
        }

        .tab-button {
            width: 50%;
            padding: 0.5rem 1rem; /* py-2 px-4 */
            border-radius: 15rem; /* rounded-md */
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            border: 1px solid transparent; /* Borde base */
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            outline: none;
            margin: 5px;
            font-weight: bold;
        }
        .tab-button.active {
            background-color: var(--main-enfasis-1); /* Verde */
            color: var(--main-negro); /* Texto negro */
            border-color: var(--main-enfasis-1);
        }
        .tab-button.inactive {
            background-color: transparent;
            color: var(--main-blanco); /* Texto blanco */
        }
        .tab-button.inactive:hover {
            background-color: var(--main-enfasis-1); /* Verde en hover */
            color: var(--main-negro); /* Texto negro en hover */
            border-color: var(--main-enfasis-1);
        }

        /* Grid para las tarjetas de planes */
        .plans-grid {
            display: grid;
            gap: 2rem; /* gap-8 */
            grid-template-columns: 1fr; /* grid-cols-1 */
        }
        @media (min-width: 768px) { /* md breakpoint */
            .plans-grid {
                grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .plans-grid {
                grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
            }
        }

        /* Tarjetas de Planes */
        .plan-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: transparent;
            border: 1px solid #333;
            border-radius: 0.75rem; /* rounded-xl */
            padding: 1.5rem; /* p-6 */
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
            transition: transform 0.3s ease-in-out;
            position: relative; /* Para la etiqueta "popular" y "oferta" */
            padding-top: 3.5rem; /* Espacio para la etiqueta de oferta */
            background-color: var(--main-negro);
        }
        .plan-card:hover {
            transform: scale(1.05); /* hover:scale-105 */
        }
        .plan-card.popular {
            border-width: 2px;
            border-color: var(--main-enfasis-1); /* Borde verde para plan popular */
        }

        /* Etiqueta de "Oferta Exclusiva" */
        .launch-offer-tag {
            position: absolute;
            top: -1px; /* Alineado con el borde superior de la tarjeta */
            left: -1px; /* Alineado con el borde izquierdo de la tarjeta */
            background-color: var(--main-azul); /* Un azul distintivo para la oferta */
            color: var(--main-blanco);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.35rem 1rem;
            border-top-left-radius: 0.65rem;
            border-bottom-right-radius: 0.75rem; /* Esquina inferior derecha redondeada */
            z-index: 1;
        }
         .plan-card.popular .launch-offer-tag {
            left: -2px; /* Ajuste por el borde más grueso */
            top: -2px;
         }


        /* Etiqueta de "Más Popular" / "Recomendado" */
        .popular-tag {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--main-enfasis-1); /* Verde */
            color: var(--main-negro); /* Texto negro */
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            padding: 0.25rem 0.75rem; /* px-3 py-1 */
            border-bottom-left-radius: 0.5rem; /* rounded-bl-lg */
            border-top-right-radius: 0.65rem; /* Para que coincida con el radio de la tarjeta */
            z-index: 1; /* Asegurar que esté sobre la etiqueta de oferta si se superponen */
        }
         .plan-card.popular .popular-tag {
            right: -1px; /* Ajuste por el borde más grueso */
            top: -1px;
         }


        .plan-card h3 {
            color: var(--main-blanco);
            font-size: 1.5rem; /* text-2xl */
            font-weight: 600; /* font-semibold */
            margin-bottom: 0.5rem; /* mb-2 */
        }
        .plan-card .plan-description {
            color: var(--main-enfasis-2); /* Un color de énfasis más sutil para la descripción */
            font-size: 0.875rem; /* text-sm */
            margin-bottom: 1rem; /* mb-4 */
        }
        .plan-card .plan-price-container {
            margin-bottom: 0.25rem; /* Reducido para acomodar texto de descuento */
        }
        .plan-card .original-price {
            color: var(--main-enfasis-2);
            text-decoration: line-through;
            font-size: 1.125rem; /* Ligeramente más pequeño */
            margin-right: 0.5rem;
        }
        .plan-card .plan-price {
            color: var(--main-blanco);
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
        }
        .plan-card .plan-price-period {
            color: var(--main-enfasis-2); /* Un color de énfasis más sutil */
            font-size: 1rem;
            display: block; /* Para que esté debajo del precio */
        }
        .plan-card .discount-text {
            color: var(--main-enfasis-1); /* Verde para el texto de descuento */
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.5rem; /* mb-6 original del price container */
        }


        .plan-features {
            flex-grow: 1;
            list-style: none;
            padding-left: 0;
            margin-bottom: 2rem; /* mb-8 */
        }
        .plan-features li {
            color: var(--main-blanco);
            font-size: 0.875rem; /* text-sm */
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem; /* space-y-3 */
        }
        .plan-features li:last-child {
            margin-bottom: 0;
        }
        .plan-features svg {
            color: var(--main-enfasis-1); /* Verde para los iconos de check */
            width: 1.25rem; /* w-5 */
            height: 1.25rem; /* h-5 */
            margin-right: 0.5rem; /* mr-2 */
        }

        /* Botones de Contacto en las Tarjetas */
        .btn-contact {
            display: block; /* block */
            text-align: center;
            font-weight: 600; /* font-semibold */
            padding: 0.75rem 1rem; /* py-3 px-4 */
            border-radius: 0.5rem; /* rounded-lg */
            text-decoration: none;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, filter 0.2s ease-in-out;
            border: 1px solid transparent;
        }
        .btn-contact:not(:last-child) {
            margin-bottom: 0.75rem; /* mb-3 */
        }

        .btn-whatsapp {
            background-color: var(--main-enfasis-1); /* Verde */
            color: var(--main-negro); /* Texto negro */
            border-color: var(--main-enfasis-1);
        }
        .btn-whatsapp:hover {
            filter: brightness(0.9);
        }

        .btn-email {
            background-color: var(--main-negro); /* Fondo negro */
            color: var(--main-blanco); /* Texto blanco */
            border: 1px solid #333; /* Borde blanco */
        }
        .btn-email:hover {
            background-color: var(--main-blanco);
            color: var(--main-negro);
            border-color: var(--main-blanco);
        }

        /* Utilidad para ocultar elementos (para el script JS) */
        .hidden {
            display: none !important;
        }








.hero-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 1200px;
  margin: auto;
}

.hero-2 .text-container {
    background-image: linear-gradient(89deg,#FFF0 0%,#ffffff2e 100%);
    border-radius: 15px;
    padding: 20px;
    max-width: 40%;
    text-wrap: wrap;
word-break: break-word;
}

.hero-2 li {
    list-style: none;
}

.hero-2 h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero-2 .description {
    font-size: 1.2rem;
    line-height: 1.5;
}

.hero-2 .image-container {
    position: relative;
    width: 50%;
}

.hero-2 img {
    width: 100%;
    z-index: 2;
    position: relative;

}

.hero-2-image {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 670px;
    background-image: url('/src/sprites.webp'); /* Usa tu imagen de sprite */
    background-size: auto, auto;
    background-repeat: no-repeat; /* Evita repeticiones de la imagen */
    background-position: -2010px;
    border-radius: 20px; /* Redondea las esquinas */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
    background-size: cover;
}

.aux-the-shape {
    position: absolute;
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.aux-the-shape.yellow {
    width: 70%;
    height: 70%;
    background-color: var(--main-amarillo);
    bottom: -68px;
    left: -21px;
    z-index: -1;
}

.aux-the-shape.blue {
    width: 40%;
    height: 40%;
    background-color: var(--main-celeste);
    top: -39px;
    right: 60px;
    z-index: -1;
}


.post-container{
  align-items: center;
  padding: 50px;
  max-width: 1200px;
  margin: auto;
  font-size: 1.2rem;
  line-height: 1.5;
text-wrap: wrap;
word-break: break-word;

}

.post-container h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--main-blue);
}

.post-container h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--main-blue);
}

.faq-h3{
    margin: auto;
  border: 1px solid #000;
}

.post-container h4 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--main-blue);
}

.post-container li {
    list-style: none;
}



.social-links {
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.social-links span {
    font-weight: bold;
    color:var(--main-negro);
    margin-right: 10px;
}

.social-links a svg {
    width: 32px;
    height: 32px;
    fill: var(--main-negro);
    transition: color 0.3s;
}

.social-links a:hover svg {
    transform: scale(1.1);
    fill: var(--main-enfasis-1);
}


.tabla-contenido {
    border-radius: 15px;
  width: 78%;
    background-color: var(--main-blanco);
  padding: 10px;
}

.wall-breadcrumbs{
    padding: 5px;
    list-style: none;
    text-align: center;
}

.wall-breadcrumbs ol{
    list-style: none;
    
}
.wall-breadcrumbs li{
    display: inline-block;
}

.autor {
    padding-left: 40px;
}

@media (max-width: 850px) {
    .hero{
        flex-direction: column;
    }



    .hero .text-container{
        max-width: 100%;
        margin-top: 20%;
    }

    .hero-2{
        flex-direction: column-reverse;
    }

    .hero-2 .image-container{
        width: 100%;
    }

    .hero-2 .text-container{
        max-width: 100%;
        margin-top: 20%;
    }
}


@media (max-width: 300px) {
    .social-links{
        flex-direction: column;
    }
}



.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
  margin: auto;
}

.service-box {
    background-color: var(--main-blanco);
    border-radius: 10px;
    overflow: hidden;
    height: 350px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    width: 350px;
    margin: auto;
}

.service-box:hover {

    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}


.service-icon-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    color: var(--main-blanco);
}



.service-text {
    padding: 15px;
    text-align: center;
    padding-top: 50px;
  padding-bottom: 50px;
}

.service-text h4 {
    font-weight: bold;
    margin-bottom: 10px;
}

.service-text p {
    margin: 0;
}

.cta-text{
    color: var(--main-enfasis-1);
    text-align: center;
}

.cta-text:hover{
    color: var(--main-negro);
}

a {
    text-decoration: none; /* Elimina el subrayado predeterminado */
    color: inherit; /* Hereda el color del contenedor */
}

a:visited,
a:focus,
a:active {

    text-decoration: none; /* Evita subrayados o cambios */
}

.service-image {

    background-image: linear-gradient(180deg, #89A7FF 0%, #4e75e7 100%);
    background-size: auto 100%; /* Ajusta la altura al tamaño del cuadro */
    border-radius: 10px 10px 0 0;
}

/* Responsive */
@media (max-width: 1150px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 750px) {
    .services-container {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 400px) {

    .service-box{
        width: 100%;
    }
}










        body.services-page-body { /* Clase específica para evitar conflictos si se combina con la otra sección */
            font-family: 'Inter', sans-serif;
            background-color: var(--main-negro);
            color: var(--main-blanco);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Contenedor principal de la sección de servicios */
        .individual-services-container {
            width: 90%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 3rem 1rem;
        }
        @media (min-width: 768px) {
            .individual-services-container {
                padding-top: 5rem;
                padding-bottom: 5rem;
            }
        }

        /* Título principal de la sección */
        .services-main-heading {
            color: var(--main-blanco);
            font-size: 1.875rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 3rem;
        }
        @media (min-width: 768px) {
            .services-main-heading {
                font-size: 2.25rem;
            }
        }

        /* Grid para las tarjetas de servicios */
        .services-grid {
            display: grid;
            gap: 4rem;
            grid-template-columns: 1fr; /* Por defecto 1 columna */
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .services-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas pequeñas */
            }
        }
        @media (min-width: 1024px) { /* lg breakpoint */
            .services-grid {
                grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
            }
        }

        /* Tarjetas de Servicios Individuales */
        .service-card {
            display: flex;
            flex-direction: column;
            background-color: transparent; /* Fondo transparente */
            border: 1px solid #333; /* Borde blanco */
            border-radius: 0.75rem; /* Esquinas redondeadas */
            padding: 1.5rem;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            height: 100%; /* Para que todas las tarjetas en una fila tengan la misma altura */
        }
        .service-card:hover {
            transform: translateY(-5px); /* Ligero movimiento hacia arriba */
            box-shadow: 0 8px 25px rgba(0, 255, 191, 0.1); /* Sombra con color de énfasis */
        }

        .service-card-icon-container {
            margin-bottom: 1rem;
            color: var(--main-enfasis-1); /* Color verde para el icono */
            /* Centrar el icono si es necesario o darle un tamaño fijo */
        }
        .service-card-icon-container svg {
            width: 3rem; /* Tamaño del icono */
            height: 3rem;
        }

        .service-card h3 {
            color: var(--main-blanco);
            font-size: 1.25rem; /* Un poco más pequeño que los títulos de planes */
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        .service-card .service-description {
            color: var(--main-enfasis-2); /* Color de énfasis más sutil */
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
            flex-grow: 1; /* Para que la descripción ocupe el espacio disponible */
        }
         .service-card .service-price {
            color: var(--main-blanco);
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        .service-card .service-notes {
            color: var(--main-enfasis-2);
            font-size: 0.75rem; /* Más pequeño para notas adicionales */
            font-style: italic;
            margin-bottom: 1.5rem;
        }


        .btn-request-service {
            display: inline-block; /* Para que el botón no ocupe todo el ancho por defecto */
            text-align: center;
            font-weight: 600;
            padding: 0.65rem 1rem;
            border-radius: 15.5rem;
            text-decoration: none;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            background-color: var(--main-negro); /* Fondo negro */
            color: var(--main-blanco); /* Texto blanco */
            border: 1px solid #333; /* Borde blanco */
            margin-top: auto; /* Empuja el botón al final de la tarjeta */
        }
        .btn-request-service:hover {
            background-color: var(--main-blanco);
            color: var(--main-negro);
            border-color: var(--main-blanco);
        }
@media (max-width: 550px) {


        .hero-imageex {
        height: 15rem;

    }

    .h1-tittle {
        font-size: 1rem;
    }

    .hello{
        font-size: 2.5em;
    }

    .cta-button{
        margin: 10px;
        font-size: 0.8rem;
    }


  /* 1. Cambiamos el grid principal a una sola columna */
  .grid3x4 {
    grid-template-columns: 1fr;
    /* Reseteamos las filas para que se creen automáticamente según el contenido */
    grid-template-rows: auto; 
    padding: 10px; /* Opcional: Reducimos el padding para pantallas pequeñas */
  }

  /* 2. ✅ LA CLAVE: Reseteamos la posición de TODAS las cajas hijas */
  /* Les decimos que olviden su posición fija de escritorio */
  .grid3x4 > div {
    grid-column: unset; /* Olvida la columna asignada */
    grid-row: unset;    /* Olvida la fila asignada */
  }

  /* 3. (Opcional pero recomendado) Ajustes finos para mejorar la vista móvil */
  .foto-name {
    flex-direction: column; /* La foto arriba, el texto abajo */
    text-align: center;
    gap: 15px;
  }

  .foto {
    width: 120px; /* Un poco más pequeño para móvil */
    height: 120px;
  }
  
  .expe-tittle {
      font-size: 2em; /* Hacemos el título de "+2 Años" un poco más pequeño */
  }

  .emoji {
    height: auto; /* Dejamos que la altura sea automática */
    padding: 0;   /* Quitamos padding para que no ocupe espacio extra */
    border: none !important; /* Quitamos el borde que tenías invisible */
    background: none !important; /* Quitamos el fondo que tenías invisible */
  }
  
  .emoji img {
      max-width: 150px; /* Controlamos el tamaño del emoji */
      height: auto;
  }

      .portafolioconteniner {
        flex-direction: column; /* Apila los elementos verticalmente */
        align-items: center;    /* Centra los elementos apilados */
    }

    /* Reseteamos los anchos de las columnas del portafolio */
    .portafoliodatos,
    .portafolioimgcentro,
    .portafolioimgder {
        max-width: 100%; /* Ocupan el ancho completo del contenedor */
        width: 100%;     /* Aseguramos que se expandan si es necesario */
        min-width: 0;    /* Buena práctica para flexbox */
    }

    .portafolioimgcentro,
    .portafolioimgder {
        height: auto; /* Dejamos que la altura se ajuste para no deformar imágenes */
    }

    .plans-grid{
        gap: 7rem;
    }

    .hero .image-container{
        min-width: 15rem;
    }
}