:root{
      --primary:#1848e7;
      --accent:#f1772e;
      --bg:#ffffff;
      --muted:#7a7a7a;
      --maxw:1100px;
      --card-radius:14px;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    body{margin:0;background:linear-gradient(180deg,#fbfdff 0%,#f7f9ff 100%);color:#333;overflow-x:hidden}
    .container{max-width:var(--maxw);margin:0 auto;padding:24px}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
    h1{margin:0;font-size:1.5rem}
    main{background:linear-gradient(180deg,#fbfdff 0%,#f7f9ff 100%);margin: auto}

    .menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer}
    .menu-toggle span{width:25px;height:3px;background:var(--primary);border-radius:2px}
    .side-menu{position:fixed;top:0;right:-200px;width:200px;background:#fff;box-shadow:-4px 0 12px rgba(0,0,0,0.1);height:auto;padding:20px;transition:right 0.3s ease-in-out;z-index:1000;display:flex;flex-direction:column;gap:12px}
    .side-menu.open{right:0}
    .side-menu a{color:var(--primary);font-weight:600;text-decoration:none}

    .hero{display:flex;gap:20px;align-items:center;margin:55px 0 28px 0;padding:28px;border-radius:12px;background:linear-gradient(90deg,#fff 0%,#f7fbff 100%);box-shadow:0 6px 24px rgba(24,72,231,0.08)}
    .hero img{width:46%;border-radius:12px;object-fit:cover}
    .hero .copy{flex:1}
    .btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
    .btn-primary{background:var(--primary);color:#fff}
    .btn-accent{background:var(--accent);color:#fff}

    .sections{display:flex;flex-direction:column;gap:18px;margin-top:18px}
    .section{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;padding:18px;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.04)}
    .section img{width:100%;height:220px;object-fit:cover;border-radius:10px}
    .section .text{padding:8px}
    .section h2{margin:0 0 8px 0}
    .section p{margin:0 0 12px;color:var(--muted)}


    @media (max-width:900px){
      
      .menu-toggle{display:flex}
      .hero{flex-direction:column}
      .hero img{width:100%}
      .section{grid-template-columns:1fr}
      .section img{height:180px}
    }
    /*compartir*/

.contenedor-boton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.boton-compartir-sitio {
    background-color: #1848e7; /* azul */
    color: white;
    text-decoration: none;
    padding: 15px 15px;
    border-radius: 8px;
    font-size: 18px;
    letter-spacing: 1px;
    width: 220px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

@media(max-width:650px){
   .boton-compartir-sitio{
      font-size: 14px;
   }
}

.boton-compartir-sitio:hover {
    background-color: #2956e9;
    transform: scale(1.05);
}

.img-share {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 10px;
    filter: brightness(0) invert(1); /* blanco, si es PNG oscuro */
}

.menu-compartir-sitio {
     display: none;
     position: absolute;
     top: 100%;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     padding: 10px;
     width: 220px;
     z-index: 9000;
     flex-direction: column;
     gap: 10px;
 }

 .menu-compartir-sitio .a-compartir-sitio,
 .menu-compartir-sitio button {
     text-decoration: none;
     color: #333;
     background: none;
     border: none;
     padding: 10px;
     text-align: left;
     width: 100%;
     cursor: pointer;
     font-size: 16px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: background 0.2s;
 }

 .menu-compartir-sitio .a-compartir-sitio:hover,
 .menu-compartir-sitio button:hover {
     background: #f0f0f0;
 }