/* =========================================================
   CYBERGUARD DEV
   Diseño limpio y minimalista
   Blanco / gris / negro / azul
   ========================================================= */

:root {

  --background: #f6f7f9;

  --white: #ffffff;

  --black: #101828;

  --text: #253247;

  --muted: #6f7b8e;

  --border: #e5e9ef;

  --blue: #196cf2;

  --blue-dark: #0e52c2;

  --blue-soft: #eaf2ff;

  --green: #1fbd5a;

  --green-dark: #159a47;

  --facebook: #1877f2;

  --shadow:
    0 18px 50px rgba(15, 23, 42, 0.08);

}


/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--white);

  color: var(--text);

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

}


img {

  display: block;

  max-width: 100%;

}


a {

  text-decoration: none;

  color: inherit;

}


button,
input,
select,
textarea {

  font: inherit;

}


.container {

  width:
    min(
      1200px,
      calc(100% - 40px)
    );

  margin-inline: auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(255, 255, 255, 0.96);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid rgba(16, 24, 40, 0.06);

}


.nav {

  min-height: 76px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 28px;

}


.brand {

  display: inline-flex;

  align-items: center;

}


.brand img {

  width: 230px;

  height: 52px;

  object-fit: contain;

  object-position: left center;

}


.nav-links {

  display: flex;

  align-items: center;

  gap: 30px;

  color: #39465c;

  font-size: 14px;

  font-weight: 650;

}


.nav-links a {

  position: relative;

  padding:
    28px 0 24px;

}


.nav-links a:hover,
.nav-links a.active {

  color: var(--blue);

}


.nav-links a.active::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 14px;

  height: 2px;

  border-radius: 10px;

  background: var(--blue);

}


.portal-button {

  justify-self: end;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 44px;

  padding:
    5px 15px 5px 6px;

  background: #07172d;

  color: #ffffff;

  border-radius: 999px;

  font-size: 13px;

  font-weight: 750;

  box-shadow:
    0 8px 22px rgba(6, 20, 43, 0.15);

}


.portal-button img {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  object-fit: cover;

  object-position: left center;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  padding:
    70px 0 80px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 85% 40%,
      rgba(25, 108, 242, 0.08),
      transparent 34%
    ),

    #ffffff;

}


.hero-grid {

  display: grid;

  grid-template-columns:
    0.88fr 1.12fr;

  gap: 58px;

  align-items: center;

}


.hero-copy {

  max-width: 560px;

}


.eyebrow {

  display: inline-block;

  margin-bottom: 18px;

  color: var(--blue);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.13em;

}


.hero h1 {

  margin:
    0 0 24px;

  color: var(--black);

  font-size:
    clamp(
      48px,
      5vw,
      70px
    );

  line-height: 1.02;

  letter-spacing:
    -0.055em;

}


.hero h1 span {

  color: var(--blue);

}


.hero-text {

  max-width: 540px;

  margin:
    0 0 30px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.75;

}


.hero-actions {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}


.button {

  min-height: 48px;

  padding:
    0 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border: 0;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;

}


.button:hover {

  transform:
    translateY(-2px);

}


.button svg {

  width: 19px;

  height: 19px;

}


.button-whatsapp {

  background: var(--green);

  color: #ffffff;

  box-shadow:
    0 10px 20px rgba(31, 189, 90, 0.18);

}


.button-whatsapp:hover {

  background:
    var(--green-dark);

}


.button-facebook {

  background:
    #ffffff;

  color:
    #1e2a3b;

  border:
    1px solid var(--border);

  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.06);

}


.facebook-icon {

  width: 21px;

  height: 21px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--facebook);

  color: #ffffff;

  font-family: Arial, sans-serif;

  font-weight: 900;

}


.hero-mini-info {

  margin-top: 34px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

}


.hero-mini-info div {

  padding: 15px 15px;

  border:
    1px solid var(--border);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.92);

}


.hero-mini-info strong {

  display: block;

  margin-bottom: 4px;

  color: var(--black);

  font-size: 14px;

}


.hero-mini-info span {

  display: block;

  color: var(--muted);

  font-size: 11px;

}


.hero-visual {

  display: flex;

  align-items: center;

  justify-content: center;

}


.hero-visual img {

  width: 100%;

  max-width: 730px;

  height: auto;

  border-radius: 24px;

  box-shadow: var(--shadow);

}


/* =========================================================
   GENERALES
   ========================================================= */

.section {

  padding:
    84px 0;

}


.section-soft {

  background:
    var(--background);

}


.section-heading {

  max-width: 720px;

  margin:
    0 auto 38px;

  text-align: center;

}


.section-heading h2,
.tiqora-copy h2,
.quote-copy h2 {

  margin:
    0 0 12px;

  color:
    var(--black);

  font-size:
    clamp(
      32px,
      4vw,
      46px
    );

  line-height: 1.08;

  letter-spacing:
    -0.04em;

}


.section-heading p,
.tiqora-copy p,
.quote-copy p {

  margin: 0;

  color:
    var(--muted);

  font-size: 16px;

  line-height: 1.7;

}


/* =========================================================
   SERVICIOS
   ========================================================= */

.services-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;

}


.service-card {

  min-height: 230px;

  padding: 26px 24px;

  background:
    #ffffff;

  border:
    1px solid var(--border);

  border-radius: 18px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.service-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow);

}


.service-number {

  width: 44px;

  height: 44px;

  margin-bottom: 30px;

  display: grid;

  place-items: center;

  color:
    var(--blue);

  background:
    var(--blue-soft);

  border-radius: 12px;

  font-size: 13px;

  font-weight: 800;

}


.service-card h3 {

  margin:
    0 0 10px;

  color:
    var(--black);

  font-size: 18px;

}


.service-card p {

  margin: 0;

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.65;

}


/* =========================================================
   TIQORA
   ========================================================= */

.tiqora-section {

  background:
    linear-gradient(
      90deg,
      #f8fbff 0%,
      #ffffff 100%
    );

}


.tiqora-grid {

  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 64px;

  align-items: center;

}


.tiqora-image {

  display: flex;

  justify-content: center;

  align-items: center;

}


.tiqora-image img {

  width: 74%;

  max-width: 490px;

  height: auto;

  object-fit: contain;

}


.tiqora-copy h2 span {

  color:
    var(--blue);

}


.feature-list {

  margin:
    27px 0 30px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 13px 24px;

  color:
    #3e4b61;

  font-size: 15px;

}


.tiqora-actions {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}


.button-primary {

  background:
    var(--blue);

  color:
    #ffffff;

}


.button-primary:hover {

  background:
    var(--blue-dark);

}


.button-outline {

  color:
    var(--black);

  background:
    #ffffff;

  border:
    1px solid var(--border);

}


/* =========================================================
   FORMULARIO / CONTACTO
   ========================================================= */

.quote-section {

  background:
    #f7f9fc;

}


.quote-grid {

  display: grid;

  grid-template-columns:
    0.72fr 1.28fr;

  gap: 58px;

  align-items: start;

}


.contact-links {

  margin-top: 28px;

  display: grid;

  gap: 12px;

}


.contact-links a {

  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    #273549;

  font-weight: 700;

}


.contact-icon {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color:
    #ffffff;

}


.whatsapp-small {

  background:
    var(--green);

}


.facebook-small {

  background:
    var(--facebook);

  font-family:
    Arial,
    sans-serif;

  font-weight: 900;

}


.quote-form {

  padding:
    30px;

  background:
    #ffffff;

  border:
    1px solid var(--border);

  border-radius:
    20px;

  box-shadow:
    var(--shadow);

}


.form-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    18px;

}


.form-grid label {

  display: flex;

  flex-direction: column;

  gap: 8px;

  color:
    var(--black);

  font-size: 13px;

  font-weight: 700;

}


.form-grid .full {

  grid-column:
    1 / -1;

}


.form-grid input,
.form-grid select,
.form-grid textarea {

  width: 100%;

  border:
    1px solid #dce1e8;

  border-radius:
    10px;

  background:
    #fbfcfe;

  color:
    var(--text);

  outline:
    none;

}


.form-grid input,
.form-grid select {

  min-height:
    48px;

  padding:
    0 13px;

}


.form-grid textarea {

  padding:
    13px;

  resize:
    vertical;

}


.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {

  border-color:
    rgba(25, 108, 242, 0.65);

  box-shadow:
    0 0 0 4px
    rgba(25, 108, 242, 0.08);

}


.quote-submit {

  width: 100%;

  margin-top:
    20px;

}


.form-note {

  margin:
    10px 0 0;

  color:
    #8993a2;

  text-align:
    center;

  font-size:
    11px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  padding:
    48px 0;

  background:
    #071427;

  color:
    #ffffff;

}


.footer-grid {

  display: grid;

  grid-template-columns:
    1.5fr 1fr 1fr;

  gap:
    50px;

}


.footer-brand img {

  width:
    255px;

  height:
    64px;

  object-fit:
    contain;

  object-position:
    left center;

  filter:
    brightness(0)
    invert(1);

}


.footer-brand p {

  max-width:
    360px;

  color:
    #bdc8d9;

  font-size:
    13px;

  line-height:
    1.6;

}


.footer-column {

  display:
    flex;

  flex-direction:
    column;

}


.footer-column strong {

  margin-bottom:
    11px;

}


.footer-column a {

  margin:
    4px 0;

  color:
    #ced7e5;

  font-size:
    13px;

}


.footer-column p {

  margin-top:
    16px;

  color:
    #8794a8;

  font-size:
    12px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .nav {

    grid-template-columns:
      1fr auto;

  }


  .nav-links {

    display:
      none;

  }


  .hero-grid,
  .tiqora-grid,
  .quote-grid {

    grid-template-columns:
      1fr;

  }


  .hero-copy {

    max-width:
      760px;

    margin-inline:
      auto;

    text-align:
      center;

  }


  .hero-text {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .hero-actions {

    justify-content:
      center;

  }


  .hero-mini-info {

    max-width:
      700px;

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .hero-visual {

    max-width:
      850px;

    margin:
      0 auto;

  }


  .services-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .tiqora-copy {

    text-align:
      center;

  }


  .feature-list {

    max-width:
      680px;

    margin-left:
      auto;

    margin-right:
      auto;

    text-align:
      left;

  }


  .tiqora-actions {

    justify-content:
      center;

  }


  .footer-grid {

    grid-template-columns:
      1fr 1fr;

  }

}


@media (max-width: 650px) {

  body {

    font-size:
      15px;

  }


  .container {

    width:
      min(
        100% - 26px,
        1200px
      );

  }


  .nav {

    min-height:
      66px;

  }


  .brand img {

    width:
      180px;

    height:
      43px;

  }


  .portal-button {

    padding:
      5px;

  }


  .portal-button span {

    display:
      none;

  }


  .portal-button img {

    width:
      35px;

    height:
      35px;

  }


  .hero {

    padding:
      48px 0 56px;

  }


  .hero h1 {

    font-size:
      44px;

  }


  .hero-mini-info,
  .services-grid,
  .feature-list,
  .form-grid,
  .footer-grid {

    grid-template-columns:
      1fr;

  }


  .hero-mini-info div {

    text-align:
      center;

  }


  .section {

    padding:
      60px 0;

  }


  .tiqora-image img {

    width:
      90%;

  }


  .hero-actions .button,
  .tiqora-actions .button {

    width:
      100%;

  }


  .quote-form {

    padding:
      22px;

  }

}


/* =========================================================
   V20 — AJUSTES SEGÚN REFERENCIA
   ========================================================= */

/* Botón Portal TIQORA como imagen completa */
.portal-button-image{
  justify-self:end;
  display:block;
  line-height:0;
}

.portal-button-image img{
  width:165px;
  height:auto;
  display:block;
}

/* SERVICIOS: fondo crema y 7 tarjetas en una fila */
.services-reference{
  padding:58px 0 62px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,244,206,.62), transparent 42%),
    #fffdf7;
}

.services-heading{
  margin-bottom:30px;
}

.services-heading h2 span{
  color:var(--blue);
}

.services-reference-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
}

.service-reference-card{
  min-height:196px;
  padding:20px 12px 18px;
  text-align:center;
  background:rgba(255,255,255,.78);
  border:1px solid #eee7d7;
  border-radius:15px;
  box-shadow:0 6px 17px rgba(70,52,25,.055);
}

.service-reference-icon{
  height:48px;
  display:grid;
  place-items:center;
  color:#3326ff;
  font-size:30px;
  font-weight:800;
}

.service-reference-card h3{
  margin:10px 0 7px;
  color:var(--black);
  font-size:14px;
  line-height:1.25;
}

.service-reference-card p{
  margin:0;
  color:#697286;
  font-size:11px;
  line-height:1.55;
}

/* TIQORA: texto izquierda, imagen derecha */
.tiqora-grid-v20{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
}

.tiqora-copy-v20 h2{
  margin:0 0 16px;
  color:var(--black);
  font-size:clamp(36px,4vw,50px);
  letter-spacing:-.045em;
}

.tiqora-copy-v20 h2 span{
  color:var(--blue);
}

.tiqora-lead{
  max-width:580px;
  margin:0 0 28px;
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
}

.tiqora-feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:30px;
}

.tiqora-feature-grid>div{
  padding:17px 18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.tiqora-feature-grid strong{
  display:block;
  margin-bottom:5px;
  color:var(--black);
  font-size:14px;
}

.tiqora-feature-grid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.tiqora-image-v20{
  display:flex;
  align-items:center;
  justify-content:center;
}

.tiqora-image-v20 img{
  width:82%;
  max-width:540px;
  height:auto;
  object-fit:contain;
}

.portal-product-link{
  display:inline-flex;
  align-items:center;
}

.portal-product-link img{
  width:195px;
  height:auto;
  display:block;
}

/* Más información */
.value-section{
  background:#fff;
  padding-top:70px;
  padding-bottom:70px;
}

.value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.value-card{
  padding:26px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
}

.value-card>span{
  display:inline-block;
  margin-bottom:24px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.value-card h3{
  margin:0 0 10px;
  color:var(--black);
  font-size:19px;
}

.value-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* PC grande: mejor legibilidad */
@media(min-width:1300px){
  .container{
    width:min(1320px,calc(100% - 56px));
  }

  .services-reference-grid{
    gap:14px;
  }

  .service-reference-card{
    min-height:208px;
  }

  .service-reference-card h3{
    font-size:15px;
  }

  .service-reference-card p{
    font-size:12px;
  }
}

/* Laptop / tablet */
@media(max-width:1100px){
  .services-reference-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .tiqora-grid-v20{
    grid-template-columns:1fr;
    gap:40px;
  }

  .tiqora-copy-v20{
    text-align:center;
  }

  .tiqora-lead{
    margin-left:auto;
    margin-right:auto;
  }

  .tiqora-actions{
    justify-content:center;
  }

  .tiqora-feature-grid{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    text-align:left;
  }

  .tiqora-image-v20 img{
    width:70%;
  }
}

/* Celular */
@media(max-width:650px){
  .portal-button-image img{
    width:46px;
    height:46px;
    object-fit:cover;
    object-position:left center;
    border-radius:12px;
  }

  .services-reference-grid,
  .tiqora-feature-grid,
  .value-grid{
    grid-template-columns:1fr;
  }

  .service-reference-card{
    min-height:auto;
  }

  .tiqora-image-v20 img{
    width:94%;
  }

  .portal-product-link{
    width:100%;
  }

  .portal-product-link img{
    width:100%;
    max-width:260px;
    margin:auto;
  }
}


/* =========================================================
   V21 — MÁS INFORMACIÓN + ICONOS NÍTIDOS
   ========================================================= */

/* Contacto: iconos vectoriales */
.contact-icon svg{
  width:18px;
  height:18px;
  display:block;
}

/* Logo footer nítido: sin filtros CSS */
.footer-logo-clean{
  width:255px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
  filter:none !important;
  image-rendering:auto;
}

/* Si el logo sobre fondo oscuro conserva fondo blanco,
   lo presentamos dentro de una tarjeta limpia. */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-logo-clean{
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
}

/* Redes footer vectoriales */
.footer-social-icons{
  display:flex;
  gap:10px;
  margin:8px 0 12px;
}

.footer-social-icons a{
  width:36px;
  height:36px;
  margin:0 !important;
  border-radius:50%;
  display:grid !important;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.footer-social-icons svg{
  width:18px;
  height:18px;
  color:#fff;
}

/* WHY */
.why-section{
  background:#fff;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.why-card{
  padding:26px 24px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
}

.why-icon{
  width:42px;
  height:42px;
  margin-bottom:22px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  font-size:18px;
}

.why-card h3{
  margin:0 0 10px;
  color:var(--black);
  font-size:18px;
}

.why-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* PROCESS */
.process-section{
  background:#f7f9fc;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.process-card{
  padding:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
}

.process-card>span{
  display:block;
  margin-bottom:20px;
  color:var(--blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}

.process-card h3{
  margin:0 0 9px;
  color:var(--black);
  font-size:18px;
}

.process-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* FAQ */
.faq-section{
  background:#fff;
}

.faq-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:60px;
  align-items:start;
}

.faq-intro h2{
  margin:0 0 12px;
  color:var(--black);
  font-size:clamp(32px,4vw,44px);
  line-height:1.08;
  letter-spacing:-.04em;
}

.faq-intro p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.faq-list{
  display:grid;
  gap:12px;
}

.faq-list details{
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.faq-list summary{
  cursor:pointer;
  color:var(--black);
  font-size:15px;
  font-weight:750;
}

.faq-list details p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* Responsive */
@media(max-width:1100px){
  .why-grid,
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .faq-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

@media(max-width:650px){
  .why-grid,
  .process-grid{
    grid-template-columns:1fr;
  }

  .footer-logo-clean{
    width:220px !important;
  }
}


/* =========================================================
   V22 — SIMPLIFICADA PARA CLIENTES
   ========================================================= */
.v22-soft{background:#f7f8fa}
.v22-services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.v22-services article{padding:28px 24px;border:1px solid var(--border);border-radius:18px;background:#fff}
.v22-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:24px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-size:22px;font-weight:800}
.v22-services h3{margin:0 0 9px;color:var(--black);font-size:18px}
.v22-services p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

.v22-tiqora{background:linear-gradient(90deg,#f8fbff,#fff)}
.v22-tiqora-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
.v22-tiqora h2{margin:0 0 14px;color:var(--black);font-size:clamp(38px,4vw,52px);letter-spacing:-.045em}
.v22-tiqora h2 span{color:var(--blue)}
.v22-lead{max-width:580px;margin:0 0 25px;color:var(--muted);font-size:17px;line-height:1.7}
.v22-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:27px}
.v22-benefits>div{display:flex;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:#fff}
.v22-benefits b{color:var(--blue)}
.v22-benefits strong,.v22-benefits small{display:block}
.v22-benefits strong{color:var(--black);font-size:14px}
.v22-benefits small{margin-top:2px;color:var(--muted);font-size:11px}
.v22-tiqora-image img{width:84%;max-width:510px;margin:auto}
.v22-portal{display:inline-flex;align-items:center}
.v22-portal img{width:185px;height:auto}

.v22-why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v22-why article{padding:27px;border:1px solid var(--border);border-radius:17px;background:#fff}
.v22-why article>span{display:block;margin-bottom:22px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.12em}
.v22-why h3{margin:0 0 9px;color:var(--black);font-size:19px}
.v22-why p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

.v22-references{background:#f7f8fa}
.v22-reference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v22-reference-card{padding:24px;border:1px solid var(--border);border-radius:17px;background:#fff}
.v22-client-avatar{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:900}
.v22-stars{margin:18px 0 10px;color:var(--blue);letter-spacing:2px;font-size:13px}
.v22-reference-card h3{margin:0 0 8px;color:var(--black);font-size:17px}
.v22-reference-card p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.6}
.v22-reference-card>span{color:var(--blue);font-size:12px;font-weight:700}

.v22-contact{background:#fff}
.v22-contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:55px;align-items:start}
.v22-direct-contact{display:grid;gap:12px;margin-top:25px}
.v22-direct-contact>a{display:flex;align-items:center;gap:12px;width:fit-content}
.v22-direct-contact strong,.v22-direct-contact small{display:block}
.v22-direct-contact strong{color:var(--black);font-size:14px}
.v22-direct-contact small{color:var(--muted);font-size:11px}
.v22-social{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:#fff}
.v22-social svg{width:19px;height:19px}.v22-social.wa{background:#1fbd5a}.v22-social.fb{background:#1877f2}

.v22-footer{background:#071427;color:#fff;padding:20px 0}
.v22-footer-row{min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.v22-footer-brand img{width:190px;height:46px;padding:5px 9px;object-fit:contain;border-radius:9px;background:#fff}
.v22-footer-nav{display:flex;gap:22px}
.v22-footer-nav a{color:#d9e1ed;font-size:12px;font-weight:650}
.v22-footer-right{justify-self:end;display:flex;align-items:center;gap:14px}
.v22-footer-right small{color:#98a6ba;font-size:10px}
.v22-footer-social{display:flex;gap:7px}
.v22-footer-social a{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.09);color:#fff}
.v22-footer-social svg{width:15px;height:15px}

@media(max-width:1000px){
  .v22-services{grid-template-columns:repeat(2,1fr)}
  .v22-tiqora-grid,.v22-contact-grid{grid-template-columns:1fr}
  .v22-tiqora-grid>div:first-child{text-align:center}
  .v22-lead{margin-left:auto;margin-right:auto}
  .v22-benefits{max-width:720px;margin-left:auto;margin-right:auto;margin-bottom:27px;text-align:left}
  .v22-tiqora-grid .hero-actions{justify-content:center}
  .v22-why,.v22-reference-grid{grid-template-columns:1fr}
  .v22-footer-row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .v22-footer-right{justify-self:auto}
}
@media(max-width:650px){
  .v22-services,.v22-benefits{grid-template-columns:1fr}
  .v22-tiqora-image img{width:95%}
  .v22-portal{width:100%;justify-content:center}
  .v22-footer-nav{gap:12px;flex-wrap:wrap;justify-content:center}
  .v22-footer{padding:18px 0}
}


/* =========================================================
   V23 — REFERENCIA APROBADA
   ========================================================= */

.v23-header{
  height:74px;
  background:#fff;
  border-top:3px solid #111;
  border-bottom:1px solid #ececf0;
  position:sticky;
  top:0;
  z-index:100;
}

.v23-nav{
  height:71px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.v23-brand img{
  width:205px;
  height:48px;
  object-fit:contain;
  object-position:left center;
}

.v23-navlinks{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  font-weight:700;
}

.v23-navlinks a.active{
  color:#10bfc7;
}

.v23-top-actions{
  justify-self:end;
  display:flex;
  gap:10px;
}

.v23-top-btn{
  padding:9px 16px;
  border-radius:8px;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.v23-top-btn.wa{background:#1dbb52}
.v23-top-btn.fb{background:#3825f4}

.v23-hero{
  position:relative;
  min-height:430px;
  background:#030916;
  color:#fff;
  overflow:hidden;
}

.v23-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 80% 50%, rgba(18,92,255,.18), transparent 35%),
    linear-gradient(90deg,rgba(2,6,18,.93),rgba(2,6,18,.52) 52%,rgba(2,6,18,.3));
}

.v23-hero-grid{
  min-height:430px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:30px;
  align-items:center;
  position:relative;
  z-index:2;
}

.v23-hero-copy h1{
  margin:0 0 16px;
  color:#fff;
  font-size:50px;
  line-height:1.04;
  letter-spacing:-.045em;
}

.v23-hero-copy h1 span{color:#11d9d0}

.v23-hero-copy>p{
  margin:0 0 22px;
  color:#d4d9e5;
  font-size:16px;
  line-height:1.6;
}

.v23-hero-actions{
  display:flex;
  gap:12px;
  margin-bottom:26px;
}

.v23-btn{
  min-height:45px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
}

.v23-btn-wa{background:#1fbd58;color:#fff}
.v23-btn-fb{background:#fff;color:#2c25d8}

.v23-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.v23-stats article{
  min-height:76px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  background:#fffdf6;
  color:#101828;
  border-radius:10px;
}

.v23-stats article>div{
  grid-row:1/3;
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:#2f28ff;
  border:2px solid #2f28ff;
  font-weight:900;
}

.v23-stats strong{font-size:20px;line-height:1}
.v23-stats span{font-size:10px;color:#4f5668}

.v23-hero-image img{
  width:100%;
  max-width:760px;
  border-radius:18px;
  display:block;
}

.v23-services{
  padding:36px 0 40px;
  background:#fffdf7;
}

.v23-section-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 22px;
}

.v23-section-head span{
  color:#3228ff;
  font-size:9px;
  font-weight:900;
}

.v23-section-head h2{
  margin:3px 0 6px;
  font-size:28px;
  color:#111827;
}

.v23-section-head h2 em{
  color:#3328ff;
  font-style:normal;
}

.v23-section-head p{
  margin:0;
  color:#5e6474;
  font-size:12px;
}

.v23-service-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
}

.v23-service-grid article{
  min-height:185px;
  padding:20px 12px;
  text-align:center;
  background:#fffef8;
  border:1px solid #eee6d7;
  border-radius:14px;
}

.v23-service-grid i{
  display:block;
  height:42px;
  color:#3528ff;
  font-style:normal;
  font-size:29px;
}

.v23-service-grid h3{
  margin:10px 0 8px;
  font-size:14px;
  color:#111827;
}

.v23-service-grid p{
  margin:0;
  color:#5f6574;
  font-size:11px;
  line-height:1.5;
}

.v23-tiqora{
  padding:58px 0;
  background:#fff;
}

.v23-tiqora-grid{
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  gap:60px;
}

.v23-tiqora-copy>span{
  color:#3328ff;
  font-size:11px;
  font-weight:900;
}

.v23-tiqora-copy h2{
  margin:6px 0 18px;
  color:#111827;
  font-size:36px;
  line-height:1.08;
}

.v23-tiqora-copy h2 em{
  font-style:normal;
  color:#2238ff;
}

.v23-benefits{
  display:grid;
  gap:14px;
  margin-bottom:24px;
}

.v23-benefits>div{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.v23-benefits b{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#3027ff;
  color:#fff;
  font-size:12px;
}

.v23-benefits p{
  margin:0;
}

.v23-benefits strong,
.v23-benefits small{
  display:block;
}

.v23-benefits strong{
  color:#111827;
  font-size:14px;
}

.v23-benefits small{
  margin-top:2px;
  color:#5f6678;
  font-size:12px;
}

.v23-tiqora-btn{
  display:inline-flex;
  padding:10px 16px;
  border-radius:8px;
  background:#3428ff;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.v23-tiqora-image img{
  width:84%;
  max-width:500px;
  margin:auto;
}

.v23-clients{
  padding:38px 0 42px;
  background:#fffaf1;
}

.v23-clients-title{
  text-align:center;
  color:#3028ff;
  font-size:10px;
  font-weight:900;
  margin-bottom:18px;
}

.v23-client-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:920px;
  margin:auto;
}

.v23-client-grid article{
  padding:22px;
  background:#fffef7;
  border:1px solid #eee7da;
  border-radius:15px;
}

.v23-client-logo{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef2ff;
  color:#3028ff;
  font-size:12px;
  font-weight:900;
}

.v23-stars{
  color:#3028ff;
  margin:14px 0 10px;
  letter-spacing:2px;
  font-size:12px;
}

.v23-client-grid p{
  color:#51586a;
  font-size:13px;
  line-height:1.55;
}

.v23-client-grid strong{
  color:#3028ff;
  font-size:12px;
}

.v23-quote{
  padding:28px 0;
  background:#fff;
}

.v23-quote-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:34px;
  align-items:center;
}

.v23-quote-copy h2{
  margin:0 0 8px;
  font-size:25px;
  color:#111827;
}

.v23-quote-copy p{
  margin:0;
  color:#5f6676;
  font-size:12px;
  line-height:1.55;
}

.v23-form{
  display:grid;
  gap:10px;
}

.v23-form-top{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:10px;
}

.v23-form-bottom{
  display:grid;
  grid-template-columns:1fr 190px;
  gap:10px;
}

.v23-form input,
.v23-form select,
.v23-form textarea{
  width:100%;
  border:1px solid #dfe3ea;
  border-radius:7px;
  background:#fff;
  outline:none;
  font-size:12px;
}

.v23-form input,
.v23-form select{
  height:42px;
  padding:0 11px;
}

.v23-form textarea{
  min-height:58px;
  padding:10px 11px;
  resize:none;
}

.v23-form button{
  border:0;
  border-radius:8px;
  background:#3826f6;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.v23-footer{
  padding:26px 0;
  background:#07142c;
  color:#fff;
}

.v23-footer-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr 1fr .8fr;
  gap:40px;
}

.v23-footer-brand img{
  width:180px;
  height:42px;
  object-fit:contain;
  object-position:left center;
  background:#fff;
  border-radius:8px;
  padding:4px 8px;
}

.v23-footer p{
  color:#c4cfdf;
  font-size:10px;
  line-height:1.5;
}

.v23-footer strong{
  display:block;
  margin-bottom:8px;
  font-size:11px;
}

.v23-footer a{
  display:block;
  margin:3px 0;
  color:#d9e1ec;
  font-size:10px;
}

.v23-socials{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}

.v23-socials a{
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0;
  background:#3028ff;
  font-weight:900;
}

@media(max-width:1050px){
  .v23-navlinks{display:none}
  .v23-nav{grid-template-columns:1fr auto}
  .v23-hero-grid,
  .v23-tiqora-grid,
  .v23-quote-grid{grid-template-columns:1fr}
  .v23-service-grid{grid-template-columns:repeat(4,1fr)}
  .v23-client-grid{grid-template-columns:1fr}
  .v23-footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:650px){
  .v23-top-actions{display:none}
  .v23-brand img{width:175px}
  .v23-hero{min-height:auto}
  .v23-hero-grid{padding:42px 0}
  .v23-hero-copy h1{font-size:42px}
  .v23-stats{grid-template-columns:1fr}
  .v23-service-grid{grid-template-columns:1fr 1fr}
  .v23-form-top,
  .v23-form-bottom{grid-template-columns:1fr}
  .v23-footer-grid{grid-template-columns:1fr}
}


/* =========================================================
   V24 — ICONOS AJUSTADOS + REFERENCIAS SIN IMÁGENES
   ========================================================= */

.svc-icon{
  width:50px;
  height:50px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  color:#2452ff;
}

.svc-icon svg{
  width:36px;
  height:36px;
  display:block;
}

.v23-service-grid article{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.v23-service-grid h3{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stat-svg{
  width:36px !important;
  height:36px !important;
  border:0 !important;
  background:transparent !important;
}

.stat-svg svg{
  width:34px;
  height:34px;
  display:block;
}

.client-clean{
  position:relative;
  min-height:210px;
}

.client-clean .quote-mark{
  position:absolute;
  top:14px;
  right:18px;
  color:#dce5ff;
  font-size:60px;
  font-weight:900;
  line-height:1;
}

.client-clean h3{
  margin:0 0 8px;
  color:#111827;
  font-size:18px;
}

.client-clean .v23-stars{
  margin:0 0 14px;
}

.client-clean p{
  position:relative;
  z-index:1;
}

@media(max-width:650px){
  .svc-icon{
    width:46px;
    height:46px;
  }

  .svc-icon svg{
    width:32px;
    height:32px;
  }

  .client-clean{
    min-height:auto;
  }
}