:root {

		/*--primary: #8b6f9f;/*
		/*--primary-dark: #674e78;*/
		--primary: white; 
		--primary-dark: white;
		--secondary: #d9c8df;

		--text: #333;
		--muted: #777;

		--background: #8b8674;
		--light: #f7f3f8;

		--radius: 18px;

	}

	* {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {

		margin: 0;

		font-family: 'Raleway', sans-serif;

		color: var(--text);

		background: var(--background);

		line-height: 1.6;

	}

	.container {

		width: min(1120px, 92%);

		margin: auto;

	}

	.header {

		background: #8b8674;

		position: sticky;

		top: 0;

		z-index: 100;

		border-bottom: 1px solid #eee;

	}

	.nav {

		min-height: 75px;

		display: flex;

		align-items: center;

		justify-content: space-between;

		gap: 30px;
		
		

	}

	.logo {

		font-size: 11px;

		/* font-weight: 700; */

		color: var(--primary-dark);

		text-decoration: none;
		

	}

	/*
	nav {

		display: flex;

		align-items: center;

		gap: 25px;

	}*/
	
	nav {
		display: inline-flex;      /* O 'flex' si quieres que ocupen todo el ancho */

		align-items: center;       /* Centra el texto horizontalmente */

		gap: 19px;
		/* */
		/*height: auto;              /* Elimina alturas fijas si las tenías */
		padding: 10px 15px;        /* Controla el tamaño del botón con espaciado, no con altura fija */
		line-height: 1.2;          /* Reduce el interlineado de las dos líneas */
		text-align: center;        /* Asegura que el texto largo se centre */
		
		/*justify-content: center;   /* Centra el texto verticalmente */
		/*flex-direction: column;    /* Coloca una línea sobre la otra */
		
		/*display: inline-flex;      /* O 'flex' si quieres que ocupen todo el ancho */
		/*flex-direction: column;    /* Coloca una línea sobre la otra */
		/*justify-content: center;   /* Centra el texto verticalmente */
		
		/*align-items: center;       /* Centra el texto horizontalmente */
		/*text-align: center;        /* Asegura que el texto largo se centre */
		/*line-height: 1.2;          /* Reduce el interlineado de las dos líneas */
		/*padding: 10px 15px;        /* Controla el tamaño del botón con espaciado, no con altura fija */
		/*height: auto;              /* Elimina alturas fijas si las tenías */
	}	

	nav a {

		color: var(--text);

		text-decoration: none;

	}

	.hero {

		background: white;
		
		padding: 90px 0;

	}

	.hero-grid {

		display: grid;

		grid-template-columns:
			1.1fr
			.9fr;

		align-items: center;

		gap: 70px;

	}

	.eyebrow {

		color: var(--primary);

		text-transform: uppercase;

		font-size: 13px;

		/* font-weight: 700; */

		letter-spacing: 2px;

	}

	h1 {
		font-weight: normal;

		/*font-size: clamp(40px, 6vw, 68px);*/
		font-size: clamp(40px, 6vw, 61px);

		line-height: 1.08;

		margin: 15px 0 25px;
		
		/* Rompe la palabra en cualquier letra si no cabe */
		overflow-wrap: break-word; 
		word-break: break-word; 

	}

	h2 {

		font-weight: normal;

		font-size: 38px;

		line-height: 1.2;
		
		/* Rompe la palabra en cualquier letra si no cabe */
		overflow-wrap: break-word; 
		word-break: break-word; 

	}

	.hero p {

		font-size: 19px;

		color: var(--muted);

		max-width: 650px;

	}

	.hero-image img {

		width: 100%;

		max-height: 560px;

		object-fit: cover;

		border-radius: 30px;

		box-shadow: 0 25px 60px rgba(0,0,0,.12);

	}

	.hero-buttons {

		display: flex;

		gap: 15px;

		margin-top: 30px;

	}

	.btn {
		/* background: var(--primary); */
		
		background: #cf8351;

		display: inline-block;

		color: white;

		padding: 14px 25px;

		/* border-radius: 50px; */
		
		border-radius: 0; /* Cambia el botón redondo a cuadrado con esquinas rectas */

		text-decoration: none;

		/* font-weight: 600; */

		/* border: 2px solid var(--primary); */
		border: 2px solid #cf8351;

		cursor: pointer;

	}

	.btn:hover {

		background: #d8a62d;

		border-color: #d8a62d;

	}

	/*
	.btn:hover {

		background: var(--primary-dark);

		border-color: var(--primary-dark);

	}*/

	.btn-outline {

		background: transparent;

		color: var(--primary);

	}

	.btn-white {

		background: white;

		color: var(--primary);

		border-color: white;

	}
	
	.btn-orange {

		background: #cf8351; 

		color: black;

		border-color: #cf8351;

	}

	.btn-small {

		padding: 10px 18px;

	}

	.section {
		background: #acaa6f;
		padding: 90px 0;

	}

	.section-light {

		background: #8b8674;

	}

	.two-columns {

		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 80px;

	}

	.cards {

		display: grid;

		grid-template-columns:
			repeat(3, 1fr);

		gap: 25px;
		
		align-items: start; /* Evita que las celdas se estiren a la fuerza */

	}

	.card {

		/* background: #acaa6f; */
		
		background: white;

		padding: 35px;

		border-radius: var(--radius);

		box-shadow: 0 10px 30px rgba(0,0,0,.05);

	}

	.icon {

		font-size: 35px;

	}

	.card h3 {

		font-size: 22px;

	}

	.card p {

		color: var(--muted);

	}

	.section-title {

		 max-width: 700px;

		 margin-bottom: 45px;

	}

	.steps {

		display: grid;

		grid-template-columns:
			repeat(3, 1fr);

		gap: 30px;

	}

	.step {

		padding: 30px;

		border-left: 3px solid white;

	}

	.step span {

		color: var(--primary);

		/* font-weight: 700; */

	}

	.cta {

		padding: 90px 0;

		text-align: center;

		/* background: #9f6f6f; */
		
		/* color: white; */
		
		background: white;
		
		color: black;

	}

	.contact {

		display: grid;

		grid-template-columns: 1fr 1fr;

		gap: 80px;

	}

	.contact-data {

		font-size: 18px;

	}

	.footer {
		
		/* background: #b1ccc7; */

		/* color: white; */
		
		background: white;

		color: black;

		padding: 30px 0;

	}

	@media (max-width: 800px) {

		.nav {

			flex-direction: column;

			padding: 20px 0;

		}

		nav {

			flex-wrap: wrap;

			justify-content: center;

		}

		.hero {

			padding: 60px 0;

		}

		.hero-grid,
		.two-columns,
		.contact {

			grid-template-columns: 1fr;

			gap: 40px;

		}

		.cards,
		.steps {

			grid-template-columns: 1fr;

		}

		h1 {

			font-size: 42px;

		}

	}
	
	.mis-columnas {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr); /* Crea 5 columnas iguales */
	  gap: 15px; /* Espacio entre columnas */
	}
	
	.section_amarillo {
		background: #d8a62d;
		padding: 90px 0;

	}
	
	.section_naranjo {
		background: #cf8351;
		padding: 90px 0;

	}
	
	.section_turquesa {
		background: #a9cab7;
		padding: 90px 0;

	}
	
	.section_rosado {
		background: #c2797c;
		padding: 90px 0;

	}
	
	.section_contact {
		background: #8b8674;
		padding: 90px 0;

	}
	
	/*
	a {

		font-weight: normal;

		font-size: 38px;

		line-height: 1.2;

	}*/
	
	
	/* ícono de Instagram */
	/* Estilos base para el contenedor del enlace */
	.instagram-link {
		/*font-size: 32px;*/ /* Controla el tamaño si usas Font Awesome */
		font-size: 3px; /* Controla el tamaño si usas Font Awesome */
		color: #4a4a4a; /* Color gris neutro por defecto */
		text-decoration: none;
		transition: color 0.3s ease, transform 0.3s ease;
		display: inline-block;
	}

	/* Si usas la opción de SVG, controla el tamaño así */
	.instagram-icon {
		width: 32px;
		height: 32px;
		fill: #4a4a4a; /* Color del SVG */
		transition: fill 0.3s ease, transform 0.3s ease;
	}

	/* Efecto Hover (Cuando el usuario pasa el mouse) */
	.instagram-link:hover {
		color: #E1306C; /* Color rosa oficial de Instagram */
		transform: scale(1.1); /* Efecto de agrandado sutil */
	}

	.instagram-link:hover .instagram-icon {
		fill: #E1306C; /* Aplica el color rosa al SVG en hover */
	}
	
	/* ícono de whatsapp */
	.whatsapp-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: #FFF;
            border-radius: 50px;
            width: 60px;
            height: 60px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
            z-index: 1000;
            text-decoration: none;
            transition: all 0.3s ease;
        }

	/* Efecto al pasar el cursor (Hover) */
	.whatsapp-btn:hover {
		background-color: #20ba5a;
		transform: scale(1.1);
	}

	.float-wa{
        position:fixed;
        width:60px;
        height:60px;
        bottom:40px;
        right:40px;
        background-color:#25d366;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        font-size:30px;
        z-index:100;
    }

	/* agregar icono de correo en sitio web html css */	
	.email-icon {
	  font-size: 24px;
	  color: #333333;
	  text-decoration: none;
	  transition: color 0.3s ease;
	}

	.email-icon:hover {
	  color: #0066cc;
	}
	
	.contenedor-imagen {
		position: relative;
		display: inline-block;
	}

	.capa-protectora {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0); /* Totalmente transparente */
		z-index: 10;
	}
	
	/* Articulos, leer mas*/
	/* Ocultamos el contenido completo por defecto */
	.card .contenido-completo {
		display: none;
	}

	/* Cuando el artículo tenga la clase "abierto", mostramos el contenido */
	.card.abierto .contenido-completo {
		display: block;
		margin-top: 15px;
	}

	/* Estilo para el botón */
	.boton-leer-mas {
		background-color: #cf8351;
		color: white;
		border: none;
		padding: 8px 16px;
		cursor: pointer;
		border-radius: 4px;
		margin-top: 10px;
	}

	.boton-leer-mas:hover {
		background-color: #d8a62d;
	}
	/* Articulos, leer mas*/