@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
    --primary: #052C44;
    --secondary: #13272E;
    --gray-light: #F5F5F5;
    --alternative: #E31C2F;
    --dark: #000000;
    --light: #FFFFFF;
    --blue: #3E82AC;
    --logo: #5385a4

    --size-body: 18px;
    --size-title-main: 53.75px;
    --size-title-secondary: 44.79px;
    --size-title-tertiary: 37.32px;
    --size-subtitle: 31.1px;
    --size-alternativa-subtitle: 25.92px;
    --cual-gradient-top: #3E82AC;
    --cual-gradient-bottom: #A77E60;
    --mueble-gradient-left: #3E82AC;
    --mueble-gradient-right: #A77E60;
    --crea-gradient: linear-gradient(90deg, #A77E60 68%, #fff 100%);
    --mueble-gradient: linear-gradient(90deg, #A77E60 68%, #fff 100%);
    --en-gradient: linear-gradient(90deg, #3E82AC 0%, #7d8c96 100%);
    --click-gradient: linear-gradient(90deg, #A77E60 0%, #fff 100%);
}

.cual-gradient {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    background: linear-gradient(180deg, var(--cual-gradient-top) 0%, var(--cual-gradient-bottom) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.cual-gradient2 {
    background: linear-gradient(180deg, var(--cual-gradient-top) 0%, var(--cual-gradient-bottom) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.mueble-gradient {
    background: linear-gradient(90deg, var(--mueble-gradient-left) 0%, var(--mueble-gradient-right) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.crea-gradient {
    background: var(--crea-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.mueble-gradient {
    background: var(--mueble-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.en-gradient {
    background: var(--en-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.click-gradient {
    background: var(--click-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

body{
    background-color: var(--primary);
    color: var(--primary);
}

.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.servicios,
.navegacion_principal,
.formulario,
.section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
}

.background-blue {
    background-color: var(--blue);
}
h1,h3 {
  font-family: "Noto Sans", system-ui;
  font-style: normal;
}

h2, h4 {
  font-family: "Cairo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

p, h5 {
  font-family: "Heebo", system-ui;
  font-weight: 400;
  font-style: normal;
  
  
}
.mt-custom {
    margin-top: 50px; /* o cualquier valor que necesites */
}


/* Agrega esto a tu archivo CSS si es necesario */
/* Textos */
h1{
    font-size: var(--size-title-main);
    font-weight: 700!important;
}
h2{
    font-size: var(--size-title-secondary);
    font-weight: 400!important;
}
h3{
    font-size: var(--size-title-tertiary);
    font-weight: 400!important;
}
h4{
    font-size: var(--size-subtitle);
    font-weight: 700!important;
}
h5{
    font-size: var(--size-alternativa-subtitle);
}
/* estilos generales */
.text-alternative {
    color: var(--alternative);
}

.logo1{
    width: 150px;
}

.titulo-principal {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}

.en-gradient,
.click-gradient {
    font-family: 'Open Sans Hebrew', Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 48px;
    line-height: 1.1;
}

/* Estilos header */
.contenedor-navegacion{
    border-color: var(--);
}
.contenedor-navegacion .bar-info-contacto svg{
    width: 25px;
    stroke: #bed1dd;
    margin-right: 10px;
}
.container{
    max-width: 90%;
    margin: 0 auto;
}
.campo:nth-child(3),
.campo:nth-child(4) {
    grid-column: 1 / 3; /* Hace que ocupen ambas columnas */
}
/*header{
    height: 60vh;
    .header {
        background-image: url('img/hero.jpg'); /* Ruta correcta de tu imagen */
       /* background-size: cover;  /* La imagen cubre toda el área */
       /* background-position: center;  /* Centra la imagen */
       /* background-repeat: no-repeat;  /* Evita que la imagen se repita */
      /*  height: 100vh;  /* Ajusta la altura para que ocupe toda la altura de la ventana del navegador */
   /* }
    
}
/* Estilos cards-information-header */
/*#cards-information-header{
    max-width: 70%;
    margin: -60px auto 0;
    z-index: 29;
    position: relative;
}
#cards-information-header .card svg{
    width: 40px;
    stroke: var(--alternative);
    margin-right: 10px;
}

.card1 svg{
    stroke: var(--alternative);
}

#cards-information-header .card:nth-child(2){
    border-color: var(--alternative);
}
/* Estilos titulo */

/*.titulo{
    border-color: var(--alternative);
    line-height: 1.2;
    margin-bottom: 20px;
}
.titulo h4{
    color: var(--alternative);
    margin: 0;
}
/* Estilos section-services */
/*#section-services .container .card{
    background-color: var(--gray-light);
    padding: 40px;
}

#section-services .container .card:hover{
    background-color: var(--secondary);
    color: var(--light);
}

#section-services .container .card svg{
    fill: var(--alternative);
    width: 96px;
}

/* panel accesibilidad */
/*.highlighted {
    background-color: yellow!important;
    color: black!important;
    font-weight: bold!important;
}

/* services-faq */
/*.services-faq .cont-description-faq ul, .services-faq .cont-description-faq ol{
    margin-bottom: 10px;
    list-style: disc;
    list-style-position: inside;
}
.services-faq .cont-description-faq ol{
    list-style: decimal;
    list-style-position: inside;
}

.services-faq .cont-description-faq ol li{
    margin-bottom: 10px;
}

.services-faq .cont-description-faq a{
    color: var(--alternative);
    text-decoration: none;
}

.services-faq .cont-description-faq a:hover{
    text-decoration: underline;
}