/* MiPymeTech - Estilos Corporativos */
:root {
  /* Paleta oficial extraída del logo */
  --color-primary: #1e5a9e;       /* Azul primario del logo */
  --color-primary-dark: #0d3a6b;  /* Azul oscuro */
  --color-green: #9acd32;         /* Verde lima del logo */
  --color-green-dark: #7ba327;    /* Verde oscuro */
  --color-secondary: #2a7abf;     /* Azul medio derivado */
  --color-accent: #9acd32;        /* Verde lima como acento */
  --color-dark: #0d3a6b;
  --color-text: #1a2a3a;
  --color-text-light: #5a6a7a;
  --color-white: #ffffff;
  --color-light-bg: #f4f8fc;
  --color-green-wa: #25d366;
  --shadow-sm: 0 2px 8px rgba(30,90,158,0.1);
  --shadow-md: 0 4px 20px rgba(30,90,158,0.15);
  --shadow-lg: 0 8px 40px rgba(30,90,158,0.2);
  --radius: 10px;
  --transition: all 0.3s ease;
}
* { box-sizing: border-box; }
body { font-family: 'Segoe UI','Helvetica Neue',Arial,sans-serif; color: var(--color-text); line-height: 1.7; }

/* NAVBAR — fondo blanco, acorde con el logo corporativo */
.navbar-mipyme {
  background: #ffffff;
  padding: 0;
  box-shadow: 0 2px 16px rgba(30,90,158,0.12);
  border-bottom: 3px solid var(--color-green);
  transition: var(--transition);
}
.navbar-mipyme.scrolled {
  box-shadow: 0 3px 24px rgba(30,90,158,0.18);
}
/* Franja superior de color primario */
.navbar-mipyme::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-green) 100%);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
}
.navbar-mipyme > .container { padding-top: 4px; }
.navbar-inner { padding: 0.6rem 0; }
.navbar-brand img { height: 46px; display: block; }
.navbar-mipyme .nav-link {
  color: var(--color-primary-dark) !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem !important;
  border-radius: 6px;
  transition: var(--transition);
  letter-spacing: 0.2px;
  position: relative;
}
.navbar-mipyme .nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0.8rem; right: 0.8rem;
  height: 2px;
  background: var(--color-green);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.navbar-mipyme .nav-link:hover::after,
.navbar-mipyme .nav-link.active::after { transform: scaleX(1); }
.navbar-mipyme .nav-link:hover,
.navbar-mipyme .nav-link.active {
  color: var(--color-primary) !important;
  background: rgba(30,90,158,0.06);
}
/* Botón Contacto destacado */
.navbar-mipyme .btn-wa-nav {
  background: var(--color-green) !important;
  color: white !important;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.42rem 1.1rem !important;
  box-shadow: 0 2px 10px rgba(154,205,50,0.35);
}
.navbar-mipyme .btn-wa-nav::after { display: none; }
.navbar-mipyme .btn-wa-nav:hover {
  background: var(--color-green-dark) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(154,205,50,0.45);
}
/* Toggler para móvil — ícono oscuro sobre fondo blanco */
.navbar-toggler { border-color: rgba(30,90,158,0.3) !important; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231e5a9e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
/* Menú móvil colapsado */
@media (max-width: 991px) {
  .navbar-mipyme .navbar-collapse {
    background: #fff;
    border-top: 2px solid rgba(30,90,158,0.08);
    padding: 0.75rem 0 1rem;
    margin-top: 0.25rem;
  }
  .navbar-mipyme .nav-link { padding: 0.55rem 1rem !important; border-radius: 0; border-left: 3px solid transparent; }
  .navbar-mipyme .nav-link:hover, .navbar-mipyme .nav-link.active { border-left-color: var(--color-green); background: rgba(30,90,158,0.04); }
  .navbar-mipyme .nav-link::after { display: none; }
  .navbar-mipyme .btn-wa-nav { margin: 0.5rem 1rem; border-radius: 8px !important; display: block; text-align: center; }
}

/* CAROUSEL */
.carousel-item-custom { min-height: 520px; display: flex; align-items: center; position: relative; overflow: hidden; }
.slide-1 { background: linear-gradient(135deg, #0d3a6b 0%, #1e5a9e 55%, #2a7abf 100%); }
.slide-2 { background: linear-gradient(135deg, #0d3a6b 0%, #1e5a9e 40%, #7ba327 100%); }
.slide-3 { background: linear-gradient(135deg, #143050 0%, #1e5a9e 50%, #2a7abf 100%); }
.slide-4 { background: linear-gradient(135deg, #0a2d55 0%, #0d3a6b 40%, #1e5a9e 100%); }
.slide-5 { background: linear-gradient(135deg, #0d3a6b 0%, #1e5a9e 45%, #9acd32 100%); }
.carousel-content { position: relative; z-index: 2; padding: 3rem 0; }
.carousel-content h2 { font-size: 2.4rem; font-weight: 700; color: white; margin-bottom: 1rem; }
.carousel-content p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; max-width: 550px; }
.btn-cta { background: var(--color-green); color: white !important; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 700; font-size: 1rem; text-decoration: none; display: inline-block; transition: var(--transition); box-shadow: 0 4px 14px rgba(154,205,50,0.4); }
.btn-cta:hover { background: var(--color-green-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(154,205,50,0.5); }
.carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255,255,255,0.45); border: 2px solid transparent; }
.carousel-indicators .active { background-color: var(--color-green); }

/* SECTIONS */
section { padding: 5rem 0; }
.section-title { font-size: 2.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; }
.section-subtitle { color: var(--color-text-light); font-size: 1.05rem; margin-bottom: 3rem; }
.section-divider { width: 60px; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-green)); border-radius: 2px; margin: 0.75rem auto 1.5rem; }
.section-bg-light { background-color: var(--color-light-bg); }
.section-bg-dark { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%); color: white; }

/* SERVICE CARDS */
.service-card { background: var(--color-white); border: 1px solid rgba(30,90,158,0.1); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; transition: var(--transition); height: 100%; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-green); color: inherit; }
.service-card .icon-wrap { width: 72px; height: 72px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-green) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 4px 15px rgba(154,205,50,0.25); }
.service-card .icon-wrap svg { width: 36px; height: 36px; fill: white; }
.service-card h4 { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.75rem; }
.service-card p { font-size: 0.92rem; color: var(--color-text-light); margin-bottom: 1rem; }
.service-card .btn-service { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 0.4rem 1.2rem; border-radius: 20px; font-size: 0.88rem; font-weight: 600; transition: var(--transition); display: inline-block; }
.service-card:hover .btn-service { background: var(--color-primary); color: white; }

/* BUTTONS */
.btn-primary-custom { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: white !important; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; text-decoration: none; display: inline-block; transition: var(--transition); box-shadow: 0 4px 14px rgba(30,90,158,0.3); }
.btn-primary-custom:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--color-dark), var(--color-primary)); box-shadow: 0 6px 20px rgba(30,90,158,0.4); }
.btn-wa { background: #25d366; color: white !important; border: none; padding: 0.75rem 2rem; border-radius: 30px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.btn-wa:hover { background: #1ebe5d; transform: translateY(-2px); color: white !important; }
.btn-outline-custom { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 0.65rem 1.8rem; border-radius: 30px; font-weight: 600; text-decoration: none; display: inline-block; transition: var(--transition); }
.btn-outline-custom:hover { background: var(--color-primary); color: white; }

/* STATS */
.stat-card { text-align: center; padding: 2rem; }
.stat-card .stat-num { font-size: 2.8rem; font-weight: 800; color: var(--color-green); line-height: 1; display: block; }
.stat-card .stat-label { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-top: 0.5rem; }

/* TESTIMONIALS */
.testimonial-card { background: var(--color-white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-md); border-left: 4px solid var(--color-green); height: 100%; }
.testimonial-card .stars { color: #ffd700; font-size: 1.1rem; }
.testimonial-card p { font-style: italic; color: var(--color-text); margin: 1rem 0; }
.testimonial-card .author { font-weight: 700; color: var(--color-primary); }
.testimonial-card .company { font-size: 0.88rem; color: var(--color-text-light); }

/* PAGE HEADER */
.page-header { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 60%, var(--color-secondary) 100%); padding: 5rem 0 3rem; color: white; }
.page-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.75rem; }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,0.7); text-decoration: none; }
.page-header .breadcrumb-item.active { color: var(--color-green); }

/* FEATURES */
.feature-list { list-style: none; padding: 0; }
.feature-list li { padding: 0.6rem 0 0.6rem 2rem; position: relative; font-size: 0.97rem; border-bottom: 1px solid rgba(30,90,158,0.08); }
.feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-green-dark); font-weight: 700; font-size: 1rem; }

/* ACCORDION */
.accordion-button { color: var(--color-primary) !important; font-weight: 600; }
.accordion-button:not(.collapsed) { background: rgba(154,205,50,0.08) !important; color: var(--color-primary-dark) !important; box-shadow: none !important; border-left: 3px solid var(--color-green) !important; }

/* BLOG */
.blog-card { background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(30,90,158,0.1); height: 100%; transition: var(--transition); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-header { height: 10px; background: linear-gradient(90deg, var(--color-primary), var(--color-green)); }
.blog-card-header.hosting { background: linear-gradient(90deg, #1e5a9e, #2a7abf); }
.blog-card-header.dominios { background: linear-gradient(90deg, #0d3a6b, #1e5a9e); }
.blog-card-header.correo { background: linear-gradient(90deg, #1e5a9e, #9acd32); }
.blog-card-header.diseno { background: linear-gradient(90deg, #7ba327, #9acd32); }
.blog-card-body { padding: 1.5rem; }
.blog-cat-badge { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
.badge-hosting { background: rgba(30,90,158,0.1); color: #1e5a9e; }
.badge-dominios { background: rgba(13,58,107,0.1); color: #0d3a6b; }
.badge-correo { background: rgba(30,90,158,0.1); color: #1e5a9e; }
.badge-diseno { background: rgba(123,163,39,0.12); color: #7ba327; }
.blog-card-body h5 { font-size: 1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.6rem; line-height: 1.4; }
.blog-card-body p { font-size: 0.88rem; color: var(--color-text-light); margin-bottom: 1rem; }
.blog-card-body a.read-more { font-size: 0.88rem; color: var(--color-green-dark); text-decoration: none; font-weight: 600; }
#blog-search { border: 2px solid var(--color-primary); border-radius: 30px; padding: 0.65rem 1.5rem; outline: none; width: 100%; max-width: 450px; font-size: 0.97rem; }
#blog-search:focus { border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(154,205,50,0.15); }
.filter-btn { padding: 0.4rem 1.2rem; border: 2px solid var(--color-primary); border-radius: 20px; background: transparent; color: var(--color-primary); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: var(--transition); margin: 0.25rem; }
.filter-btn.active, .filter-btn:hover { background: var(--color-primary); color: white; }

/* ARTICLE */
.article-content { max-width: 820px; margin: 0 auto; font-size: 1.02rem; line-height: 1.85; }
.article-content h2 { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-light-bg); }
.article-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-secondary); margin-top: 1.75rem; margin-bottom: 0.75rem; }
.article-content .highlight-box { background: var(--color-light-bg); border-left: 4px solid var(--color-green); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5rem 0; }

/* CONTACT */
.contact-form input, .contact-form textarea, .contact-form select { border: 2px solid rgba(30,90,158,0.2); border-radius: 8px; padding: 0.75rem 1rem; width: 100%; font-size: 0.97rem; transition: var(--transition); outline: none; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30,90,158,0.1); }
.contact-form label { font-weight: 600; color: var(--color-primary); margin-bottom: 0.4rem; font-size: 0.92rem; display: block; }
#captcha-canvas { border: 2px solid rgba(30,90,158,0.2); border-radius: 8px; display: block; background: var(--color-light-bg); }
.captcha-error { color: #dc3545; font-size: 0.88rem; margin-top: 0.3rem; }

/* FOOTER */
.footer-main { background: linear-gradient(135deg, #071e38 0%, var(--color-dark) 100%); color: rgba(255,255,255,0.8); padding: 4rem 0 2rem; }
.footer-main h5 { color: var(--color-green); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(154,205,50,0.3); }
.footer-main p { font-size: 0.9rem; line-height: 1.7; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9rem; transition: var(--transition); }
.footer-links a:hover { color: var(--color-green); padding-left: 4px; }
.footer-bottom { background: rgba(0,0,0,0.3); padding: 1rem 0; text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-green); }

/* WA FLOAT */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  text-decoration: none;
  width: 62px; height: 62px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,0.55), 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: wa-pulse 2.5s infinite;
  border: 3px solid rgba(255,255,255,0.85);
}
.wa-float:hover {
  transform: scale(1.10);
  box-shadow: 0 8px 32px rgba(37,211,102,0.65), 0 2px 10px rgba(0,0,0,0.2);
}
.wa-float svg { width: 34px; height: 34px; fill: white; display: block; }
@keyframes wa-pulse { 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0.4); } 50% { box-shadow: 0 4px 20px rgba(37,211,102,0.5),0 0 0 12px rgba(37,211,102,0); } }

/* CTA SECTION */
.cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%); padding: 4rem 0; text-align: center; color: white; }
.cta-section h2 { font-size: 2rem; font-weight: 800; }
.btn-cta-white { background: white; color: var(--color-primary) !important; border: none; padding: 0.9rem 2.5rem; border-radius: 30px; font-weight: 700; font-size: 1.05rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.btn-cta-white:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); color: var(--color-dark) !important; }

/* COMPARE TABLE */
.compare-table th { background: var(--color-primary); color: white; font-weight: 700; }
.compare-table td { vertical-align: middle; padding: 0.85rem; }
.compare-table tr:hover { background: var(--color-light-bg); }
.check-yes { color: #28a745; font-size: 1.2rem; }
.check-no { color: #dc3545; font-size: 1.2rem; }

/* TERMS */
.terms-content h2 { color: var(--color-primary); font-size: 1.4rem; font-weight: 700; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(30,90,158,0.1); }
.terms-content h3 { color: var(--color-secondary); font-size: 1.1rem; font-weight: 600; margin-top: 1.25rem; }

/* FADE IN */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 768px) { .carousel-content h2 { font-size: 1.7rem; } .carousel-item-custom { min-height: 380px; } .slide-illustration { display: none; } .section-title { font-size: 1.6rem; } .page-header h1 { font-size: 1.9rem; } .wa-float { bottom: 20px; right: 20px; width: 52px; height: 52px; } }
@media (max-width: 576px) { section { padding: 3rem 0; } .carousel-content h2 { font-size: 1.4rem; } }

/* ── CAROUSEL IMÁGENES REALES ─────────────────────────────── */
.carousel-img {
  height: 520px;
  object-fit: cover;
  object-position: center;
}
.carousel-caption-custom {
  position: absolute;
  bottom: 48px;
  left: 60px;
  z-index: 5;
}
@media (max-width: 768px) {
  .carousel-img { height: 280px; }
  .carousel-caption-custom { bottom: 28px; left: 20px; }
  .btn-cta { font-size: 0.88rem; padding: 0.55rem 1.3rem; }
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(30,90,158,0.6);
  border-radius: 50%;
  padding: 20px;
  background-size: 60%;
}

/* ── PLANS SLIDER ─────────────────────────────────────────── */
.plans-section { padding: 5rem 0; background: var(--color-light-bg); }
.plans-section.dark { background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%); }

.plans-slider-wrap {
  position: relative;
  overflow: hidden;
}
.plans-track {
  display: flex;
  gap: 24px;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  padding-bottom: 8px;
}
.plan-card {
  flex: 0 0 300px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(30,90,158,0.10);
  border: 1.5px solid rgba(30,90,158,0.10);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px rgba(30,90,158,0.18);
}
.plan-card.featured {
  border: 2px solid var(--color-green);
  box-shadow: 0 6px 32px rgba(154,205,50,0.18);
}
.plan-card .plan-header {
  padding: 1.5rem 1.5rem 1rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
  color: #fff;
  text-align: center;
}
.plan-card.featured .plan-header {
  background: linear-gradient(135deg, var(--color-green-dark) 0%, var(--color-primary) 100%);
}
.plan-badge {
  display: inline-block;
  background: var(--color-green);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.plan-card .plan-name {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0.25rem 0 0;
  letter-spacing: 0.5px;
}
.plan-card .plan-icon {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
  display: block;
}
.plan-card .plan-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.plan-card .plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.plan-card .plan-features li {
  font-size: 0.88rem;
  color: var(--color-text);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(30,90,158,0.07);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.plan-card .plan-features li::before {
  content: '✓';
  color: var(--color-green-dark);
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.plan-card .plan-features li.highlight {
  font-weight: 600;
  color: var(--color-primary);
}
.btn-plan-wa {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-dark));
  color: white !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: var(--transition);
  border: none;
}
.btn-plan-wa:hover {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(154,205,50,0.3);
  color: white !important;
}

/* Slider navigation arrows */
.slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 1.75rem;
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: white;
  color: var(--color-primary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
}
.slider-btn:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.08);
}
.slider-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.slider-dots {
  display: flex;
  gap: 8px;
}
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(30,90,158,0.25);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  padding: 0;
}
.slider-dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
}

/* ══════════════════════════════════════════════════════════════
   PARAMETRIC SLIDER SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* Image fills the container, consistent height */
.hero-carousel { position: relative; }
.carousel-img {
  height: 540px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Gradient overlays for text legibility ── */
.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.overlay-left   { background: linear-gradient(90deg, rgba(13,58,107,0.82) 0%, rgba(13,58,107,0.45) 55%, transparent 85%); }
.overlay-right  { background: linear-gradient(270deg, rgba(13,58,107,0.82) 0%, rgba(13,58,107,0.45) 55%, transparent 85%); }
.overlay-bottom { background: linear-gradient(0deg, rgba(13,58,107,0.88) 0%, rgba(13,58,107,0.55) 45%, transparent 80%); }
.overlay-top    { background: linear-gradient(180deg, rgba(13,58,107,0.82) 0%, rgba(13,58,107,0.4) 50%, transparent 80%); }
.overlay-center { background: radial-gradient(ellipse at center, rgba(13,58,107,0.75) 0%, rgba(13,58,107,0.2) 70%, transparent 100%); }

/* ── Caption container: full absolute over image ── */
.slide-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: 2.5rem 5%;
  box-sizing: border-box;
}

/* ── Horizontal alignment ── */
.slide-text-left   { justify-content: flex-start; }
.slide-text-hcenter { justify-content: center; }
.slide-text-right  { justify-content: flex-end; }

/* ── Vertical alignment ── */
.slide-text-top    { align-items: flex-start; }
.slide-text-vcenter { align-items: center; }
.slide-text-bottom { align-items: flex-end; }

/* ── Center-aligned text gets centered text-align ── */
.slide-text-hcenter .slide-text-inner { text-align: center; }
.slide-text-right   .slide-text-inner { text-align: right; }
.slide-text-left    .slide-text-inner { text-align: left; }

/* ── Inner text block ── */
.slide-text-inner {
  max-width: 580px;
  /* Animate in when slide becomes active */
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease 0.25s, transform 0.65s ease 0.25s;
}

/* Active slide: text animates in */
.carousel-item.active .slide-text-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ── Title ── */
.slide-title {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.65rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  letter-spacing: -0.5px;
}

/* ── Subtitle ── */
.slide-subtitle {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  opacity: 0.95;
}

/* ── CTA button on slide ── */
.btn-slide-cta {
  display: inline-block;
  background: var(--color-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.75rem;
  border-radius: 30px;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(154,205,50,0.4);
  letter-spacing: 0.3px;
}
.btn-slide-cta:hover {
  background: var(--color-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(154,205,50,0.55);
  color: #fff !important;
}

/* ── Carousel indicators ── */
.carousel-indicators {
  margin-bottom: 1.25rem;
  z-index: 10;
}
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.45);
  border: 2px solid rgba(255,255,255,0.6);
  transition: var(--transition);
  margin: 0 5px;
}
.carousel-indicators .active {
  background-color: var(--color-green);
  border-color: var(--color-green);
  transform: scale(1.25);
}

/* ── Carousel control arrows ── */
.carousel-control-prev,
.carousel-control-next {
  width: 52px;
  height: 52px;
  background: rgba(13,58,107,0.65);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,0.2);
  transition: var(--transition);
  opacity: 1;
}
.carousel-control-prev { left: 20px; }
.carousel-control-next { right: 20px; }
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(154,205,50,0.8);
  border-color: var(--color-green);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .carousel-img { height: 400px; }
  .slide-title  { font-size: 1.9rem; }
}
@media (max-width: 767px) {
  .carousel-img   { height: 300px; }
  .slide-caption  { padding: 1.5rem 6%; }
  .slide-title    { font-size: 1.4rem; }
  .slide-subtitle { font-size: 0.85rem; }
  .btn-slide-cta  { font-size: 0.82rem; padding: 0.5rem 1.2rem; }
  .carousel-control-prev { left: 8px; }
  .carousel-control-next { right: 8px; }
  .carousel-control-prev,
  .carousel-control-next { width: 38px; height: 38px; }
  /* On mobile, all text left-aligned for readability */
  .slide-caption { justify-content: flex-start !important; }
  .slide-text-inner { text-align: left !important; max-width: 90vw; }
}

/* ══════════════════════════════════════════════════════════════
   SLIDER PARAMETRIZABLE — ENGINE CSS
   Generado automáticamente por el motor JS (slider-engine)
   ══════════════════════════════════════════════════════════════ */

/* Base imagen */
.hero-carousel { position: relative; overflow: hidden; }
.carousel-img {
  height: 540px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.88);
  transition: filter 0.4s ease;
}
.carousel-item.active .carousel-img { filter: brightness(1); }

/* ── Overlays de gradiente (legibilidad) ─────────────────────── */
.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.overlay-left   { background: linear-gradient(90deg,  rgba(13,58,107,0.85) 0%, rgba(13,58,107,0.5) 50%, transparent 80%); }
.overlay-right  { background: linear-gradient(270deg, rgba(13,58,107,0.85) 0%, rgba(13,58,107,0.5) 50%, transparent 80%); }
.overlay-bottom { background: linear-gradient(0deg,   rgba(13,58,107,0.92) 0%, rgba(13,58,107,0.6) 45%, transparent 80%); }
.overlay-top    { background: linear-gradient(180deg, rgba(13,58,107,0.85) 0%, rgba(13,58,107,0.5) 50%, transparent 80%); }
.overlay-center { background: radial-gradient(ellipse at center, rgba(13,58,107,0.78) 0%, rgba(13,58,107,0.25) 65%, transparent 100%); }

/* ── Caption container ───────────────────────────────────────── */
.slide-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: 0 5%;
  box-sizing: border-box;
}

/* Alineación horizontal */
.slide-align-h-left   { justify-content: flex-start; }
.slide-align-h-center { justify-content: center;     }
.slide-align-h-right  { justify-content: flex-end;   }

/* Alineación vertical */
.slide-align-v-top    { align-items: flex-start; padding-top: 3.5rem;    }
.slide-align-v-middle { align-items: center;                             }
.slide-align-v-bottom { align-items: flex-end;  padding-bottom: 4.5rem; }

/* Text-align según h */
.slide-align-h-center .slide-text-inner { text-align: center; }
.slide-align-h-right  .slide-text-inner { text-align: right;  }
.slide-align-h-left   .slide-text-inner { text-align: left;   }

/* ── Inner text block — animación de entrada ─────────────────── */
.slide-text-inner {
  max-width: 600px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0s, transform 0s;
}
/* Bootstrap añade .active tras el fade; usamos el evento JS para animar */
.slide-text-inner.slide-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

/* ── Título flotante ─────────────────────────────────────────── */
.slide-title {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: -0.3px;
}

/* ── Subtítulo (segundo texto, letra más pequeña) ─────────────── */
.slide-subtitle {
  font-size: clamp(0.88rem, 1.7vw, 1.08rem);
  font-weight: 500;
  margin: 0 0 1.6rem;
  line-height: 1.6;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  opacity: 0.96;
}

/* ── Botón CTA dentro del slide ─────────────────────────────── */
.btn-slide-cta {
  display: inline-block;
  background: var(--color-green, #9acd32);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.8rem;
  border-radius: 30px;
  text-decoration: none !important;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 18px rgba(154,205,50,0.45);
  letter-spacing: 0.3px;
}
.btn-slide-cta:hover {
  background: var(--color-green-dark, #7ba327);
  transform: translateY(-3px);
  box-shadow: 0 7px 22px rgba(154,205,50,0.6);
  color: #fff !important;
}

/* ── Indicadores de posición ─────────────────────────────────── */
.carousel-indicators {
  z-index: 10;
  margin-bottom: 1.5rem;
  gap: 6px;
}
.carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 2px solid rgba(255,255,255,0.65);
  transition: all 0.3s ease;
  margin: 0 4px;
}
.carousel-indicators .active {
  background: #9acd32;
  border-color: #9acd32;
  transform: scale(1.3);
}

/* ── Botones prev/next ───────────────────────────────────────── */
.carousel-control-prev,
.carousel-control-next {
  width: 50px; height: 50px;
  background: rgba(13,58,107,0.65);
  border-radius: 50%;
  top: 50%; bottom: auto;
  transform: translateY(-50%);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,0.25);
  opacity: 1;
  transition: all 0.3s ease;
}
.carousel-control-prev { left: 18px; }
.carousel-control-next { right: 18px; }
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(154,205,50,0.85);
  border-color: #9acd32;
  transform: translateY(-50%) scale(1.08);
}
.carousel-control-prev-icon,
.carousel-control-next-icon { width: 18px; height: 18px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .carousel-img        { height: 420px; }
}
@media (max-width: 767px) {
  .carousel-img        { height: 310px; }
  .slide-caption       { padding: 0 5%; }
  .slide-title         { font-size: 1.35rem; }
  .slide-subtitle      { font-size: 0.82rem; margin-bottom: 1rem; }
  .btn-slide-cta       { font-size: 0.8rem; padding: 0.5rem 1.2rem; }
  /* Siempre izquierda en móvil para máxima legibilidad */
  .slide-caption       { justify-content: flex-start !important; }
  .slide-text-inner    { text-align: left !important; max-width: 88vw; }
  .carousel-control-prev { left: 6px; width: 36px; height: 36px; }
  .carousel-control-next { right: 6px; width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   BOTÓN DEL SLIDE — PARAMETRIZABLE COMPLETO
   ══════════════════════════════════════════════════════════════ */

/* ── Base del botón (se sobreescribe por JS con data-*) ──────── */
.btn-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-slide-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
  color: inherit !important;
  text-decoration: none !important;
}
.btn-slide-cta:active { transform: translateY(-1px); filter: brightness(0.96); }

/* ── Tamaños ─────────────────────────────────────────────────── */
.btn-slide-sm  { font-size: 0.8rem;  padding: 0.42rem 1.1rem; }
.btn-slide-md  { font-size: 0.95rem; padding: 0.65rem 1.75rem; }
.btn-slide-lg  { font-size: 1.1rem;  padding: 0.85rem 2.2rem; }

/* ── Formas ──────────────────────────────────────────────────── */
.btn-slide-pill    { border-radius: 50px; }
.btn-slide-rounded { border-radius: 10px; }
.btn-slide-square  { border-radius: 3px;  }

/* ── Posicionamiento independiente (fuera del flujo del texto) ── */
/* Cuando el botón está en posición fija dentro del slide         */
.btn-slide-fixed {
  position: absolute;
  z-index: 5;
}
.btn-pos-bottom-left   { bottom: 2.8rem; left: 5%;  }
.btn-pos-bottom-center { bottom: 2.8rem; left: 50%; transform: translateX(-50%); }
.btn-pos-bottom-right  { bottom: 2.8rem; right: 5%; }
.btn-pos-top-left      { top: 2.8rem;    left: 5%;  }
.btn-pos-top-right     { top: 2.8rem;    right: 5%; }

/* Hover para posición fija (no afecta translate del centrado) */
.btn-pos-bottom-center:hover { transform: translateX(-50%) translateY(-3px); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .btn-slide-lg { font-size: 0.88rem; padding: 0.6rem 1.4rem; }
  .btn-slide-md { font-size: 0.82rem; padding: 0.5rem 1.2rem; }
  .btn-slide-sm { font-size: 0.75rem; padding: 0.38rem 0.9rem; }
  .btn-pos-bottom-center { left: 5%; transform: none; }
  .btn-pos-bottom-center:hover { transform: translateY(-3px); }
}

/* ══════════════════════════════════════════════════════════════
   FORMULARIO DE CONTACTO PHP
   ══════════════════════════════════════════════════════════════ */
.contact-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(30,90,158,0.1);
  padding: 2rem 2.25rem;
}
.contact-card-title {
  color: var(--color-primary);
  font-weight: 800;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

/* Alertas */
.form-alert {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.93rem;
  line-height: 1.5;
}
.form-alert-ok  { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.form-alert-err { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.form-alert-err a { color: #721c24; font-weight: 700; }

/* Labels */
.form-label-custom {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}
.form-label-custom .req { color: var(--color-green-dark); }

/* Inputs */
.form-input-custom {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid #d0dae8;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--color-text);
  background: #fafcff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  display: block;
}
.form-input-custom:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30,90,158,0.12);
  background: #fff;
}
textarea.form-input-custom { resize: vertical; min-height: 120px; }

/* Error state */
.input-error { border-color: #dc3545 !important; background: #fff8f8 !important; }
.field-error {
  display: block;
  font-size: 0.78rem;
  color: #dc3545;
  margin-top: 0.25rem;
  font-weight: 500;
}

/* CAPTCHA PHP */
.captcha-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.captcha-img-php {
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  display: block;
  max-height: 56px;
  transition: opacity 0.2s;
}
.captcha-img-php:hover { opacity: 0.85; }
.btn-captcha-refresh {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition);
}
.btn-captcha-refresh:hover {
  background: var(--color-primary);
  color: white;
}
.captcha-input { max-width: 240px; }
.captcha-hint  { font-size: 0.78rem; color: var(--color-text-light); margin-top: 0.4rem; margin-bottom: 0; }

/* Botón submit */
.btn-submit-php {
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-dark));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.3px;
}
.btn-submit-php:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-green-dark), var(--color-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(154,205,50,0.35);
}
.btn-submit-php:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Legal text */
.form-legal {
  font-size: 0.8rem;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.form-legal a { color: var(--color-primary); }

/* Info cards contacto */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-light-bg);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.contact-info-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.contact-info-card strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.15rem;
}
.contact-info-card a,
.contact-info-card span {
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.5;
}
.contact-info-card a:hover { color: var(--color-primary); }

/* PHP info box */
.php-info-box {
  background: rgba(154,205,50,0.07);
  border: 1px solid rgba(154,205,50,0.3);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.php-info-box h6 { color: var(--color-primary); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.php-info-box p  { font-size: 0.82rem; color: var(--color-text-light); margin: 0; line-height: 1.6; }
.php-info-box code { background: rgba(30,90,158,0.1); padding: 1px 5px; border-radius: 4px; font-size: 0.82rem; }

/* ══════════════════════════════════════════════════════════════
   HOSTING PLANS — SLIDER ENGINE
   ══════════════════════════════════════════════════════════════ */
.hosting-plans-section { padding: 5rem 0; background: #f4f7fb; }

/* Slider wrapper built by JS */
.hp-slider-wrap { position: relative; overflow: hidden; }
.hp-track {
  display: flex;
  gap: 22px;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  align-items: stretch;
}

/* Plan card */
.hp-card {
  flex: 0 0 295px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 20px rgba(30,90,158,0.09);
  border: 1.5px solid rgba(30,90,158,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  position: relative;
}
.hp-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 36px rgba(30,90,158,0.17);
}

/* Featured highlight */
.hp-card.hp-popular {
  border: 2px solid #9acd32;
  box-shadow: 0 6px 32px rgba(154,205,50,0.20);
}
.hp-card.hp-popular:hover {
  box-shadow: 0 14px 40px rgba(154,205,50,0.28);
}

/* Badge */
.hp-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: #9acd32;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.4px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Header */
.hp-header {
  padding: 1.6rem 1.4rem 1rem;
  text-align: center;
  color: #fff;
}
.hp-header-blue  { background: linear-gradient(135deg, #1e5a9e 0%, #0d3a6b 100%); }
.hp-header-green { background: linear-gradient(135deg, #7ba327 0%, #1e5a9e 100%); }
.hp-header-dark  { background: linear-gradient(135deg, #0d3a6b 0%, #1e5a9e 100%); }

.hp-icon { font-size: 2.2rem; display: block; margin-bottom: 0.35rem; }
.hp-name { font-size: 1.22rem; font-weight: 800; letter-spacing: 0.3px; }

/* Body */
.hp-body { padding: 1.2rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }

/* Features list */
.hp-features {
  list-style: none;
  padding: 0; margin: 0 0 1.2rem;
  flex: 1;
}
.hp-features li {
  font-size: 0.87rem;
  color: #4a5568;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(30,90,158,0.07);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.hp-features li:last-child { border-bottom: none; }

/* Highlight row */
.hp-features li.feat-highlight {
  font-weight: 700;
  color: #1e5a9e;
  font-size: 0.92rem;
}
/* Disabled/not-included row */
.hp-features li.feat-disabled {
  color: #bbb;
  text-decoration: line-through;
}
.hp-features li.feat-disabled .feat-icon { opacity: 0.4; }

/* Feature icon */
.feat-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  min-width: 16px;
  text-align: center;
  margin-top: 1px;
}

/* WhatsApp button */
.hp-btn-wa {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #1e5a9e, #7ba327);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.93rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(30,90,158,0.2);
}
.hp-btn-wa:hover {
  background: linear-gradient(135deg, #7ba327, #1e5a9e);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(154,205,50,0.35);
  color: #fff !important;
}

/* Navigation */
.hp-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 2rem;
}
.hp-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #1e5a9e;
  background: #fff;
  color: #1e5a9e;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  line-height: 1;
}
.hp-nav-btn:hover { background: #1e5a9e; color: #fff; transform: scale(1.08); }
.hp-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.hp-dots { display: flex; gap: 7px; }
.hp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(30,90,158,0.2);
  cursor: pointer;
  border: none; padding: 0;
  transition: all 0.25s ease;
}
.hp-dot.active { background: #9acd32; transform: scale(1.35); }

@media (max-width: 767px) {
  .hp-card { flex: 0 0 260px; }
}

/* ══════════════════════════════════════════════════════════════
   WHOIS DOMAIN SEARCHER
   ══════════════════════════════════════════════════════════════ */
.whois-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f0f4fb 0%, #e8f4e8 100%);
}

/* ── Card principal ──────────────────────────────────────────── */
.whois-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(30,90,158,0.12);
  padding: 2.2rem 2.5rem;
  max-width: 780px;
  margin: 0 auto 2rem;
  border: 1.5px solid rgba(154,205,50,0.3);
}
@media (max-width: 575px) { .whois-card { padding: 1.4rem 1.2rem; } }

/* ── Input group ─────────────────────────────────────────────── */
.whois-form { display: flex; flex-direction: column; gap: 1.1rem; }
.whois-input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.whois-domain-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f4f7fb;
  border: 2px solid rgba(30,90,158,0.2);
  border-radius: 12px;
  padding: 0 14px;
  transition: border-color 0.25s;
}
.whois-domain-wrap:focus-within {
  border-color: #9acd32;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(154,205,50,0.15);
}
.whois-icon { font-size: 1.3rem; flex-shrink: 0; }
.whois-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  color: #1a1a2e;
  outline: none;
}
.whois-input::placeholder { color: #aab; font-size: 0.92rem; }
.whois-btn {
  background: linear-gradient(135deg, #1e5a9e, #0d3a6b);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.75rem 1.6rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.whois-btn:hover {
  background: linear-gradient(135deg, #9acd32, #7ba327);
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(154,205,50,0.4);
}
.whois-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Ejemplos ────────────────────────────────────────────────── */
.whois-examples {
  font-size: 0.82rem;
  color: #888;
  margin: 0;
}
.whois-example {
  color: #1e5a9e;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.whois-example:hover { color: #9acd32; text-decoration: underline; }

/* ── CAPTCHA ─────────────────────────────────────────────────── */
.whois-captcha-row { display: flex; align-items: center; }
.whois-captcha-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.whois-captcha-label { font-size: 0.85rem; font-weight: 600; color: #555; white-space: nowrap; }
.whois-captcha-input {
  width: 90px;
  padding: 0.5rem 0.8rem;
  border: 2px solid rgba(30,90,158,0.2);
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
  outline: none;
  transition: border-color 0.25s;
}
.whois-captcha-input:focus { border-color: #9acd32; box-shadow: 0 0 0 3px rgba(154,205,50,0.15); }

/* ── Error ───────────────────────────────────────────────────── */
.whois-error {
  background: #fff3f3;
  border: 1.5px solid #f5c6cb;
  color: #721c24;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Result cards ────────────────────────────────────────────── */
.whois-result-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
.whois-result-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 1.6rem 2rem;
  flex-wrap: wrap;
}
.whois-status-icon { font-size: 2.2rem; flex-shrink: 0; }
.whois-status-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 3px; }
.whois-domain-name { font-size: 1rem; margin: 0; opacity: 0.85; font-weight: 600; }
.whois-result-body { padding: 1.5rem 2rem 2rem; background: #fff; }
@media (max-width:575px) {
  .whois-result-header { padding: 1.2rem 1.2rem; gap: 12px; }
  .whois-result-body   { padding: 1.2rem 1.2rem 1.5rem; }
}

/* Disponible */
.whois-ok-header { background: linear-gradient(135deg, #4caf50, #7ba327); color: #fff; }
.whois-ok-msg { font-size: 0.95rem; color: #444; margin-bottom: 1.2rem; }

/* No disponible */
.whois-taken-header { background: linear-gradient(135deg, #0d3a6b, #1e5a9e); color: #fff; }

/* ── WA buttons in results ───────────────────────────────────── */
.btn-whois-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
  color: #fff !important;
}
.btn-whois-wa-green { background: #25d366; box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
.btn-whois-wa-green:hover { background: #1daa53; transform: translateY(-2px); }
.btn-whois-wa-blue { background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.5); }
.btn-whois-wa-blue:hover { background: rgba(255,255,255,0.30); }

/* ── Data grid (tabla de campos WHOIS) ───────────────────────── */
.whois-data-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e5a9e;
  margin: 1.2rem 0 0.8rem;
  padding-bottom: 6px;
  border-bottom: 2px solid #9acd32;
}
.whois-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  margin-bottom: 0.5rem;
}
.whois-field {
  background: #f8faff;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid #9acd32;
}
.whois-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e5a9e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.whois-field-value {
  font-size: 0.88rem;
  color: #333;
  word-break: break-all;
  font-weight: 500;
}
.whois-field-value.empty { color: #bbb; font-style: italic; }

/* Highlight: fecha vencimiento próxima */
.whois-field.expiry-soon { border-left-color: #e53e3e; background: #fff5f5; }
.whois-field.expiry-soon .whois-field-label { color: #c53030; }

/* ── DNS list ────────────────────────────────────────────────── */
.whois-dns-block { margin-top: 1rem; }
.whois-dns-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.whois-dns-list li {
  background: #f0f4fb;
  border: 1px solid rgba(30,90,158,0.15);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.83rem;
  font-family: monospace;
  color: #0d3a6b;
  font-weight: 600;
}

/* ── Disclaimer ──────────────────────────────────────────────── */
.whois-disclaimer {
  font-size: 0.78rem;
  color: #999;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid #eee;
  line-height: 1.5;
}

/* ── Loading spinner ─────────────────────────────────────────── */
@keyframes whois-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════
   EMAILJS FORM STATES
   ══════════════════════════════════════════════════════ */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  font-size: .9rem;
  line-height: 1.5;
}
.form-alert-sending {
  background: #f0f4fb;
  border: 1.5px solid #1e5a9e33;
  color: #1e5a9e;
}
.form-alert-ok {
  background: #f0fff4;
  border: 1.5px solid #68d391;
  color: #22543d;
}
.form-alert-err {
  background: #fff5f5;
  border: 1.5px solid #fc8181;
  color: #742a2a;
}
.ejs-spinner {
  width: 22px; height: 22px;
  border: 3px solid #1e5a9e33;
  border-top-color: #1e5a9e;
  border-radius: 50%;
  animation: ejs-spin .8s linear infinite;
  flex-shrink: 0; margin-top: 2px;
}
@keyframes ejs-spin { to { transform: rotate(360deg); } }
.ejs-check  { font-size: 1.5rem; flex-shrink: 0; }
.ejs-icon-err { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.btn-retry {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .4rem .9rem; border-radius: 6px; font-size: .82rem;
  font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1.5px solid #c53030; background: #fff5f5; color: #c53030;
  transition: all .2s;
}
.btn-retry:hover { background: #c53030; color: #fff; }
.btn-retry-wa   { border-color: #25d366; background: #f0fff4; color: #276749; }
.btn-retry-wa:hover { background: #25d366; color: #fff; }