/******************************
*   Root
******************************/
:root {
    --clr-black: 0, 0, 0;        /* #000000 */
    --clr-gray-500: 171, 171, 171; /* #ABABAB */
    --clr-white: 255, 255, 255;  /* #FFFFFF */
    --clr-blue-900: 4, 51, 100;      /* #043364 */
    --clr-blue-700: 2, 74, 148;      /* #024A94 */
    --clr-blue-500: 0, 74, 147;      /* #00529B */
    --clr-blue-300: 162, 202, 242;   /* #A2CAF2 */
    --clr-blue-100: 236, 247, 248;   /* #ECF7F8 */
    --clr-orange-600: 255, 109, 12;  /* #FF6D0C */
    --clr-orange-500: 244, 115, 33;  /* #F37321 */
    --clr-orange-400: 251, 152, 33;  /* #FB9821 */
    --clr-orange-300: 255, 169, 111; /* #FFA96F */
    --clr-orange-200: 250, 207, 182; /* #FACFB6 */
    --clr-orange-100: 250, 207, 177; /* #FACFB1 */

    --gradient-orange: linear-gradient( to bottom, rgb(var(--clr-orange-400)) 30%, rgb(var(--clr-orange-600)) 100%);

    --swiper-theme-color: #00529B;
    --swiper-pagination-bullet-inactive-color: #00529B;
    --swiper-pagination-bullet-inactive-opacity: 0.3;

    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;


    /* Tipografia */
    --font-base: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --fw-t:  100; /* Thin */
    --fw-xl: 200; /* Extra Light */
    --fw-l:  300; /* Light */
    --fw-r:  400; /* Book / Regular */
    --fw-m:  500; /* Medium */
    --fw-b:  700; /* Bold */
    --fw-bl: 900; /* Black */
    --fw-u:  950; /* Ultra */

    --fs-n: normal;
    --fs-i: italic;

    /* Interlineado */
    --lh-display: 1;       /* títulos display / hero */
    --lh-large: 1.1;       /* texto grande */
    --lh-medium: 1.25;     /* texto de tamaño medio */
    --lh-ui: 1.4;           /* interfaz / navegación / botones */
    --lh-body: 1.6;         /* párrafos y texto general */
    --lh-reading: 1.75;     /* lectura larga / artículos */

    /* Tamaños */
    --size-2: 0.125rem;   /* 2px */
    --size-4: 0.25rem;    /* 4px */
    --size-6: 0.375rem;   /* 6px */
    --size-8: 0.5rem;     /* 8px */
    --size-10: 0.625rem;  /* 10px */
    --size-12: 0.75rem;   /* 12px */
    --size-14: 0.875rem;  /* 14px */
    --size-16: 1rem;      /* 16px */
    --size-18: 1.125rem;  /* 18px */
    --size-20: 1.25rem;   /* 20px */
    --size-22: 1.375rem;  /* 22px */
    --size-24: 1.5rem;    /* 24px */
    --size-26: 1.625rem;  /* 26px */
    --size-28: 1.75rem;   /* 28px */
    --size-30: 1.875rem;  /* 30px */
    --size-32: 2rem;      /* 32px */
    --size-34: 2.125rem;  /* 34px */
    --size-36: 2.25rem;   /* 36px */
    --size-38: 2.375rem;  /* 38px */
    --size-40: 2.5rem;    /* 40px */
    --size-42: 2.625rem;  /* 42px */
    --size-44: 2.75rem;   /* 44px */
    --size-46: 2.875rem;  /* 46px */
    --size-48: 3rem;      /* 48px */
    --size-50: 3.125rem;  /* 50px */
    --size-52: 3.25rem;   /* 52px */
    --size-54: 3.375rem;  /* 54px */
    --size-56: 3.5rem;    /* 56px */
    --size-58: 3.625rem;  /* 58px */
    --size-60: 3.75rem;   /* 60px */
    --size-62: 3.875rem;  /* 62px */
    --size-64: 4rem;      /* 64px */
    --size-66: 4.125rem;  /* 66px */
    --size-68: 4.25rem;   /* 68px */
    --size-70: 4.375rem;  /* 70px */
    --size-72: 4.5rem;    /* 72px */
    --size-74: 4.625rem;  /* 74px */
    --size-76: 4.75rem;   /* 76px */
    --size-78: 4.875rem;  /* 78px */
    --size-80: 5rem;      /* 80px */
    --size-82: 5.125rem;  /* 82px */
    --size-84: 5.25rem;   /* 84px */
    --size-86: 5.375rem;  /* 86px */
    --size-88: 5.5rem;    /* 88px */
    --size-90: 5.625rem;  /* 90px */
    --size-92: 5.75rem;   /* 92px */
    --size-94: 5.875rem;  /* 94px */
    --size-96: 6rem;      /* 96px */
    --size-98: 6.125rem;  /* 98px */
    --size-100: 6.25rem;  /* 100px */

}


::selection {
    background: ;
    color: ;
}
::-moz-selection {
    background: ;
    color: ;
}
::-webkit-selection {
    background: ;
    color: ;
}

/******************************
*   Reset General
******************************/
*,
*::before,
*::after { box-sizing: border-box; }
* {
    margin: 0;
    padding: 0;
}
html:focus-within { scroll-behavior: smooth; }
html {
    scroll-behavior: smooth;
    scroll-padding: var(--size-72);
}
body {    
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-base);
    font-weight: var(--fw-r);
    font-style: var(--fs-n);
    line-height: var(--lh-ui);
    font-size: var(--size-16);
    color: rgb(var(--clr-blue-500));
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/*------ Media ------*/
img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
    border: 0;
}
figure { user-select: none; }
:where(figure) { margin: 0 !important; }
figure img {
    margin: 0 auto;
    height: auto;
}

/*------ Tipografia ------*/
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    margin: 0;
    font-weight: var(--fw-b);
    font-style: var(--fs-n);
}

/*------ Listas ------*/
ul,
ol {
    margin: 0;
    padding: 0;
    padding-inline-start: var(--size-20);
}
li + li { margin-top: var(--size-20); }
li::marker,
li > ul > li::marker { color: rgb(var(--clr-teal-600)); }

/*------ Links ------*/
a, a:link, a:hover, a:visited, button {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/******************************
*   Elementos de formulario
******************************/
input:not(:where([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"])),
select,
textarea {
    display: block;
    width: 100%;
    padding: var(--size-12);
    border-radius: var(--size-100);
    color: rgb(var(--clr-black));
    background: rgb(var(--clr-white));
    border: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    resize: none;
    border-radius: var(--size-20);
}

/* Botones */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: none;
    border: none;
    cursor: pointer;
}

/* Checkbox / radio */
input[type="checkbox"],
input[type="radio"] { accent-color: currentColor; }

/* Placeholder */
::placeholder {
    color: inherit;
    /* opacity: 0.6; */
}

/******************************
*   Accesibilidad
******************************/
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
}

.campo input:focus,
.campo input:focus-visible,
.campo select:focus,
.campo select:focus-visible,
.campo textarea:focus,
.campo textarea:focus-visible {
    border-color: rgb(var(--border-camp)) !important;
    box-shadow: inset 0 0 6px rgba(var(--clr-black), .2);
    outline: none;
}


/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-text-fill-color: rgb(var(--clr-blue-900)) !important;
    /* ESTE es el truco real pro */
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--clr-white)) inset !important;
    box-shadow: 0 0 0 1000px rgb(var(--clr-white)) inset !important;
    transition: background-color 9999s ease-out 0s;
}
input::placeholder,
textarea::placeholder {}


p {
    margin: 0;
    line-height: var(--lh-ui);
}
* + p,
p + *,
* + ol,
* + ul,
h2 + div,
h3 + div,
h4 + div,
h5 + div,
h6 + div { margin-top: var(--size-20); }
ol + *,
ul + *,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 { margin-top: var(--size-40); }

p + p { margin-top: var(--size-12); }

.sc__hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.txt__cntr { text-align: center; }

/******************************
*   Container
******************************/
.container,
.container-full {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
}
.container {
    margin-right: auto;
    margin-left: auto;
}

/* sm */
@media (min-width: 576px) { .container { max-width: 540px; } }

/* md */
@media (min-width: 768px) { .container { max-width: 720px; } }

/* lg */
@media (min-width: 992px) { .container { max-width: 960px; } }

/* xl */
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* xxl */
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/******************************
*   Loader
******************************/

/******************************
*	General
******************************/
main { min-height: 100vh; }
main section {
    position: relative;
    padding-top: var(--size-60);
    padding-bottom: var(--size-60);
    z-index: 1;
}
main section .container { position: relative; }

/* Header Section */
.h__sect + * { margin-top: var(--size-60); }
.h__sect { text-align: center; }
.h__sect :is(h1, h2, h3, h4, h5) {
    color: rgb(var(--clr-blue-500));
    font-weight: var(--fw-bl);
    font-size: clamp(var(--size-26), 4vw, var(--size-40));
    line-height: var(--lh-large);
    text-transform: uppercase;
}

/* Fondos */
.bg__azul {
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-blue-500));
}
.bg__azul .h__sect :is(h1, h2, h3, h4, h5) { color: rgb(var(--clr-blue-300)); }

.bg__naranja {
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-orange-500));
}


/* CTA */
* + .c__cta,
.c__cta + * { margin-top: var(--size-40); }
.c__cta {
    display: flex;
    flex-flow: row wrap;
    gap: var(--size-20);
}
.cta__center { justify-content: center; }
.cta {
    display: inline-flex;
    align-items: center;
    gap: var(--size-20);
    padding: var(--size-18) var(--size-30);
    font-weight: var(--fw-b);
    text-transform: uppercase;
    border-radius: var(--size-100);
    line-height: var(--lh-large);
    text-decoration: none;
    text-align: center;
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-blue-500));
    max-width: calc(var(--size-100) * 4);
}
.cta:hover {
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-orange-500));
}
.swiper-slide {
    height: initial;
    display: flex;
}

/******************************
*   Hero
******************************/
.hero {
    padding: 0;
    overflow: hidden;
}

/******************************
*	Sobre nosotros
******************************/
.nosotros {
    background-image: url('../img/bg-nosotros.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cont__fil {
    display: flex;
    flex-direction: column;
    gap: var(--size-32);
}
.fil__cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-32);
}
.info__col h3 {
    text-transform: uppercase;
    color: rgb(var(--clr-orange-500));
}
.info__col p { line-height: var(--lh-body) }

/******************************
*   Eficacia
******************************/
.eficacia {
    padding-bottom: 0;
    background: rgb(var(--clr-blue-300));
}
.eficacia .h__sect :is(h1, h2, h3, h4, h5) > * { display: block; }
.eficacia .h__sect :is(h1, h2, h3, h4, h5) { color: rgb(var(--clr-blue-900)); }
.eficacia .h__sect :is(h1, h2, h3, h4, h5) strong span:nth-child(1) { font-size: 70% }
.eficacia .h__sect :is(h1, h2, h3, h4, h5) strong span:nth-child(2) { font-size: 90% }

.fil__des {
    display: flex;
    flex-direction: column;
    margin-right: -20px;
    margin-left: -20px;
}
.des__col {
    padding-block: clamp(var(--size-30), 4vw, var(--size-40));
    padding-left: clamp(var(--size-20), 3vw, var(--size-32));
    padding-right: clamp(var(--size-20), 3vw, var(--size-32));
}
.des__col { color: rgb(var(--clr-white)); }
.des__col:nth-child(1) { background: rgb(var(--clr-blue-700)); }
.des__col:nth-child(2) { background: rgb(var(--clr-blue-900)); }
.col__info {
    max-width: calc(calc(var(--size-100) * 7) + var(--size-50));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.col__info header + * { margin-top: var(--size-20); }
.col__info * + header { margin-top: var(--size-60); }
.col__info header :is(h2, h3, h4) {
    font-size: clamp(var(--size-18), 2vw, var(--size-26));
    line-height: var(--lh-large);
    font-weight: var(--fw-bl);
    text-transform: uppercase;
    text-align: center;
}
.col__info header :is(h2, h3, h4) span {
    display: inline-block;
    color: rgb(var(--clr-orange-500));
    font-size: 150%;
}
.des__col:nth-child(1) .col__info header { color: rgb(var(--clr-blue-300)); }
.des__col:nth-child(1) .col__info header :is(h2, h3, h4) span {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--size-100) * 3);
    width: 50%;
}
.info__ilus {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    gap: var(--size-16);
    align-items: flex-end;
}
.ilus__graph {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-16);
}
.graph__cont {
    display: flex;
    position: relative;
    align-items: center;
}
.graph__cont > * { width: 50%; }
.fruta img {
    margin-left: -50%;
    width: 150%;
    max-width: none;
}
.muestra {
    position: relative;
    z-index: 2;
}
.muestra figure { width: 120%; }

.des__col:nth-child(1) .info__ilus { align-items: center; }
.des__col:nth-child(1) .ilus__graph .fruta img { width: 180%; }
.des__col:nth-child(1) .ilus__graph:nth-child(odd) { width: 35%; }
.des__col:nth-child(1) .ilus__graph:nth-child(even) { width: 30%; }
.des__col:nth-child(1) .ilus__graph:nth-child(2) { position: relative; }
.des__col:nth-child(1) .ilus__graph:nth-child(2) figure { position: relative; }
.des__col:nth-child(1) .ilus__graph:nth-child(2) figure::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1%;
    left: -10%;
    right: -10%;
    height: 5%;
    filter: blur(5px);
    opacity: 0.5;
    background: rgba(var(--clr-black), .5);
    border-radius: 50%;
}
.des__col:nth-child(1) .ilus__graph:nth-child(2) figure img { position: relative; }
.des__col:nth-child(1) .ilus__graph:nth-child(3) .graph__cont { flex-direction: row-reverse; }
.des__col:nth-child(1) .ilus__graph:nth-child(3) .graph__cont .fruta img {
    margin-left: inherit;
    margin-right: -50%;
}
.txt__time {
    text-align: center;
    display: inline-block;
    font-weight: var(--fw-bl);
    font-size: clamp(var(--size-12), 2vw, var(--size-16));
    background: rgb(var(--clr-orange-500));
    border-radius: var(--size-50);
    text-transform: uppercase;
    padding: var(--size-6) var(--size-12);
    line-height: var(--lh-display);
}
.txr__decrip {
    position: absolute;
    text-transform: uppercase;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: var(--size-10);
    right: 100%;
    top: 80%;
}
.txr__decrip figure { width: 40%; }
.txr__decrip span {
    display: block;
    font-size: clamp(var(--size-6), 1vw, var(--size-10));
    line-height: var(--lh-large);
    font-weight: var(--fw-b);
    text-align: center;
}
* + .text__end { margin-top: var(--size-60); }
.text__end { text-align: center; }
.txt__desi {
    font-family: Arial, sans-serif;
    font-size: clamp(var(--size-18), 2vw, var(--size-26));
    text-transform: uppercase;
    line-height: var(--lh-large);
}
.txt__refe { font-size: 70%; }

* + .info__solu { margin-top: var(--size-40); }
.info__solu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-30);
}
.solu__sello {
    width: 20%;
    min-width: calc(var(--size-100) + var(--size-40));
    max-width: calc(var(--size-100) + var(--size-50));
}
.solu__txt {
    text-align: center;
    flex: 1;
    text-transform: uppercase;
    font-weight: var(--fw-bl);
    font-size: clamp(var(--size-20), 1.8vw, var(--size-28));
}
.solu__txt p { line-height: var(--lh-display); }
.remove { font-size: 120%; }
.remove > span {
    font-size: 150%;
    vertical-align: middle;
    display: inline-flex;
}
.remove > span > span:nth-child(1) {
    font-weight: var(--fw-b);
    margin-right: -8%;
    position: relative;
    z-index: 1;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgb(var(--clr-blue-700));
}
.remove > span > span:nth-child(2) { color: rgb(var(--clr-orange-500)); }

/******************************
*   Videos
******************************/
/* .video01,
.video02 {
    padding-top: var(--size-100);
    padding-bottom: var(--size-100);
} */
.video01 .container { z-index: 1; }
.video02 { margin-top: -2px; }
.cont__media {
    position: relative;
    max-width: 120vh;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.cont__vid {
    position: relative;
    padding-top: 56%;
}
.cont__vid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******************************
*   Usos
******************************/
.usos {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -1px;
    overflow: hidden;
}
.usos .bg__azul {
    position: relative;
    padding-bottom: var(--size-60);
    background: transparent;
    z-index: 1;
}
.curva__top {
    padding-top: 18vw;
    position: relative;
    margin-bottom: -2vw;
}
.curva__top::before,
.curva__top::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.curva__top::before {
    background: #fecc7e;
    clip-path: ellipse(80% 100% at 50% 100%);
}
.curva__top::after {
    top: var(--size-8);
    background: #cfbc6e;
    clip-path: ellipse(70% 100% at 50% 100%);
}
.curva__top > div,
.curva__top > div::before { background: rgb(var(--clr-blue-500)); }
.curva__top > div {
    position: absolute;
    width: 100%;
    height: calc(100% - var(--size-8));
    bottom: 0;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 1;
}
.curva__top > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300vw;
}
.tetx__des {
    display: flex;
    justify-content: center;
}
.des__title {
    display: flex;
    flex-direction: column;
}
.des__title span {
    text-transform: uppercase;
    font-size: clamp(var(--size-22), 2vw, var(--size-32));
    font-weight: var(--fw-bl);
    line-height: var(--lh-display);
}
.des__title figure { width: 100%; }
.des__title figure img {
    margin-left: -4%;
    margin-right: -3%;
    max-width: inherit;
}
.info__usos { position: relative; }
.line { position: absolute; }
.usos__items {
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
    position: relative;
}
.item__uso {
    display: flex;
    flex-direction: column;
    gap: var(--size-10);
    align-items: center;
}
.cont__pleca { width: 100%; }
.item__graf {
    position: relative;
    max-width: calc(var(--size-100) + var(--size-50));
    width: 100%;
    flex-shrink: 0;
    z-index: 1;
}
.graf__cont {
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
}
.cont__circ {
    background: linear-gradient( 90deg, #D69D22 0%, #F8D95A 35%, #FFE77A 50%, #A86D1C 68%, #DFAF2F 100%);
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont__circ::before {
    content: '';
    position: absolute;
    width: 93%;
    height: 93%;
    background: rgb(var(--clr-white));
    top: 50%;
    left: 50%;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.cont__circ figure {
    width: 70%;
    position: relative;
}
.cont__circ figure img {
    width: 100%;
    max-width: inherit;
}
.txt__circle {
    position: absolute;
    aspect-ratio: 1/1;
    width: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
}
.txt__circle text {
    font-weight: 900;
    font-size: var(--size-18);
    fill: rgb(var(--clr-blue-500));
    stroke: rgb(var(--clr-white));
    stroke-width: var(--size-4);
    paint-order: stroke fill;
    stroke-linejoin: round;
}
.pleca {
    border-radius: var(--size-100);
    background: rgb(var(--clr-orange-500));
    padding: var(--size-10) var(--size-20);
    display: flex;
    justify-content: space-between;
    gap: var(--size-8);
}
.p__item {
    display: flex;
    flex-direction: column;
    gap: var(--size-6);
}
.p__item figure {
    width: 100%;
    min-width: var(--size-40);
    height: var(--size-30);
}
.p__item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0px 0px 3px rgba(var(--clr-black), .3));
    will-change: filter;
}
.p__item span {
    --clr-blue-500: 0, 31, 63;
    color: rgb(var(--clr-blue-500));
    font-weight: var(--fw-b);
    text-transform: uppercase;
    font-size: clamp(var(--size-10), 2vw, var(--size-14));
    line-height: var(--lh-display);
    text-align: center;
    white-space: nowrap;
}

/******************************
*   Desinfactar
******************************/
.desinfectar { padding: 0; }
.sect__title {
    padding-block: var(--size-40);
    padding-left: var(--size-30);
    padding-right: var(--size-30);
    background: rgb(var(--clr-blue-300));
    cursor: pointer;
}
.sect__title .h__sect i {
    display: inline-block;
    vertical-align: text-bottom;
    align-items: center;
    width: clamp(var(--size-26), 4vw, var(--size-40));
    height: clamp(var(--size-26), 4vw, var(--size-40));
    border: 2px solid;
    border-radius: 50%;
    font-size: 70%;
    line-height: 1;
    position: relative;
}
.sect__title .h__sect i::before {
    position: absolute;
    width: 100%;
    left: 0;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.sect__title.active .h__sect i::before {
    -webkit-transform: translateY(-65%) rotateX(180deg);
    -moz-transform: translateY(-65%) rotateX(180deg);
    -ms-transform: translateY(-65%) rotateX(180deg);
    -o-transform: translateY(-65%) rotateX(180deg);
    transform: translateY(-65%) rotateX(180deg);
}
.sect__info {
    display: none;
    background: rgb(var(--clr-blue-100));
    padding: var(--size-60) 0;
    overflow: hidden;
}
.sect__info p {
    text-align: center;
    font-size: clamp(var(--size-18), 2vw, var(--size-26));
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
.sect__info p + * { margin-top: var(--size-40); }

.opt__des figure {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
}
.opt__des figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sect__info .swiper { overflow: visible; }
.opt__des {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    gap: var(--size-30);
}
.opt__des > * { margin: 0 }

/******************************
*   Pasos
******************************/
.pasos {
    z-index: 2;
    overflow: hidden;
}
.pasos .h__sect :is(h1, h2, h3, h4, h5) { color: rgb(var(--clr-orange-500)); }

.s__pasos { overflow: visible; }
.s__pasos
.cont__step {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.step__number {
    aspect-ratio: 1/1;
    width: var(--size-68);
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: var(--size-2) solid rgb(var(--clr-orange-500));
    display: flex;
    align-items: center;
    justify-content: center;
}
.step__number span {
    font-weight: var(--fw-bl);
    font-size: var(--size-42);
    line-height: var(--lh-display);
}
.cont__step p {
    flex-grow: 1;
    font-weight: var(--fw-bl);
    text-transform: uppercase;
    line-height: var(--lh-display);
    font-size: var(--size-20);
}
.s__pasos + .c__cta { margin-top: var(--size-80); }
.s__pasos .swiper-slide + .swiper-slide .cont__step::before {
    content: '';
    position: absolute;
    width: 50%;
    border-top: 2px dashed rgb(var(--clr-orange-500));
    right: 80%;
    top: var(--size-34);
}

/******************************
*   Portafolio
******************************/
.portafolio { padding-top: 12vw; }
.portafolio::before {
    position: absolute;
    content: '';
    width: 100%;
    height: calc(100% + 15vw);
    left: 0;
    top: -15vw;
    background: var(--gradient-orange);
    -webkit-mask-image: radial-gradient(55vw 15vw at 49.5vw 0%, transparent 99.9%, #000 100%);
    mask-image: radial-gradient(55vw 15vw at 49.5vw 0%, transparent 99.9%, #000 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: -1;
}
.portafolio .h__sect :is(h1, h2, h3, h4, h5) { color: rgb(var(--clr-white)); }
.portafolio .h__sect :is(h1, h2, h3, h4, h5) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-20);
    font-size: clamp(var(--size-26), 3vw, var(--size-30));
}
.portafolio .h__sect :is(h1, h2, h3, h4, h5) span {
    padding: var(--size-20);
    background: rgb(var(--clr-blue-500));
    border-radius: var(--size-100);
    line-height: var(--lh-display);
    font-size: clamp(var(--size-22), 4vw, var(--size-40));
}

.item__prod { flex: 1; }
.fil__info + .fil__info { margin-top: 20px; }
.prod > * + * { margin-top: var(--size-30); }
.prod__img {
    width: 22vh;
    max-width: 65%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}
.prod__img figure {
    width: 100%;
    padding-top: 200%;
    position: relative;
}
.prod__img figure::before {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -1%;
    background: rgba(var(--clr-black), .5);
    width: 90%;
    height: 5%;
    border-radius: 50%;
    filter: blur(5px);
    opacity: .5;
    z-index: -1;
}
.prod__img figure img {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 73%;
    z-index: 1;
}
.m01 figure img,
.m02 figure img { width: 65%; }
.presenta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-8);
    font-size: var(--size-18);
    font-weight: var(--fw-b);
    color: rgb(var(--clr-white));
}
.txt__dosis {
    padding: var(--size-8) var(--size-20);
    line-height: 1;
    border-radius: var(--size-100);
    background: rgb(var(--clr-blue-500));
    text-transform: uppercase;    
}
.cont__dosis {
    display: flex;
    flex-direction: column;
    gap: var(--size-6);
}
.fil__info .acor__opt {
    --clr-blue-500: 0, 31, 63;
    color: rgb(var(--clr-blue-500));
}
.cont__dosis .opt__title {
    padding: var(--size-12);
    border-radius: var(--size-10);
    background: rgb(var(--clr-orange-300));
    line-height: var(--lh-display);
}
.cont__dosis .opt__title.active { background: rgb(var(--clr-orange-100)); }
.cont__dosis .opt__info {
    background: rgb(var(--clr-orange-100));
    color: rgb(var(--clr-blue-500));
    border-bottom-right-radius: var(--size-10);
    border-bottom-left-radius: var(--size-10);
    transform: translateY(calc(-1 * var(--size-16)));
    margin-bottom: calc(-1 * var(--size-16));
}
.cont__dosis .opt__txt {
    padding-top: var(--size-24);
    padding-right: var(--size-12);
    padding-bottom: var(--size-12);
    padding-left: var(--size-12);
}
.info__cant,
.info__cant > div {
    display: flex;
    align-items: center;
}
.info__cant > div {
    min-width: 33.33%;
    flex-direction: column;
    gap: var(--size-10);
    color: rgb(var(--clr-blue-500));
    
}
.info__cant > div span {
    font-size: var(--size-14);
    font-weight: var(--fw-b);
}  
.info__cant > div figure { height: var(--size-30); }
.info__cant > div figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.cont__slide .swiper-pagination {
    position: relative;
    margin-top: 20px;
    bottom: inherit;
}
.c__arrow {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    height: 0;
    top: var(--size-90);
    margin-bottom: var(--size-50);
}
.c__arrow > * {
    pointer-events: all;
    cursor: pointer;
}
.arrow > div {
    font-size: var(--size-20);
    width: var(--size-36);
    height: var(--size-56);
    color: rgb(var(--clr-white));
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.arrow > div::before {
    content: '';
    position: absolute;
    width: calc(200% - var(--size-12));
    height: 100%;
    background: rgb(var(--clr-blue-500));
    border-radius: 50%;
    top: 0;
}
.arrow > div > * { position: relative; }
.a__prev div::before { right: 0; }
.a__next div::before { left: 0; }

.arrow[aria-disabled="true"],
.arrow.swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}

/******************************
*   Preguntas
******************************/
.preguntas { background: rgb(var(--clr-blue-100)); }
.cont__faqs {
    font-optical-sizing: auto;
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.faq__column {
    font-optical-sizing: auto;
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.cont__faqs .opt__title {
    border-radius: var(--size-20);
    background: rgb(var(--clr-white));
    color: rgb(var(--clr-blue-500));
    border-radius: var(--size-20);
}
.cont__faqs .opt__info {
    background: rgb(var(--clr-white));
    color: rgb(var(--clr-blue-500));
    border-bottom-right-radius: var(--size-20);
    border-bottom-left-radius: var(--size-20);
    transform: translateY(calc(-1 * var(--size-20)));
    margin-bottom: calc(-1 * var(--size-20));
}
.cont__faqs .opt__txt {
    padding-top: var(--size-36);
    padding-right: var(--size-18);
    padding-bottom: var(--size-18);
    padding-left: var(--size-18);
}

/******************************
*   Acordeon
******************************/
.acor__opt { position: relative; }
.opt__title {
    padding: var(--size-20);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: var(--size-16);
    align-items: center;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 1;
}
.opt__title :is(p, span) { font-weight: var(--fw-b); }
.indicator i {
    -webkit-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.indicator.rotation i {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.plus {
    position: relative;
    margin: 0;
    width: var(--size-28);
    height: var(--size-28);
    border-radius: 50%;
    border: 1px solid rgb(var(--clr-blue-500));
    flex-shrink: 0;
}
.plus::after,
.plus::before {
    content: '';
    position: absolute;
    width: 50%;
    border-top: 1px solid rgb(var(--clr-blue-500));
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.plus::before {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}
.opt__info { display: none; }
.active .plus::before {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
}

/******************************
*   Donde comprar
******************************/
.s__retailers {
    width: 100%;
    overflow: hidden;
}
.s__retailers .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear !important;
}
.s__retailers .swiper-slide {
    width: calc(var(--size-100) * 2);
    height: var(--size-100);
    flex-shrink: 0;
}
.s__retailers .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--size-30);
}
.s__retailers .swiper-slide img {
    display: block;
    width: 100%;
    max-height: var(--size-100);
    transition: transform 0.3s ease;
}
.s__retailers .swiper-slide a:hover img { transform: scale(1.05); }

/******************************
*   Legal
******************************/
.box__text > * + * { margin-top: 20px; }
.box__text ul,
.box__text ol { padding-inline-start: 20px; }
.box__text li + li { margin-top: 15px; }
.box__text li::marker {
    font-weight: 600;
    color: rgb(var(--dark), .8);
}
.box__text li ul,
.box__text li ol { margin-top: 10px; }
.box__text * + h3,
.box__text * + h4,
.box__text * + h5 { margin-top: 40px; }
.box__text a {
    text-decoration: underline;
    color: rgb(var(--verde));
    font-weight: 500;
}
.box__text strong { opacity: .8; }

.cont__elemt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}


/* ------------ */
.nosotros .cont__elemt {
    height: 103%;
    top: -3%;
}
.elemt { position: absolute; }
.elemt img {
    max-width: none;
    width: 100%;
}
/* .blur { filter: blur(4px); } */

.e__01 {
    width: 16%;
    min-width: 140px;
    top: 0;
    left: calc(100% - var(--size-70));
}
.e__02 {
    width: 14%;
    min-width: 130px;
    top: 9%;
    left: -2%;
}
.e__03 {
    width: 15%;
    min-width: 130px;
    top: 30%;
    left: 92%;
}
.e__04 {
    width: 20%;
    min-width: 170px;
    top: 39%;
    right: calc(100% - var(--size-50));
}
.e__05 {
    width: 20%;
    min-width: 170px;
    top: 60%;
    left: 90%;
}
.e__06 {
    width: 15%;
    min-width: 130px;
    top: 77%;
    right: calc(100% - var(--size-50));
}
.e__07 {
    width: 13%;
    min-width: 87px;
    top: 89%;
    left: 92%;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.e__08 {
    width: 6%;
    min-width: 60px;
    top: 45%;
    left: 83%;
}

.video01 { z-index: 2; }
.video01 .cont__elemt { height: 110%; }
.e__09 {
    width: 15%;
    min-width: 120px;
    top: 57%;
    left: calc(100% - var(--size-60));
}
.e__10 {
    width: 20%;
    min-width: 140px;
    top: 60%;
    left: -10%;
    transform: rotate(130deg);
}

.usos .cont__elemt {
    top: 0;
    z-index: 1;
}
.e__11 {
    width: 18%;
    min-width: 140px;
    top: 7%;
    right: calc(100% - var(--size-96));
}
.e__12 {
    width: 10%;
    min-width: 80px;
    top: 11%;
    right: calc(100% - var(--size-66));
}
.e__13 {
    width: 20%;
    min-width: 130px;
    top: 15%;
    left: 84%;
    z-index: 1;
}
.e__14 {
    width: 10%;
    min-width: 70px;
    top: 17%;
    left: 90%;
}

.pasos .container {
    position: initial;
}
.ele__pasos {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.e__15 {
    width: 10%;
    min-width: 80px;
    z-index: 1;
}
.e__16 {
    width: 10%;
    min-width: 190px;
    margin-left: -10%;
    margin-right: -19%;
}

.e__17 {
    width: 15%;
    min-width: 130px;
    top: 34%;
    right: 81%;
}
.e__18 {
    width: 15%;
    min-width: 130px;
    top: 34%;
    left: 83%;
    z-index: 1;
}
.e__19 {
    width: 20%;
    min-width: 130px;
    top: 42%;
    left: 84%;
}

.preguntas .cont__elemt {
    bottom: 10%;
    top: auto;
}
.e__20 {
    width: 14%;
    min-width: 130px;
    top: 3%;
    right: -50px;
}
.e__21 {
    width: 13%;
    min-width: 130px;
    bottom: 66%;
    left: -50px;
}


/******************************
*	Mobile
******************************/
/* sm */
@media (max-width: 575px) {  }
@media (min-width: 576px) {
.info__solu { flex-direction: row; }

}
@media (min-width: 576px) and (max-width: 767px) {  }

/* md */
@media (max-width: 767px) {
.line {
    width: var(--size-4);
    background: rgba(var(--clr-white), .3);
    top: 190px;
    bottom: 180px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.portafolio .container .slide__dos { margin-top: calc(-1 * var(--size-50)); }

}

/* md */
@media (min-width: 768px) {

/* Nosotros */
.cont__fil > *:nth-child(even) { flex-direction: row-reverse; }
.fil__cont { flex-direction: row; }
.info__col:nth-child(1) { width: calc(40% - var(--size-16)) }
.info__col:nth-child(2) { width: calc(60% - var(--size-16)) }

/* Usos */
.curva__top { margin-bottom: -10vw; }
.curva__top::before { clip-path: ellipse(75% 100% at 50% 100%); }
.curva__top::after {
    top: var(--size-14);
    clip-path: ellipse(70% 100% at 50% 100%);
}
.curva__top > div {
    height: calc(100% - var(--size-16));
    clip-path: ellipse(60% 100% at 50% 100%);
}
.line {
    aspect-ratio: 1/1;
    border-radius: 50%;
    width: 85%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: conic-gradient(rgba(var(--clr-white), 0) 0deg, rgba(var(--clr-white), 0) 0deg);
}
.line::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: rgb(var(--clr-blue-500));
    border-radius: 50%;
}
.info__usos {
    aspect-ratio: 1/1;
    width: 50vw;
    max-width: 670px;
    width: 77vh;
    max-width: 49%;
    margin-right: auto;
    margin-left: auto;
}
.tetx__des {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.item__uso {
    position: absolute;
    width: 23%;
}
.item__graf {
    width: 100%;
    max-width: 100%;
    cursor: pointer;
}
.cont__pleca {
    width: auto;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    pointer-events: none;
    top: 50%;
}
.usos__items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* border: 1px solid; */
    pointer-events: none;
}
.usos__items { animation: rotate-l 60s linear infinite; }
.item__uso {
    pointer-events: all;
    animation: rotate-r 60s linear infinite;
}
@keyframes rotate-l {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-r {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}
.item__uso:nth-of-type(1) {
    top: -3%;
    left: 37%;
    pointer-events: none !important;
}
.item__uso:nth-of-type(2) {
    top: 12%;
    right: 7%;
}
.item__uso:nth-of-type(3) {
    bottom: 30%;
    right: -2%;
}
.item__uso:nth-of-type(4) {
    bottom: 3%;
    right: 18%;
}
.item__uso:nth-of-type(5) {
    bottom: 3%;
    left: 18%;
}
.item__uso:nth-of-type(7) {
    top: 12%;
    left: 5%;
}
.item__uso:nth-of-type(6) {
    bottom: 30%;
    left: -2%;
}

.pleca { white-space: nowrap; }

/* Sale hacia la derecha */
.item__uso.is-right .cont__pleca {
    left: calc(100% - var(--size-60));
    right: auto;
}
.item__uso.is-right .pleca {
    padding-left: var(--size-60);
    padding-right: var(--size-20);
}
.item__uso.is-right .cont__pleca { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }

/* Sale hacia la izquierda */
.item__uso.is-left .cont__pleca {
    right: calc(100% - var(--size-60));
    left: auto;
}
.item__uso.is-left .pleca {
    padding-right: var(--size-60);
    padding-left: var(--size-20);
}
.item__uso.is-left .cont__pleca { clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
.item__uso:hover .cont__pleca {
    pointer-events: all;
    clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
}
.usos__items:hover,
.usos__items:hover .item__uso { animation-play-state: paused; }

.des__title span { font-size: clamp(var(--size-18), 1.8vw, var(--size-28)); }
.p__item span { font-size: clamp(var(--size-6), .8vw, var(--size-12)); }

/* Portafolio */
.portafolio { padding-top: var(--size-100); }

/* Preguntas */
.cont__faqs { flex-flow: wrap; }
.faq__column { width: calc((100% - var(--size-20)) / 2); }


.e__11 {
    top: 0;
    right: 88%;
}
.e__12 {
    top: 16%;
    right: 94%;
}
.e__13 {
    top: auto;
    bottom: 20%;
    left: 90%;
}
.e__14 {
    top: auto;
    bottom: 0;
    left: 94%;
}


.e__17 {
    top: 40%;
    right: 89%;
}
.e__18 {
    top: 10vw;
    left: 90%;
    z-index: 1;
}
.e__19 {
    top: 20vw;
    left: 90%;
}
.e__21 {
    width: 13%;
    min-width: 130px;
    bottom: 66%;
    left: -5%;
}

}

@media (min-width : 576px) and (max-width : 991px) {
.portafolio .container { max-width: 100%; }

}
@media (min-width : 768px) and (max-width : 991px) {
.info__usos { width: 45vw; }

}

/* lg */
@media (max-width : 991px) {
.portafolio .container { padding: 0; }
.portafolio .container .slide__dos {
    padding-right: 20px;
    padding-left: 20px;
}

.ele__pasos .elemt { position: relative; }

}
@media (min-width : 992px) {
/* Eficacia */
.fil__des { flex-direction: row; }
.des__col { width: 50%; }

/* ------------ */
.nosotros .cont__elemt {
    height: 110%;
    top: -10%;
}
.e__01 {
    top: 0;
    left: 92%;
}
.e__02 {
    top: 12%;
    left: -2%;
}
.e__03 {
    top: 30%;
    left: 94%;
}
.e__04 {
    top: 48%;
    right: 93%;
}
.e__05 {
    top: 52%;
    left: 95%;
}
.e__06 {
    top: 74%;
    right: 95%;
}
.e__07 {
    top: 72%;
    left: 94%;
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.e__08 {
    top: 42%;
    left: 50%;
}

.e__09 {
    top: 20%;
    left: 92%;
    z-index: 1;
}
.e__10 {
    top: 25vw;
    left: 90%;
    transform: inherit;
}

.pasos { overflow: visible; }
.e__15 {
    width: 9%;
    right: 94%;
    top: -5%;
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    transform: rotate(28deg);
}
.e__16 {
    width: 18%;
    right: 94%;
    top: 11vw;
    margin-left: inherit;
    margin-right: inherit;
    z-index: 1;
}

.preguntas .cont__elemt {
    bottom: 15%;
    top: auto;
}
.e__20 {
    top: 0%;
    right: -80px;
}

}
@media (min-width : 992px) and (max-width : 1200px) {
/* Usos */
.curva__top::before { clip-path: ellipse(80% 100% at 50% 100%); }
.curva__top::after { clip-path: ellipse(75% 100% at 50% 100%); }
.curva__top > div { clip-path: ellipse(65% 100% at 50% 100%); }

}

@media (min-width : 1200px) {
/* Usos */ 
.curva__top::before { clip-path: ellipse(70% 100% at 50% 100%); }
.curva__top::after { clip-path: ellipse(62% 100% at 50% 100%); }
.curva__top > div { clip-path: ellipse(55% 100% at 50% 100%); }

}



header ul,
footer ul,
header ol,
footer ol {
    padding-inline-start: 0;
    list-style: none;
}
header li,
footer li,
header li + li,
footer li + li { margin-top: 0; }

header li a,
footer li a { text-decoration: none; }

/******************************
*	Header
******************************/
.header {
    -webkit-box-shadow: 0 5px 10px 0 rgba(var(--clr-black), .3);
    box-shadow: 0 5px 10px 0 rgba(var(--clr-black), .3);
    padding: var(--size-6) var(--size-12) var(--size-6) var(--size-18);
    background: rgb(var(--clr-blue-500));
    color: rgb(var(--clr-white));
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    z-index: 300;
}
.header a { color: rgb(var(--clr-white)); }
.cont__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    position: relative;
    width: calc(var(--size-100) + var(--size-40));
    overflow: hidden;
}
.logo a { display: block; }
.logo a span {
    position: absolute;
    top: -100%;
    left: -100%;
}

.menu__nav nav ul li a {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
}
.menu__nav nav ul li a span {
    display: block;
    position: relative;
}
.btn__mob {
    width: var(--size-60);
    height: var(--size-60);
    cursor: pointer;
    position: relative;
}
.btn__mob > div {
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn__mob > div span {
    display: block;
    width: 100%;
    height: var(--size-2);
    background: rgb(var(--clr-white));
    -webkit-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -moz-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -ms-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    -o-transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
    transition: all 300ms cubic-bezier(0.68, -0.1, 0.265, 1.55);
}
.btn__mob > div span + span { margin-top: var(--size-6); }
.btn__mob.active > div span:nth-child(2) {
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}
.btn__mob.active > div span:nth-child(1) {
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    -moz-transform: translate(0px, 8px) rotate(45deg);
    -ms-transform: translate(0px, 8px) rotate(45deg);
    -o-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}
.btn__mob.active > div span:nth-child(3) {
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    -moz-transform: translate(0px, -8px) rotate(-45deg);
    -ms-transform: translate(0px, -8px) rotate(-45deg);
    -o-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}

/* sm */
@media (max-width: 575px) {  }
@media (min-width: 576px) {  }
@media (min-width : 576px) and (max-width : 767px) {  }

/* md */
@media (max-width: 767px) {  }
@media (min-width: 768px) {  }
@media (min-width : 768px) and (max-width : 991px) {  }

/* lg */
@media (max-width : 1120px) {
.menu {
    position: absolute;
    background: rgb(var(--clr-blue-500));
    top: 100%;
    width: 100%;
    height: calc(100vh - var(--size-72));
    left: -100%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.menu.active { left: 0; }
.menu__nav nav ul li a {
    padding: var(--size-16) var(--size-20);
    font-size: var(--size-18);
    display: flex;
    align-items: center;
}
.menu__nav nav ul li a:hover { background: rgb(var(--clr-white), .05); }
.menu__nav nav ul li a span::before {
    content: '\f043';
    display: inline-block;
    margin-right: 10px;
    font-weight: 300;
    font-family: "Font Awesome 6 Pro";
}

}
@media (min-width : 1119px){
html { scroll-padding: calc(var(--size-100) + var(--size-4)); }

.header { padding: 0 var(--size-20); }
.btn__mob { display: none; }
.logo { width: calc(var(--size-100) + var(--size-60)); }
.menu__nav,
.menu__nav nav,
.menu__nav nav ul { display: flex; }
.menu__nav,
.menu__nav nav { gap: var(--size-10); }
.menu__nav nav ul li { display: inline-block; }
.menu__nav nav ul li a {
    display: flex;
    align-items: center;
    padding-top: var(--size-32);
    padding-bottom: var(--size-32);
}
.menu__nav nav ul li a span {
    padding: var(--size-12);
    background: transparent;
    border-radius: var(--size-100);
    line-height: var(--lh-display);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.menu__nav nav ul li a:hover span { background: rgb(var(--clr-orange-500)); }

}
@media (min-width : 1119px) and (max-width : 1200px) {
.header { padding-right: var(--size-10); }
.menu__nav nav ul { gap: 0; }

}

/* xl */
@media (max-width : 1199px) {  }
@media (min-width : 1200px){
.header { padding: 0 var(--size-30); }

}
@media (min-width : 1200px) and (max-width : 1399px) {  }

/* xxl */
@media (min-width: 1400px) { }


/******************************
*	Footer
******************************/
.footer { text-align: center; }
.footer .curva {
    overflow: hidden;
    margin-bottom: -1px;
}
.footer .curva img {
    width: calc(100% + 4px);
    max-width: none;
    margin-left: -2px;
}
.footer a {
    display: inline-block;
    color: rgb(var(--clr-white));
}
.foo__info {
    background: rgb(var(--clr-orange-500));
    color: rgb(var(--clr-white));
    text-transform: uppercase;
    padding-top: var(--size-50);
    padding-bottom: var(--size-50);
}
.foo__info .container {
    display: flex;
    flex-direction: column;
    max-width: calc(var(--size-100) * 14);
    gap: var(--size-40);
    align-items: center;
}
.logo__alen {
    width: var(--size-80);
    flex-shrink: 0;
    padding: 0;
}
.info__data {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.data__fil {
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.data__fil ul {
    display: flex;
    justify-content: center;
    gap: var(--size-10) var(--size-18);
}
.data__fil ul li:nth-child(1) { font-weight: var(--fw-b); }
.data__fil ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size-40);
    height: var(--size-40);
    font-size: var(--size-24);
    color: rgb(var(--clr-orange-500));
    background: rgb(var(--clr-white));
    border-radius: 50%;
}
.data__fil p { margin: 0; }
.data__fil:nth-child(2) p:nth-child(1) { white-space: nowrap; }

/* sm */
@media (max-width: 575px) {  }
@media (min-width: 576px) {  }
@media (min-width : 576px) and (max-width : 767px) {  }

/* md */
@media (max-width: 767px) {
.data__fil ul { flex-flow: wrap; }
.data__fil ul li:nth-child(1) { flex-basis: 100%; }

}
@media (min-width: 768px) {
.foo__info .container {
    flex-direction: row;
    align-items: flex-end;
}
.info__data { align-items: normal; }
.data__fil {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}
.data__fil:nth-child(1) { flex-direction: row-reverse; }
.data__fil:nth-child(1) p { text-align: left; }
.data__fil:nth-child(2) p:nth-child(2) { text-align: right; }
/* .data__fil ul { max-width: calc(calc(var(--size-100) * 2) + var(--size-14)); } */
.data__fil ul {
    align-items: baseline;

}


}
@media (min-width : 768px) and (max-width : 991px) {  }

/* lg */
@media (max-width: 991px) {  }
@media (min-width: 992px) {  }
@media (min-width : 992px) and (max-width : 1199px) {  }

/* xl */
@media (max-width: 1199px) {  }
@media (min-width: 1200px) {  }
@media (min-width : 1200px) and (max-width : 1399px) {  }

/* xxl */
@media (min-width: 1400px) { }