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

    body {
      font-family: 'Open Sans', sans-serif;
      background-color: #f0cced;
      margin: 0;
      padding: 0;
    }

    .carousel-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      margin-top: 30px;
      flex-wrap: wrap;
      gap: 40px;
      width: 100%;
    }

    .carousel {
      flex: 1 1 480px;
      max-width: 520px;
      min-width: 320px;
      height: 380px;
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.10);
      background: #f1e9e9;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .carousel-text {
      flex: 1 1 380px;
      max-width: 520px;
      min-width: 320px;
      margin: 0;
      padding: 40px 30px;
      background: linear-gradient(135deg, #f59254 0%, #be2edbbe 100%);
      color: #0c0c0c;
      border: 3px solid #f7cac9;
      border-radius: 18px;
      box-shadow: 0px 6px 18px rgba(164, 69, 178, 0.10);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: justify;
      font-size: 16px;
      font-family: 'Gerorgia Serif';
    }

    @media (max-width: 1100px) {
      .carousel-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      .carousel, .carousel-text {
        width: 95vw;
        max-width: 98vw;
        min-width: 0;
        height: auto;
      }
    }


    .encabezado h1 {
      font-family: 'Bakersignet BT';
      font-size: 3rem;
      color: #a445b2;
      letter-spacing: 2px;
      text-align: center;
      margin: 0;
      padding: 0.5em 0;
      /* Efecto formal y padre: sombra doble y subrayado animado */
      text-shadow:
        2px 2px 8px #ffb6c1,
        0 4px 16px #e0e7ff;
      position: relative;
      overflow: hidden;
    }
    .encabezado h1::after {
      content: "";
      display: block;
      margin: 0 auto;
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, #ffb6c1 0%, #a445b2 100%);
      border-radius: 2px;
      margin-top: 12px;
      animation: underlineFade 2s infinite alternate;
    }
    @keyframes underlineFade {
      from { width: 60px; opacity: 0.7; }
      to { width: 120px; opacity: 1; }
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 100%; 
    }

    .slide {
      min-width: 100%;
      height: 100%; 
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 1.2rem; 
      font-weight: bold;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      border: none;
      padding: 5px; 
      cursor: pointer;
      font-size: 1.2rem; 
    }

    .left {
      left: 10px;
    }

    .right {
      right: 10px;
    }

    .indicators {
      text-align: center;
      margin-top: 10px;
    }

    .dot {
      height: 8px; 
      width: 8px;
      margin: 0 2px; 
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
    }

    

    .texto-central {
      font-family: 'Georgia', serif;
      background: linear-gradient(120deg, #e0e7ff 0%, #ffe0ec 100%);
      color: #6d2077;
      border-radius: 18px;
      box-shadow: 0px 4px 18px rgba(255, 126, 95, 0.10);
      border-left: 8px solid #a445b2;
      border-right: 8px solid #ff7e5f;
      max-width: 900px;
      margin: 35px auto;
      padding: 32px 28px;
      font-size: 1.18rem;
      line-height: 1.7;
      text-align: justify;
    }

    .texto-central b {
      font-family: 'fantasy Impact';
      color: #FF8D21;
      font-size: 25px;
    }

    .cartas {
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
      padding: 20px 0;
    }

    .carta {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 18px rgba(164, 69, 178, 0.10);
      width: 320px;
      max-width: 95vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      transition: transform 0.2s;
      border: 2px solid #ffb6c1;
    }
    .carta:hover {
      transform: translateY(-6px) scale(1.03);
      box-shadow: 0 8px 32px rgba(255,126,95,0.18);
    }
    .carta .imagen {
      width: 100%;
      aspect-ratio: 1/1;
      background-size: cover;
      background-position: center;
      border-bottom: 4px solid #a445b2;
    }
    .carta .texto {
      font-family: 'fantasy Impact';
      color: #a445b2;
      font-size: 1.18rem;
      font-weight: bold;
      margin: 18px 0 8px 0;
      text-align: center;
      padding: 0 12px;
      font-family: 'Roboto', sans-serif;
    }
    .carta .info-btn {
      font-family: 'Georgia', serif;
      background: linear-gradient(90deg, #ff7e5f 0%, #a445b2 100%);
      color: #fff;
      border: none;
      padding: 10px 22px;
      border-radius: 8px;
      font-size: 1rem;
      margin-bottom: 18px;
      margin-top: 8px;
      box-shadow: 0 2px 8px #a445b277;
      transition: background 0.2s;
      cursor: pointer;
    }
    .carta .info-btn:hover {
      background: linear-gradient(90deg, #a445b2 0%, #ff7e5f 100%);
    }

    /* Modal flotante */
    .modal-info {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0; top: 0; width: 100vw; height: 100vh;
      background: rgba(164, 69, 178, 0.25);
      justify-content: center;
      align-items: center;
    }
    .modal-info.active {
      display: flex;
    }
    .modal-content {
      font-family: 'Georgia', serif;
      text-align: center;
      background: linear-gradient(120deg, #fff 60%, #ffb6c1 100%);
      color: #a445b2;
      padding: 32px 28px;
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(255,126,95,0.18);
      max-width: 350px;
      text-align: center;
      font-size: 1.1rem;
      position: relative;
      animation: modalShow 0.3s;
    }
    @keyframes modalShow {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal-content b {
      font-family: 'Bakersignet Bt';
      color: #dd6312;
      font-size: 1.5em;
    }
    .close-modal {
      position: absolute;
      top: 10px; right: 16px;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #a445b2;
      cursor: pointer;
    }
    @media (max-width: 900px) {
      .cartas {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      .carta {
        width: 95vw;
        max-width: 400px;
      }
      .carousel-container {
        flex-direction: column;
        align-items: center;
      }
      .carousel {
        width: 90%;
        max-width: 100vw;
      }
    }