/*--------------------------------------------------------------
# SILPOS — Tema Petróleo
#
# Capa de presentación que se carga DESPUÉS de style.css y la
# sobrescribe. No cambia el marcado ni la lógica: para volver al
# aspecto anterior basta con quitar el <link> de index.php.
--------------------------------------------------------------*/

:root {
  /* Petróleo */
  --pt-950: #04222B;
  --pt-900: #072F3B;
  --pt-800: #0A3D4C;
  --pt-700: #0E4F62;
  --pt-600: #126277;
  --pt-500: #17788F;
  --pt-400: #2E93A9;

  /* Acento (identidad de marca) */
  --ac-500: #14C9A5;
  --ac-400: #21DCB6;
  --ac-300: #63ECD0;

  /* Neutros */
  --ink: #102F38;
  --ink-body: #2C4A54;
  --ink-soft: #46626C;
  --muted: #6B848D;
  --line: #E1EBEE;
  --surface: #FFFFFF;
  --surface-2: #F3F8F9;

  /* Degradados */
  --grad-deep: linear-gradient(125deg, var(--pt-950) 0%, var(--pt-800) 45%, var(--pt-600) 100%);
  /* La portada va un punto más clara que el pie y el plan destacado.
     El degradado corre en diagonal: arranca oscuro arriba a la izquierda,
     donde va el texto en blanco, y aclara hacia abajo a la derecha, donde
     va el logo, que es azul marino y necesita fondo claro para resaltar. */
  --grad-hero: linear-gradient(155deg, #12607A 0%, #2091AD 46%, #4FBDD1 100%);
  /* Cabecera y pie: un escalón por encima del petróleo base, para
     acompañar a la portada sin perder contraste en el menú. */
  --grad-bar: linear-gradient(120deg, #0E5568 0%, #166C84 55%, #1B7C92 100%);
  --grad-ac: linear-gradient(120deg, var(--ac-500) 0%, var(--ac-300) 100%);

  /* Sombras */
  --sh-sm: 0 1px 2px rgba(10, 61, 76, .06), 0 2px 8px rgba(10, 61, 76, .06);
  --sh-md: 0 2px 6px rgba(10, 61, 76, .06), 0 12px 28px rgba(10, 61, 76, .10);
  --sh-lg: 0 8px 20px rgba(10, 61, 76, .10), 0 24px 56px rgba(10, 61, 76, .16);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

html { scroll-behavior: smooth; }

/* La tipografía del cuerpo es la pila del sistema (Segoe UI en Windows,
   San Francisco en Mac, Roboto en Android). Hoy sale así por un azar de
   la cascada —la regla de Bootstrap gana a la de style.css, que pedía
   Open Sans—, y es la que se quiere conservar: se declara explícitamente
   para que no dependa del orden de carga de las hojas. */
body,
#main p,
#main li,
#claves p,
#contact .contact-about p,
#contact .info p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

#contact .contact-about p,
#contact .info p { font-size: 15.5px; line-height: 1.7; }

body {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

a { color: var(--pt-600); transition: color .25s ease; }
a:hover, a:active, a:focus { color: var(--pt-500); }

::selection { background: var(--ac-400); color: var(--pt-950); }

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

/*--------------------------------------------------------------
# Cabecera y navegación
--------------------------------------------------------------*/

#header {
  background: var(--grad-bar);
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: box-shadow .35s ease, background .35s ease;
}

#header.header-fixed {
  background: var(--grad-bar);
  box-shadow: 0 10px 30px rgba(4, 34, 43, .28);
}

#header #logo h1 {
  font-weight: 600;
  letter-spacing: 4px;
}

#header #logo h1 a,
#header #logo h1 a:hover { color: #fff; }

/* Enlaces del menú con subrayado animado */
.nav-menu > li > a {
  position: relative;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 10px 14px;
  transition: color .25s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li:hover > a,
.nav-menu > li.menu-active > a { color: #fff; }

.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-ac);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.nav-menu > li > a:hover::after,
.nav-menu > li:hover > a::after { transform: scaleX(1); }

/* "Iniciar Sesion" como botón */
/* El relleno del botón hacía crecer su enlace y lo dejaba 8px por debajo
   de la línea del menú: el margen negativo devuelve el alto al del resto
   y así comparten centro. */
.nav-menu > li > a > strong {
  display: inline-block;
  vertical-align: middle;
  margin: -9px 0;
  position: relative;
  top: -1px;
  background: var(--grad-ac);
  color: var(--pt-950);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 201, 165, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Resplandor propio detrás del botón, sobre el fondo de la cabecera */
.nav-menu > li > a:has(strong) { position: relative; }

.nav-menu > li > a:has(strong)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 165%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(33, 220, 182, .38) 0%,
    rgba(33, 220, 182, .14) 42%,
    transparent 72%);
  pointer-events: none;
  animation: silpos-resplandor 3.6s ease-in-out infinite;
}

@keyframes silpos-resplandor {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Flotación breve: en una barra de menú basta con 3px para llamar la
   atención sin que el botón se despegue de la línea de los enlaces. */
@keyframes silpos-boton-flotar {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(20, 201, 165, .35);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 201, 165, .52);
  }
}

.nav-menu > li > a > strong {
  animation: silpos-boton-flotar 3.6s ease-in-out infinite;
}

.nav-menu > li > a:hover > strong {
  animation: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 201, 165, .55);
}

.nav-menu > li > a:has(strong)::after { display: none; }

/* Submenús.
   Sin `overflow` aquí: el segundo nivel es el padre del tercero, que se abre
   fuera de su caja (left: 100%), y cualquier recorte lo dejaría invisible.
   Las esquinas redondeadas no lo necesitan: el padding de 8px separa los
   enlaces del borde y cada uno lleva su propio radio. */
.nav-menu ul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  padding: 8px;
}

/* El tercer nivel es el más largo (Utilidades trae 17 enlaces) y no siempre
   cabe en pantalla. Se desplaza por dentro, que sí puede porque no tiene
   submenús propios. */
.nav-menu ul ul {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pt-600) transparent;
}

.nav-menu ul ul::-webkit-scrollbar { width: 8px; }
.nav-menu ul ul::-webkit-scrollbar-track { background: transparent; }
.nav-menu ul ul::-webkit-scrollbar-thumb {
  background: var(--pt-600);
  border-radius: 8px;
}

.nav-menu ul li a {
  color: var(--ink);
  font-size: 13.5px;
  border-radius: 8px;
  padding: 9px 14px;
  transition: background .2s ease, color .2s ease;
}

.nav-menu ul li:hover > a,
.nav-menu ul li a:hover {
  background: var(--surface-2);
  color: var(--pt-600);
}

/* Navegación móvil */
#mobile-nav { background: var(--pt-950); }
#mobile-nav ul li a { color: rgba(255, 255, 255, .85); }
#mobile-nav ul li a:hover { color: var(--ac-400); }
#mobile-nav-toggle i { color: #fff; }

/*--------------------------------------------------------------
# Portada
--------------------------------------------------------------*/

#intro {
  background: var(--grad-hero);
  position: relative;
  isolation: isolate;
}

/* Resplandor y trama sutil, puro CSS */
#intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 58% at 80% 20%, rgba(99, 236, 208, .26) 0%, transparent 62%),
    radial-gradient(58% 52% at 10% 84%, rgba(120, 200, 216, .26) 0%, transparent 64%);
}

#intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* La disposición de la portada vive en css/portada.css. Aquí quedan
   solo las bases que aquella hoja da por hechas: el contenedor flexible
   y la neutralización del posicionamiento absoluto de la plantilla. */
#intro { display: flex; }

#intro .intro-text {
  position: static;
  z-index: 2;
  padding: 0;
}

/* El h1 y el p traen estilos en línea: hay que ganarles */
#intro .intro-text h1 {
  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(26px, 3.6vw, 44px) !important;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-shadow: 0 2px 24px rgba(4, 34, 43, .35);
}

#intro .intro-text p {
  font-size: clamp(14px, 1.4vw, 18px) !important;
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
  max-width: 620px;
  margin-bottom: 26px;
}

/* Los dos botones de la portada, en fila */
#intro .intro-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

#intro .btn-get-started {
  background: var(--grad-ac);
  border: 0;
  color: var(--pt-950);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  padding: 12px 34px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 201, 165, .35);
  transition: transform .28s ease, box-shadow .28s ease;
}

#intro .btn-get-started:hover {
  background: var(--grad-ac);
  color: var(--pt-950);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(20, 201, 165, .45);
}

/* Las tres imágenes estaban colocadas en píxeles fijos (left: calc(50% - 374px),
   top: 200px…) dentro de un contenedor con overflow:hidden, así que en ventanas
   bajas o estrechas se salían y quedaban recortadas. Se pasan a una fila
   centrada que se adapta sola. row-reverse conserva el orden visual original:
   letrero · sello DIAN · logo. */
#intro .product-screens {
  position: static;
  /* La plantilla lo recortaba para contener las imágenes en absoluto.
     Ahora ese recorte solo servía para cortar el halo del logo en seco
     y dibujar un rectángulo detrás de él. */
  overflow: visible;
  display: flex;
  padding: 0;
  height: auto;
}

/* Los selectores originales son #intro .product-screens .product-screen-N,
   así que hay que igualar su especificidad para neutralizar el absolute. */
#intro .product-screens .product-screen-1,
#intro .product-screens .product-screen-2,
#intro .product-screens .product-screen-3 {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  min-width: 0;
}

/* El logo es azul marino y el fondo ahora es oscuro: un halo frío lo
   separa sin alterar los colores de la marca. */
#intro .product-screens img {
  width: auto !important;
  height: auto;
  max-width: 100%;
  max-height: 88%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 26px rgba(99, 236, 208, .30))
    drop-shadow(0 0 60px rgba(46, 147, 169, .35))
    drop-shadow(0 18px 40px rgba(4, 34, 43, .40));
}

/* El logo es el protagonista: resplandor propio detrás, halo claro que lo
   despega del petróleo y una flotación lenta que atrae la mirada. */
#intro .product-screens .product-screen-1 { position: relative; }

#intro .product-screens .product-screen-1::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 185%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(99, 236, 208, .26) 0%,
    rgba(46, 147, 169, .16) 40%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

@keyframes silpos-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

#intro .product-screens .product-screen-1 img {
  max-height: min(42vh, 380px);
  animation: silpos-flotar 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, .70))
    drop-shadow(0 0 40px rgba(255, 255, 255, .38))
    drop-shadow(0 0 90px rgba(99, 236, 208, .45))
    drop-shadow(0 18px 38px rgba(4, 34, 43, .50));
}

/* El sello y el letrero también son de tinta oscura: halo más discreto
   que el del logo, suficiente para que se lean sobre el petróleo. */
#intro .product-screens .product-screen-2 img,
#intro .product-screens .product-screen-3 img {
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, .45))
    drop-shadow(0 0 30px rgba(255, 255, 255, .22))
    drop-shadow(0 10px 24px rgba(4, 34, 43, .40));
}

#intro .product-screens .product-screen-2 img { max-height: min(20vh, 180px); opacity: .9; }
#intro .product-screens .product-screen-3 img { max-height: min(16vh, 140px); opacity: .9; }

/*--------------------------------------------------------------
# Secciones
--------------------------------------------------------------*/

#about, #more-features, #clients, #pricing, #faq, #requisitos, #contact {
  padding: 92px 0;
}

.section-bg { background: var(--surface-2); }

.section-header .section-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.section-header .section-description {
  color: var(--muted);
  font-style: normal;
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 46px;
}

.section-header .section-divider {
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: var(--grad-ac);
  margin-bottom: 22px;
}

#about .content h3,
#about .content .h2 { color: var(--ink); }

#about .content i { color: var(--ac-500); }

#about .about-img img {
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

/*--------------------------------------------------------------
# Claves del producto (franja bajo la portada)
--------------------------------------------------------------*/

/* Dentro de la portada: sin fondo propio, en columna y compacta */
#claves {
  background: none;
  padding: 0;
  border: 0;
  width: 100%;
  margin: 22px 0 26px;
}

#claves .row > [class*="col-"] { padding: 0; }

/* La regla del párrafo del hero lleva !important y alcanza también a
   esta frase por estar dentro de .intro-text: hay que ganarle. */
#intro .intro-text #claves .claves-intro {
  font-size: clamp(13px, 1.25vw, 17px) !important;
  color: rgba(255, 255, 255, .90);
  max-width: 100%;
  margin: 0 0 20px;
}

#claves .claves-intro {
  position: relative;
  text-align: left;
  max-width: 100%;
  margin: 0 0 20px;
  padding-left: 16px;
  font-size: clamp(13px, 1.25vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .90);
  font-weight: 400;
  letter-spacing: .002em;
  animation: silpos-entrar .9s .15s cubic-bezier(.2, .7, .3, 1) both;
}

/* Filete turquesa que la marca como promesa, no como pie de texto */
#claves .claves-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  bottom: .28em;
  width: 3px;
  border-radius: 3px;
  background: var(--grad-ac);
  box-shadow: 0 0 14px rgba(33, 220, 182, .55);
}

/* La frase va a un solo color, el más claro: los fragmentos marcados
   como <strong> no se distinguen ni por color ni por peso. */
#claves .claves-intro,
#intro .intro-text #claves .claves-intro { color: rgba(255, 255, 255, .95); }

#claves .claves-intro strong {
  color: inherit;
  font-weight: inherit;
  text-shadow: none;
}

@keyframes silpos-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Las tres claves entran detrás, una tras otra */
#claves .row > [class*="col-"] {
  animation: silpos-entrar .75s cubic-bezier(.2, .7, .3, 1) both;
}

#claves .row > [class*="col-"]:nth-child(1) { animation-delay: .45s; }
#claves .row > [class*="col-"]:nth-child(2) { animation-delay: .60s; }
#claves .row > [class*="col-"]:nth-child(3) { animation-delay: .75s; }

#claves .clave {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  /* Velo claro: al aclararse, el texto pasa a tinta oscura, que es lo
     único que contrasta sobre un turquesa luminoso. */
  background: rgba(255, 255, 255, .30);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

#claves .clave:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .42);
  border-color: rgba(255, 255, 255, .6);
}

#claves .clave-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #0B4A5C, #12657D);
  border: 1px solid rgba(255, 255, 255, .18);
}

#claves .clave-icono i {
  color: var(--ac-300);
  font-size: 17px;
  line-height: 1;
}

#claves .clave p {
  margin: 0;
  text-align: left;
  color: #093745;
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.4;
  font-weight: 600;
}

@media (max-width: 991px) {
  #claves { margin: 18px 0 20px; }
  /* Al ser de ancho variable, alineadas a la izquierda dejan un borde
     derecho irregular: centradas quedan equilibradas. */
  #claves .row > [class*="col-"] { justify-content: center; }
  /* Centrada y sin filete: con el texto centrado, una barra al costado
     izquierdo queda descolgada. */
  #claves .claves-intro,
  #intro .intro-text #claves .claves-intro {
    text-align: center;
    margin: 0 auto 16px;
    padding-left: 0;
  }
  #claves .claves-intro::before { display: none; }
  #claves .clave { padding: 10px 14px; }
}

/*--------------------------------------------------------------
# Texto de contenido
#
# El mismo tratamiento de la franja de claves —tinta oscura y algo más
# de cuerpo— aplicado a todos los párrafos de ahí hacia abajo.
--------------------------------------------------------------*/

#main p,
#main ul li,
#main .section-description {
  color: var(--ink-body);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.75;
}

/* Las descripciones largas respiran más a lo ancho; las cortas no
   llegan a este límite, así que no cambian. */
#main .section-description {
  font-size: 16.5px;
  line-height: 1.65;
  max-width: min(1040px, 92%);
}

/* Excepciones: donde el fondo es oscuro, el texto sigue siendo claro */
#call-to-action .cta-text,
#call-to-action .cta-text p {
  color: rgba(255, 255, 255, .88);
  font-weight: 500;
}

#pricing .featured ul,
#pricing .featured ul li { color: rgba(255, 255, 255, .9); }

#pricing h4 span { color: var(--muted); font-weight: 400; }

/*--------------------------------------------------------------
# Franja de llamada a la acción
--------------------------------------------------------------*/

#call-to-action {
  background:
    linear-gradient(125deg, rgba(4, 34, 43, .92) 0%, rgba(10, 61, 76, .86) 50%, rgba(18, 98, 119, .82) 100%),
    url(../img/call-to-action-bg.jpg) fixed center center;
  background-size: cover;
  padding: 104px 0;
}

#call-to-action .cta-title {
  color: #fff;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

#call-to-action .cta-text {
  color: rgba(255, 255, 255, .78);
  font-size: 15.5px;
  line-height: 1.8;
}

#call-to-action .cta-btn {
  background: var(--grad-ac);
  border: 0;
  color: var(--pt-950);
  font-weight: 700;
  letter-spacing: .03em;
  padding: 14px 36px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 201, 165, .3);
  transition: transform .28s ease, box-shadow .28s ease;
}

#call-to-action .cta-btn:hover {
  background: var(--grad-ac);
  color: var(--pt-950);
  border: 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(20, 201, 165, .42);
}

/* El título verde suelto que hay en "Nosotros" y "Requisitos" */
.cta-title[style*="teal"] { color: var(--pt-700) !important; }

/*--------------------------------------------------------------
# Tarjetas de servicios
--------------------------------------------------------------*/

#more-features .box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 34px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

#more-features .box:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(20, 201, 165, .45);
}

#more-features .icon i { font-size: 54px; }

#more-features .icon i:before {
  background: var(--grad-ac);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#more-features h4 { margin-left: 78px; font-size: 17px; }
#more-features h4 a { color: var(--ink); }
#more-features h4 a:hover { color: var(--pt-600); }
#more-features p { margin-left: 78px; color: var(--ink-body); font-weight: 400; font-size: 15.5px; line-height: 1.75; }

/*--------------------------------------------------------------
# Clientes
--------------------------------------------------------------*/

#clients img {
  border-radius: var(--r-sm);
  padding: 10px;
  filter: grayscale(100%);
  opacity: .62;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

#clients img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
}

/*--------------------------------------------------------------
# Planes
--------------------------------------------------------------*/

#pricing .box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 42px 34px;
  transition: transform .3s ease, box-shadow .3s ease;
}

#pricing .box:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

#pricing h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pt-600);
}

#pricing h4 {
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}

#pricing h4 sup { color: var(--pt-500); font-weight: 600; }
#pricing h4 span { color: var(--muted); font-size: 16px; font-weight: 400; }

#pricing ul { color: var(--ink-body); font-weight: 400; line-height: 1.65; }
#pricing ul i { color: var(--ac-500); }

#pricing .get-started-btn {
  background: var(--pt-800);
  border-radius: 999px;
  padding: 11px 32px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

#pricing .get-started-btn:hover {
  background: var(--pt-700);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Plan destacado */
#pricing .featured {
  position: relative;
  border: 0;
  background: var(--grad-deep);
  box-shadow: var(--sh-lg);
}

#pricing .featured h3 { color: var(--ac-300); }
#pricing .featured h4 { color: #fff; }
#pricing .featured h4 sup { color: var(--ac-300); }
#pricing .featured h4 span { color: rgba(255, 255, 255, .6); }
#pricing .featured ul { color: rgba(255, 255, 255, .82); }
#pricing .featured ul i { color: var(--ac-300); }

#pricing .featured .get-started-btn {
  background: var(--grad-ac);
  color: var(--pt-950);
  font-weight: 700;
}

/*--------------------------------------------------------------
# Preguntas frecuentes
--------------------------------------------------------------*/

#faq #faq-list ul { padding: 0; }

#faq #faq-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  margin-bottom: 14px;
  padding: 6px 22px;
  transition: box-shadow .3s ease, border-color .3s ease;
}

#faq #faq-list li:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(20, 201, 165, .4);
}

#faq #faq-list a {
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
}

#faq #faq-list a:hover,
#faq #faq-list a.collapse { color: var(--pt-600); }

#faq #faq-list i { color: var(--ac-500); }
#faq #faq-list p { color: var(--ink-body); font-weight: 400; font-size: 15.5px; }

/*--------------------------------------------------------------
# Requisitos
--------------------------------------------------------------*/

#requisitos .cta-title {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-body);
}

/*--------------------------------------------------------------
# Galería
--------------------------------------------------------------*/

#gallery .gallery-item {
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

#gallery .gallery-overlay { background: rgba(4, 34, 43, .72); }

/*--------------------------------------------------------------
# Contacto
--------------------------------------------------------------*/

#contact .contact-about h3 { color: var(--ink); font-weight: 700; }
#contact .contact-about p { color: var(--ink-body); font-weight: 400; }
#contact .info i { color: var(--ac-500); }
#contact .info p { color: var(--ink-body); font-weight: 400; }

#contact .social-links a {
  background: var(--surface-2);
  color: var(--pt-700);
  border: 1px solid var(--line);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

#contact .social-links a:hover {
  background: var(--grad-bar);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

#contact .form .form-control {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  height: auto;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}

#contact .form .form-control::placeholder { color: #9FB2B9; }

#contact .form .form-control:focus {
  border-color: var(--ac-500);
  box-shadow: 0 0 0 4px rgba(20, 201, 165, .15);
}

#contact .form textarea.form-control { padding: 14px 16px; }

#contact .form button[type="submit"] {
  background: var(--grad-bar);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 13px 40px;
  box-shadow: var(--sh-md);
  transition: transform .28s ease, box-shadow .28s ease;
}

#contact .form button[type="submit"]:hover {
  background: var(--grad-bar);
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}

/*--------------------------------------------------------------
# Pie
--------------------------------------------------------------*/

#footer {
  background: var(--grad-deep);
  color: rgba(255, 255, 255, .72);
  box-shadow: none;
  padding: 42px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

#footer .copyright { color: rgba(255, 255, 255, .8); }
#footer .copyright strong { color: #fff; font-weight: 700; }
#footer .credits { color: rgba(255, 255, 255, .5); }
#footer .footer-links a { color: rgba(255, 255, 255, .72); font-size: 14px; }
#footer .footer-links a:hover { color: var(--ac-300); }

/* WhatsApp: botón con el verde y el logo de la marca. El icono sale de
   Font Awesome, que el sitio ya carga (fa-whatsapp = \f232), así que no
   añade ninguna imagen ni dependencia. */
#intro .btn-whatsapp,
#footer .footer-links a[href*="whatsapp"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #25D366 0%, #12B85C 100%);
  color: var(--pt-950);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  padding: 10px 22px;
  margin-left: 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(18, 184, 92, .35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

#intro .btn-whatsapp::before,
#footer .footer-links a[href*="whatsapp"]::before {
  content: "\f232";
  font-family: FontAwesome;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

#intro .btn-whatsapp:hover,
#footer .footer-links a[href*="whatsapp"]:hover {
  color: var(--pt-950);
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 28px rgba(18, 184, 92, .48);
}

@media (max-width: 991px) {
  #footer .footer-links a[href*="whatsapp"] { margin: 14px 0 0; }
}

/*--------------------------------------------------------------
# Botón de volver arriba
--------------------------------------------------------------*/

.back-to-top {
  background: var(--grad-ac);
  color: var(--pt-950);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 -4px 20px rgba(20, 201, 165, .35);
}

.back-to-top:hover,
.back-to-top:focus { background: var(--grad-ac); color: var(--pt-950); }

/*--------------------------------------------------------------
# Ajustes responsive
--------------------------------------------------------------*/

@media (max-width: 991px) {
  #about, #more-features, #clients, #pricing, #faq, #requisitos, #contact { padding: 64px 0; }
  #call-to-action { padding: 72px 0; background-attachment: scroll; }

  /* La portada se apila y deja de estar atada al alto exacto de la
     pantalla: con el mensaje, las claves y la marca no cabría. */
  #intro {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: 100vh;
    padding: 100px 20px 40px;
  }

  #intro .intro-text {
    flex: 0 0 auto;
    max-width: 640px;
    align-items: center;
    text-align: center;
  }

  #intro .intro-text h1,
  #intro .intro-text p,
  #claves .claves-intro { text-align: center; }

  #intro .product-screens { flex: 0 0 auto; max-width: 100%; margin-top: 10px; }
}

/* Monitores grandes: Bootstrap corta el contenido en 1140px y en una
   pantalla de 27" deja medio ancho vacío a los lados. */
@media (min-width: 1600px) {
  .container { max-width: 1320px; }
}

@media (min-width: 2000px) {
  .container { max-width: 1560px; }
  #intro .intro-text h1 { font-size: 56px !important; }
  #intro .intro-text p { font-size: 21px !important; }
  .section-header .section-title { font-size: 42px; }
}

/* En pantallas bajas el hero dispone de poco alto: se comprime el texto
   para que nada quede detrás de la cabecera ni se recorte abajo. */
@media (max-height: 820px) {
  #intro .intro-text h1 { font-size: clamp(22px, 3vw, 32px) !important; margin-bottom: 9px; }
  #intro .intro-text p { font-size: clamp(13px, 1.3vw, 15px) !important; margin-bottom: 16px; }
  #intro .btn-get-started { padding: 10px 28px; }
}

@media (max-width: 767px) {
  /* En móvil solo el logo: los otros dos quedarían ilegibles */
  #intro .product-screens .product-screen-2,
  #intro .product-screens .product-screen-3 { display: none; }
  #intro .product-screens .product-screen-1 img { max-height: 62%; }

  #more-features .box { padding: 26px; }
  #more-features h4, #more-features p { margin-left: 0; }
  #more-features .icon { float: none; display: block; margin-bottom: 26px; }
  #pricing .box { padding: 32px 24px; }
}

/* Respeta a quien pide menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  #intro .product-screens .product-screen-1 img { animation: none; }
  .nav-menu > li > a > strong,
  .nav-menu > li > a:has(strong)::before,
  #claves .claves-intro,
  #claves .row > [class*="col-"] { animation: none; }
  html { scroll-behavior: auto; }
}

/* El de la portada no lleva el margen que separa al del pie de sus
   vecinos, y se iguala en altura al botón de tutoriales. */
/* En la portada el botón es gemelo del de tutoriales: mismo color de
   marca, misma altura y mismo ancho, para que formen pareja. El verde
   de WhatsApp se conserva solo en el del pie. */
#intro .btn-whatsapp {
  margin-left: 0;
  min-height: 45px;
  min-width: 189px;
  max-width: 100%;
  padding: 0 34px;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--grad-ac);
  color: var(--pt-950);
  box-shadow: 0 10px 30px rgba(20, 201, 165, .35);
}

#intro .btn-whatsapp:hover {
  background: var(--grad-ac);
  color: var(--pt-950);
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(20, 201, 165, .45);
}

#intro .btn-whatsapp::before { font-size: 16px; }

@media (max-width: 991px) {
  #intro .intro-acciones { justify-content: center; }
}

/*--------------------------------------------------------------
# Botones de la portada en blanco
#
# Sobre el turquesa aclarado, el blanco sólido recorta mucho mejor que
# el turquesa de marca, que quedaba a un paso del fondo.
--------------------------------------------------------------*/

#intro .btn-get-started,
#intro .btn-whatsapp,
#intro .btn-get-started:hover,
#intro .btn-whatsapp:hover {
  background: #fff;
  color: #0A3D4C;
  border: 0;
  filter: none;
  box-shadow: 0 8px 22px rgba(4, 34, 43, .18);
}

#intro .btn-get-started:hover,
#intro .btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(4, 34, 43, .26);
}

/* El logo conserva el verde de WhatsApp: es lo que identifica el botón
   de un vistazo y sobre blanco contrasta de sobra. */
#intro .btn-whatsapp::before { color: #0E8F47; }

/*--------------------------------------------------------------
# Bloque central de la portada
#
# Las píldoras y los botones se centran dentro de la columna de texto;
# el título, el subtítulo y la frase se mantienen alineados a la
# izquierda, que es donde arranca la lectura.
--------------------------------------------------------------*/

#intro .intro-text #claves { width: 100%; }

#intro .intro-text #claves .row {
  margin-left: auto;
  margin-right: auto;
}

#intro .intro-acciones {
  width: 100%;
  justify-content: center;
}

/* La plantilla le daba margin:10px al botón de tutoriales; con la fila
   flex ese margen solo descuadraba el centrado (152px a un lado y 142
   al otro), porque el de WhatsApp no lo lleva. */
#intro .btn-get-started { margin: 0; }

/* Columna de la portada centrada por completo */
#intro .intro-text {
  align-items: center;
  text-align: center;
}

#intro .intro-text h1,
#intro .intro-text p,
#intro .intro-text #claves .claves-intro {
  text-align: center;
}

/* Con el texto centrado, el filete lateral queda descolgado */
#intro .intro-text #claves .claves-intro {
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
}

#intro .intro-text #claves .claves-intro::before { display: none; }

/* El texto de cada píldora sigue junto a su icono, no centrado */
#claves .clave p { text-align: left; }

/*--------------------------------------------------------------
# Portada en dos mitades iguales
#
# Cada columna ocupa la mitad del ancho y centra su contenido, de modo
# que texto y marca quedan equilibrados a ambos lados del eje.
--------------------------------------------------------------*/

#intro .intro-text,
#intro .product-screens {
  flex: 1 1 50%;
  max-width: 620px;
}

/* Con la columna en 600px, el título necesita 29px para caber en una
   línea: a 33px pedía 661px de ancho y a 44px, los 1050 originales. */
#intro .intro-text h1 {
  font-size: clamp(22px, 2.15vw, 29px) !important;
}