/* =========================================================
   Soluciones Cuánticas Globales — hoja de estilo única
   Sin dependencias externas. Todo el color vive aquí arriba.
   ========================================================= */

:root {
  /* Colores */
  /* El verde #006935 es el del logotipo. Sobre fondo oscuro no tiene
     suficiente contraste para botones ni texto, así que se usa una versión
     más viva (--acento) para el oscuro y el verde oficial (--marca) para
     las secciones claras. */
  --tinta:        #080c10;   /* fondo oscuro principal */
  --tinta-2:      #0e1319;   /* fondo oscuro secundario */
  --tinta-3:      #151b23;   /* tarjetas sobre oscuro */
  --claro:        #f5f7f6;   /* fondo claro */
  --blanco:       #ffffff;
  --marca:        #006935;   /* verde oficial del logotipo */
  --acento:       #2fcf7f;   /* verde vivo, para el fondo oscuro */
  --acento-hondo: #00994d;   /* verde de paso del cursor */
  --texto-claro:  #e9efea;
  --texto-tenue:  #9fb0a7;
  --texto-oscuro: #10201a;
  --texto-oscuro-tenue: #4f6159;
  --borde:        rgba(255,255,255,.10);
  --borde-oscuro: rgba(20,32,58,.12);

  /* Medidas */
  --ancho:        1180px;
  --radio:        14px;
  --radio-chico:  9px;
  --sombra:       0 18px 50px rgba(4,10,22,.35);
  --sombra-clara: 0 12px 34px rgba(20,32,58,.10);

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto-claro);
  background: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 800;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: .6em; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1em; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 24px;
}
.contenedor--angosto { max-width: 820px; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--acento); color: var(--tinta);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 700; z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--acento);
  color: #04220f;
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  padding: 13px 24px;
  border: 2px solid var(--acento);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.boton:hover { background: var(--acento-hondo); border-color: var(--acento-hondo); transform: translateY(-2px); }
.boton--grande  { padding: 16px 32px; font-size: 1.02rem; }
.boton--pequeno { padding: 9px 18px; font-size: .9rem; }
.boton--bloque  { display: flex; width: 100%; }
.boton--fantasma {
  background: transparent; color: var(--texto-claro);
  border-color: rgba(255,255,255,.30);
}
.boton--fantasma:hover { background: rgba(255,255,255,.08); border-color: var(--texto-claro); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,12,16,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}
/* Arriba va solo el monograma SCG: la pieza completa, achicada al tamaño de una
   cabecera, dejaría la palabra GLOBALES en tres píxeles, ilegible. Abajo sí hay
   espacio para la pieza completa. Las dos son variantes oficiales del logotipo. */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca__logo { height: 30px; width: auto; flex: none; }
.marca--pie .marca__logo { height: 44px; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: .95rem; color: var(--texto-tenue); transition: color .15s ease; }
.nav a:hover { color: var(--texto-claro); }
.nav a.boton { color: #04220f; }

.menu-boton {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.menu-boton span { display: block; width: 24px; height: 2px; background: var(--texto-claro); border-radius: 2px; }

/* ---------- Portada ---------- */
/* La foto va de fondo. El velo la oscurece del lado del texto y la deja
   ver del lado derecho, que es donde está el supervisor. */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(52px, 6.5vw, 88px) 0 clamp(40px, 4.5vw, 60px);
  background: var(--tinta);
}
.hero__foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 45%;
}
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg,
      var(--tinta) 4%,
      rgba(8,12,16,.94) 34%,
      rgba(8,12,16,.62) 60%,
      rgba(8,12,16,.30) 100%),
    radial-gradient(700px 380px at 12% 88%, rgba(0,105,53,.34), transparent 62%);
}
.hero__caja { position: relative; z-index: 2; max-width: 760px; }
.hero__texto { font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--texto-tenue); max-width: 620px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.resalte { color: var(--acento); }

.etiqueta {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 18px;
}
.etiqueta--oscuro { color: var(--marca); }

.confianza {
  list-style: none; margin: 32px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--borde);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.confianza li { display: flex; flex-direction: column; gap: 2px; }
.confianza strong { font-size: 1.5rem; font-weight: 800; color: var(--blanco); letter-spacing: -.02em; }
.confianza span { font-size: .87rem; color: var(--texto-tenue); }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(60px, 8vw, 104px) 0; }
.seccion--claro { background: var(--claro); color: var(--texto-oscuro); }
.seccion--claro h2, .seccion--claro h3 { color: var(--texto-oscuro); }
.seccion--claro p { color: var(--texto-oscuro-tenue); }
.seccion--acento { background: var(--tinta-2); border-block: 1px solid var(--borde); }
.seccion__intro { max-width: 640px; font-size: 1.06rem; color: var(--texto-tenue); margin-bottom: 44px; }
.seccion__intro--oscuro { color: var(--texto-oscuro-tenue); }

.rejilla { display: grid; gap: 22px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Problema ---------- */
.problema__rejilla { margin-top: 40px; }
.problema {
  background: var(--blanco);
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--radio);
  padding: 30px 26px;
  box-shadow: var(--sombra-clara);
}
.problema__numero {
  display: inline-block; font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  color: var(--marca); margin-bottom: 14px;
}
.problema p { margin: 0; font-size: .97rem; }

.nota-fuerte {
  margin: 40px 0 0;
  padding: 26px 30px;
  border-left: 4px solid var(--marca);
  background: rgba(0,105,53,.07);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: 1.06rem;
  color: var(--texto-oscuro) !important;
  max-width: 800px;
}

/* ---------- Planes ---------- */
.planes { align-items: stretch; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--tinta-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px 28px;
}
.plan--destacado {
  border-color: rgba(47,207,127,.55);
  box-shadow: var(--sombra);
  background: linear-gradient(180deg, rgba(47,207,127,.09), rgba(23,34,58,1) 42%);
}
.plan__cinta {
  position: absolute; top: -13px; left: 28px;
  background: var(--acento); color: #04220f;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
}
.plan__paso { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--acento); margin-bottom: 10px; }
.plan__resumen { color: var(--texto-tenue); font-size: .97rem; }

.lista-check { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 11px; }
.lista-check li {
  position: relative; padding-left: 28px;
  font-size: .95rem; color: var(--texto-tenue); line-height: 1.5;
}
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .38em;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento);
  transform: rotate(-45deg);
}
.lista-check strong { color: var(--texto-claro); }

.plan__precio {
  margin: auto 0 20px;
  font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--blanco);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.plan__desde {
  display: block; width: 100%;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.plan__mes { font-size: 1rem; font-weight: 600; color: var(--texto-tenue); }

/* ---------- Banda de servicio extra (páginas web) ---------- */
.extra {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
  background: linear-gradient(90deg, rgba(47,207,127,.08), rgba(23,34,58,.55));
  border: 1px solid rgba(47,207,127,.30);
  border-radius: var(--radio);
  padding: 30px 32px;
}
.extra__etiqueta {
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 8px;
}
.extra__texto h3 { font-size: 1.35rem; margin-bottom: 8px; }
.extra__texto p:last-child { margin: 0; color: var(--texto-tenue); font-size: .97rem; max-width: 62ch; }
.extra__accion { display: grid; gap: 14px; justify-items: stretch; text-align: center; }
.extra__precio {
  margin: 0;
  font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--blanco);
}
.extra__precio .plan__desde { text-align: center; }

/* ---------- Capacidades ---------- */
.capacidades { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--borde); }
.capacidades__titulo { font-size: 1rem; color: var(--texto-tenue); font-weight: 600; margin-bottom: 20px; }
.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.etiquetas li {
  border: 1px solid var(--borde);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .9rem;
  color: var(--texto-tenue);
}

/* ---------- Casos ---------- */
.caso {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--radio-chico);
  overflow: hidden;
  box-shadow: var(--sombra-clara);
}
.caso__foto {
  width: 100%; height: 165px;
  object-fit: cover;
  border-bottom: 3px solid var(--marca);
}
.caso__texto { padding: 24px 26px; }
.caso--sin-foto { border-left: 4px solid var(--marca); }
.caso__sector {
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marca) !important; margin-bottom: 10px;
}
.caso p:last-child { margin: 0; font-size: .96rem; }

/* ---------- Sectores ---------- */
.sector {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 26px 24px;
  background: rgba(255,255,255,.02);
}
.sector p { margin: 0; font-size: .95rem; color: var(--texto-tenue); }

/* ---------- Nosotros ---------- */
.nosotros { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.nosotros__texto p { color: var(--texto-tenue); font-size: 1.03rem; }
.nosotros__firma {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde);
  color: var(--blanco) !important; font-size: 1.12rem; font-weight: 700;
}
.razones { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.razones li {
  background: var(--tinta-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 20px 22px;
}
.razones h3 { font-size: 1.02rem; margin-bottom: 6px; }
.razones p { margin: 0; font-size: .93rem; color: var(--texto-tenue); }

/* ---------- Preguntas ---------- */
.pregunta {
  border-bottom: 1px solid var(--borde);
  padding: 6px 0;
}
.pregunta summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0;
  font-weight: 700; font-size: 1.05rem;
  position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.pregunta[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.pregunta p { color: var(--texto-tenue); padding-bottom: 14px; margin: 0; max-width: 70ch; }

/* ---------- Contacto ---------- */
.seccion--contacto {
  background:
    radial-gradient(700px 380px at 85% 10%, rgba(47,207,127,.15), transparent 60%),
    var(--tinta-2);
  border-top: 1px solid var(--borde);
}
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contacto__texto p { color: var(--texto-tenue); font-size: 1.03rem; max-width: 46ch; }
.contacto__datos { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 20px; }
.contacto__etiqueta {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 3px;
}
.contacto__valor {
  font-size: 1.1rem; font-weight: 700; color: var(--blanco); text-decoration: none;
  overflow-wrap: anywhere;
}
a.contacto__valor:hover { color: var(--acento); }

.formulario {
  background: var(--tinta-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px 30px;
  box-shadow: var(--sombra);
}
.formulario__ayuda { font-size: .92rem; color: var(--texto-tenue); margin-bottom: 22px; }
.formulario label {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--texto-claro); margin-bottom: 6px;
}
.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  font-family: inherit; font-size: .97rem;
  color: var(--texto-claro);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  margin-bottom: 18px;
  transition: border-color .15s ease, background .15s ease;
}
.formulario textarea { resize: vertical; min-height: 110px; }
.formulario input::placeholder,
.formulario textarea::placeholder { color: #6d7f9b; }
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: var(--acento); background: rgba(255,255,255,.08); outline: none;
}
.formulario select option { background: var(--tinta-2); color: var(--texto-claro); }
.formulario .error { border-color: #ff7b7b; }
.formulario__pie { font-size: .82rem; color: var(--texto-tenue); text-align: center; margin: 14px 0 0; }
.formulario__o {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0; font-size: .84rem; color: var(--texto-tenue);
}
.formulario__o::before,
.formulario__o::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}
.aviso {
  font-size: .9rem; font-weight: 600; color: #ff9b9b;
  margin: -8px 0 16px;
}

/* ---------- Pie ---------- */
.pie { background: var(--tinta); border-top: 1px solid var(--borde); padding: 60px 0 28px; }
.pie__rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.pie__nota { margin-top: 16px; font-size: .92rem; color: var(--texto-tenue); max-width: 34ch; }
.pie__lema {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--borde);
  max-width: 34ch;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--acento);
}
.contacto__huso {
  display: block; margin-top: 2px;
  font-size: .82rem; font-weight: 400; color: var(--texto-tenue);
}
.pie h4 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-claro); margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pie li { font-size: .93rem; color: var(--texto-tenue); overflow-wrap: anywhere; }
.pie a { text-decoration: none; color: var(--texto-tenue); }
.pie a:hover { color: var(--acento); }
.pie__legal {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--borde);
}
.pie__legal p { margin: 0; font-size: .85rem; color: var(--texto-tenue); }

/* ---------- Botón flotante ---------- */
.flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.flotante:hover { transform: scale(1.07); }
.flotante svg { width: 30px; height: 30px; }

/* ---------- Adaptación a pantallas ---------- */
@media (max-width: 980px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .nosotros, .contacto { grid-template-columns: 1fr; gap: 40px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-boton { display: flex; }
  .marca__logo { height: 26px; }
  .marca--pie .marca__logo { height: 38px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--tinta-2);
    border-bottom: 1px solid var(--borde);
    padding: 8px 24px 22px;
    display: none;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--borde); }
  .nav a.boton { margin-top: 16px; border: 2px solid var(--acento); justify-content: center; }
  .cabecera__fila { position: relative; }

  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .extra { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .extra__accion { justify-items: start; text-align: left; }
  .extra__precio .plan__desde { text-align: left; }
  .confianza { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 32px; }
  .hero__acciones .boton { flex: 1 1 100%; }
  /* En teléfono el texto cae encima de la foto: se oscurece de arriba abajo */
  .hero__foto { object-position: 62% 40%; }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(8,12,16,.80) 0%, rgba(8,12,16,.93) 45%, var(--tinta) 100%),
      radial-gradient(500px 300px at 50% 92%, rgba(0,105,53,.30), transparent 65%);
  }
  .caso__foto { height: 150px; }
  .formulario { padding: 26px 22px; }
  .flotante { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .flotante, .hero__fondo, .formulario { display: none; }
  body { background: #fff; color: #000; }
}