/* Paleta principal */
    :root {
      --rosa: #d73185;
      --rosapastel: #fcdce9;
      --blanco: #fff;
      --gris: #ececec;
      --sombra: 0 8px 24px rgba(215,49,133,0.13);
    }
    html, body { background: var(--rosapastel); margin:0; font-family: 'Montserrat', Arial, sans-serif; color:#34333b; }
    a { color: var(--rosa); text-decoration: none; transition: color 0.2s;}
    a:hover { color: #a61f5e; }

    /* Header */
    header {
      background: var(--rosa);
      color: var(--blanco);
      padding: 20px 0;
      text-align: center;
      box-shadow: var(--sombra);
      position: relative;
    }
    .logo img { max-height:100px; vertical-align:middle; }
    .contacto-rapido {
      margin-top: 10px;
      font-size: 1rem;
    }
    .contacto-rapido a {
      color: var(--blanco);
      margin: 0 10px;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .contacto-rapido a:hover { text-decoration: underline; }

    /* Secciones */
    .section {
      padding: 55px 0 40px 0;
      max-width: 1100px;
      margin: auto;
    }
    .section h2 {
      color: var(--rosa);
      font-size: 2.2rem;
      margin-bottom: 20px;
      letter-spacing: 1px;
      text-align: center;
      font-family: 'Montserrat', Arial, sans-serif;
      font-weight: 900;
    }
    .section.bg-white { background: var(--blanco); border-radius: 25px; box-shadow: var(--sombra);}
    .section.bg-rosa { background: var(--rosapastel); border-radius: 25px; box-shadow: var(--sombra);}
    .section p { text-align:center; font-size:1.15rem; }

    /* Quiénes somos */
    .quienes-content { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; }
    .quienes-img { flex: 1 1 220px; text-align:center; }
    .quienes-img img { border-radius: 20px; max-width: 210px; box-shadow: 0 8px 32px rgba(215,49,133,0.09);}
    .quienes-txt { flex:2 1 340px; }

    /* Cursos/Servicios */
    .cursos-grid { display: flex; flex-wrap:wrap; gap: 30px; justify-content:center;}
    .curso-card {
      background: var(--blanco);
      border-radius: 16px;
      box-shadow: var(--sombra);
      flex:1 1 300px;
      max-width:330px;
      padding:30px 22px 22px 22px;
      text-align:center;
      position:relative;
      min-width:260px;
    }
    .curso-card i {
      color: var(--rosa);
      font-size: 2.3rem;
      margin-bottom:12px;
    }
    .curso-card h4 { color:var(--rosa); margin-bottom: 10px; }
    .curso-card p { font-size: 1.07rem; color:#434252; }

    /* Galería */
    .gallery-grid { display: flex; gap:18px; flex-wrap: wrap; justify-content:center; }
    .gallery-grid a { display:block; border-radius:14px; overflow:hidden; box-shadow: var(--sombra);}
    .gallery-grid img { width:170px; height:120px; object-fit:cover; transition: transform .25s;}
    .gallery-grid a:hover img { transform: scale(1.07); }

    /* Por qué elegirnos */
    .why-grid {
      display: flex;
      flex-wrap:wrap;
      gap:22px;
      justify-content: center;
    }
    .why-card {
      background: var(--rosa);
      color: var(--blanco);
      border-radius: 16px;
      box-shadow: var(--sombra);
      flex:1 1 240px; min-width:210px;
      padding: 24px 15px;
      text-align:center;
    }
    .why-card i { font-size: 2.1rem; margin-bottom:10px; color: var(--blanco);}
    .why-card h5 { margin-bottom: 9px; font-size:1.14rem; }

    /* Redes sociales */
    .redes-sociales {
      display: flex; flex-wrap:wrap; justify-content: center; gap: 16px;
      margin-top: 12px; margin-bottom: -10px;
    }
    .red-social-btn {
      background: var(--rosa);
      color: var(--blanco);
      border-radius: 40px;
      padding: 12px 22px;
      font-size: 1.16rem;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 5px 14px rgba(215,49,133,0.12);
      font-weight: 600;
      transition: background 0.2s, transform 0.15s;
    }
    .red-social-btn:hover {
      background: #ae2663;
      color: #fff;
      transform: scale(1.07);
    }

    /* Formulario */
    .form-contacto { max-width: 470px; margin:40px auto 0 auto; padding:30px; background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra);}
    .form-contacto input, .form-contacto textarea {
      width: 100%;
      border: 1px solid #e2c5d7;
      border-radius: 8px;
      padding:12px 10px;
      margin-bottom: 14px;
      font-size: 1.05rem;
      font-family: inherit;
      background: #f8f8f8;
      transition: border .2s;
    }
    .form-contacto input:focus, .form-contacto textarea:focus { border-color: var(--rosa); outline: none;}
    .form-contacto button {
      background: var(--rosa);
      color: #fff;
      border: none;
      border-radius: 30px;
      padding: 12px 30px;
      font-size: 1.13rem;
      font-weight: 700;
      box-shadow: 0 3px 9px rgba(215,49,133,0.15);
      cursor:pointer; transition:background .2s, transform .15s;
    }
    .form-contacto button:hover { background: #ae2663; transform: scale(1.04);}
    /* Mapa */
    .map-ubicacion { border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); margin: 0 auto; max-width: 600px; }
    /* Footer */
    footer { background: var(--rosa); color: var(--blanco); text-align:center; padding:30px 15px 15px 15px; margin-top:40px; border-radius: 16px 16px 0 0; font-size:1.07rem;}
    /* WhatsApp Floating */
    .whatsapp-fancy {
      position: fixed;
      bottom: 22px;
      left: 22px;
      background-color: #25d366;
      color: white;
      padding: 13px 22px;
      font-size: 1.17rem;
      font-weight: bold;
      border-radius: 50px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 9999;
      transition: background-color 0.3s, transform 0.2s;
    }
    .whatsapp-fancy:hover { background-color: #1ebe5d; transform: scale(1.05);}
    /* Responsive */
    @media (max-width: 820px) {
      .quienes-content, .cursos-grid, .why-grid { flex-direction:column; align-items:center; }
      .gallery-grid { gap:8px;}
      .section { padding: 38px 8px 30px 8px;}
    }
    @media (max-width: 580px) {
      .gallery-grid img { width:110px; height:75px;}
      .section h2 { font-size: 1.35rem; }
    }