@import url("https://b2b2c.cdnpt.com/es-mx/css/home.css");

:root{
    /** Colores Aeromexico vacations *************/
    --Azul-Aeromexico: rgb(0, 41, 94);
    --Rosa-Mexicano: rgb(250, 0, 115);
    --azul-rewards: #07e7cc;
    --Azul-Premium: rgb(2, 12, 65);
    --Azul-Comtemporaneo: rgb(0, 0, 227);
    --Blanco-Calido: rgb(242, 242, 240);
    /** Colores Aeromexico vacations *************/
  	--color-1: var(--Azul-Aeromexico);
    --color-2: var(--azul-rewards);
    --color-3: var(--Azul-Premium);
    --color-4: var(--Azul-Comtemporaneo);
    --color-5: var(--Blanco-Calido);

    /** Estilos botones *************/
    --boton-background: var(--azul-rewards);
    --boton-background-hover: var(--Rosa-Mexicano);
    --boton-text-color: var(--Azul-Premium);
    --boton-text-color-hover: var(--Azul-Premium);
    --boton-border-radius: 4px;
    /** Estilos botones *************/

    /* Este color es el que se aplica a los botones */
    --color-terciario: #e91b2f;
    --texto-botones: white;


    /* Colores para el texto */
    --texto-color-primario: white;
    --texto-color-secundario: #0b2343;
    --font-family: "NeueHaasUnicaPro-Regular", sans-serif;



    /** Header *************/
    --header-background: var(--Azul-Premium);
    --header-background-secundario: var(--azul-rewards);
    --header-background-terciario: var(--Azul-Comtemporaneo);
    --header-text-color: var(--Blanco-Calido);
    --header-text-color-hover: var(--Blanco-Calido);

    --header-boton-background: var(--boton-background);
    --header-boton-background-hover: var(--Azul-Comtemporaneo);
    --header-boton-text-color: var(--Azul-Premium);
    --header-boton-text-color-hover: var(--Blanco-Calido);
    --header-boton-border-color: transparent;
    --header-boton-border-color-hover: var(--Blanco-Calido);
    --header-boton-border-radius: var(--boton-border-radius);
    /** Header *************/



    /** Footer *************/
    --footer-background: var(--Azul-Premium);
    --footer-background-secundario: var(--azul-rewards);
    --footer-background-terciario: var(--Azul-Comtemporaneo);
    --footer-text-color: var(--Blanco-Calido);
    --footer-text-color-hover: var(--azul-rewards);

    --footer-boton-background: var(--azul-rewards);
    --footer-boton-background-hover: var(--Blanco-Calido);
    --footer-boton-text-color: var(--boton-text-color);
    --footer-boton-text-color-hover: var(--boton-text-color-hover);
    --footer-boton-border-color: transparent;
    --footer-boton-border-color-hover: transparent;
    --footer-boton-border-radius: var(--boton-border-radius);
    /** Footer *************/


    /** Widget *************/
    --widget-background-primario: var(--Azul-Premium);
    --widget-background-secundario: var(--Rosa-Mexicano);
    --widget-background-terciario: var(--Azul-Comtemporaneo);
    --widget-text-color: var(--Blanco-Calido);
    --widget-text-color-input: var(--Azul-Premium);
    --widget-text-color-hover: #8d807a;

    --widget-font-family: var(--font-family);
    --widget-border-color:#e6e6e3;
    --widget-border-radius: 4px;


    --widget-boton-background: var(--Azul-Comtemporaneo);
    --widget-boton-background-hover: var(--azul-rewards);
    --widget-boton-text-color: var(--Blanco-Calido);
    --widget-boton-text-color-hover: var(--Azul-Premium);
    --widget-boton-border-radius: var(--boton-border-radius);
    --widget-boton-border-color: transparent;
    --widget-boton-border-color-hover: transparent;

    --widget-background-toggle-check: var(--azul-rewards);

    --slider-background-button: var(--azul-rewards);
    --slider-color-button: var(--Azul-Premium);
    /** Widget *************/


    /** Home *************/
    --home-background-primario: #030d75;
    --home-background-secundario: var(--Blanco-Calido);
    --home-background-terciario: var(--Azul-Premium);
    --home-background-cuaternario: var(--Blanco-Calido);
    --home-text-claro: var(--Blanco-Calido);
    --home-text-oscuro: var(--Azul-Premium);
    --home-text-rosa: var(--Rosa-Mexicano);

    --home-font-family: var(--font-family);


    --home-boton1-background: transparent;
    --home-boton1-background-hover: var(--azul-rewards);
    --home-boton1-text-color: var(--Blanco-Calido);
    --home-boton1-text-color-hover: var(--Azul-Premium);
    --home-boton1-border-radius: var(--boton-border-radius);
    --home-boton1-border-color: var(--Blanco-Calido);
    --home-boton1-border-color-hover: var(--azul-rewards);


    --home-boton2-background: white;
    --home-boton2-background-hover: var(--azul-rewards);
    --home-boton2-text-color: var(--Azul-Comtemporaneo);
    --home-boton2-text-color-hover: var(--Azul-Premium);
    --home-boton2-border-radius: var(--boton-border-radius);
    --home-boton2-border-color: var(--Azul-Comtemporaneo);
    --home-boton2-border-color-hover: var(--azul-rewards);
    /** Home *************/
      
    /** Listado *************/
    --listado-background-1: rgb(3, 13, 119)
    --listado-background-2: var(--color-5);
    --listado-background-3: var(--color-3);
    --listado-background-4: var(--color-5);
    --listado-text-1: var(--color-5);
    --listado-text-2: var(--color-3);
    --listado-text-3: var(--color-4);
    --listado-font-family: var(--font-family);

    --listado-boton-1-background: var(--color-2);
    --listado-boton-1-background-hover: var(--color-2);
    --listado-boton-1-text-color: var(--color-3);
    --listado-boton-1-text-color-hover: var(--color-3);
    --listado-boton-1-border-radius: var(--boton-border-radius);
    --listado-boton-1-border-color: var(--color-5);
    --listado-boton-1-border-color-hover: var(--color-2);
    /** Listado *************/
      
	/** Detalle de hotel *************/
    --detalle-boton-1-background: var(--color-2);
    --detalle-boton-1-background-hover: var(--color-2);
    --detalle-boton-1-text-color: var(--color-3);
    --detalle-boton-1-text-color-hover: var(--color-3);
    --detalle-boton-1-border-radius: var(--boton-border-radius);
    --detalle-boton-1-border-color: var(--color-5);
    --detalle-boton-1-border-color-hover: var(--color-2);

    --detalle-border-color: #C4DCEE;
    /** Detalle de hotel *************/
}


.section__toggle .section__toggle--label-fondo{
    background-color: var(--widget-background-toggle-check);
    opacity: .4;
}
.section__toggle .section__toggle--label-circulo{
    background-color: var(--widget-background-toggle-check);
    left: 1.5rem;    
}
.section__toggle .section__toggle--label-check:checked ~ .section__toggle--label-circulo{
    background-color: #f6f6f5;
    left: 0rem;    
}
.section__toggle .section__toggle--label-check:checked ~ .section__toggle--label-fondo{
    background-color: #d9d9d7;
}