/**
 * RojasTech — estilos de marca, microinteracciones y bloques movidos desde index (sin cambiar el layout base).
 */

/* Legibilidad */
.section-description,
.about-text,
.rt-svc-card__text,
.plan-box .description {
  line-height: 1.65;
}

/* Honeypot anti-spam */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Hero — logo (hover suave; el tamaño base está en style.css) */
#hero .hero-logo img.logo-hover {
  transition: filter 0.35s ease, transform 0.35s ease;
}

#hero .hero-logo img.logo-hover:hover {
  filter: drop-shadow(0 0 12px #03c4eb);
  transform: scale(1.04);
}

/* Header — logo: sin escalar el estado base; solo feedback al hover */
#header #logo a {
  display: inline-block;
  line-height: 0;
}

#header #logo img {
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 12px;
}

#header #logo a:hover img,
#header #logo a:focus img {
  transform: scale(1.03);
  box-shadow: 0 0 18px rgba(3, 196, 235, 0.45);
}

/* Nav + WhatsApp */
#nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  margin: 0 10px;
}

.nav-menu a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus {
  color: #03c4eb;
}

.bi-whatsapp {
  font-size: 24px;
  color: #25d366;
  transition: color 0.3s ease, transform 0.25s ease;
}

a:hover .bi-whatsapp,
a:focus .bi-whatsapp {
  color: #1ebea5;
  transform: scale(1.08);
}

@media (max-width: 768px) {
  #nav-wrapper {
    flex-direction: column;
    gap: 10px;
  }
}

/* CTA hero */
#hero .actions a {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

#hero .actions a:hover,
#hero .actions a:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 196, 235, 0.35);
}

/* Planes */
#pricing .plan-box {
  background: #fff;
  border-radius: 10px;
  padding: 30px 25px;
  margin-bottom: 30px;
  transition: box-shadow 0.35s ease, transform 0.3s ease;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
  text-align: left;
  min-height: 240px;
}

#pricing .plan-box:hover {
  box-shadow: 0 0 25px rgba(3, 196, 235, 0.55);
  transform: scale(1.03);
}

#pricing .plan-box .title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #222;
}

#pricing .plan-box .description {
  font-size: 15.5px;
  color: #333;
  line-height: 1.6;
}

#pricing .plan-cta {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
}

#pricing .plan-cta a {
  color: #03c4eb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

#pricing .plan-cta a:hover,
#pricing .plan-cta a:focus {
  border-bottom-color: #03c4eb;
}

/* Footer (capa base; aspecto premium en css/rt-visual.css) */
.site-footer__surface {
  color: #fff;
  padding: 36px 0 28px;
  font-size: 15px;
  line-height: 1.5;
}

.site-footer__surface a {
  color: #7eefff;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

.site-footer__surface a:hover,
.site-footer__surface a:focus {
  color: #fff;
  border-bottom-color: rgba(126, 239, 255, 0.55);
}

.social-icon {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-icon-link {
  font-size: 24px;
  color: #fff;
  transition: color 0.3s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon-link .bi {
  font-size: 24px;
  line-height: 1;
}

.social-icon-link:hover,
.social-icon-link:focus {
  color: #03c4eb;
  transform: scale(1.12);
}

#contact .rt-contact-info a {
  color: #1a3a44;
}

#contact .rt-contact-info a:hover,
#contact .rt-contact-info a:focus {
  color: #03c4eb;
}

/* Enlace “próximamente” → contacto */
.social-icon-link.social-soon {
  opacity: 0.85;
}

.footer-logo {
  max-height: 120px;
  width: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
}

.footer-logo:hover {
  box-shadow: 0 0 25px #03c4eb;
  transform: scale(1.05);
}

/* Columnas legacy footer-left/right retiradas del HTML; estilos en rt-visual */

/* Formulario contacto — botón */
#contact .form button[type="submit"],
#contact .form .btn-contact-submit {
  transition: transform 0.2s ease, background 0.4s ease, box-shadow 0.25s ease;
}

#contact .form button[type="submit"]:hover,
#contact .form button[type="submit"]:focus,
#contact .form .btn-contact-submit:hover,
#contact .form .btn-contact-submit:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(3, 196, 235, 0.35);
}

/* --- Hero: enlaces secundarios --- */
#hero .hero-sublink {
  margin: 18px 0 0 0;
  font-size: 14px;
  color: #aaa;
}

#hero .hero-sublink a {
  color: #03c4eb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

#hero .hero-sublink a:hover,
#hero .hero-sublink a:focus {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* --- Secciones profesionales (misma familia visual que el tema) --- */
.rt-pro-section {
  padding: 80px 0;
}

.rt-pro-section--muted {
  background: #f8f9fa;
}

.rt-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 24px 22px;
  height: 100%;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.rt-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.rt-card--accent {
  border-color: rgba(3, 196, 235, 0.35);
  box-shadow: 0 4px 20px rgba(3, 196, 235, 0.12);
}

.rt-card-title {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 14px 0;
}

.rt-card-title .fa {
  color: #03c4eb;
  margin-right: 8px;
}

.rt-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #555;
}

.rt-help-cta {
  margin-top: 24px;
}

.rt-services-cta {
  margin-top: 20px;
  padding-top: 10px;
}

/* Botones CTA reutilizables (misma paleta que hero) */
.btn-rt-primary,
.btn-rt-secondary {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 2px;
  margin: 8px 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.btn-rt-primary {
  background: #03c4eb;
  border: 2px solid #03c4eb;
  color: #fff;
}

.btn-rt-primary:hover,
.btn-rt-primary:focus {
  background: #02a8c9;
  border-color: #02a8c9;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 196, 235, 0.35);
}

.btn-rt-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 12px rgba(3, 196, 235, 0.28);
}

.btn-rt-secondary:active {
  transform: translateY(0) scale(0.98);
}

.btn-rt-secondary {
  background: transparent;
  border: 2px solid #03c4eb;
  color: #03c4eb;
}

.btn-rt-secondary:hover,
.btn-rt-secondary:focus {
  background: #03c4eb;
  color: #fff;
  transform: translateY(-2px);
}

/* Proceso — 4 pasos */
.rt-process-row {
  margin-top: 10px;
}

.rt-step {
  text-align: center;
  margin-bottom: 28px;
}

.rt-step-num {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  background: #03c4eb;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rt-step:hover .rt-step-num {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(3, 196, 235, 0.45);
}

.rt-step-title {
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px 0;
}

.rt-step-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #555;
  margin: 0;
  padding: 0 6px;
}

/* Por qué RojasTech */
.rt-why-item {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 6px;
  border-left: 4px solid #03c4eb;
  transition: box-shadow 0.25s ease;
}

.rt-why-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.rt-why-item .fa {
  color: #03c4eb;
  margin-right: 8px;
}

/* Soluciones reales */
.rt-solution-card {
  background: #fff;
  border-radius: 10px;
  padding: 26px 22px;
  margin-bottom: 24px;
  height: calc(100% - 24px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.rt-solution-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.rt-solution-title {
  font-family: "Raleway", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px 0;
}

.rt-solution-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: #555;
  margin-bottom: 16px;
}

.rt-solution-link {
  color: #03c4eb;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.rt-solution-link:hover,
.rt-solution-link:focus {
  border-bottom-color: #03c4eb;
}

/* FAQ */
.rt-faq-item {
  margin-bottom: 22px;
}

.rt-faq-q {
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px 0;
}

.rt-faq-a {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #555;
}

.rt-faq-cta {
  margin-top: 16px;
}

/* Sección redes (barra limpia, sin embeds) */
.rt-social-section .section-description code {
  background: rgba(3, 196, 235, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
}

.rt-social-bar {
  list-style: none;
  padding: 0;
  margin: 28px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.rt-social-bar li {
  margin: 0;
}

.rt-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  background: #111;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #333;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.rt-social-btn .bi {
  font-size: 22px;
}

.rt-social-btn:hover,
.rt-social-btn:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: #fff !important;
}

.rt-social-wa {
  background: #128c7e;
  border-color: #128c7e;
}

.rt-social-wa:hover,
.rt-social-wa:focus {
  background: #0f7a6e;
  border-color: #0f7a6e;
}

.rt-social-ig:hover,
.rt-social-fb:hover,
.rt-social-li:hover {
  background: #03c4eb;
  border-color: #03c4eb;
}

@media (max-width: 767px) {
  .rt-pro-section {
    padding: 56px 0;
  }

  .btn-rt-primary,
  .btn-rt-secondary {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .rt-social-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}