* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}

html {
  scroll-behavior: smooth;
}

body {
    font-family: Century Gothic, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background: white url('../img/fondo.jpg') no-repeat top left fixed;
    background-size: 1500px;
    font-size:20px;
}

p {
	margin:0px 0 1px 0;
	padding:0;
	font-size:18px;
	color:#333;
	font-weight:normal;
}


em {
  display: block;      /* Para que pueda ocupar todo el ancho y alinearse */
  text-align: right;   /* Alinea el texto a la derecha */
  font-style: italic;  /* Asegura la cursiva */
  color: #222;
}

strong {
	font-weight:bold;
	color:#666;
}

b {
	font-weight:bold;
	color:#333;
}

h1 {
	border-bottom:1px solid #999;
	margin:0px 0 1px 0;
	padding:0 20px 1px 0px;
	font-size:30px;
	color:#666;
	font-weight:normal;
}

h2 {
	border-bottom:1px solid #999;
	margin:0px 0 20px 0;
	padding:0 20px 1px 2px;
	font-size:25px;
	color:#cc0099;
	font-weight:normal;
}

h3 {
	border-bottom:1px solid #999;
	margin:0px 0 1px 0;
	padding:0 20px 1px 2px;
	font-size:22px;
	color:#cc0099;
	font-weight:normal;
	display: block;
}
h3#ancla {
  scroll-margin-top: 80px;
}
h3#ancla2 {
  scroll-margin-top: 80px;
}
h3#ancla3 {
  scroll-margin-top: 80px;
}
h4 {
	border-bottom:1px solid #999;
	margin:0px 0 1px 0;
	padding:0 20px 1px 2px;
	font-size:20px;
	color:#cc0099;
	font-weight:normal;
}

h5 {

	margin:0px 0 1px 0;
	padding:1px 1px 1px 1px;
	font-size:17px;
	color:#eee;
	font-weight:normal;
}



uli {
	font-size:18px;
	list-style-image:url(../img/iconos/list-check.png);
	list-style-position:inside;
}

uli li {
	margin-bottom:10px;
}


.salto {
  clear: both;   /* evita que los elementos flotantes se metan */
  height: 20px;  /* separación vertical */
}

img.mediana {
    width: 35%;
    height: auto;
	max-width: 100%;
	float:right;
	margin:0px 0 20px 40px;
	border:1px solid #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 12px;
	box-shadow: 0px 0px 0px #666;
}


img.pequeña {
    width: 30%;
    height: auto;
	max-width: 100%;
	float:center;
	margin:10px 10px 10px 10px;
	border:1px solid #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 12px;
	box-shadow: 0px 0px 0px #666;
}


img.grande {
    width: 100%;
    height: auto;
	max-width: 100%;
	float:right;
	margin:20px 0 20px 0px;
	border:1px solid #fff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 12px;
	box-shadow: 0px 0px 0px #666;
}

.correo-img {
  max-width: 300px;
  display: block;
  margin: 0 auto;
}


/* ======== Estilos para el cuerpo ======== */

main {
    margin-top: 250px;
    font-family: Century Gothic, Helvetica, Arial, sans-serif;
  background: linear-gradient(to bottom, white 0%, white 5%, #f9f9f9 10%, #f5f5f5 100%);
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); /* Sombra hacia arriba */
  padding: 20px;
}

section {
    padding: 60px 5%;}

.normal {
	width:100%;
	float:left;
	padding: 10px 5%;
	margin:20px 0 0px 0; 
	font-size:18px;  
}

.normal .boton {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    margin: 10px 10px 0 0;
    transition: all 0.3s ease; /* Suaviza las transiciones */
}

.normal .boton:hover {
    background-color: #555;  /* Cambia a un gris más claro */
    transform: scale(1.03);  /* Aumenta un poco el tamaño */
}






.contenedor-columnas {
  width: 100%;
}

/* Clearfix */
.contenedor-columnas::after {
  content: "";
  display: block;
  clear: both;
}

.columna {
  float: left;
  width: 160px;      /* ancho fijo */
  height: auto;
  margin: 0px 20px 0 0;
  background: none;
  text-align: left;
  padding: 0px 0;
  box-sizing: border-box;
  font-size:17px;  
}

.columna li {
  list-style: none;       /* sin viñeta por defecto */
  margin: 7px 10px 0px 10px; 
  padding-left: 1.3em;    /* espacio para el icono */
  position: relative;
  border-bottom: 1px solid #ccc;
}
.columna li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #41a746;
  line-height: 1;
}


/* te chivatea donde estan los margenes */
.col { outline:0px solid red; }
.col li { outline:0px solid blue; }





.bienvenida {
    display: flex;
    justify-content: space-between;
    align-items: top;
    gap: 40px;}


.bienvenida .texto {
    width: calc(50% - 20px);
}


.bienvenida .imagen {
    width: calc(50% - 20px);
}


.bienvenida img {
    width: 100%;
    border-radius: 12px;
}


.servicios {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    padding: 10px 5% 50px 5%;
}


.servicio img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 10px;
}


.imagen-destacada img {
    width: 100%;
    border-radius: 12px;
}


.cta {
    background-color: #eee;
    text-align: center;
    border-radius: 1px;
}


.cta .boton {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
    transition: all 0.3s ease; /* Suaviza las transiciones */
}

.cta .boton:hover {
    background-color: #555;  /* Cambia a un gris más claro */
    transform: scale(1.05);  /* Aumenta un poco el tamaño */
}










/* ======== Responsive para móviles ======== */
@media (max-width: 768px) {

    img.pequeña {
        width: 100%;
	margin:20px 0 20px 0px;
    }

    img.mediana {
        width: 100%;
	margin:20px 0 20px 0px;
    }



    .bienvenida {
        flex-direction: column;
        text-align: left;}


.bienvenida .imagen, 
    .bienvenida .texto {
        flex: none;
        width: 100%;}


.bienvenida img {
        width: 100%;}

.servicios {
        flex-direction: column;
        gap: 40px;}


.servicio img {
        width: 100%;}


.imagen-destacada img {
        width: 100%;}
































.imagen-destacada img {
        width: 100%;}


/* Imagen destacada a ancho completo */
.imagen-destacada {
    width: 100%;
    margin: 0;
    padding: 0;}


.imagen-destacada img {
    width: 100%;
    display: block;
    border-radius: 0;}


/* Main sin padding para ancho completo */

body {

    background: white url('../img/fondo2.jpg') no-repeat top left fixed;
    background-size: 750px;
}