/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: pink;
  color: black;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #E6CCF2;
    }

    header {
      background-color: #C49EDB;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 2rem;
    }

    .container {
      display: flex;
      gap: 20px;
      padding: 40px 60px;
      max-width: 1200px;
      margin: 30px auto;
    }

    .col-70 {
      flex: 0 0 70%;
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 8px;
      min-height: 300px;
    }

    .col-30 {
      flex: 0 0 30%;
      background-image: url('https://i.pinimg.com/736x/12/f3/f8/12f3f8411dba2d9e2c029f0759173a18.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 20px;
      border-radius: 8px;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Recuadro para el texto */
    .col-30 .content-box {
      background-color: rgba(255, 255, 255, 0.85);
      padding: 16px 20px;
      border-radius: 8px;
      max-width: 90%;
      text-align: center;
      color: #5A3370; /* mismo color del sitio */
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    
    .menu {
      display: flex;
      gap: 20px;
      padding-bottom: 20px;
      border-bottom: 2px solid #C49EDB;
    }
    
    .menu a {
      text-decoration: none;
      color: #5A3370;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 6px;
      transition: background-color 0.3s, color 0.3s;
    }
    
    .menu a:hover {
      background-color: #C49EDB;
      color: white;
    }

    
    .social {
      margin-top: 40px;
      text-align: center;
    }

    .social p {
      font-size: 1.2rem;
      color: #5A3370;
      margin-bottom: 16px;
    }

    .social a {
      margin: 0 12px;
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .social a:hover {
      transform: scale(1.15);
    }

    .social svg {
      width: 40px;
      height: 40px;
      fill: #5A3370;
      transition: fill 0.3s;
    }

    .social a:hover svg {
      fill: #C49EDB;
    }
    

    /* Para ajustar altura menor al total */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
      .col-70, .col-30 {
        flex: 0 0 auto;
      }
    }