/* =========================================================================
   GIOR Technology — Capa de refinamiento visual
   Se carga DESPUÉS de css/styles.css. No redefine contenido, solo estética.
   Paleta: pizarra + blanco + acentos cian/esmeralda sobre el azul de marca.
   ========================================================================= */

:root {
  --emerald: #10b981;
  --cyan-soft: rgba(34, 211, 238, 0.32);
  --ease-4: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.4s;
}

/* -------------------------------------------------------------------------
   DIRECTIVA 5 · Header fijo con blur elegante
   Ya era sticky + backdrop-filter. Aquí se refina el estado de scroll:
   el blur sube, el fondo se vuelve más translúcido y aparece un filo sutil.
   ------------------------------------------------------------------------- */
.site-header {
  transition:
    background var(--dur) var(--ease-4),
    box-shadow var(--dur) var(--ease-4),
    border-color var(--dur) var(--ease-4);
}
/* El header de escritorio necesita ~1100px para caber (logo + nav + los dos
   botones, que no se comprimen). El corte original a 900px lo desbordaba en
   el rango 901-1100px: se adelanta el tratamiento móvil hasta 1100px. */
@media (max-width: 1100px) {
  .nav-desktop { display: none; }
  .social-links { display: none; }
  .header-verify-btn { display: none; }
  .nav-toggle { display: flex; }
}

/* Por debajo del corte el ancho mínimo del CTA deja de tener sentido, y con
   rótulos largos ("Hablar con ventas") logo + CTA + hamburguesa desbordaban
   el header por ~16px. Se comprime el botón y el hueco en vez de ocultarlo. */
@media (max-width: 480px) {
  .header-inner { gap: 12px; }
  .header-actions { gap: 12px; }
  .header-actions .btn-primary {
    min-width: 0;
    padding: 11px 16px;
    font-size: 0.85rem;
  }
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(185%) blur(18px);
  -webkit-backdrop-filter: saturate(185%) blur(18px);
  border-bottom-color: rgba(217, 222, 230, 0.75);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 10px 30px -12px rgba(15, 23, 42, 0.13);
}

/* -------------------------------------------------------------------------
   DIRECTIVA 3 · Transiciones de sección sin "palpitación"
   El problema: .pricing-panel alterna display:none/block. display no es
   animable, así que el cambio es un salto seco. Solución: el panel activo
   entra con fade + slide-up de 0.4s y sus tarjetas escalonan 55ms.
   ------------------------------------------------------------------------- */
@keyframes gPanelIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pricing-panel.active {
  animation: gPanelIn var(--dur) var(--ease-4) both;
}
.pricing-panel.active .plan-card {
  animation: gCardIn var(--dur) var(--ease-4) both;
  animation-delay: calc(var(--card-i, 0) * 55ms);
}

.pricing-tab {
  transition:
    color var(--dur) var(--ease-4),
    border-color var(--dur) var(--ease-4);
}

/* Las tres etiquetas no caben en pantallas angostas (ya ocurría antes):
   se desplazan en horizontal en vez de desbordar la sección. */
.pricing-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.pricing-tabs::-webkit-scrollbar { display: none; }
.pricing-tab {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   DIRECTIVA 2 · Planes corporativos con la anatomía de GIORFACT
   Rejilla que acepta 4 o 5 tarjetas conservando los márgenes originales.
   ------------------------------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(var(--plan-cols, 4), minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Cinco tarjetas no caben con holgura en el contenedor de 1180px: el precio
   de tres cifras parte de línea. Solo la rejilla de planes se ensancha, con
   margen negativo simétrico, para que la tarjeta conserve su padding original
   de 36px 28px. El resto de la sección mantiene su ancho. */
@media (min-width: 1340px) {
  .plan-panels {
    margin-left: -70px;
    margin-right: -70px;
  }
}

.plan-card {
  transition:
    transform var(--dur) var(--ease-4),
    box-shadow var(--dur) var(--ease-4),
    border-color var(--dur) var(--ease-4);
}
.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue);
}
.plan-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--gray-800);
  margin: 0;
}
.plan-card .price {
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan-card .price span { letter-spacing: 0; }
.plan-card ul { padding: 0; list-style: none; }
.plan-card .btn { margin-top: auto; }

/* El botón "Solicitar plan" prominente y consistente en toda tarjeta. */
.plan-card .btn-block {
  padding: 13px 26px;
  font-weight: 600;
}
.plan-card .btn-outline-blue:hover {
  background: var(--blue);
  color: var(--white);
}

/* Se sobrescribe grid-template-columns y NO la variable --plan-cols: el valor
   por tarjeta viaja como style inline y ganaría siempre a la media query. */
@media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------------
   DIRECTIVA 4 · Sellos de confianza institucional
   Cristal sutil sobre fondo navy, medallón SVG técnico, códigos SGSI.
   ------------------------------------------------------------------------- */
.trust-section {
  position: relative;
  background-color: var(--navy);
  overflow: hidden;
  padding: 72px 0 76px;
  background-image:
    linear-gradient(to right, rgba(148, 172, 220, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 172, 220, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.trust-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(0, 68, 255, 0.26), transparent 60%),
    radial-gradient(700px 380px at 92% 12%, rgba(34, 211, 238, 0.13), transparent 62%);
  pointer-events: none;
}
.trust-section > .container { position: relative; }
.trust-section h2 { color: var(--white); }

.seal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
/* minmax(0, 1fr) y no 1fr: "auto" como mínimo deja que el contenido del pie
   imponga su min-content y desborde el contenedor. */
@media (max-width: 860px) { .seal-grid { grid-template-columns: minmax(0, 1fr); } }

.seal {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--navy-line);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 16px;
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 12, 40, 0.4);
  transition:
    transform var(--dur) var(--ease-4),
    border-color var(--dur) var(--ease-4),
    background var(--dur) var(--ease-4);
}
.seal:hover {
  transform: translateY(-4px);
  border-color: var(--cyan-soft);
  background: rgba(255, 255, 255, 0.075);
}
.seal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
/* El acento del sello viaja por currentColor: anillos, glifo, chip y enlace
   heredan el mismo tono desde la clase de variante. */
.seal-cyan { color: var(--cyan); }
.seal-emerald { color: var(--emerald); }

.seal-medal { position: relative; width: 88px; height: 88px; flex-shrink: 0; display: block; }
.seal-medal .seal-rings { width: 88px; height: 88px; display: block; }
.seal-medal .seal-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal-medal .seal-glyph svg { width: 30px; height: 30px; }
.seal-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.seal-code {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}
.seal-version { font-size: 0.68rem; font-weight: 600; color: #8b95a8; }
.seal h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--white);
  line-height: 1.28;
}
.seal p {
  margin: 0;
  font-size: 0.91rem;
  line-height: 1.62;
  color: #b9c0cd;
  text-wrap: pretty;
}
.seal-body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.seal-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--navy-line);
}
.seal-pages { display: flex; gap: 5px; }
/* Miniatura real del documento: la política sigue siendo consultable, ahora
   como enlace a la imagen a tamaño completo en vez de volcada en la página. */
.seal-page {
  width: 26px;
  aspect-ratio: 1 / 1.414;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(148, 172, 220, 0.28);
  transition: transform var(--dur) var(--ease-4), border-color var(--dur) var(--ease-4);
}
.seal-page:hover { transform: translateY(-3px); border-color: currentColor; }
.seal-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.seal-count { font-size: 0.72rem; font-weight: 600; color: #8b95a8; flex-grow: 1; }
.seal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  transition: background var(--dur) var(--ease-4);
}
.seal-link:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.seal-link svg { width: 14px; height: 14px; }

/* Referencia de código y versión bajo el cuerpo del sello. */
.seal-ref {
  font-size: 0.78rem !important;
  color: #8b95a8 !important;
  margin-top: 2px !important;
}

/* Eyebrow en variante esmeralda para el encabezado normativo. */
.eyebrow-emerald {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--emerald);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.trust-section .section-header { margin-bottom: 40px; }
.trust-section .seal-cert { margin-bottom: 24px; }
.seal-cert-icon { color: var(--cyan); }
.seal-cert-icon svg { width: 28px; height: 28px; }
.seal-cert h3 { margin: 0 0 9px; color: var(--white); font-weight: 700; }
.seal-cert p { margin: 0; font-size: 0.95rem; line-height: 1.62; color: #b9c0cd; }
.seal-cert {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 32px 34px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--navy-line);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 16px;
}
.seal-cert-icon {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(0, 68, 255, 0.3), rgba(34, 211, 238, 0.16));
  border: 1px solid rgba(34, 211, 238, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal-cert h3 { font-size: 1.16rem; }
.seal-cert strong { color: var(--white); font-weight: 700; }

/* -------------------------------------------------------------------------
   DIRECTIVA 6 · Contenedores visuales del Inicio
   Marcos preparados para las imágenes: navy profundo, filo cian y halo de
   alta exposición. Al insertar la imagen, .hero-slot img la cubre y el
   ::after mantiene el acento cian encima.
   ------------------------------------------------------------------------- */
/* El hero de Inicio pasa de una columna centrada a dos columnas: copia a la
   izquierda, composición visual a la derecha. */
.hero-split { padding: 0; overflow: hidden; }
.hero-split::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 96% 8%, rgba(34, 211, 238, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-split { position: relative; }
.hero-split .hero-inner {
  position: relative;
  max-width: 1180px;
  padding-top: 84px;
  padding-bottom: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hero-copy h1 { margin: 0; text-wrap: balance; }
.hero-split .slogan { margin: 0; max-width: 30rem; text-wrap: pretty; }
.hero-split .hero-actions { margin-top: 4px; }
.hero-split .btn-primary { box-shadow: 0 10px 30px rgba(0, 68, 255, 0.36); }
.hero-trust-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #7d8798;
  text-transform: uppercase;
}
/* La segunda imagen mide 720px de ancho: mostrada a ~296px queda nítida
   incluso en pantallas 2x. A ancho completo de columna se estiraría. */
.hero-visual-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
}

@media (max-width: 560px) {
  .hero-visual-row { grid-template-columns: minmax(0, 1fr); }
}
.hero-metric-status { display: flex; align-items: center; gap: 7px; }
.hero-metric-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.hero-metric-status span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--emerald);
  text-transform: uppercase;
}
.hero-metric strong {
  font-size: 1.72rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.028em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-metric > span:last-child {
  font-size: 0.73rem;
  font-weight: 500;
  color: #a6aebd;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .hero-split .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 56px;
  }
}

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-slot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-700) 0%, var(--navy) 100%);
  border: 1px solid rgba(34, 211, 238, 0.3);
  box-shadow: 0 24px 60px rgba(0, 20, 60, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 15% 0%, rgba(34, 211, 238, 0.22), transparent 58%);
  pointer-events: none;
}
.hero-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cada marco lleva la proporción exacta de su imagen, para no recortar:
   principal 1408x768 (11/6 = 1.833) · segunda 720x483 (3/2 = 1.491). */
.hero-slot-main { aspect-ratio: 11 / 6; }
.hero-slot-sub { aspect-ratio: 3 / 2; }
.hero-slot-note {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.hero-slot-note b { font-size: 0.82rem; font-weight: 700; color: var(--white); }
.hero-slot-note span { font-size: 0.72rem; color: #8b95a8; font-variant-numeric: tabular-nums; }
.hero-slot-note code {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cyan);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(34, 211, 238, 0.4);
}
.hero-metric {
  border-radius: 14px;
  padding: 20px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 172, 220, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.hero-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-line);
  width: 100%;
}
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(148, 172, 220, 0.18);
}
.hero-trust-chip b {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--emerald);
}
.hero-trust-chip span {
  font-size: 0.76rem;
  font-weight: 500;
  color: #c7cbd4;
  font-variant-numeric: tabular-nums;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.32);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--cyan);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Correcciones de desborde horizontal (defectos previos)
   ------------------------------------------------------------------------- */

/* El mapa incrustado lleva width="600" fijo en el HTML: en móvil arrastraba
   toda la columna de contacto a 600px y desbordaba la página. */
.contact-grid iframe,
.table-wrap iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}

/* minmax(0, ...) evita que el contenido más ancho fije el mínimo de la
   columna, que es como el mapa desbordaba pese al cambio a una columna. */
.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
  .pricing-panel.active,
  .pricing-panel.active .plan-card,
  .plan-card,
  .seal,
  .seal-page,
  .site-header {
    animation: none;
    transition: none;
  }
}