@import url('https://fonts.googleapis.com/css2?family=Cactus+Classical+Serif&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #eef4f7; /* Suave y calmante */
  color: #333;
}

.logo {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

h1, h3 {
  font-family: 'Montserrat', sans-serif;
}

h2 {
  font-family: 'Poppins', sans-serif;
}

header {
  background-color: #b8e0d2;
  color: #1d3557;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: #89c2d9;
  text-align: center;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

main {
  width: 100%;
  padding: 0;
}

section {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
}

section > h2 {
  font-size: 2em;
  font-weight: bolder;
  color: #222;
}
.mensaje-calmante {
  background-color: #f0f8ff;
  border-left: 6px solid #5fa8d3;
  padding: 20px 25px;
  margin: 30px auto;
  max-width: 700px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-style: italic;
  font-size: 1.1em;
  color: #1d3557;
}

/* Sección general de daños */
.daños--section {
  background-color: #d0e7d2;
  padding: 40px;
  text-align: center;
}

.daños--section h2 {
  font-size: 2.2em;
  color: #1d3557;
  margin-bottom: 30px;
}

/* Contenedor de cada grupo de daño */
.daño-item {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: left;
}

/* Columna del texto */
.daño-texto {
  flex: 1 1 300px;
  padding: 20px;
}

.daño-texto h3 {
  color: #457b9d;
  margin-bottom: 10px;
}

.daño-texto ul {
  padding-left: 20px;
  list-style: disc;
}

/* Columna de imagen */
.daño-img {
  flex: 1 1 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
}

.daño-img img {
  width: 350px;
  height: auto;
  border-radius: 10px;
  margin: 20px;
}

/* Responsive para celulares */
@media (max-width: 768px) {
  .daño-item {
    flex-direction: column;
    text-align: center;
  }

  .daño-img {
    justify-content: center;
  }
}
.lista-sencilla {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 600px;
  text-align: left;
}

.lista-sencilla li {
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
  padding: 12px 16px;
  border-left: 5px solid #5fa8d3;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Colores calmantes */
.anxiety {
  background-color: #c8e2f5; /* Celeste pastel */
}
section{
  position: relative;
}

.sintomas--section {
  background-color: #f5ced0; /* Rosa muy claro */
}

.consejos--section {
  background-color: #56a292; /* Verde claro relajante */
}

.daños--section {
  background-color: #92bf9f; /* Suave durazno */
}

.video--section {
  background-color: #f2f7fb; /* Gris azulado claro */
}

.testimonios--section {
  background-color: #a7ebc9; /* Beige claro */
}


.recursos--section {
  background-color: #e0ecf4; /* Azul muy pálido */
}

.imagen {
  width: 100%;
  max-width: 150px;
  display: block;
  margin: 20px auto;
  border-radius: 10px;
}

.video-container {
  text-align: center;
}

button {
  padding: 10px 15px;
  background-color: #5fa8d3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #468faf;
}

.tarjeta {
  background-color: #ffffff;
  border-left: 5px solid #a2d2ff;
  padding: 15px;
  margin-top: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

footer {
  background-color: #b8e0d2;
  text-align: center;
  padding: 20px ;
  font-size: 1em;
  color: #111;
  font-family: "Cactus Classical Serif";
  font-weight: bold;
}
.img--section{
  width: 350px;
  position:absolute;
  z-index: 4;
  bottom:0%;
  right: 20%;
}
.test--section {
  background-color: #dceef2;
  padding: 30px;
  border-radius: 10px;
}

.test--section h2 {
  text-align: center;
  color: #174a59;
  margin-bottom: 20px;
}

.pregunta {
  background-color: #ffffff;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border-left: 5px solid #5fa8d3;
}

.pregunta p {
  font-weight: bold;
  margin-bottom: 10px;
}

.pregunta label {
  display: inline-block;
  margin-right: 15px;
}
.form--back{
  background-color: #5fa8d3;
  width: 100%;
  margin:auto;
  margin-top: 40px;
  padding:3% 2%;
  border-radius:8px;
}