:root{
  --bg: #0b1220;
  --card: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.70);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2, 8, 23, .10);
}

/* Base */
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  line-height: 1.55;
}

/* Títulos */
h1,h2,h3{
  letter-spacing: -0.02em;
  text-transform: none !important;
}

/* Contenedores */
section{ padding: 64px 0; }

/* Cards */
.service-item,
.andy-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

/* Hero */
.hero-andy{
  padding-top: 120px;
}
.hero-video{
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Botones */
.btn{
  border-radius: 999px !important;
  font-weight: 700;
}

/* WhatsApp flotante */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(166, 240, 119, 0.35);
}
.wa-float:hover{ filter: brightness(0.95); }

@media (max-width: 768px){
  section{ padding: 40px 0; }
  h1{ font-size: 2rem; }
  .hero-andy{ padding-top: 100px; }
}
/* ===== FASE 2: Contacto real ===== */
.contact-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  border: 1px solid rgba(2,8,23,.06);
}

.contact-form label{
  font-weight: 700;
  margin-bottom: 6px;
}

.contact-note{
  margin-top: 12px;
  opacity: .8;
  font-size: 0.95em;
}

/* Honeypot oculto */
.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}
/* ===== Fix contraste sección "Quién soy" ===== */
#about .andy-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  color: #0b1220; /* color base del texto */
}

#about .andy-card h3{
  color: #0b1220;
}

#about .andy-card p,
#about .andy-card li{
  color: #334155;
}
/* ===== QUIÉN SOY (RECOMENDADO): Card clara moderna + texto azul ===== */
#about .andy-card{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  color: #1E3A8A; /* azul lectura */
}

#about .andy-card h3{
  color: #1D4ED8; /* azul título */
}

#about .andy-card p,
#about .andy-card li{
  color: #334155; /* azul lectura */
}
/* ===== HERO más moderno y con más impacto ===== */
.hero-andy{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px circle at 15% 20%, rgba(34,197,94,.16), transparent 55%),
    radial-gradient(900px circle at 85% 30%, rgba(59,130,246,.18), transparent 55%),
    linear-gradient(180deg, #0f5aef 0%, #2baf0d 100%);
}

.hero-andy::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 18px 18px;
}

.hero-andy .container{ position: relative; z-index: 1; }

/* Tipografía y jerarquía */
.hero-andy h1{
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 12px;
  font-size: 56px;
}

@media (max-width: 768px){
  .hero-andy h1{ font-size: 40px; }
}

.hero-sub{
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: rgba(255,255,255,.88);
}

/* Chips de servicios */
.hero-tags .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight: 800;
  font-size: 14px;
  margin-right:10px;
  margin-bottom:10px;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

.hero-tags .tag-it{
  background: rgba(59,130,246,.14);
  color: rgba(219,234,254,.95); /* azul claro legible */
}

.hero-tags .tag-el{
  background: rgba(8, 189, 74, 0.14);
  color: rgba(220,252,231,.95); /* verde claro legible */
}

/* Beneficios */
.hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  margin: 6px 0 18px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

.hero-benefits i{
  margin-right: 6px;
  opacity: .95;
}

/* Botones más “premium” */
.hero-cta .btn{
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.hero-cta .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

.hero-cta .btn-default{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

.hero-cta .btn-default:hover{
  background: rgba(255,255,255,.16);
}

/* Horario */
.hero-hours{
  margin-top: 10px;
  color: rgba(255,255,255,.70);
}
/* ===== NAVBAR: legibilidad + look moderno ===== */

/* Base: sobre el hero (oscuro) */
.navbar.navbar-default{
  border: 0;
  background: rgba(10, 14, 20, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.navbar-default .navbar-brand{
  color: #fff !important;
  padding: 14px 0 !important;
  height: auto;
}

.navbar-default .navbar-brand .brand-text{
  color: #fff !important;
  font-weight: 900;
}

/* Menú: pasalo a blanco + subrayado sutil */
.navbar-default .navbar-nav > li > a{
  color: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.25) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;  /* menos “separado” = más moderno */
}

/* Hover visible */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
  color: #fff !important;
  border-bottom-color: rgba(34,197,94,0.95) !important; /* verde del punto */
}

/* ===== Estado scrolleado (navbar-shrink): sólido + “pills” ===== */
.navbar-default.navbar-shrink{
  background: rgba(15, 23, 42, 0.92) !important; /* oscuro elegante */
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  padding: 6px 0 !important;
}

.navbar-default.navbar-shrink .navbar-brand{
  padding: 10px 0 !important;
}

.navbar-default.navbar-shrink .navbar-nav > li > a{
  border-bottom: none !important;
  padding: 10px 12px !important;
  margin: 8px 6px !important;
  border-radius: 999px;
  background: transparent;
}

/* Hover tipo “botón” */
.navbar-default.navbar-shrink .navbar-nav > li > a:hover,
.navbar-default.navbar-shrink .navbar-nav > li > a:focus{
  background: rgba(255,255,255,0.10);
}

/* Activo bien marcado */
.navbar-default.navbar-shrink .navbar-nav > .active > a,
.navbar-default.navbar-shrink .navbar-nav > .active > a:hover,
.navbar-default.navbar-shrink .navbar-nav > .active > a:focus{
  background: rgba(34,197,94,0.18) !important;
  color: #fff !important;
}

/* ===== Botón Volver Arriba ===== */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 92px;          /* lo subo para que no choque con el WhatsApp flotante */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;

  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 9999;
}

.back-to-top:hover{
  background: rgba(34,197,94,0.22);
  border-color: rgba(34,197,94,0.55);
  color: #fff;
}

.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}