/* 
Theme Name:      Contagram
Theme URI:       https://www.ingenima.com/
Description:     Contagram is a child theme of Blacklight
Author:          Ingenima
Template:        blacklight
Version:         1.8.5
Text Domain:     Contagram
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

# Normalize
# General
    ## Reset
    ## Selection
    ## BG Colors
    ## Text Colors
    ## iFrame
    ## Buttons
# Typography
# Nav
# Modal
    ## Boton
# GF
# Especial CSS
# Form
    ## Landing
    ## Forms
# Footer
# Mobile
# Utilities

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@font-face {
    font-family: 'Grift';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/Grift-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Grift';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/Grift-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('./fonts/Inter-Variable.woff2') format('woff2');
}

:root {

    /* Custom colors */

    /* Colors */
    --black: #000000;
    --white: #FFFFFF;
    --gris: #EFEFEC;
    --gris-claro: #F5F5F5;
    --violeta: #70567C;
    --violeta-brillante: #7E57C2;
    --violeta-ceniza:#3f3f49;
    --lavanda: #b287fe;
    --gris-lila: #F6F4F9;
    --amarillo-oscuro: #FAB90B;
    --amarillo-medio: #FCD536;
    --amarillo-claro: #FDF1BD;
    --naranja: #F75447;
    --blackhover:rgb(0 0 0 / 60%);
    --whitehover:rgb(255 255 255 / 60%);

    /* Colors v2 */
    --violeta-oscuro: #2E0870;     /* violeta muy oscuro */
    --violeta-electrico: #5706D3;  /* violeta vivo / banner */
    --violeta-medio: #8139F2;      /* violeta medio */
    --lavanda-media: #CD9EF8;      /* lavanda */
    --lavanda-suave: #F0E5FB;      /* lavanda claro */
    --verde-lima: #BFFD06;         /* verde lima / acento CTA */
    --rosa: #FE148F;               /* rosa / magenta */
    --amarillo-limon: #FDE434;     /* amarillo limon */
    --amarillo-dorado: #FDD104;    /* amarillo dorado */
    --blanco-lila: #F7F5FD;        /* casi blanco lila */
    --gris-violaceo: #6D6479;      /* gris violaceo */
    --negro-violaceo: #1C0E30;     /* negro violaceo */

    /* Transitions */
    --transition-duration:.1s;
    --transition-timing-function:ease;
    --transition-all:all;

    --01-transition:var(--transition-all) calc(var(--transition-duration)*1) var(--transition-timing-function);
    --02-transition:var(--transition-all) calc(var(--transition-duration)*2) var(--transition-timing-function);
    --03-transition:var(--transition-all) calc(var(--transition-duration)*3) var(--transition-timing-function);
    --04-transition:var(--transition-all) calc(var(--transition-duration)*4) var(--transition-timing-function);
    --05-transition:var(--transition-all) calc(var(--transition-duration)*5) var(--transition-timing-function);

    /* Space */
    --10px: 10px;

    /* Fonts */
    --ffamily: 'Grift', sans-serif;
    --gfamily: 'Open Sans', sans-serif;
    --hfamily: 'Ubuntu', sans-serif;
    --ifamily: 'Inter', sans-serif;
    --fsize: 1rem;
    --fsize--6: clamp(0.75rem, 0.7rem + 0.1vw, 0.85rem);          /* ~12–14px — footer legal, textos minimos */
    --fsize--5: clamp(0.8rem, 0.75rem + 0.125vw, 0.9rem);         /* ~13–14px — etiquetas pequeñas */
    --fsize--4: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);         /* ~14–15px — captions, aclaraciones */
    --fsize--3: clamp(0.9rem, 0.85rem + 0.175vw, 1rem);           /* ~14–16px — textos secundarios */
    --fsize--2: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);          /* ~15–17px — textos secundarios */
    --fsize--1: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);             /* ~14–16px — textos secundarios */
    --fsize-0: clamp(1rem, 0.9131rem + 0.4348vw, 1.25rem);        /* ~16–20px — P, body text, h6 */
    --fsize-1: clamp(1.0669rem, 0.9477rem + 0.5961vw, 1.35rem);   /* ~17–22px — h5, banner, toggle */
    --fsize-2: clamp(1.1388rem, 0.9361rem + 1.0132vw, 1.62rem);   /* ~18–26px — h4 */
    --fsize-3: clamp(1.215rem, 0.8768rem + 1.6913vw, 2.1875rem);  /* ~19–35px — H3 (35pt) */
    --fsize-4: clamp(1.2963rem, 0.7689rem + 2.637vw, 2.8125rem);  /* ~21–45px — H2 (45pt) */
    --fsize-5: clamp(1.3831rem, 0.7773rem + 3.0293vw, 3.125rem);  /* ~22–50px — H1 (50pt), hero title */
}


/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
     ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

     html {
        line-height: 1.15;
        /* 1 */
        -webkit-text-size-adjust: 100%;
        /* 2 */
    }

/* Sections
     ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

     body {
        margin: 0;
    }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }

/* Grouping content
     ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

     hr {
        box-sizing: content-box;
        /* 1 */
        height: 0;
        /* 1 */
        overflow: visible;
        /* 2 */
    }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    pre {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */
    }

/* Text-level semantics
     ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

     a {
        background-color: transparent;
    }

    a:hover {
        color:var(--blackhover, rgb(0 0 0 / 60%));
    }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

    abbr[title] {
        border-bottom: none;
        /* 1 */
        text-decoration: underline;
        /* 2 */
        text-decoration: underline dotted;
        /* 2 */
    }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

    b,
    strong {
        font-weight: bolder;
    }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

    code,
    kbd,
    samp {
        font-family: monospace, monospace;
        /* 1 */
        font-size: 1em;
        /* 2 */
    }

/**
 * Add the correct font size in all browsers.
 */

    small {
        font-size: 80%;
    }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

/* Embedded content
     ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

     img {
        border-style: none;
    }

/* Forms
     ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

     button,
     input,
     optgroup,
     select,
     textarea {
        font-family: inherit;
        /* 1 */
        font-size: 100%;
        /* 1 */
        line-height: 1.15;
        /* 1 */
        margin: 0;
        /* 2 */
    }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

    button,
    input {
        /* 1 */
        overflow: visible;
    }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

    button,
    select {
        /* 1 */
        text-transform: none;
    }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
    }

/**
 * Remove the inner border and padding in Firefox.
 */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

/**
 * Restore the focus styles unset by the previous rule.
 */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
 * Correct the padding in Firefox.
 */

    fieldset {
        padding: 0.35em 0.75em 0.625em;
    }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *      `fieldset` elements in all browsers.
 */

    legend {
        box-sizing: border-box;
        /* 1 */
        color: inherit;
        /* 2 */
        display: table;
        /* 1 */
        max-width: 100%;
        /* 1 */
        padding: 0;
        /* 3 */
        white-space: normal;
        /* 1 */
    }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

    progress {
        vertical-align: baseline;
    }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

    textarea {
        overflow: auto;
    }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

    [type="checkbox"],
    [type="radio"] {
        box-sizing: border-box;
        /* 1 */
        padding: 0;
        /* 2 */
    }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

    [type="search"] {
        -webkit-appearance: textfield;
        /* 1 */
        outline-offset: -2px;
        /* 2 */
    }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        /* 1 */
        font: inherit;
        /* 2 */
    }

/* Interactive
     ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

     details {
        display: block;
    }

/*
 * Add the correct display in all browsers.
 */

    summary {
        display: list-item;
    }

/* Misc
     ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

     template {
        display: none;
    }

/**
 * Add the correct display in IE 10.
 */

    [hidden] {
        display: none;
    }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html {
    box-sizing: border-box;
    scroll-behavior: smooth;

}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em 0;
    padding-left:1rem;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li {
   padding-block:.2rem;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
}

figure {
    margin: 1em 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

/*******
## Reset
*******/

.post,
.page {
  margin: 0 !important;
}

.container-fluid {
  overflow-x:hidden;
}

/*******
## Selection
*******/

::-moz-selection {
  background: rgb(9 1 38 / 90%);
  color:#fff
}

::selection {
  background: rgb(9 1 38 / 90%);
  color:#fff
}

/*******
## BG Colors
*******/

/* 
  ### Main Colors 
*/

.ctg-bg--negro {
  background-color: var(--black, #000000);
}
.ctg-bg--blanco {
  background-color: var(--white, #FFFFFF);
}
.ctg-bg--gris {
    background-color: var(--gris, #EFEFEC);
}
.ctg-bg--gris-claro {
    background-color: var(--gris-claro, #F5F5F5);
}
.ctg-bg--violeta {
    background-color: var(--violeta, #70567C);
}

.ctg-bg--violeta-ceniza {
    background-color: var(--violeta-ceniza);
}

.ctg-bg--violeta-brillante {
    background-color: var(--violeta-brillante);
}

.ctg-bg--lavanda{
    background-color: var(--lavanda);
}

.ctg-bg--gris-lila {
    background-color: var(--gris-lila, #F6F4F9);
}
.ctg-bg--amarillo-oscuro {
    background-color: var(--amarillo-oscuro, #FAB90B);
}
.ctg-bg--amarillo-medio {
    background-color: var(--amarillo-medio, #FCD536);
}
.ctg-bg--amarillo-claro {
    background-color: var(--amarillo-claro, #FDF1BD);
}
.ctg-bg--naranja {
    background-color: var(--naranja, #F75447);
}

/*
  ### Colors v2
*/

.ctg-bg--violeta-oscuro {
    background-color: var(--violeta-oscuro, #2E0870);
}
.ctg-bg--violeta-electrico {
    background-color: var(--violeta-electrico, #5706D3);
}
.ctg-bg--violeta-medio {
    background-color: var(--violeta-medio, #8139F2);
}
.ctg-bg--lavanda-media {
    background-color: var(--lavanda-media, #CD9EF8);
}
.ctg-bg--lavanda-suave {
    background-color: var(--lavanda-suave, #F0E5FB);
}
.ctg-bg--verde-lima {
    background-color: var(--verde-lima, #BFFD06);
}
.ctg-bg--rosa {
    background-color: var(--rosa, #FE148F);
}
.ctg-bg--amarillo-limon {
    background-color: var(--amarillo-limon, #FDE434);
}
.ctg-bg--amarillo-dorado {
    background-color: var(--amarillo-dorado, #FDD104);
}
.ctg-bg--blanco-lila {
    background-color: var(--blanco-lila, #F7F5FD);
}
.ctg-bg--gris-violaceo {
    background-color: var(--gris-violaceo, #6D6479);
}
.ctg-bg--negro-violaceo {
    background-color: var(--negro-violaceo, #1C0E30);
}

/*******
## Text Colors
*******/

.ctg--negro {
  color: var(--black, #000000);
}
.ctg--blanco {
  color: var(--white, #FFFFFF);
}
.ctg--gris {
    color: var(--gris, #EFEFEC);
}
.ctg--gris-claro {
    color: var(--gris-claro, #F5F5F5);
}
.ctg--violeta {
    color: var(--violeta, #70567C);
}

.ctg--violeta-ceniza {
    color: var(--violeta-ceniza);
}

.ctg--violeta-brillante {
    color: var(--violeta-brillante);
}

.ctg--lavanda {
    color: var(--lavanda);
}

.ctg--gris-lila {
    color: var(--gris-lila, #F6F4F9);
}
.ctg--amarillo-oscuro {
    color: var(--amarillo-oscuro, #FAB90B);
}
.ctg--amarillo-medio {
    color: var(--amarillo-medio, #FCD536);
}
.ctg--amarillo-claro {
    color: var(--amarillo-claro, #FDF1BD);
}
.ctg--naranja {
    color: var(--naranja, #F75447);
}

/*
  ### Colors v2
*/

.ctg--violeta-oscuro {
    color: var(--violeta-oscuro, #2E0870);
}
.ctg--violeta-electrico {
    color: var(--violeta-electrico, #5706D3);
}
.ctg--violeta-medio {
    color: var(--violeta-medio, #8139F2);
}
.ctg--lavanda-media {
    color: var(--lavanda-media, #CD9EF8);
}
.ctg--lavanda-suave {
    color: var(--lavanda-suave, #F0E5FB);
}
.ctg--verde-lima {
    color: var(--verde-lima, #BFFD06);
}
.ctg--rosa {
    color: var(--rosa, #FE148F);
}
.ctg--amarillo-limon {
    color: var(--amarillo-limon, #FDE434);
}
.ctg--amarillo-dorado {
    color: var(--amarillo-dorado, #FDD104);
}
.ctg--blanco-lila {
    color: var(--blanco-lila, #F7F5FD);
}
.ctg--gris-violaceo {
    color: var(--gris-violaceo, #6D6479);
}
.ctg--negro-violaceo {
    color: var(--negro-violaceo, #1C0E30);
}

/*
### Gradientes
*/

.ctg--violeta-blanco {
  background-image: linear-gradient(to bottom, var(--violeta-medio) 50%, var(--white) 50%);
}

.ctg--gris-white {
     background-image: linear-gradient(to bottom, var(--gris-claro) 50%, #ffffff 50%); 
}

.ctg--amarillo-gris-lila {
     background-image: linear-gradient(to bottom, var(--amarillo-limon, #FDE434) 50%, var(--gris-lila, #F6F4F9) 50%);
}

/*******
## iFrame
*******/

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*******
## Buttons
*******/

.ctg-btn,
.blm-btn.ctg-btn,
.ctg-form .eide_wrapper .gform_footer input.gform_button,
.primary-navbar #bs4navbar > ul > li:last-child a {
    font-size: var(--fsize-1);
    color: var(--violeta-oscuro, #2E0870) !important;
    font-family: var(--hfamily) !important;
    background-color: var(--verde-lima, #BFFD06);
    font-weight: 500;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
    outline: none;
    border: 1px solid transparent;
    border-radius: 50px;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.04);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.04);
    cursor: pointer;
    display: inline-block;
    letter-spacing: .025em;
    margin-bottom: 0;
    padding: 5px;
    padding-inline: 30px;
    text-align: center;
    -webkit-transition: var(--05-transition);
    -moz-transition: var(--05-transition);
    -ms-transition: var(--05-transition);
    -o-transition: var(--05-transition);
    transition: var(--05-transition);
    -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
}

.ctg-form .eide_wrapper .gform_footer {
    justify-content: center;

    & input.gform_button {
        font-size: 22px !important;
        background-color: var(--violeta, #70567C) !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
        height: 44px !important;
        display: inline-block !important;
        padding-inline: 30px !important;
        text-align: center !important;
        -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25) !important;
        -moz-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25) !important;
        box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25) !important;
        letter-spacing: .025em !important;
        transition: var(--05-transition) !important;
    }
}

.ctg-btn:hover,
.ctg-form .eide_wrapper .gform_footer input.gform_button:hover,
.ctg-form .eide_wrapper .gform_footer input.gform_button:focus,
.primary-navbar #bs4navbar > ul > li:last-child a:hover {
    color: var(--verde-lima, #BFFD06) !important;
    background-color: var(--violeta-oscuro, #2E0870) !important;
    border: 1px solid transparent !important;
}

.video-btn,
.blm-btn {
  -webkit-appearance: none !important; /*Safari/Chrome*/
  -moz-appearance: none !important; /*Firefox*/
  -ms-appearance: none !important; /*IE*/
  -o-appearance: none !important; /*Opera*/
  appearance: none !important;
}

/*
    ### Secondary
*/

.ctg-btn-secondary,
.blm-btn {
    color: var(--violeta-oscuro, #2E0870) !important;
    font-family: var(--ffamily) !important;
    font-size: var(--fsize-1);
    font-weight: 700;
    padding: .5rem .7rem;
    min-width: 160px;
    border-radius:calc(var(--10px) * 3);
    background-color: var(--amarillo-dorado, #FDD104);
    border:1px solid var(--amarillo-dorado, #FDD104);
    padding-inline: 35px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    letter-spacing: .025em;
    margin-bottom: 0;
    position:relative;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    display: -ms-flexbox;
    -webkit-appearance: none !important; /*Safari/Chrome*/
    -moz-appearance: none !important; /*Firefox*/
    -ms-appearance: none !important; /*IE*/
    -o-appearance: none !important; /*Opera*/
    appearance: none !important;
}

.ctg-btn-secondary:hover,
.blm-btn:hover {
    background-color: var(--violeta-oscuro, #2E0870) !important;
    color: var(--amarillo-dorado, #FDD104) !important;
    border: 1px solid var(--violeta-oscuro, #2E0870) !important;
}

.ctg-btn-secondary-a {
    color: var(--violeta-oscuro, #2E0870) !important;
    font-size: var(--fsize-0);
    font-weight: 700;
    padding: .4rem 1rem;
    min-width: 160px;
    border-radius:calc(var(--10px) * 3);
    background-color: var(--verde-lima, #BFFD06);
    border:1px solid var(--verde-lima, #BFFD06);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    letter-spacing: .025em;
    margin-bottom: 0;
    position:relative;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-appearance: none !important; /*Safari/Chrome*/
    -moz-appearance: none !important; /*Firefox*/
    -ms-appearance: none !important; /*IE*/
    -o-appearance: none !important; /*Opera*/
    appearance: none !important;
}

.ctg-btn-secondary-a:hover {
    color: var(--verde-lima, #BFFD06) !important;
    background-color: var(--violeta-oscuro, #2E0870) !important;
    border: 1px solid transparent !important;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--ffamily) !important;
  font-weight: 700;
  font-style: normal;
}

.grift {
  font-family:var(--ffamily) !important;
}

.open-sans {
  font-family:var(--gfamily) !important;
}

.ubutu {
    font-family:var(--hfamily) !important;
}

.bold {
    font-weight:bold;
}

/*
## Font Size
*/

.fsize--6 {
  font-size: var(--fsize--6);
}

.fsize--5 {
  font-size: var(--fsize--5);
}

.fsize--4 {
  font-size: var(--fsize--4);
}

.fsize--3 {
  font-size: var(--fsize--3);
}

.fsize--2 {
  font-size: var(--fsize--2);
}

.fsize--1 {
    font-size:var(--fsize--1);
}

.fsize-0,
h6 {
    font-size:var(--fsize-0);
}

.fsize-1,
h5 {
    font-size:var(--fsize-1);
}

.fsize-2,
h4 {
    font-size:var(--fsize-2);
}

.fsize-3,
h3 {
    font-size:var(--fsize-3);
}

.fsize-4,
h2 {
    font-size:var(--fsize-4);
}

.fsize-5,
h1 {
    font-size:var(--fsize-5);
}

body,
button,
input,
select,
optgroup,
textarea {
    color:var(--black, #000000);
    font-size: var(--fsize-0);
    line-height: 1.5;
    font-family: var(--ffamily) !important;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 .5em;
    padding: 25px;
    margin-bottom: 1.5em;
    font-style: italic;
    border-left: 4px solid #000000;
}

blockquote p {
    margin: 0;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}


/*--------------------------------------------------------------
# Nav
--------------------------------------------------------------*/

.primary-navbar, 
.secondary-navbar {
    font-family: var(--gfamily);
}

#menu ul li {
  padding:0px 15px;
}

#menu ul li:last-child,
#bs4navbar > ul > li:last-child a {
  padding-right:0;
}

#menu a,
.navbar-default .navbar-nav > li > a,
#menu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 18px;
    padding: 8px 0px;
}

.admin-bar .ini-navbar.fixed-top {
  top:32px;
}

.ctg-navbar {
    position: relative;
    z-index:999;
    position: sticky;
    position: -webkit-sticky;
    top: calc(47px - 5px); /* required */
    width:100%;
    background-color:#fff;

    &.ctg-navbar.normal {
        top: 0 !important;
    }

    & .navbar-brand { padding:0; margin-right:0; }
    & a { color:#000; }

    /* ## Secondary */
    .secondary-navbar {
        & .navbar {padding-block:0;}
        & li.menu-item a {
            font-size:14px;
            padding:5px 10px;
            color:var(--black, #000000);
        }

        & #bs4navbar > ul > li:last-child a {
            font-weight: bold;
        }
  }
}

.primary-navbar .logo-menu {
    width: 23px;
}

/*--------------------------------------------------------------
# Modal
--------------------------------------------------------------*/

#inscripcion .modal-content,
#login .modal-content {
    border-radius:calc(var(--10px) * 4);
}

#inscripcion .ctg-form,
#login .ctg-form {
    padding-top:0px !important;
}

#inscripcion .modal-header,
#login .modal-header {
    display: block;
    border-bottom: none;
    padding: .8rem 0 0 .8rem;

    & .close {
        float:left;
        font-size: 3rem;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.site-footer,
.site-info p,
.site-footer a,
.site-footer a:visited {
    color: var(--violeta-oscuro, #2E0870) !important;

    & .logo img {
        width: 84px;
    }
}

.site-info .sites {
    color: #707070 !important;
}

.site-info .legal div {
    font-size: var(--fsize--5);
    font-family: var(--gfamily) !important;
    color: var(--violeta-oscuro, #2E0870) !important; 
    text-decoration:none;
    line-height: 2;
}

.site-info .institucionales,
.site-info .visma {
    font-family: var(--hfamily) !important;
    padding: 0;
    line-height: 1.7;
}

.site-info:not(.ads) :is(.brand) {
    border-bottom:1px solid #2E0870;
}

/*
## RRSS
*/

.rrss {
    height: fit-content;

    & img {
        width:25px;
    }
}

#page a:focus {
    outline: none;
}

/*--------------------------------------------------------------
# Comp - Flybox
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Heros & CTAs
--------------------------------------------------------------*/

.ctg-hero {
    min-height:calc(85vh - 50px);
    overflow-x: clip;
    position: relative;
    background-position:center center;  
    background-size: cover;
    background-repeat:no-repeat;

    & h1 {
        margin: 0.4em 0;
    }


    & .ctg-video {
        height: 100%;
    }
}

.ctg-hero.ctg-inicio {

    & .media-testimonio {
        width: 100%;
        height: auto;

        & img:not(.img-play),
        & iframe {
            aspect-ratio: 1.82 / 1 !important;
        }

        & .img-play {
            width: 80px;
            height: 80px;
        }
    }
}

.ctg-hero.ctg-contacto {
    overflow: clip;
}

.ctg-hero .inicio-verde-lima {
    background-color: var(--verde-lima, #BFFD06);
    border-radius:calc(var(--10px) * 2);
    -webkit-box-shadow: 8px 5px 0 0 #BFFD06, -10px 5px 0 0 #BFFD06, -10px -5px 0 0 #BFFD06, 8px -5px 0 0 #BFFD06;
    -moz-box-shadow: 8px 5px 0 0 #BFFD06, -10px 5px 0 0 #BFFD06, -10px -5px 0 0 #BFFD06, 8px -5px 0 0 #BFFD06;
    box-shadow: 8px 5px 0 0 #BFFD06, -10px 5px 0 0 #BFFD06, -10px -5px 0 0 #BFFD06, 8px -5px 0 0 #BFFD06;
}

.ctg-hero .inicio-amarillo {
    background-color: var(--amarillo-claro, #FDF1BD);
    border-radius:calc(var(--10px) * 2);
    -webkit-box-shadow: 8px 5px 0 0 #FDF1BD, -10px 5px 0 0 #FDF1BD, -10px -5px 0 0 #FDF1BD, 8px -5px 0 0 #FDF1BD;
    -moz-box-shadow: 8px 5px 0 0 #FDF1BD, -10px 5px 0 0 #FDF1BD, -10px -5px 0 0 #FDF1BD, 8px -5px 0 0 #FDF1BD;
    box-shadow: 8px 5px 0 0 #FDF1BD, -10px 5px 0 0 #FDF1BD, -10px -5px 0 0 #FDF1BD, 8px -5px 0 0 #FDF1BD;
}

/* Links  */
.site .site-content a:not(.ctg-btn, .ctg-btn-secondary, .ctg-btn-secondary-a, .blm-btn, .partner-nav a, .partner-archive a, .post a, .article-related a, .page-numbers, .rank-math-breadcrumb a) {
    text-decoration:underline;
    color: var(--violeta-medio, #8139F2);
}

.img-bg-inicio1 {
    position: absolute;
    top: -10%;
    right: -5%;
}

.img-bg-inicio2 {
    position: absolute;
    left: 0;
    bottom: 0;
}

.img-bg-contacto1 {
    position: absolute;
    top: -10%;
    right: -5%;
}

.img-bg-contacto2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 500px;
}

.img-bg-gracias {
    position: absolute;
    top: -160%;
    right: -80%;
}

.ctg-form {
    border-radius:calc(var(--10px) * 4);
}

/*
## h1 & btn colors
*/

:is(.ctg-bg--negro, .ctg-bg--violeta, .ctg-bg--amarillo-oscuro, .ctg-bg--naranja, .ctg-bg--violeta-medio) :is(.switch, a:is(:visited), a),
:is(.ctg-bg--negro, .ctg-bg--violeta, .ctg-bg--amarillo-oscuro, .ctg-bg--naranja, .ctg-bg--violeta-medio) .ctg-hero-title p:not(.brand-hero),
:is(.ctg-bg--negro, .ctg-bg--violeta, .ctg-bg--amarillo-oscuro, .ctg-bg--naranja, .ctg-bg--violeta-medio) :where(h2, h3, p, li),
.ctg-bg--negro .eide_wrapper {
    color: var(--white, #ffffff);
}

:is(.ctg-bg--blanco) :is(.switch, a:is(:visited), a),
:is(.ctg-bg--blanco) .ctg-hero-title p:not(.brand-hero),
:is(.ctg-bg--blanco) :where(h2, h3, p, .page-template-contacto .gform_button),
:is(.vw-bg--soft-black) .eide_wrapper :where(h2, h3, p, li) {
    color:var(--black, #000000);
}

:is(.ctg-bg--blanco) :is(.ctg--violeta-medio) :is(.switch, a:is(:visited), a) {
    color: var(--violeta-medio, #8139F2) !important;
}

/*--------------------------------------------------------------
# Oferta
--------------------------------------------------------------*/

.section-lg {
    min-height: 650px;
    overflow:hidden;
}

.img-bg-amarillo1 {
    position: absolute;
    top: -120%;
    right: -38%;
}

.img-bg-amarillo2 {
    position: absolute;
    top:60%;
    left: -45%;
}

.ctg-negocio .container-fluid {
    overflow: visible;
}

/*
  ## ctg-accordion
*/

.ctg-accordion .blm-accordion {
    --accordion-border: 2px solid var(--lavanda-suave, #F0E5FB);
    background-color: var(--lavanda-suave, #F0E5FB);
    border: 1px solid transparent;
    padding-inline:50px;

    & .btn {
        color: var(--black, #000000) !important;
        text-decoration: none !important;
        font-size: 20px !important;
    }

    & svg {
        fill:#000;
    }

    & p,
    li,
    lu {
        color: #707070;

        & a {
            color: var(--amarillo-oscuro) !important;
        }
    }

    & .card-body {
        background-color: var(--gris-lila, #F6F4F9) !important;
    }
}

.ctg-accordion .blm-accordion:has(.show, .collapsing ) {
    background-color: var(--gris-lila, #F6F4F9);
    border: none;
}

.ctg-accordion .blm-accordion:has(.collapsed) {
    border-bottom: var(--accordion-border);
  
    & :is(a, a:hover) {
      color:var(--gris-lila, #F6F4F9);
    } 
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/

.title .rank-math-breadcrumb {
    & a {
        color: var(--black, #000000);
    }
    & p {
        margin-bottom: 0;
    }
}

.title .switch {
    margin: 0.4em 0;
}

/*
## Archive
*/

.tags {

    & .selected {
        background-color: var(--gris, #EFEFEC);
        color: #707070 !important;
        border: 1px solid var(--black, #000000);
    }
}

/*
## Paginacion
*/

.bl-paginate .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 53px;
    height: 53px;
    padding: 0 .5rem;
    margin: .25rem;
    border: 1px solid #000000;
    border-radius: 7px;
    background-color: var(--white, #FFFFFF);
    color: var(--negro, #000000);
    font-size: var(--fsize-0);
    font-weight: 400;
    text-decoration: none;
    transition: var(--03-transition);
}

.bl-paginate .page-numbers:hover {
    border-color: var(--violeta-medio, #8139F2);
    color: var(--violeta-medio, #8139F2);
}

.bl-paginate .page-numbers.current {
    background-color: var(--violeta-medio, #8139F2);
    border-color: var(--violeta-medio, #8139F2);
    color: var(--white, #FFFFFF);
    font-weight: 400;
}

span.page-numbers.current {
    border-bottom: transparent;
}

.bl-paginate .page-numbers.dots {
    border: none;
    background: transparent;
    min-width: auto;
}

.bl-paginate .page-numbers.next,
.bl-paginate .page-numbers.prev {
    padding-inline: 1.2rem;
}

.blog-post .post,
.article-related .post {
    p {
        margin-bottom:.4rem;
    }   

    h2 {
        font-size: 30px;
        font-family: var(--hfamily) !important;
    }

    &:hover {
        background-color: var(--gris, #EFEFEC);
        -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
    }   
}

.article-post {
    h2 {
        font-family: var(--hfamily) !important;
    }

    p{
        font-family: 'Grift' !important;
    }
}

/*
## TOC
*/

.content-toc {
    top:30px;
    margin-bottom: 3rem;
    border-radius:10px;
    overflow-y: auto;
    font-size:var(--fsize);
    font-family: 'Montserrat', sans-serif;

  & .bl-title {
    font-weight:bold;
    margin-left:10px;
    margin-bottom:5px;
    font-size:16px;
  }

  & ol {
    color: var(--violeta-medio, #8139F2);
    margin-inline:auto;
    width:95%;
  }

  & ol, 
  & li {
    margin-bottom:0;
    padding:0.4px;
  }
}

/*
## Author
*/

.ctg-author {
    & .author-pic {
        width: 160px;
        aspect-ratio:1/1;
        border-radius:50%;
    }

    & p {
        margin-block:0;
    }
}

.about-author {

    & .container {
        border-top:1px solid #959799;
        padding-block-start:2rem;
    }
    
    & .author-pic {
        aspect-ratio:1/1;
        border-radius:50%;
    }
}

/*--------------------------------------------------------------
# GF
--------------------------------------------------------------*/

/* 
  ### Font
*/

.eide_wrapper .gfield_label, /*General*/
.eide_wrapper .select-selected, /*Select*/
.eide_wrapper .select-items,
.eide_wrapper input[type='text'],
.eide_wrapper input[type='email'],
.eide_wrapper textarea,
.eide_wrapper select {
    
}

/*
  ### General
*/

.eide_wrapper .gform_fields {
    row-gap: 12px !important;
} 

.eide_wrapper .gfield {
  position: relative;
}

.eide_wrapper ul li.gfield {
  margin-top:10px !important;
}

/* Input, Select */
.eide_wrapper .gfield input:not(.gfield-choice-input):not([type="checkbox"]),
.eide_wrapper .gfield select {
  transition: .1s all linear;
  width:100% !important;
  border-radius: calc(var(--10px) * 0.8);
  border: 1px solid #707070;
  color: #555;
}

/* Padding */
.eide_wrapper .gfield input ,
.eide_wrapper .gfield.active input,
.eide_wrapper .gfield textarea ,
.eide_wrapper .gfield.active textarea
.eide_wrapper .gfield select
.eide_wrapper .gfield.active select{
  padding:10px 0 0 10px!important;
}

/* Label */
.eide_wrapper .gfield:not(.ev-select) label:not(.gfield_consent_label) {
  position: absolute;
  top: 9px;
  left: 10px;
  color: #555;
  transition: .1s all linear;
  cursor: text;
  font-weight:400 !important;
  padding:0 5px;
}

/* Label font size active */
.eide_wrapper .gfield.active label:not(.gfield_consent_label),
.eide_wrapper .gfield_required {
  font-size:9px !important;
  top:4px;
}

/* Description */
.eide_wrapper .gform_body .gform_fields .gfield_description {
  font-size:12px;
  padding-top:5px;
}

/* Phone */
.eide_wrapper :is(.gfield input[type='tel'], .gfield.active input.iti__tel-input) {
    padding-left:50px !important;
    padding-block:4px !important;
}

.eide_wrapper .gfield.active input[type='tel'].iti__tel-input {
  padding-left:50px;  
  padding-top:inherit;
    
}

.eide_wrapper .iti--inline-dropdown .iti__dropdown-content {
    z-index:200;
}

/* html */
.eide_wrapper .gfield--type-html {
    font-size: 22px;
    text-align: center;
    margin-bottom: 15px;

    & a {
        text-decoration: none !important;
    }
}

/* html */
.eide_wrapper .gfield--type-password label {
    z-index:10;
}

/* Footer */
.eide_wrapper .gform_footer {
  margin-top: 15px !important;
  padding:0 !important;
}

/*
  ## Pagina de contacto
*/
.ev-select .gfield_label,
.eide_wrapper legend.gfield_label {
  color:#000 !important;
}

.eide_wrapper .gfield.active label:not(label.gfield_consent_label) {
  top: -7px;
  left: 7px;
  z-index:99;
  color:#8c8c8c;
  background-color: #fff;
}

/*
  ### Tooltip
*/

.gf_tooltip {
  position:relative;
}

.gf_tooltip label {
  display:none !important;
}

.gf_tooltip .gravity-tooltip {
  position:absolute;
  z-index:99;
  right:0;
  top:10px;
}

/*
  ### Select
*/

.eide_wrapper .ev-select label {
  margin-bottom:0;
}

.eide_wrapper .ginput_container_select {
  margin-top:0 !important;
}

/* Oculta la flecha por defecto*/
.eide_wrapper select,
.eide_wrapper select {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.eide_wrapper .ginput_container_select {
  position: relative;
}

/* IE11 hide native button (thanks Matt!) */
.eide_wrapper .ginput_container_select  select::-ms-expand {
  display: none;
}

/*
.eide_wrapper .ginput_container_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #dfdfdf !important;
  background-color:#fff !important;
  color:#555 !important;
  width:100% !important;
}*/

.eide_wrapper .gfield_checkbox input[type=checkbox],
.eide_wrapper .gfield_radio input[type=radio] {
    opacity: 0;
    position: absolute;   
}

.eide_wrapper .gfield_checkbox input[type=checkbox] + label,
.eide_wrapper .gfield_radio input[type=radio] + label{
    position: relative;
    overflow: hidden;
    padding: 5px 0px 5px 30px;
    cursor: pointer;
    display: inline-block;
    font-weight:400;
    border-bottom:1px solid transparent;
    margin-bottom:0 !important;
    width:100%;
    color:#fff;
}

.eide_wrapper .gfield_checkbox input[type=checkbox] + label:before,
.eide_wrapper .gfield_checkbox input[type=checkbox] + label:after,
.eide_wrapper .gfield_radio input[type=radio] + label:before,
.eide_wrapper .gfield_radio input[type=radio] + label:after {
    content: '';
    position: absolute;
    left: 0;
    z-index: 1;
    -webkit-transition: .2s;
    transition: .2s;
    top:80px !im;
}

/* ### After */

.eide_wrapper .gfield_checkbox input[type=checkbox]:not(:checked) + label:after,
.eide_wrapper .gfield_radio input[type=radio]:not(:checked) + label:after  {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    top: 7px;
}

.eide_wrapper .gfield_checkbox input[type=checkbox]:checked + label:after,
.eide_wrapper .gfield_radio input[type=radio]:checked + label:after {
    top: 7px;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #fff;
    background-color: #fff;
}
/* Checkboxs */
.eide_wrapper .gfield_checkbox input[type=checkbox]:not(:checked) + label:after {
    border-radius:3px;
}

.eide_wrapper .gfield_checkbox input[type=checkbox]:checked + label:after {
    border-radius: 3px
}

/* Radio */
.eide_wrapper .gfield_radio input[type=radio]:not(:checked) + label:after {
    border-radius:50%;
}

.eide_wrapper .gfield_radio input[type=radio]:checked + label:after {
    border-radius: 50%;
    background-color:#fff;
    border:2px solid #26a69a
}

/* ### Before */

/* Checkboxs */
.eide_wrapper .gfield_checkbox input[type=checkbox]:not(:checked) + label:before{
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.eide_wrapper .gfield_checkbox input[type=checkbox]:checked + label:before{
    top: 10px;
    left: 2px;
    width: 6px;
    height: 10px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/* Radio */
.eide_wrapper .gfield_radio input[type=radio]:not(:checked) + label:before{
    top: 7px;
    left: 2px;
    width: 6px;
    height: 10px;
    background-color:#fff;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.eide_wrapper .gfield_radio input[type=radio]:checked + label:before{
    top: 8px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius:50%;
    background-color:#26a69a;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
/*
body #gform_wrapper_1 .gform_body .gform_fields .gfield select:not(#input_1_31) {
  border: 1px solid #dfdfdf;
  background-color: transparent;
  color:#ff00f;
  padding:10px;
  width:100%;
  border-radius:5px;
}*/

/* Consent */
.eide_wrapper .ginput_container_consent {
  height:18px;
  margin-top:0 !important;
  position:relative;
  top:-10px;
}

.eide_wrapper .ginput_container.ginput_container_consent .gfield_consent_label {
  font-size:12px;
  position:relative;
  top:-3px;
}

.eide_wrapper .ginput_container.ginput_container_consent input {
  margin-top:0;
  position:top;
}

.eide_wrapper .ginput_container.ginput_container_consent a {
  font-weight:bold;
}

/*
  ## Search
*/

.search-form label {
    width:100%;
}

.search-form input[type="search"] {
    border: transparent;
    display: block;
    font-size: 20px;
    line-height: 26px;
    height: 62px;
    padding: 17px 20px 17px 70px;
    background: #fff;
    outline: none;
    box-shadow: none;
    width: 100%;
    position: relative;
    z-index: 2;
    border-bottom:1px solid #000;
}

.search-form input[type="search"]:hover {
    border-bottom:1px solid var(--violeta, #70567C);
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.search-form .search-submit  {
    position: absolute;
    left: left;
    z-index: 9;
    cursor: pointer;
    background: transparent;
    border:none;

    display: block;
    float: right;
    background-image: url(./img/fa-search.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position:center center;
    height: 62px;
    width: 62px;
}

/*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/
.ctg-banner {
    position:relative;
    position:sticky;
    z-index:9999;
    top:0px;

    color:#fff;
    font-weight:bold;
    font-size:var(--fsize-3);
    font-family:var(--hfamily) !important;

    p {
        margin-bottom:0;
    }
    
    strong {
        color:var(--amarillo-oscuro)
    }

    a, a:visited {
        color:inherit;
    }
}

/*--------------------------------------------------------------
# Especial CSS
--------------------------------------------------------------*/

.vidContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 5%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img-preview {
    position: relative;
    cursor: pointer;

    & .img-play {
        position: absolute; /* Posición absoluta para superponer */
        top: 50%; /* Centrar verticalmente */
        left: 50%; /* Centrar horizontalmente */
        transform: translate(-50%, -50%); /* Ajustar la posición al centro */
        width: 50px; /* Ancho de la imagen superpuesta */
        height: 50px; /* Alto de la imagen superpuesta */
        /* Puedes ajustar el tamaño de la imagen superpuesta según necesites */

        &:hover {
            opacity: .7;
        };
    }
}

:not(.media-testimonio) .video-preview iframe {
    width:750px;
    height:425px;
}

.media-testimonio .video-preview iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 1.8 / 1;
}

.tape-integraciones .blm-card img {
    width: 40px;
}


/*
## Tapes
*/

.blm-p-tape img {
 aspect-ratio:1 / 1;
 width:calc(3.25rem - .7rem);
 margin-top:10px;
}

:is(.ctg-tape) .blm-p-tape {
    grid-column-gap: 3rem;
    grid-row-gap: 2rem;
    -ms-flex-align: center;
    align-items: start;
    display: -ms-flexbox;
    display: flex;
    padding-block:min(.8rem, 2rem);
}

:is(.ctg-tape) .blm-p-tape img {
  margin-bottom:inherit;
}


.blm-p-tape.tape2 img {
    grid-area: img;
}

.blm-p-tape.tape2 :is(h2, h3) {
    grid-area: title;
}

.blm-p-tape.tape2 :is(p) {
    grid-area: text;
}

.ctg-tape-box img {
    background-color:#efefec;
    width:3.25rem;
    padding:.7rem;
    border-radius:var(--10px);
}

:is(.ctg-bg--gris-claro) .ctg-tape-box img {
    background-color:var(--white, #ffffff);
    width:3.25rem;
    padding:.7rem;
    border-radius:var(--10px);
}

.blm-tape:is(.ctg-tape) :is(h3, p) {
    font-weight:400;
    font-size:var(--fsize);
    margin-bottom:0;
}

.ctg-tape-box .blm-p-tape p {
 margin-bottom:0;
}

/*
## Tabla precios
*/

.ctg-precios {
    font-family: var(--ifamily) !important;
}

.ctg-precios h2 {
    font-family: var(--ifamily) !important;
    font-size: 57px;
    font-weight: 800;
}

.ctg-precios__tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ffamily);
    font-size: var(--fsize--4);
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--violeta-electrico, #5706D3);
}

.ctg-precios__tagline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--verde-lima, #BFFD06);
}

.ctg-precios__subtitle p {
    color: var(--gris-violaceo, #6D6479);
    font-weight: 500;
}

/* ### Toggle Mensual/Anual */

.ctg-precios__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1.5rem;
    padding: 6px;
    border-radius: 999px;
    background-color: var(--white, #FFFFFF);
    box-shadow: 0px 4px 14px rgba(46, 8, 112, 0.08);
}

.ctg-precios__toggle-btn {
    display: inline-flex;
    font-family: var(--ifamily) !important;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    border-radius: 999px !important;
    padding: .55rem 1.6rem;
    font-size: var(--fsize-0);
    font-weight: 700;
    color: var(--negro-violaceo, #1C0E30);
    cursor: pointer;
    transition: var(--02-transition);

    &.is-active {
        background-color: var(--violeta-electrico, #5706D3);
        color: var(--white, #FFFFFF);
    }
}

.ctg-precios__toggle-badge {
    background-color: var(--verde-lima, #BFFD06);
    color: var(--negro-violaceo, #1C0E30);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--fsize--6);
    font-weight: bold;
}

/* ### Swap de paneles (mensual/anual) */

.ctg-precios__panel {
    padding-top: 3rem;
}

.ctg-precios__panel:not(.is-visible) {
    display: none;
}

.ctg-precios__panel.is-visible {
    animation: ctgPreciosFade .35s ease;
}

@keyframes ctgPreciosFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ### Cards */

.ctg-precios__col {
    display: flex;
    margin-bottom: 30px;
}

.ctg-precios__card {
    width: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: calc(var(--10px) * 3);
    background-color: var(--white, #FFFFFF);
    box-shadow: 0px 6px 24px rgba(46, 8, 112, 0.06);
    text-align: left;
}

.ctg-precios__plan {
    font-size: var(--fsize-1);
    font-weight: 700;
    color: var(--negro-violaceo, #1C0E30);
    margin-bottom: .25rem;
}

.ctg-precios__precio {
    font-family: var(--ffamily);
    font-size: 32px;
    font-weight: 700;
    color: var(--negro-violaceo, #1C0E30);
    margin-bottom: .5rem;
}

.ctg-precios__sufijo {
    font-family: var(--ifamily);
    font-size: var(--fsize--4);
    font-weight: 500;
    color: var(--gris-violaceo, #6D6479);
}

.ctg-precios__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: .5rem;
}

.ctg-precios__badge {
    background-color: var(--verde-lima, #BFFD06);
    font-family: var(--ffamily);
    text-align: center;
    color: var(--negro-violaceo, #1C0E30);
    border-radius: 8px;
    padding: 3px 10px;
    font-size: var(--fsize--5);
    font-weight: bold;
}

.ctg-precios__badge-aclaracion,
.ctg-precios__despues {
    font-size: var(--fsize--4);
    font-family: var(--ffamily);
    font-weight: 500;
    color: var(--gris-violaceo, #6D6479);
}

.ctg-precios__despues {
    margin-bottom: 0;
    font-family: var(--ffamily);
    font-weight: 500;
}

/* ### Features */

.ctg-precios__features {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;

    & li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        padding-block: .4rem;
        font-size: var(--fsize--4);
        font-weight: 500;
        color: var(--negro-violaceo, #1C0E30);
    }

    & li.is-destacada {
        font-weight: 900;
    }
}

.ctg-precios__check {
    flex-shrink: 0;
    margin-top: 2px;

    & path {
        stroke: var(--violeta-electrico, #5706D3);
    }
}

.ctg-precios__check--destacada {

    & rect {
        fill: var(--verde-lima, #BFFD06);
    }

    & path {
        stroke: var(--negro-violaceo, #1C0E30);
    }
}

/* ### Card anual */

.ctg-precios__card--anual {
    position: relative;
    margin-top: 1.5rem;
    border: 2px solid var(--violeta-electrico, #5706D3);
    box-shadow: none;
}

.ctg-precios__badge-flotante {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background-color: var(--violeta-electrico, #5706D3);
    color: var(--white, #FFFFFF);
    border-radius: 999px;
    padding: .45rem 1.25rem;
    font-size: var(--fsize--3);
    font-weight: bold;
}

.ctg-precios__nota {
    margin-top: 1rem;
    font-size: var(--fsize--5);
    color: var(--gris-violaceo, #6D6479);
    font-weight: 500;
}

/* ### Carrusel mobile (Slick <992px) */

.carousel-precios.slick-initialized {
    display: block;
}

.carousel-precios .slick-dots {
    bottom: -40px;

    & li button:before,
    & li.slick-active button:before {
        font-size: 40px;
        opacity: 1;
        color: var(--lavanda-media, #CD9EF8);
    }

    & li.slick-active button:before {
        color: var(--violeta-electrico, #5706D3);
    }
}

@media only screen and (max-width: 991px) {
    .ctg-precios__panel--mensual {
        padding-bottom: 2.5rem;
    }

    .ctg-precios__col {
        margin-bottom: 0;
    }
}


/*
## Iniciar sesión
*/

.ctg-login {
    font-family: var(--ifamily);
}

.ctg-login__tagline {
    display: inline-flex;
    font-family: var(--ffamily);
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fsize--4);
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--verde-lima, #BFFD06);
}

.ctg-login__tagline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--verde-lima, #BFFD06);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.ctg-login__titulo {
    color: var(--white, #FFFFFF);
    font-weight: 800;
    margin-bottom: 3rem;
}

/* ### Cards */

.ctg-login__col {
    display: flex;
    margin-bottom: 30px;
}

.ctg-login__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 320px;
    padding: 1rem 1.5rem;
    border-radius: calc(var(--10px) * 3);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.ctg-login__card--anterior {
    /* Degradé crema del diseño (#FFF8DC → #FFF6D0) con alpha para dejar ver la foto */
    background-image: linear-gradient(180deg, rgba(255, 248, 220, .9) 55%, rgba(255, 247, 213, .9) 72%, rgba(255, 246, 208, .9) 97%), url(./img/login-oficina.jpg);
}

.ctg-login__card--nueva {
    position: relative;
    isolation: isolate;
    background-color: var(--violeta-oscuro, #2E0870);
}

/* Imagen según layout de Figma: box 1051x360 (178% del ancho de card), top -24px, left -238px (-40%), opacidad 60% */
.ctg-login__card--nueva::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -40%;
    width: 178%;
    height: 360px;
    background: url(./img/login-dashboard.png) top center / cover no-repeat;
    opacity: .6;
    z-index: -2;
}

/* Degradé oscuro por encima de la imagen */
.ctg-login__card--nueva::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(28, 14, 48, .35) 0%, rgba(28, 14, 48, .95) 80%);
    z-index: -1;
}

.ctg-login__logo {
    width: 110px;
    max-width: 60%;
    height: auto;
    margin-bottom: 1rem;
}

/* ### Pills */

.ctg-login__pill {
    display: inline-flex;
    font-family: var(--ffamily);
    align-items: center;
    gap: 8px;
    padding: .3rem 1rem;
    border-radius: 999px;
    font-size: var(--fsize--5);
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.ctg-login__pill--anterior {
    border: 1px solid var(--amarillo-oscuro, #FAB90B);
    color: var(--amarillo-oscuro, #FAB90B);
    background-color: #FEF3C6;
}

.ctg-login__pill--nueva {
    border: 1px solid var(--verde-lima, #BFFD06);
    color: var(--verde-lima, #BFFD06);
    background-color: #CBFA5126;
}

.ctg-login__pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--verde-lima, #BFFD06);
}

/* ### Textos card */

.ctg-login__card-titulo {
    font-family: var(--ffamily);
    font-size: 32px;
    font-weight: bold;
    color: var(--negro-violaceo, #1C0E30);
    margin-bottom: 0;
}

.ctg-login__card--nueva .ctg-login__card-titulo {
    color: var(--white, #FFFFFF);
}

.ctg-login__card-texto {
    font-size: var(--fsize--1);
    font-family: var(--ffamily);
    color: #334155;
    margin-bottom: .75rem;
}

.ctg-login__card--nueva .ctg-login__card-texto {
    color: rgba(255, 255, 255, .85);
}

/* ### Botones */

.ctg-login__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .75rem 2rem;
    border-radius: 999px;
    font-size: var(--fsize-0);
    font-weight: 600;
    text-decoration: none;
    transition: var(--02-transition);
}

.ctg-login__btn-flecha {
    flex-shrink: 0;
}

.ctg-login__btn--violeta {
    background-color: var(--violeta-electrico, #5706D3);
    color: var(--white, #FFFFFF) !important;
    text-decoration: none !important;
    padding: .5rem 1.8rem !important;
    box-shadow: 0 10px 30px rgba(87, 6, 211, .45);
    font-weight: 700 !important;
    font-family: var(--ffamily) !important;
    font-size: 18px !important;
}

.ctg-login__btn--lima {
    background-color: var(--verde-lima, #BFFD06);
    color: var(--negro-violaceo, #1C0E30);
    box-shadow: 0 12px 26px -12px rgba(180, 240, 58, .75);
    font-weight: 700 !important;
    font-family: var(--ffamily) !important;
    text-decoration: none !important;
    padding: .5rem 1.8rem !important;
    font-size: 18px !important;
}

@media only screen and (max-width: 767px) {
    .ctg-login__card {
        min-height: 360px;
    }

    .ctg-login__col:last-child {
        margin-bottom: 0;
    }
}


/*
## Slick
*/

/* ## Testimonio */

.slick-testimonio {
    margin-inline: 30px;
    z-index:1;
}

.carousel-testimonios {
    & .slick-next,
    & .slick-prev {
        z-index:2;
    }

    & .slick-next:before {
        content: url(./img/flecha-carousel.svg);
        position:relative; 
        right: -5px;
    }

    & .slick-prev:before {
        content: url(./img/flecha-carousel.svg);
        position:absolute;
        transform: rotate(180deg);
        left: -5px;
    }
}

.carousel-testimonios{
    .slick-dots {
        bottom:-50px;

        & li {
            margin: 0 10px;
        }

        & li button:before, 
        & li.slick-active button:before {
            color: var(--lavanda-suave, #F0E5FB);
            font-size: 80px;
            opacity: 1;  
        }

        & li.slick-active button:before {
            color: var(--violeta-medio, #8139F2);
        }
    }   
}

/* ## Clientes */

.carousel-clientes .slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.carousel-clientes .carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.carousel-clientes img {
    max-height: 100%;
}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media only screen and (min-width: 768px) {
    .ctg-hero .ctg-institucional {
        padding: 3rem 3rem !important
    }

    .ctg-form {
        padding: 45px 70px !important;
    }

    .blog-post .post,
    .article-related .post {
        .dummy-container {
            min-height:280px;
        } 
    }

    .site-info :is(.brand) {
        font-size: 22px;
    }
}

@media only screen and (max-width: 768px) {
    .ctg-accordion .blm-accordion {
        padding-inline:10px;

        & .btn {
            font-size: 16px !important;
        }
    }  

    .slick-next {
        right:15px;
    }

    .slick-prev {
        left:10px;
    } 

    .video-preview iframe {
        width:100% !important;
        height:auto !important;
        aspect-ratio: 1.8 / 1 !important;
    }

    .img-bg-inicio1 {
        right: -30%;
    }  

    .img-bg-amarillo1 {
        right: -30%;
        top: -140%;
    }

    .img-bg-amarillo2 {
        left:-40%;
    }

    .img-bg-contacto1 {
        top: -30%;
        right: -25%;
    }

    .img-bg-contacto2 {
        left: -30%;
    }

    .img-bg-gracias {
        top: -160%;
        right: -50%;
    }
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.p-block-345 {
    padding-block:clamp(3rem, 4rem, 5rem);
}

.p-block-start-345 {
    padding-block-start:clamp(3rem, 4rem, 5rem);
}

.p-block-end-345 {
    padding-block-end:clamp(3rem, 4rem, 5rem);
}

.ctg-rounded {
    border-radius:var(--10px);
}

.ctg-rounded-20 {
    border-radius:calc(var(--10px) * 2);
}

.ctg-underline {
    text-decoration:underline;
}

.ctg-shadow {
    -webkit-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 25px -5px rgba(0, 0, 0, 0.25);
}

.ctg-end {
    position: absolute;
    bottom: 0px;
}

.ctg-video {
    border-radius: calc(var(--10px) * 3);
}

.ctg-m0 p {
    margin-bottom: 0px
}