:root {
      /* Colores tomados del logo */
      --primary: #2a5aa2;
      /* azul principal */
      --primary-700: #1b4a88;
      /* azul profundo */
      --primary-900: #0e2f59;
      /* casi marino */
      --spark: #7fb6ff;
      /* brillo inspirado en la ‘estrella’ */
      --ink: #0f172a;
      --white: #fff;
      --muted: #cfe2ff;
      --neon: #cfe2ff;
      --radius: 22px;
      --shadow: 0 22px 50px rgba(9, 29, 56, .35);
  }

  * {
      box-sizing: border-box
  }

  html,
  body {
      height: 100%
  }

  body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--ink);
      background: linear-gradient(180deg, #f7fbff, #ecf4ff);
  }

  .wrap {
      max-width: 500px;
      margin: 0 auto;
      padding: 18px
  }

  .card {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      color: var(--white);
      background: radial-gradient(700px 320px at -10% -20%, rgba(127, 182, 255, .35), transparent 55%), linear-gradient(180deg, #255396, #0162b6);
      border: 1px solid rgba(255, 255, 255, .08);
  }

  .btn {
      border: none;
      color: black;
      padding: 5px 28px;
      cursor: pointer;
      border-radius: 5px;
      margin-right: 10px;
      background: white;
  }

  /* Header con logo + copy */
  .head {
      padding: 18px 18px 8px 18px;
      position: relative
  }

  .brand {
      display: flex;
      align-items: center;
      gap: 12px
  }

  .brand img {

      height: 62px;
      object-fit: contain;
      border-radius: 14px;
      background: #fff;
      padding: 10px
  }

  .brand h1 {
      margin: 0;
      font-size: 24px;
      letter-spacing: .02em;
      line-height: 1.1
  }

  .sub {
      margin: .25rem 0 0 0;
      color: var(--muted);
      font-weight: 600
  }

  /* Spark (estrellita del logo como acento) */
  .spark {
      position: absolute;
      right: 18px;
      top: 18px;
      width: 70px;
      height: 70px;
      opacity: .45;
      filter: drop-shadow(0 4px 10px rgba(127, 182, 255, .45));
  }

  /* Hero con onda y foto */
  .hero {
      position: relative;

  }

  .panel {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .16);
      background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
  }

  .heroImg {
      position: relative;


      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .heroImg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
  }

  .heroImg::after {
      content: "";
      position: absolute;
      inset: 0;

      z-index: 2;
  }


  /* Onda inferior */
  .wave-wrap {
      position: relative;
      width: 100%;

      /* alto visible del bloque */
  }

  .wave {
      position: absolute;
      inset: 0;
      /* ocupa todo el contenedor */
      width: 100%;
      height: 100%;
      display: block;
  }

  .wave-text {
      position: absolute;
      inset: 0;
      /* centra sobre el SVG */
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-weight: 600;
      text-align: center;
      pointer-events: none;
      /* para que el SVG reciba clicks si los hay */
  }

  /* Chips de frecuencia */
  .chips {
      display: flex;
      gap: 10px;

      padding: 10px
  }

  .chip {
      flex: 1 1 110px;
      text-align: center;
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 900;
      color: #1d4680;
      border: 1px solid rgba(232, 242, 255, .55);
      background: #ffff;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  }

  /* Servicios */
  .services {
      padding: 12px 18px 4px 18px;
      display: grid;
      gap: 6px;
      margin-bottom: 15px;
  }

  .services h3 {
      margin: 0 0 6px;
      font-size: 16px;
      color: #e7f1ff
  }

  .svc {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px
  }

  .svc .dot {
      color: var(--spark);
  }

  .shell {
      max-width: 420px;
      margin: 0 auto;
      padding: 22px
  }

  .phone {
      background: linear-gradient(180deg, var(--panel), var(--panel-2));
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 18px;
      position: relative;
      overflow: hidden;
  }

  .line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
      margin: 6px 0 10px
  }

 .list i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;           /* 🔹 Fondo blanco */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 20px;
  
  min-width: 42px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ✨ Hover */
.list i:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* 🎨 Colores individuales */
.fa-user,
.fa-phone {
  color: #0162b6;
}

.fa-facebook {
  color: #1877f2;
}

.fa-instagram {
  color: #e4405f;  /* sólido visible sobre blanco */
}

.fa-tiktok {
  color: #010101;  /* logo negro clásico */
}

.fa-linkedin {
  color: #0077b5;
}

.fa-globe {
  color: #009688;
}

.fa-location-dot {
  color: #e53935;
}

.fa-share {
  color: #0461b4;
}

.fa-whatsapp {
  color: #25d366;
}
  .row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px
  }

  .row:hover {
      background: rgba(255, 255, 255, .04)
  }

  .label {
      font-weight: 800
  }

  .sub {
      color: var(--muted);
      font-size: 12px
  }

  .ext {
      opacity: .8
  }

  a.row {
      text-decoration: none;
      color: inherit
  }

  /* Botón Guardar */
  .save {
      display: grid;
      justify-items: center;
      margin: 16px 0 8px
  }

  .save a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 18px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      font-weight: 900;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 10px 26px rgba(255, 131, 83, .35)
  }

  .save a:focus-visible {
      outline: 4px solid var(--ring)
  }

  .qr-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 16px;
      padding: 16px;
  }

  /* Texto */
  .qr-text h3 {
      margin: 0 0 6px;
      font-size: 20px;
      color: #1b4a88;
      /* pon tu color/variable aquí */
  }

  .qr-text p {
      margin: 0;
      color: #2a5aa2;
      /* pon tu color/variable aquí */
      font-weight: 300;
      text-align: center;
  }

  /* === QR (tu estilo, pero sin top/right/position) === */
  .qr-top {
      /* QUITAMOS: position/top/right */
      z-index: 5;
      display: block;

      width: var(--qr-size);
      height: var(--qr-size);

      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgb(13 30 43);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
      padding: 15px;

      transition: transform .15s ease;
  }

  .qr-top img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
  }

  .qr-top:hover {
      transform: scale(1.04);
  }

  /* Responsive: apilar en móvil */


  .qr-top:hover {
      transform: scale(1.04);
  }

  footer {
      color: #93a4b8;
      text-align: center;
      font-size: 12px;
      margin: 12px 0 0;
      padding: 10px 0 20px 0;
  }

  @media (max-width:420px) {
      .contact {
          grid-template-columns: 1fr;
          justify-items: center;
          text-align: center
      }
  }



  /*nuevo todo*/

  /* 🌴 Sección de valores */
  .valores {
      text-align: center;
      background: #ffffff;
      /* Tu color azul de fondo */
      border-radius: 20px;
      max-width: 900px;
      /* 🔹 Centrado y límite de ancho */
      box-sizing: border-box;
      margin: 0px auto 40px auto;
      /* 🔹 margen inferior agregado */

      color: #224d8c;
      /* Asegura que los paddings cuenten bien */
  }

  .valores-titulo {
      font-family: 'Baloo 2', cursive;
      color: #0062b8;
      font-size: 28px;
      padding: 20px 0 20px 0;
      margin-bottom: 0px;
  }

  .titulo-serv {
      font-weight: bold;
  }

  /* 🌈 Rejilla de tarjetas */
  /* 🌍 Rejilla adaptable */
  .valores-grid-serv {
      display: grid;

      gap: 20px;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
  }

  /* 💻 En pantallas más grandes (web) muestra dos columnas */
  @media (min-width: 768px) {
      .valores-grid-serv {
          grid-template-columns: repeat(2, 1fr);
      }
  }


  /* 🌈 Rejilla de tarjetas */
  .valores-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      /* 🔹 Espaciado entre tarjetas */
      justify-items: center;
      padding: 20px 0 20px 0;
      /* 🔹 Espacio lateral para no pegarse al borde */
      box-sizing: border-box;
  }

  .valores-grid img {
      width: 90px;
      height: auto;
      margin-bottom: 10px;
      object-fit: contain;
      filter: none !important;
      /* 🔹 Elimina cualquier filtro azul o gris */
      mix-blend-mode: normal !important;
      /* 🔹 Asegura colores originales */
      opacity: 1 !important;
      /* 🔹 Sin transparencia */
  }

  /* 💎 Tarjeta */
  .valor-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      text-align: center;
      padding: 20px 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
      max-width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: solid #0062b8;
  }

  .valor-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  /* 🖼️ Imagen */
  .valor-card img {
      width: 90px;
      height: auto;
      margin-bottom: 12px;
  }

  /* 🩵 Texto */
  .valor-card p {
      font-family: 'Baloo 2', cursive;
      color: #0d47a1;
      font-size: 18px;
      line-height: 1.2;
      margin: 0;
  }

  /* 💎 Tarjeta */
  .valor-card-serv {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      text-align: center;
      padding: 20px 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 100%;
      max-width: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: solid #0062b8;
  }

  .valor-card-serv:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  /* 🖼️ Imagen */
  .valor-card-serv img {
      width: 90px;
      height: auto;
      margin-bottom: 12px;
  }

  /* 🩵 Texto */
  .valor-card-serv p {
      font-family: 'Baloo 2', cursive;
      color: #0062b8;
      font-size: 18px;
      line-height: 1.2;
      margin: 0;
  }

  /* 📱 Responsive */
  @media (max-width: 600px) {
      .valores-grid {

          padding: 20px;
      }
  }

  /* ====== Misión / Visión ====== */
  .mv {
      display: grid;

      gap: 16px
  }

  .mvv {

      grid-template-columns: 1fr 1fr;
      gap: 16px
  }

  .mvv {
      background: #ffffff;
      color: #0062b8;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 20px;
      padding: 18px;
      margin-bottom: 20px;
  }

  .mvvv {
      background: #ffffff;
      color: #0062b8;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 20px;
      padding: 18px;
      margin-top: -30px;
  }

  .mv .item {
      background: #0062b8;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 20px;
      padding: 18px
  }

  .mv .item h3 {
      margin: 6px 0;
      color: var(--gold)
  }

  @media (max-width:860px) {
      .mv {
          grid-template-columns: 1fr
      }
  }


  /* === CONTENEDOR GENERAL === */
  .social-float {
      position: fixed;
      right: 25px;
      bottom: 30px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 90;
  }

  /* === ESTILO BASE DE LOS ICONOS === */
  .social-float a {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 26px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
      text-decoration: none;
      border: 2px solid #fff;
      transition: transform 0.25s ease, box-shadow 0.25s ease;

  }

  .social-float a:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  }



  .wa {
      background: linear-gradient(180deg, #25d366, #1ebe5d);
      /* verde whatsapp */
  }

  .comp {
      background: linear-gradient(180deg, #0362b5, #0362b5);
      /* verde whatsapp */
  }