@media (min-width: 310px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) { 
    /*body { 
        background-color: red; 
    }*/ 
    html, body {
        overflow-x: hidden;
    }
    .subtitle {
        scroll-margin-top: 9rem;  
        margin-top: 8rem;
    } 
    .index-container,
    .services-container,
    .aboutme-container,
    .customers-container,
    .contact-container,
    .lifestyle-container {
        width: 100%;  
        max-width: 480px;  
        height: auto; 
        margin: 0 auto;  
    }
    .navigation-container {
        display: grid;  
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-content: center;  
        align-items: center;
        text-align: center; 
        position: fixed; 
        top: 0;   
        width: 100%;  
        background-color: var(--white); 
        z-index: 100;
    }
    .index-subtitle {
        height: 8rem; 
        /*color: red;*/
    }
    .index-container {
        width: 100%;  
        height: 100%;
        margin-top: 6rem; 
        overflow: hidden;  
        box-sizing: border-box;  
    }
    .slogan-content.keyword1 p,
    .slogan-content.keyword2 p {
        font-size: clamp(0.8rem, 3vw, 4rem);  
        letter-spacing: clamp(0.2rem, 4vw, 2rem);  /
    }
    .keyword1 {
        left: 2%;  
    }
    .keyword2 {
        top: 60%;  
        right: 0; 
    }
    .header-text {
        height: 100%;  
        align-items: center;   
    }
    .h-title {
        grid-column: 1;
        padding: 0;  
    }
    .h-header {
        grid-column: 1;
        grid-row: 2 / 3;  
        align-self: start;   
    }
    .h-caption {
        grid-column: 1;
        grid-row: 3/ 4;
        align-self: start;
    } 
    .h-title h1 {
        letter-spacing: 0.5rem;  
        align-self: start;  
    }
    .h-header p {
        font-size: calc(0.6rem + 0.6vw);  
        letter-spacing: 0.5rem; 
    }
    .h-caption h2 {
        font-size: calc(0.8rem + 0.8vw);  
        letter-spacing: 0.5rem; 
        border: 1px solid var(--white);
        padding: 0.5rem 0.8rem;
    }
    .subtitle {
        width: auto;  
        height: 5rem;  
        padding: 0;          
        margin-bottom: 2rem; 
    }
    .services-container {
        width: 100%; 
        max-width: 480px;  
        height: auto;         
        padding: 0 !important;
        margin: 0 !important;
    }  
    .services-text-container {
        width: 100%;  
        box-sizing: border-box;  
        padding: 0 !important;
        margin: 0 !important;
    }
    .services-text-container p {
        font-size: 1.5rem;  
        line-height: 3rem; 
        margin: 0 0.5rem !important; 
        padding: 2rem 1rem;
        word-break: break-word; 
        margin: 0 !important;
    }
    .services-wrapper {
        flex-direction: column; 
        align-items: center;  
        padding: 0 !important;
        margin: 0 !important;
     }
    .service-box {
        width: 290px;  
        /*background-color: red;*/
        padding: 1rem !important;
        margin: 0 !important;
    }
    .service-box:hover {
        transform: none;
    }
@media (min-width: 310px) and (max-width: 479px) {
  .aboutme-phr {
    display: none;  
    }
}
@media (min-width: 480px) {
    .aboutme-phr {
    display: block; 
  }
}
    .aboutme-container {
        flex-direction: column; 
        align-items: center;  
        width: 100%; 
        height: auto; 
    }
    .aboutme-text {
        flex: 1;
        width: 100%; 
        padding: 0 2rem;  
        box-sizing: border-box;  
        margin-bottom: 2rem;  
    }
    .aboutme-text-container p {
        font-size: 1.5rem; 
        line-height: 3rem;  
    }
    .aboutme-text-container h2 {
      text-align: center; 
      margin: 2rem auto;
    }
    .aboutme-image {
        max-width: 612px;
        margin: 0 auto;
    }
     .about-image {
        display: block; 
        position: relative;  
        width: clamp(290px, calc(100vw - 20px), 460px);  
        height: auto;   
        margin: 0 auto;  
    }
    .aboutme-phr {
        top: 65%; 
    }
    .aboutme-phr p {
        font-size: 1.3rem;  
    }
    .customers-container {
        flex-direction: column;  
        align-items: center; 
        justify-content: center; 
        width: 100%; 
        height: auto;
    } 
    .image-container {
        width: min(calc(215px + 91 * (100vw - 310px) / 170), 306px);  
        margin: 5rem;    
    }
    .name-text {
        top: 100%; 
        transition: opacity 0.5s ease-in-out;
        font-size: 1.2rem; 
        padding: 2rem; 
    }
    #contact-anchor {
        position: relative;  
        top: -102px;  
        height: 0; 
        visibility: hidden;
    }
    .contact-container {
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        padding: 0;  
        margin: 0 auto; 
        width: 100%; 
        box-sizing: border-box;  
    }
    .img-contact {
        width: 100%;  
        display: block; 
        text-align: center; 
    }
    .img-contact picture,
    .img-model {
        display: block;  
        margin: 0 auto;  
        max-width: 90%;  
        height: auto; 
    }
    .img-model {
        width: 90%;  
        max-width: 460px;  
        padding: 1rem; 
        box-sizing: border-box; 
    }
    .form-contact {
        width: 100%; 
        display: flex;  
        justify-content: center;  
        margin: 0;  
        padding: 0;  
    }
    .form-contact form {
        width: 90%; 
        max-width: 380px;  
        margin: 0; 
        padding: 0; 
        box-sizing: border-box; 
    }

    label {
        font-size: 1rem;
    }
    input,
    textarea,
    button {
        width: 100%; 
        padding: 1rem; 
        margin-bottom: 2rem;  
        font-size: 1rem;  
        box-sizing: border-box;  
    }
    .accept-policies,
    .social-network-title,
    .social-network-link,
    .social-data {
        width: 90%;  
        max-width: 380px; 
        box-sizing: border-box;  
        margin: 0 auto; 
    }

    /* === inicio código IA === */
    .accept-policies {
        display: grid;
        place-items: center;
        text-align: center;
        gap: 1rem;
        padding-inline: 1rem;
    }

    .accept-policies label {
        display: grid;
        place-items: center;
        text-align: center;
        gap: 1rem;
    }

    /* === fin código IA === */
  

    .privacy-text,
    .accept-policies a {
        display: block;
        font-size: 1rem;
        text-align: center;
        line-height: 2.5;
    }
    .accept-policies input[type="checkbox"] {
        accent-color: gold;
        margin-bottom: 0.5rem;
        color: white; /* o el color que uses */
        text-decoration: none;
        margin-top: 0.5rem;
    }
    .break-sm {
        display:block;
    }
    .social-network-title {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 1rem;
    }
   
    .social-network-link {
        display: flex;  
        flex-wrap: wrap; 
    }
    .social-network-icon {
        width: 36px;  
        height: 36px; 
    }
    .social-network-icon:hover {
        transform: none;
    }

    .img-data {
        width: min(calc(280px + (100vw - 310px) * 100 / 170), 380px);  
        height: auto; 
        box-sizing: border-box;  
    }
    .lifestyle-container {
        height: auto;  
    }
    .text-container h3 {
        padding: 1rem; 
    }
    .services-row {
      flex-direction: column; 
      margin-bottom: 2rem; 
      gap: 2rem;  
    }
    .service-box-ls {
        width: 100%;
        max-width: 480px;  
        padding-bottom: 4rem;  
        margin: 0 auto;  
    } 
     .service-title {
        font-size: clamp(1rem, 2.5vw, 1.3rem);  
     }
    .slideshow-container {
        display: flex; 
        justify-content: center; 
        width: 100%; 
        max-width: 390px; 
        height: 250px; 
        padding: 1rem;  
    } 
    .slideshow-container img {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }
    .image-service-ls {
        display: flex; 
        justify-content: center;  
        align-items: center;  
        width: 80vw; 
        max-width: 390px; 
        height: auto; 
        max-height: 250px;  
        overflow: hidden;  
        padding: 1rem; 
    }
      .footer-container .legal-text {
        flex-direction: column;
        gap: 0.5rem;
       /* background-color: red; */
    }
    .footer-container .legal-item a {
        font-size: 1.1rem;
    }
    .footer-container .rights-reserved {
        font-size: 0.9rem;
    }
}
@media (min-width: 481px) and (max-width: 700px) {
    /*body {
        background-color: blue;
    }*/
    html, body {
        overflow-x: hidden;
    }
    .subtitle {
        scroll-margin-top: 9rem;
        margin-top: 8rem;
    }
    .index-container,
    .aboutme-container,
    .customers-container,
    .contact-container,
    .lifestyle-container {
        width: 100%;
        max-width: 700px;
        height: auto;
        margin: 0 auto;
    }
    .navigation-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-content: center;
        align-items: center;
        text-align: center;
        position: fixed;
        top: 0;
        width: 100%;
        background-color: var(--white);
        z-index: 100;
    }
    .index-subtitle {
        height: 8rem;
    }
    .index-container {
        width: 100%;
        height: 100%;
        margin-top: 6rem;
        box-sizing: border-box;
    }
    .index-image {
        width: 60%;
        height: auto;
        margin: 0 auto;
    }
    .slogan-content.keyword1 p,
    .slogan-content.keyword2 p {
        font-size: clamp(2rem, calc(2rem + 0.005 * (100vw - 481px)), 3.2rem);
        letter-spacing: clamp(0.9rem, calc(0.9rem + 0.0032 * (100vw - 481px)), 1.6rem);
        white-space: nowrap;
        width: auto;
    }
    .keyword1,
    .keyword2 {
        width: auto;
        max-width: 100vw;
    }
    .keyword1 {
        left: 2%;
    }
    .keyword2 {
        top: 60%;
        left: clamp(60%, calc(60% + 0.037 * (100vw - 481px)), 68%);
    }
    .header-text {
        grid-template-rows: 10% 75% 15%;
        height: 100%;
        align-items: center;
    }
    .h-title {
        grid-column: 1;
        grid-row: 1 / 2;
        padding: 0;
    }
    .h-header {
        grid-column: 1;
        grid-row: 2 / 3;
    }
    .h-caption {
        grid-column: 1;
        grid-row: 3/ 4;
        align-self: start;
    }
    .h-title h1 {
        letter-spacing: 0.5rem;
        align-self: start;
    }
    .h-header p {
        font-size: calc(0.6rem + 0.6vw);
        letter-spacing: 0.5rem;
    }
    .h-caption h2 {
        font-size: calc(0.8rem + 0.8vw);
        letter-spacing: 0.5rem;
        border: 1px solid var(--white);
        padding: 0.5rem 0.8rem;
    }
    .subtitle {
        width: auto;
        height: 5rem;
        padding: 0;
        margin: 2rem 0;
    }
    .services-container {
        height: auto;
    }
    .services-text-container {
        width: 100%;
        padding: 0;
        margin-bottom: 2rem;;
    }
    .services-text-container p {
        font-size: 1.8rem;
    }
    .services-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .services-wrapper, .services-wrapper-2 {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        justify-items: center;
    }
    .services-wrapper .service-box:nth-child(3) {
        grid-column: 1 / -1;
        width: calc(100% - 4rem);
        margin: 0 auto;
    }
    .service-box {
        width: calc(207px + (304 - 207) * (100vw - 481px) / (700 - 481));
        height: calc(306px + (253 - 306) * (100vw - 481px) / (700 - 481));
    }
    .service-box:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-size: 2rem;
        border: 2px solid var(--white);
        text-align: center;
    }
    .service-box:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        /*background-color: blue;*/
        font-size: 2rem;
        border: 2px solid var(--white);
        text-align: center;
    }
    .services-wrapper .service-box:nth-child(3) {
        grid-column: 1 / span 2;
        justify-self: center;
        width: calc(207px + (304 - 207) * (100vw - 481px) / (700 - 481));
       /* background-color: blue;*/
    }
    .services-wrapper-2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .services-wrapper-2 .service-box:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      /*  background-color: blue; */
    }
    .services-wrapper-2 .service-box:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        /*  background-color: blue; */
    }
    .services-wrapper-2 .service-box:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
      /*  background-color: blue; */
        padding: 1rem;
    }
    .services-wrapper-2 .service-box:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
         /*  background-color: blue; */
    }
    .service-box:hover {
        transform: none;
    }
    .aboutme-container {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    .aboutme-text {
        flex: 1;
        width:100%;
        padding: 0 2rem;
        box-sizing: border-box;
        margin-bottom: 2rem;
    }
    .aboutme-text-container p {
        font-size: 1.8rem;
        text-align: center;
    }
    .aboutme-text-container h2 {
      text-align: center;
      margin: 2rem auto;
    }
    .aboutme-image {
        margin: 0 auto;
    }
     .about-image {
        display: block;
        position: relative;
        width: clamp(460px, calc(460px + 1.43 * (100vw - 481px)), 612px);
        height: auto;
        margin: 0 auto;
    }
    .aboutme-phr {
        top: clamp(260px, calc(260px + 0.6 * (100vw - 481px)), 390px);
        font-size: clamp(0.8rem, calc(0.8rem + 0.003 * (100vw - 481px)), 1.1rem);
        letter-spacing: clamp(0.05rem, calc(0.05rem + 0.0004 * (100vw - 481px)), 0.12rem);
        padding: 2rem;
    }
    .customers-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        height: auto;
        margin-top: 4rem auto;
    }
    .image-container {
        width: calc(170px + (245 - 170) * (100vw - 480px) / (700 - 480));
        height: auto;
        margin-bottom: 4rem;
    }
    .image-container img {
        width: 100%;
        height: auto;
    }
    .name-text {
        top: 105%;
    }
    .name-text p {
        font-size: 1.2rem;
    }
    .contact-section {
        width: 100%;
        overflow-x: hidden;
    }
    .contact-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .img-contact {
        width: 90%;
    }
    .img-model {
        width: 100%;
        max-width: 700px;
        padding: 1rem;
        overflow: hidden;
    }
    .form-contact {
        display: flex;
        width: 100%;
        margin: 4rem;
    }
    .form-contact form {
        width: 90%;
        max-width: 380px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    label {
        font-size: 1.3rem;
    }
    input,
    textarea {
        width: 100%;
        padding: 0 auto;
        margin: 2rem 0;
        box-sizing: border-box;
        /*  background-color: blue; */
     }
    button {
        width: 100%;
        padding: 1rem auto;
        margin-top: 4rem;
        box-sizing: border-box;
         /*  background-color: blue; */
    }
  
        /* === inicio código IA === */
    .accept-policies {
        display: grid;
        place-items: center;
        text-align: center;
        gap: 1rem;
        padding-inline: 1rem;
    }

    .accept-policies label {
        display: grid;
        place-items: center;
        text-align: center;
        gap: 1rem;
    }

    .privacy-text,
    .accept-policies a {
        display: block;
        font-size: 1.2rem;
        text-align: center;
        line-height: 2.5;
    }

    .accept-policies input[type="checkbox"] {
        accent-color: gold;
        margin-bottom: 0.5rem;
        color: white; /* o el color que uses */
        text-decoration: none;
        margin-top: 0.5rem;
    }
    .break-sm {
        display:block;
    }
        .social-network-title {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 1rem;
    }


    /* === fin código IA === */








 
    .social-network-title h3 {
       font-size: 1.4rem;
    }
    .social-data {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 4rem 0;
    }
    .social-network-icon {
        width: 40px;
        height: 40px;
    }
    .img-data {
        width: min(calc(290px + 91 * (100vw - 481px) / 170), 326px);
        height: auto;
        box-sizing: border-box;
    }
    .lifestyle-container {
        height: auto;
    }
    .text-container h3 {
        padding: 1rem;
    }
    .services-row {
      flex-direction: column;
      margin-bottom: 2rem;
      gap: 2rem;
    }
    .service-box-ls {
        width: 90vw;
        max-width: 480px;
        border: solid 2px;
        padding-bottom: 4rem;
        margin: 0 auto;
    }
     .service-title {
        font-size: clamp(1rem, 2.5vw, 1.3rem);
    }
    .slideshow-container {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 390px;
        height: 250px;
    }
    .slideshow-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .image-service-ls {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 390px;
        width: 100%;
        height: auto;
        max-height: 250px;
        overflow: hidden;
    }
    .image-service-ls img {
        object-fit: cover;
    }
    .footer-container .legal-text {
        flex-direction: column;
        gap: 0.8rem;
         /*  background-color: blue; */
    }
    .footer-container .legal-item a {
        font-size: 1.2rem;
    }
    .footer-container .rights-reserved {
        font-size: 1rem;
    }
}
@media (min-width: 701px) and (max-width: 1024px) {
   /* body {
        background-color: orange;
    } */
    html, body {
        overflow-x: hidden;
    }
    section {
        scroll-margin-top: 3rem;
    }
    .index-container,
    .services-container,
    .aboutme-container,
    .customers-container,
    .contact-container,
    .lifestyle-container {
        width: 100%;
    }
    .navigation-container a {
       font-size: 1rem;
    }
    .index-subtitle {
        height: 8rem;
    }
    .index-container {
        width: 100%;
        height: 100%;
        margin-top: 0;
        box-sizing: border-box;
    }
    .index-image {
        width: 60%;
        height: auto;
        margin: 0 auto;
    }
    .slogan-content.keyword1 p,
    .slogan-content.keyword2 p {
        letter-spacing: 2rem;
        font-size: clamp(16px, 2.5vw, 50px);
        color: var(--black);
    }
    .keyword1,
    .keyword2 {
        width: auto;
        max-width: 100vw;
    }
    .keyword1 {
        top: 27%;
        left: 5%;
    }
    .keyword2 {
        left: 57%;
        white-space: nowrap;
    }
    .header-text {
        height: 100%;
    }
    .h-title {
        grid-column: 1;
    }
    .h-header {
        grid-column: 1;
    }
    .h-caption {
        grid-row: 3 / 4;
    }
    .h-title h1 {
        letter-spacing: 0.7vh;
    }
    .h-header p {
        font-size: 1.5vh;
        letter-spacing: 0.7vh;
    }
    .h-caption h2 {
        display: inline-block;
        font-size: 2vh;
        letter-spacing: 0.7;
        border: 1px solid var(--white);
        align-self: end;
        padding: 0.5rem 0.8rem;
    }
    .subtitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 3rem;
        padding-top: 6rem;
        margin-bottom: 2rem;
    }
  .services-container {
        padding: 0;
        margin: 3rem auto;
        height: auto;
    }
    .services-text-container {
        width: 100%;
        padding: 0;
        margin: 1.5rem;
    }
    .services-text-container p {
        font-size: clamp(1.5rem, 2.5vw + 0.5rem, 1.8rem) !important;
    }
      .services-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }
    .services-wrapper:first-of-type .service-box {
        flex: 1 1 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        min-height: 200px;
    }
    .service-box {
        width: clamp(220px, calc(304px - (100vw - 701px) * (304 - 220) / (1024 - 701)), 304px);
        height: clamp(230px, calc(253px - (100vw - 701px) * (253 - 230) / (1024 - 701)), 253px);
    }
    .service-box:hover {
        transform: none;
    }
    .title-service {
        padding: 1rem;
    }
    .text-service p {
        font-size: clamp(1rem, calc(1.2rem - (100vw - 701px) * 0.0025), 1.2rem);
    }
    @media (min-width: 701px) and (max-width: 999px) {
        .aboutme-container {
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: auto;
            padding: 0;
        }
        .aboutme-text {
            flex: 2;
            width: clamp(400px, 95vw, 900px);
            padding: 2rem;
            box-sizing: border-box;
            margin: 0 auto;
            transition: all 0.4s ease;
        }
        .aboutme-text-container p {
            font-size: clamp(1.6rem, 2vw, 1.8rem);
        }
        .aboutme-image {
            margin-bottom: 5rem;
        }
        .about-image {
            display: block;
            position: relative;
            width: clamp(480px, 90vw, 680px);
            height: auto;
            margin: 0 auto;
            object-fit: contain;
            transition: all 0.4s ease;
        }
    }
    @media (min-width: 1000px) and (max-width: 1024px) {
        .aboutme-container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 6rem;
            height: auto;
            padding: 3rem;
        }
        .aboutme-text,
        .aboutme-image {
            flex: 0 0 45%;
            max-width: 45%;
            height: auto;
            margin: 0;
        }
        .about-image {
            width: 100%;
            height: auto;
            display: block;
        }
        .aboutme-text-container {
            height: auto;
        }
        .aboutme-text-container p {
            font-size: 1.3rem;
            line-height: 3rem;
        }
        .aboutme-text .aboutme-text-container:nth-child(2) {
            height: auto;
            padding: 0;
            margin: 2rem;
            line-height: 1.2;
        }
        .aboutme-text .aboutme-text-container:nth-child(2) h2 {
            font-size: 1.8rem;
            margin: 0;
            padding: 0.5rem 0;
            line-height: 1;
            text-align: center;
        }
        .aboutme-phr {
            top: 70%;
            padding: 1rem;
        }
        .aboutme-phr p {
            font-size: 1.1rem;
        }
    }
    @media (min-width: 701px) and (max-width: 999px) {
        .customers-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
            height: auto;
            gap: 4rem;
            margin: 4rem auto;
        }
        .name-text {
            position: static;
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--white);
            margin-top: 1rem;
        }
            }
    @media (min-width: 1000px) and (max-width: 1024px) {
        .customers-container {
            flex-direction: row;
            height: 296px;
        }
        .image-container { 
            text-align: center;
        }
        .name-text {
            position: static;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--white);
            margin-top: 2rem;
        }
        .gallery-image {
            width: 190px;
            height: 190px;
            object-fit: cover;
            display: block;
            margin: 0 auto;
        }
    }
    @media (min-width: 701px) and (max-width: 999px) {
        .contact-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: auto;
            overflow: hidden;
        }
        .img-contact {
            margin-top: 5rem;
        }
        .social-data {
            display: flex;
            justify-content: center;
            width: 100%;
            height: auto;
            margin-bottom: 3rem;
        }
    }
    @media (min-width: 1000px) and (max-width: 1024px) {
        .contact-container {
            height: auto;
            padding: 1rem;
            overflow: hidden;
        }
        .form-contact {
            width: 100%;
            max-width: 450px;
            height: auto;
            justify-self: center;
        }
        .img-contact {
            grid-area: img;
            width: 100%;
            width: 450px;
            height: auto;
            justify-self: center;
            margin-top: 3rem;
        }
        .social-network-title,
        .social-network-link,
        .social-data {
            max-width: 450px;
        }
        .social-network-title,
        .social-network-data {
            margin-left: auto;
            margin-right: auto;
        }
        .social-network-title {
            grid-area: title;
            width: 450px;
        }
        .social-network-link {
            grid-area: links;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        .social-network-icon {
            display: flex;
            align-items: center;
            border: 0.1rem solid var(--white);
            padding: 1rem;
            width: 40px;
            height: 40px;
        }
        .social-network-link i {
            font-size: 1.5rem;
        }
        .social-data {
            grid-area: data;
            justify-self: start;
            width: 90%;
        }
    }
    @media (min-width: 701px) and (max-width: 999px) {
        .lifestyle-container {
            height: auto;
        }
        .services-row {
            flex-direction: column;
            height: auto;
            margin-bottom: 2rem;
            gap: 2rem;
        }
        .service-box-ls {
            width: 100%;
            max-width: 701px;
            height: auto;
            border: solid 2px;
            padding-bottom: 4rem;
            margin: 0 auto;
        }
        .slideshow-container {
            width: 100%;
            max-width: 670px;
            height: auto;
            overflow: hidden;
            padding: 1rem;
        }
         .image-service-ls {
            align-items: center;
            width: 86vw;
            max-width: 650px;
            height: auto;
            overflow: hidden;
            padding: 1rem;
        }
        .image-service-ls img {
            width: 95%;
            height: 100%;
            max-width: 680px;
            object-fit: cover;
        }
    }
    @media (min-width: 1000px) and (max-width: 1024px) {
        .lifestyle-container {
            height: auto;
        }
        .services-row {
            flex-direction: row;
            height: auto;
            margin: 4rem 0;
        }
        .privacy-text {
            font-size: 1.2rem;
        }
        .service-box-ls {
            width: 90vw;
            max-width: 480px;
            border: solid 2px;
            padding-bottom: 4rem;
            margin: 0 auto;
        }
        .service-title {
            font-size: clamp(1rem, 2.5vw, 1.3rem);
        }
        .slideshow-container {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 390px;
            max-height: 250px;
            height: 100%;
        }
        .image-service-ls {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 390px;
            height: auto;
            max-height: 250px;
            overflow: hidden;
            padding: 1rem;
        }
        .image-service-ls img {
            max-width: 400px;
        }
    }
    .footer-container .legal-text {
        flex-direction: row;
        justify-content: space-evenly;
        gap: 2rem;
        /*background-color: orange;*/
    }
    .footer-container .legal-item a {
        font-size: 1.3rem;
    }
    .footer-container .rights-reserved {
        font-size: 1.1rem;
    }
}
@media (min-width: 1025px) and (max-width: 1439px) {
    /*body {
        background-color: green;
    }*/
    html, body {
        overflow-x: hidden;
    }
    section {
        scroll-margin-top: 5rem;
    }
    .index-container,
    .services-container,
    .aboutme-container,
    .customers-container,
    .contact-container,
    .lifestyle-container {
        width: 100%;
        max-width: 1439px;
        height: 100%;
        max-height: 960px;
        margin: 0 auto;
    }
    .navigation-container a {
       font-size: clamp(1rem, 1.5vw, 1.2rem);
    }
    .index-subtitle {
        height: 8rem;
    }
    .index-subtitle h2 {
        color: green;
    }
    .index-container {
        box-sizing: border-box;
        padding: 0;
        margin-bottom: 2rem;
    }
    .index-image {
        width: 90%;
        object-fit: contain;
        margin: 0 auto;
    }
    .slogan-content.keyword1 p,
    .slogan-content.keyword2 p {
        font-size: clamp(16px, 2.5vw, 50px);
        letter-spacing: 2rem;
     }
    .keyword1 {
        top: 27%;
        left: 9%;
    }
    .keyword2 {
        top: 55%;
        left: 65%;
        white-space: nowrap;
    }
    .h-title {
        grid-column: 1;
        grid-row: 1 / 2;
    }
    .h-header {
        grid-row: 2 / 3;
      }
    .h-title h1 {
        letter-spacing: 0.7vh;
    }
    .h-header p {
        font-size: 1.5vh;
        letter-spacing: 0.7vh;
    }
    .h-caption h2 {
        display: inline-block;
        font-size: 2vh;
        letter-spacing: 0.7;
        align-self: end;
        padding: 0.5rem 0.8rem;
    }
     .services-container {
        padding: 0;
        margin: 3rem auto;
        height: auto;
    }
    .services-text-container {
        width: 100%;
        padding: 0;
        margin: 1.5rem;
    }
    .services-text-container p {
        font-size: clamp(1.5rem, 2.5vw + 0.5rem, 1.8rem) !important;
    }
      .services-wrapper {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .services-wrapper:first-of-type .service-box {
        flex: 1 1 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        min-height: 200px;
    }

    /* === inicio código anterior === */
    /*.service-box {
        width: clamp(220px, calc(304px - (100vw - 701px) * (304 - 220) / (1024 - 701)), 304px);
        height: clamp(250px, calc(253px - (100vw - 701px) * (253 - 250) / (1024 - 701)), 253px);
    }*/
    /* === fin código anterior === */

       /* === inicio código nuevo === */
    .service-box {
        width: 273px;
        height: 200px;
    }
    /* === fin código nuevo === */
    .service-box:hover {
        transform: none;
    }
    .title-service {
        padding: 1rem;
    }
    .text-service p {
        font-size: clamp(1rem, calc(1.3rem - (100vw - 701px) * 0.0025), 1.3rem);
    }
   
    .aboutme-container {
        justify-content: center;
        gap: 6rem;
        height: auto;
    }
    .aboutme-text,
    .aboutme-image {
        flex: 0 0 45%;
        max-width: 45%;
        height: auto;
        margin: 0;
    }
    .about-image {
        width: 100%;
        height: auto;
        display: block;
    }
    .aboutme-text-container p {
        font-size: 1.4rem;
        line-height: 3rem;
    }
    @media (min-width: 1232px) and (max-width: 1439px) {
        .aboutme-text-container p {
            font-size: 1.7rem;
            line-height: 3.5rem;
        }
        .aboutme-phr p {
            font-size: 1.2rem !important;
        }
        .aboutme-phr {
            top: 40%;
            padding: 2rem;
        }
    }
    .aboutme-text .aboutme-text-container:nth-child(2) {
        height: auto;
        padding: 0;
        margin: 2rem;
        line-height: 1.2;
    }
    .aboutme-text .aboutme-text-container:nth-child(2) h2 {
        font-size: 1.8rem;
        margin: 0;
        padding: 0.5rem 0;
        line-height: 1;
        text-align: center;
    }
    .aboutme-phr {
        top: calc(70% + ((100vw - 1025px) * 0.001208));
        padding: 2rem;
    }
    .aboutme-phr p {
       font-size: 1.1rem;
    }
    .customers-container {
        flex-direction: row;
        height: 296px;
    }
    .image-container {
        width: 150px;
        text-align: center;
    }
     .gallery-image {
        width: 100%;
        height: auto;
        /*width: 190px;
        height: 190px;*/
        object-fit: cover;
        display: block;
        margin: 0 auto;
    }
    .name-text {
        position: static;
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--white);
        margin-top: 2rem;
    }
   
    .contact-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "img form"
            "form title"
            "form links"
            "img data";
        gap: 2rem;
        height: auto;
        padding: 1rem;
        overflow: hidden;
        align-items: start;
    }
    .img-contact {
        grid-area: img;
        width: 450px;
        height: auto;
        width: calc(450px + ((100vw - 1025px) * 0.215));
        height: calc(564px + ((100vw - 1025px) * 0.27));
        justify-self: center;
        margin-top: 3rem;
    }
    .form-contact {
        grid-area: form;
        width: 100%;
        max-width: 450px;
        height: auto;
        justify-self: center;
    }
    .social-network-title,
    .social-network-link,
    .social-data {
        max-width: 450px;
    }
    .social-network-title,
    .social-data {
        margin-left: auto;
        margin-right: auto;
    }
    .accept-policies label {
        display: block;
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .privacy-text {
        display: inline-block;
        max-width: 450px;
        white-space: nowrap;
        text-align: center;
        font-size: 1.4rem;
        padding-left: 1rem;
    } 
    .break-sm {
        display: none;
    }

    .accept-policies a {
        display: inline; 
        text-align: center;   
        padding-left: 0.3rem;
    }


    .social-network-title {
        grid-area: title;
        width: 450px;
    }
    .social-network-link {
        grid-area: links;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .social-network-icon {
        display: flex;
        align-items: center;
        border: 0.1rem solid var(--white);
        padding: 1rem;
        width: 40px;
        height: 40px;
    }
    .social-network-link i {
        font-size: 1.5rem;
    }
    .social-data {
        grid-area: data;
        justify-self: start;
        width: 90%;
    }
    .lifestyle-container {
        height: auto;
    }
    .services-row {
        height: auto;
    }
    .service-box-ls {
      width: 100%;
        max-width: 480px;
        padding-bottom: 4rem;
        margin: 0 auto;
    }
    .service-title {
        font-size: clamp(1rem, 2.5vw, 1.3rem);
    }
    .slideshow-container {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 390px;
        height: 250px;
        overflow: hidden;
    }
    .image-service-ls {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 390px;
        height: 250px;
        overflow: hidden;
    }
    .footer-container .legal-text {
        gap: 2rem;
    }
    .footer-container .legal-item a {
        font-size: 1.4rem;
    }
    .footer-container .rights-reserved {
        font-size: 1.2rem;
    }
}