/******************************
*   Root
******************************/
:root {
    /* Colores */

    /* Base */
    --clr-white: 255, 255, 255;        /* #FFFFFF */
    --clr-black: 0, 0, 0;              /* #000000 */

    /* Neutrales */
    --clr-gray-100: 247, 247, 247;     /* #F7F7F7 */
    --clr-gray-300: 202, 201, 200;     /* #CAC9C8 */
    --clr-gray-700: 56, 65, 74;        /* #38414A */

    /* Primarios */
    --clr-teal-300: 110, 206, 178;     /* #6ECEB2 */
    --clr-teal-600: 0, 133, 124;       /* #00857C */
    --clr-teal-900: 0, 92, 85;         /* #00857C */

    --clr-blue-900: 12, 35, 64;        /* #0C2340 */

    /* Estados / acentos */
    --clr-lime-500: 191, 237, 51;      /* #BFED33 */
    --clr-red-500: 222, 60, 60;        /* #DE3C3C */
    --clr-red-600: 216, 52, 52;        /* #D83434 */
    --clr-red-900: 133, 0, 0;          /* #850000 */
    --clr-indigo-500: 84, 80, 228;     /* #5450E4 */
    --clr-indigo-900: 72, 68, 198;     /* #4844c6 */


    /* Tipografia */
    --font-base: 'Invention', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --fw-xl: 200;
    --fw-l: 300;
    --fw-r: 400;
    --fw-b: 700;
    --fw-xb: 800;

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

    /* Interlineado */
    --lh-tight: 1.1; /* títulos muy grandes o compactos */
    --lh-heading: 1.25; /* headings normales */
    --lh-base: 1.4; /* texto UI general */
    --lh-text: 1.6; /* párrafos */
    --lh-loose: 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-44: 2.75rem;   /* 44px */
    --size-48: 3rem;      /* 48px */
    --size-56: 3.5rem;    /* 56px */
    --size-60: 3.75rem;   /* 60px */
    --size-64: 4rem;      /* 64px */
    --size-72: 4.5rem;    /* 72px */
    --size-80: 5rem;      /* 80px */
    --size-100: 6.25rem;  /* 100px */
}

::selection {
    color: rgb(var(--clr-white));
    background: rgba(var(--clr-teal-600), .9);
}
::-moz-selection {
    color: rgb(var(--clr-white));
    background: rgba(var(--clr-teal-600), .9);
}
::-webkit-selection {
    color: rgb(var(--clr-white));
    background: rgba(var(--clr-teal-600), .9);
}

/******************************
*   Reset General
******************************/
*,
*::before,
*::after { box-sizing: border-box; }
* {
    margin: 0;
    padding: 0;
}
html:focus-within { scroll-behavior: smooth; }
html {
    scroll-behavior: smooth;
    scroll-padding: 70px;
}
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-base);
    font-size: var(--size-16);
    color: rgb(var(--clr-blue-900));
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/*------ Media ------*/
img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
    border: 0;
}
figure {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
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-l);
    line-height: var(--lh-heading);
}

/*------ 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 {
    -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([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea {
    display: block;
    width: 100%;
    padding: var(--size-12);
    border-radius: var(--size-10);
    color: rgb(var(--clr-blue-900));
    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: vertical;
}

/* 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(--clr-teal-600)) !important;
    box-shadow: 0 3px 6px rgba(var(--clr-teal-600), .25);
    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;
    border-radius: var(--size-10);
    transition: background-color 9999s ease-out 0s;
}
input::placeholder,
textarea::placeholder {}


p {
    margin: 0;
    line-height: var(--lh-text);
}
* + 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;
}

/******************************
*   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
******************************/
.loader {
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 10000000000;
    background: rgb(var(--clr-white));
    top: 0;
    left: 0;
}
.loader__cntnt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.loader__info {
    max-width: 300px;
    width: 70%;
    text-align: center;
    position: relative;
}
.loader__circ {
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(rgb(var(--clr-teal-600)) 0deg, rgba(var(--clr-gray-300), .5) 0deg);
}
.loader__circ::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: rgb(var(--clr-white));
    border-radius: 50%;
}
.info__graf {
    width: 70%;
    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%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(15px, 2vw, 30px);
}
.graf__iso {
    max-width: 50px;
    width: 24%;
    -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;
}
.graf__logo { max-width: 200px; }
.fade { opacity: .5; }

.no-scroll { overflow: hidden; }


/******************************
*   General
******************************/
main {
    min-height: calc(100vh - 70px);
    /* min-height: calc(100dvh - 70px); */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
main section {
    position: relative;
    padding-top: var(--size-20);
    padding-bottom: var(--size-40);
}

/* No scream */
.no__screan {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* CTA */
.c__cta + *,
* + .c__cta { margin-top: var(--size-40); }
.c__cta {
    display: flex;
    flex-flow: row wrap;
    gap: var(--size-16);
}
.cta__cntr { justify-content: center; }
.cta,
a.cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    padding: var(--size-20);
    border-radius: var(--size-8);
    color: rgb(var(--clr-white));
    font-weight: var(--fw-b);
    font-size: var(--size-18);
    line-height: var(--lh-heading);
    -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;
    text-decoration: none;
}

.cta__p { background: rgb(var(--clr-teal-600)); }
.cta__p:hover { background: rgb(var(--clr-teal-900)); }
.cta__s { background: rgb(var(--clr-blue-900)); }
.cta__s:hover { background: rgba(var(--clr-blue-900), .8); }
.cta__l,
a.cta__l {
    color: rgb(var(--clr-blue-900));
    text-decoration: underline;
}
.cta__c,
a.cta__c { background: rgb(var(--clr-red-600)); }
.cta__c:hover,
a.cta__c:hover { background: rgb(var(--clr-red-900)); }
.cta:disabled,
.cta[aria-disabled="true"] {
    background: rgb(var(--clr-gray-300));
    pointer-events: none;
    cursor: not-allowed;
}

.link {
    font-weight: var(--fw-b);
    text-decoration: underline;
    -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;
}
.link__p { color: rgb(var(--clr-indigo-500)); }
.link__p:hover { color: rgb(var(--clr-indigo-900)); }

.link__r { color: rgb(var(--clr-red-900)); }
.link__r:hover { color: rgb(var(--clr-red-600)); }

* + .h__sect,
.h__sect + * { margin-top: var(--size-40); }
.sect__title + * { margin-top: var(--size-12); }
.sect__title { font-size: clamp(var(--size-28), 3.8vw, var(--size-38)); }

.sub__title {
    font-weight: var(--fw-r);
    font-size: clamp(var(--size-18), 2.4vw, var(--size-24));
}
.txt__cntr { text-align: center; }
.c__teal { color: rgb(var(--clr-teal-600)); }

/******************************
*   Farmaco
******************************/
.txt__min {
    font-size: var(--size-12);
    padding: 0 var(--size-10);
}
.txt__min a { color: rgb(var(--clr-teal-600)); }

/******************************
*   Video
******************************/
.video__tutorial {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--size-20);
    border-radius: var(--size-20);
    font-size: var(--size-32);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.video__tutorial::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--clr-black), .4);
    -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;
    z-index: 1;
}
.video__tutorial i {
    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%);
    z-index: 2;
    opacity: 1;
    -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);
}
.video__tutorial i::before {
    position: relative;
    z-index: 10;
    opacity: .8;
}
.video__tutorial i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--clr-white), .8);
}
.video__tutorial:hover::before { background: rgba(var(--clr-black), .2); }
.video__tutorial:hover i {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    -moz-transform: translate(-50%, -50%) scale(1.2);
    -ms-transform: translate(-50%, -50%) scale(1.2);
    -o-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2);
}
.video__tutorial:hover i::after { background: rgba(var(--clr-white), 1); }

/******************************
*   Mensajes
******************************/
.cont__message {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.title__mess {
    color: rgb(var(--clr-teal-600));
    line-height: var(--lh-tight);
}

/******************************
*   Error
******************************/
.e__404 {
    display: flex;
    justify-content: center;
}
.e__404 span { font-size: clamp(var(--size-32), 5vw, var(--size-60)); }
.sesion > * { font-size: clamp(var(--size-26), 4vw, var(--size-40)); }

/******************************
*   Columnas
******************************/
.fil__col {
    display: grid;
    gap: var(--size-40);
}

/******************************
*   Formularios
******************************/
.cont__campos  {
    display: flex;
    flex-flow: row wrap;
    gap: var(--size-32);
}
.cont__campo { flex: 1 1 100%; }
.cont__campo > * { display: flex;}
.cont__campo.cont__full { flex: 1 1 100%; }
.cont__campos .c__cta { margin:0 }
.campo {
    position: relative;
    flex: 1;
}
.campo label {
    position: absolute;
    top: 50%;
    left: var(--size-12);
    right: var(--size-12);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    -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;
}
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.campo select,
.campo textarea {
    display: block;
    width: 100%;
    padding: var(--size-28) var(--size-12) var(--size-12);
    background: rgb(var(--clr-white));
    border-width: 1px;
    border-style: solid;
    border-color: rgb(var(--clr-blue-900));
    border-radius: var(--size-10);
    color: rgb(var(--clr-blue-900));
    -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;
}
.campo:focus-within label,
.campo:has(input:focus) label,
.campo:has(input:not(:placeholder-shown)) label,
.campo:has(select:valid) label {
  top: var(--size-20);
  font-size: var(--size-12);
  color: rgb(var(--clr-teal-900));
}
.camp__error {
    color: rgb(var(--clr-red-900)) !important;
    border-color: rgb(var(--clr-red-900)) !important;
}
.camp__error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.camp__error select,
.camp__error textarea,
.camp__error:has(input:not(:placeholder-shown)) label,
.camp__error + span { color: rgb(var(--clr-red-900)) !important; }
* + .txt__error { margin-top: var(--size-8); }
.txt__error {
    display: block;
    color: rgb(var(--clr-red-900));
    font-size: var(--size-12);
}
.txt__error a {
    font-weight: var(--fw-r);
    color: rgb(var(--clr-red-900));
}
[hidden].txt__error { display: none; }

.icon__camp {
    position: absolute;
    width: 40px;
    height: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon__r { right: 0; }
.campo select { padding-right: var(--size-40); }
div select + .icon__camp { pointer-events: none; }
.c__cechk { flex: 1; }
.c__cechk label {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--size-8);
}
.check__box {
    display: inline-flex;
    position: relative;
    margin-top: -2px;
}
.check__box input {
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.check__box i {
    width: var(--size-24);
    height: var(--size-24);
    font-style: normal;
    display: inline-block;
    background: rgb(var(--clr-white));
    border: 1px solid rgb(var(--clr-blue-900));
    border-radius: var(--size-4);
    cursor: pointer;
    text-align: center;
}
.check__box i::before {
    content: "\f00c";
    font-weight: 400;
    font-family: "Font Awesome 6 Pro";
    opacity: 0;
    color: rgb(var(--clr-white));
}
.check__box input:checked + i { background: rgb(var(--clr-blue-900)); }
.check__box input:checked + i::before { opacity: 1; }
* + .txt__form { margin-top: var(--size-40); }
.txt__form { text-align: center; }

.info__btn {
    width: 40px;
    flex-shrink: 0;
    position: relative;
}
.btn__icon {
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: rgb(var(--clr-blue-900));
    border-top-right-radius: var(--size-10);
    border-bottom-right-radius: var(--size-10);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(var(--clr-white));
    font-size: var(--size-20);
}
.campo:has(+ .info__btn) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.campo:has(+ .info__btn) select,
.campo:has(+ .info__btn) textarea {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0 !important;
}
.btn__text,
.btn__text::after { background: rgb(var(--clr-teal-600)); }
.btn__text {
    display: none;
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: 280px;
    color: rgb(var(--clr-white));
    border-radius: var(--size-10);
    padding: var(--size-10);
    filter: drop-shadow(0px 0px 15px rgb(var(--clr-black), .4));
    will-change: filter;
    font-size: var(--size-12);
}
.btn__text > * + * { margin-top: var(--size-6); }
.btn__text ul li { margin: 0; }
.btn__text ul li::marker { color: rgb(var(--clr-white)); }
.btn__text::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-top-right-radius:  var(--size-6);
    top: 50%;
    left: calc(100% - 10px);
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}
.btn__text.active { display: block; }

.camp__confirm {
    flex-direction: column;
    gap: 12px;
}
.camp__confirm > * { margin: 0; }

/******************************
*   Reconfirmar
******************************/
hr {
    border: 0;
    border-top: 1px solid rgb(var(--clr-teal-600));
}
.info__reconfirm {
    list-style: none;
    padding-inline-start: 0;
    margin-top: 30px;
}
.info__reconfirm li > * { display: block; }
.confirm__type {
    font-size: var(--size-14);
    color: rgba(var(--clr-blue-900), .7);
}
.form__confimr hr { margin-bottom: var(--size-40); }

/******************************
*   Box
******************************/
.box__cont {
    background: rgb(var(--clr-gray-100));
    margin-right: auto;
    margin-left: auto;
}
.box__round { border-radius: var(--size-16); }
.box__space__full { padding: var(--size-32); }
.box__space__y {
    padding-top: var(--size-32);
    padding-bottom: var(--size-32);
}
.box__space__x {
    padding-left: var(--size-32);
    padding-right: var(--size-32);
}
.box__map {
    background: rgb(var(--clr-teal-600));
    color: rgb(var(--clr-white));
}
.box__mid { max-width: 700px; }

/******************************
*   Box card
******************************/
.card__box {
    border-radius: var(--size-16);
    padding: var(--size-28);
}
.card__gray { background: rgb(var(--clr-gray-100)); }
.card__border { border: 1px solid rgb(var(--clr-gray-700)); }

.card__consult {
    display: grid;
    gap: var(--size-32);
}

/******************************
*   Tabs
******************************/
.tabs {
    display: flex;
    flex-flow: wrap;
    gap: var(--size-12);
}
.tab {
    border-radius: var(--size-18);
    background: rgb(var(--clr-gray-100));
    font-weight: var(--fw-b);
    text-transform: uppercase;
    padding: var(--size-18) var(--size-24);
    line-height: 1;
    font-size: var(--size-14);
}
.tab__act {
    background: rgb(var(--clr-teal-600));
    color: rgb(var(--clr-white));
}

.container + .box__cont { margin-top: var(--size-40); }

/******************************
*   Map
******************************/
.map__line {
    overflow: hidden;
    border-radius: var(--size-10);
    display: grid;
    grid-template-columns: 1fr;
}
.map__line > * {
    grid-area: 1 / 1 / 2 / 2;
    position: relative;
}

.cont__map { position: relative; }
.cont__map > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box__map .cont__map {
    padding-top: 220px;
    -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;
}
.box__map .active__map { padding-top: 140%; }
.map__pop { display: none; }
.map__pop > * {
    background: rgba(var(--clr-teal-600), .8);
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--size-20);
}
.pop__box {
    max-width: 600px;
    text-align: center;
    padding: var(--size-26);
    background: rgb(var(--clr-white));
    border-radius: var(--size-10);
    box-shadow: 0 0 10px rgba(var(--clr-teal-600));
    color: rgb(var(--clr-blue-900));
}

.camp__cp { display: flex; }
.camp__cp input#codigo_postal_modal {
    background: rgb(var(--clr-gray-100));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.camp__cp button {
    padding: var(--size-10);
    border-top-right-radius: var(--size-10);
    border-bottom-right-radius: var(--size-10);
    background: rgb(var(--clr-teal-600));
    color: rgb(var(--clr-white));
    font-weight: var(--fw-b);
}
.camp__cp + * {
    display: block;
    text-align: left;
    margin-top: 6px;
}

/******************************
*   Perfil
******************************/
.head__data + * { margin-top: var(--size-20); }
.head__data {
    display: flex;
    gap: var(--size-16);
    align-items: center;
    justify-content: space-between;
    font-size: var(--size-20);
}
.head__data button {
    padding: var(--size-6);
    line-height: 1;
    color: rgb(var(--clr-indigo-500));
}

.form__profile > * + * {
    margin-top: var(--size-10);
    padding-top: var(--size-10);
    border-top: 1px solid rgb(var(--clr-gray-300));
}
.form__profile label {
    font-size: var(--size-14);
    color: rgba(var(--clr-blue-900), .7);
}
.profile__campo > div { position: relative; }
.profile__campo input,
.profile__campo select {
    background: rgba(var(--clr-gray-300), .2);
    opacity: 1;
}
.profile__campo *:disabled {
    background: transparent;
    padding-left: 0 !important;
}
.profile__campo *:disabled + .icon__camp { opacity: 0; }
#btn__save {
    border: none;
    margin-top: var(--size-30);
    padding-top: 0;
}
* + .delete__info { margin-top: var(--size-20); }
.delete__info {
    display: flex;
    justify-content: flex-end;
}
.card__consult .card__box {
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.consult__name a {
    color: rgb(var(--clr-teal-600));
    text-decoration: none;
}
.consult__name a > * {
    font-weight: var(--fw-b);
    font-size: var(--size-20);
}
.consult__name a > * i {
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}
.btn__card {
    padding: var(--size-12) var(--size-20);
    border-radius: 100px;
    background: rgb(var(--clr-gray-100));
    font-weight: var(--fw-b);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    gap: var(--size-6);
    line-height: 1;
}
.btn__t { color: rgb(var(--clr-teal-900)); }
.btn__r { color: rgb(var(--clr-red-900)); }
.btn__m {
    display: inline-flex;
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-indigo-500));
}
.card__col:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--size-20);
}
.btn__group {
    display: flex;
    flex-direction: column;
    gap: var(--size-12);
}
.location {
    display: block;
    text-decoration: none;
    width: 50px;
    height: 50px;
    color: rgb(var(--clr-white));
    background: rgb(var(--clr-teal-600));
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--size-26);
    margin: 0 0 0 auto;
}
.message__consult {
    border-radius: var(--size-16);
    padding: var(--size-28);
    background: rgb(var(--clr-gray-100));
    text-align: center;
}

/******************************
*   Consultorio detalle
******************************/
.map__preview {
    position: relative;
    width: 100%;
    aspect-ratio: 9/10;
}
.map__preview > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/******************************
*   LB
******************************/
.cont__lb {
    --clr-bg: 0, 13, 13;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(var(--clr-bg), .8);
    display: none;
}
.lb__cntnt {
    width: 100%;
    min-height: calc(100vh);
    min-height: calc(100dvh);
    padding-top: var(--size-60);
    padding-bottom: var(--size-60);
    padding-left: var(--size-30);
    padding-right: var(--size-30);
    display: flex;
    justify-content: center;
    align-items: center;
}
.cntnt__box {
    width: 100%;
    max-width: 700px;
    padding: var(--size-30);
    border-radius: var(--size-16);
    background: rgb(var(--clr-white));
}
.clos__lb {
    color: rgb(var(--clr-teal-600));
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(-1 * var(--size-26))  calc(-1 * var(--size-26)) 0 auto;
    font-size: var(--size-20);
}
.lb__info { text-align: center; }
.lb__icon {
    color: rgb(var(--clr-teal-600));
    font-size: var(--size-40);
    margin-bottom: var(--size-28);
}
.info__title {
    font-weight: var(--fw-b);
    font-size: var(--size-20);
    margin-bottom: var(--size-20);
}
.info__text {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

/******************************
*   LB
******************************/
.box__text {
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
}
.box__text h1 { text-align: center; }
.box__text h2 {
    font-weight: var(--fw-r);
    color: rgb(var(--clr-teal-600));
}

/******************************
*   Mobile
******************************/
/* sm */
@media (max-width: 575px) {  }
@media (min-width: 576px) { 
.card__consult .card__box {
    flex-direction: row;
    justify-content: space-between;
}

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

/* md */
@media (max-width: 767px) { 
/* Login */
.btn__register {
    position: sticky;
    z-index: 10;
    bottom: 10px;
}

/* Perfil */
.btn__group + * { display: none; }

}
@media (min-width: 768px) {
main {
    min-height: calc(100vh - 90px);
    /* min-height: calc(100dvh - 90px); */
}
main section { padding-top: var(--size-40); }

/* Formularios */
.camp__02 .cont__campo:not(.cont__full),
.camp__03 .cont__campo:not(.cont__full) { flex: 0 1 calc((100% - var(--size-32)) / 2); }

.c__cechk label { justify-content: center; }
.opt__check + .txt__error {
    display: block;
    text-align: center;
}

/* Consultorio detalle */
.map__preview { aspect-ratio: 16/9; }

/* Registro de consultorio */
.box__map .active__map { padding-top: 40%; }

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

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

/* Columnas */
.fil__col__01 { grid-template-columns: 5fr 7fr; }
.fil__col__02 {
    grid-template-columns: 4fr 8fr;
    /* gap: var(--size-40); */
    align-items: start;
}

/* .perfil section { padding: 0; }
.perfil .fil__col__02 > * {
    padding-top: var(--size-60);
    padding-bottom: var(--size-60);
}
.fil__col__02 .col__1 {
    height: calc(100vh - 90px);
    position: sticky;
    overflow: auto;
    top: 90px;
}
 */

/* Box */
.box__space__full { padding: var(--size-40); }
.box__space__y {
    padding-top: var(--size-40);
    padding-bottom: var(--size-40);
}
.box__space__x {
    padding-left: var(--size-40);
    padding-right: var(--size-40);
}

/* Formularios */
.camp__03 .cont__campo:not(.cont__full) { flex: 0 1 calc((100% - (var(--size-32) * 2)) / 3); }

}
@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) { }



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 {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    z-index: 100;
    will-change: filter;
    top: 0;
}
.scrolling { box-shadow: 0 0 10px rgba(var(--clr-black), .1); }
.header__cont {
    min-height: 70px;
    padding: var(--size-10) var(--size-16);
    display: flex;
    gap: var(--size-12);
    align-items: center;
    justify-content: space-between;
    background: rgb(var(--clr-white));
    -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;
}
.logo {
    width: 200px;
    -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 ul li a,
.menu nav ul li button {
    display: block;
    line-height: 1;
    width: 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;
}
.btn__mob {
    width: 50px;
    height: 50px;
}
.btn__mob > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--size-6);
    position: relative;
}
.btn__mob > div > span {
    display: block;
    width: 60%;
    height: 2px;
    background: rgb(var(--clr-blue-900));
    -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);
}
.active > div > span { background: rgb(var(--clr-white)); }
.active > div > span:nth-child(1){
    -webkit-transform: translate(0, 8px) rotate(45deg);
    -moz-transform: translate(0, 8px) rotate(45deg);
    -ms-transform: translate(0, 8px) rotate(45deg);
    -o-transform: translate(0, 8px) rotate(45deg);
    transform: translate(0, 8px) rotate(45deg);
}
.active > div > span:nth-child(3){
    -webkit-transform: translate(0, -8px) rotate(-45deg);
    -moz-transform: translate(0, -8px) rotate(-45deg);
    -ms-transform: translate(0, -8px) rotate(-45deg);
    -o-transform: translate(0, -8px) rotate(-45deg);
    transform: translate(0, -8px) rotate(-45deg);
}
.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);
}
.header.active .header__cont { background: rgb(var(--clr-teal-600)); }
.header.active .logo { filter: brightness(0) invert(1); }

.logo__MSD { width: 90px; }

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

/* md */
@media (max-width: 767px) {

.menu {
    position: absolute;
    top: 100%;
    background: rgb(var(--clr-teal-600));
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    -webkit-transform: translateY(calc(-100% - 71px));
    -moz-transform: translateY(calc(-100% - 71px));
    -ms-transform: translateY(calc(-100% - 71px));
    -o-transform: translateY(calc(-100% - 71px));
    transform: translateY(calc(-100% - 71px));
    -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;
    z-index: -1;
}

.menu nav { padding: var(--size-16); }
.menu nav ul li + li { border-top: 1px solid rgba(var(--clr-white), .1); }
.menu nav ul li a,
.menu nav ul li button {
    padding: var(--size-16);
    color: rgb(var(--clr-white));
    font-size: var(--size-18);
    text-align: left;
}
.menu.show {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
}

}
@media (min-width: 768px) {
.header__cont {
    padding: var(--size-20);
    min-height: 90px;
}
.btn__mob { display: none; }
.logo { width: 270px; }
.menu nav ul {
    display: flex;
    align-items: center;
    gap: var(--size-12);
}
.menu nav ul li a,
.menu nav ul li button {
    padding: var(--size-12) var(--size-20);
    border-radius: 100px;
    background: rgb(var(--clr-gray-100));
    font-weight: var(--fw-b);
    color: rgb(var(--clr-blue-900));
    white-space: nowrap;
}
.menu nav ul li a:hover,
.menu nav ul li button:hover { color: rgb(var(--clr-teal-900)); }

}
@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) { }


/******************************
*   Footer
******************************/
.footer {
    font-size: var(--size-12);
    padding: var(--size-40) 0;
    border-top: 1px solid rgb(var(--clr-gray-300));
}
.col__01 > * + * { margin-top: var(--size-20); }
.fil__foo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--size-32) var(--size-60);
}
.fil__foo .col__01 { max-width: 1000px; }
.fil__foo .col__02 {
    display: flex;
    align-items: center;
    gap: var(--size-32);
}
.log__ea { width: 80px; }
.log__msd { width: 120px; }
.link__footer {
    display: flex;
    flex-direction: column;
    gap: var(--size-20);
}
.link__footer li a {
    text-transform: uppercase;
    font-weight: var(--fw-b);
    color: rgb(var(--clr-blue-900));
    text-decoration: none;
}
.footer p a {
    color: rgb(var(--clr-teal-600));
    font-weight: var(--fw-b);
}

/* 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) {
.link__footer {
    flex-flow: wrap;
    flex-direction: row;}
}
@media (min-width : 768px) and (max-width : 991px) {  }

/* lg */
@media (max-width: 991px) {
.footer .container { max-width: inherit; }
}
@media (min-width: 992px) {
.fil__foo { flex-direction: row; }
}
@media (min-width : 992px) and (max-width : 1199px) {  }

/* xl */
@media (max-width: 1199px) {  }
@media (min-width: 1200px) {
.footer .container {
    max-width: 1600px;
    width: 90%;
}

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

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