/* ============================================================
   OB Solutions — Capa de diseño estilo Apple (2026-08-12)
   Se carga DESPUÉS de los estilos de cada página y refina:
   tipografía del sistema, radios continuos, botones pill,
   nav de vidrio (Liquid Glass), inputs iOS y sombras suaves.
   Paleta de marca intacta: navy + dorado.
   ============================================================ */

:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-r-sm: 12px;
  --ap-r-md: 16px;
  --ap-r-lg: 22px;
  --ap-r-pill: 980px;            /* pill exacto de los CTA de Apple */
  --ap-ease: cubic-bezier(.25,.1,.25,1);
  --ap-shadow-1: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.22);
  --ap-shadow-2: 0 2px 6px rgba(0,0,0,.22), 0 16px 48px rgba(0,0,0,.30);
  --ap-hairline: rgba(255,255,255,.10);
  --ap-gold: #d4a94e;
  --ap-gold-ring: rgba(212,169,78,.35);
}

/* ---------- Tipografía: sistema SF en todo ---------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, label, input, select, textarea, button,
.hero *, .section-header *, .footer * {
  font-family: var(--ap-font) !important;
}
h1, h2 { letter-spacing: -0.022em; font-weight: 700; }
h3, h4 { letter-spacing: -0.016em; font-weight: 650; }
p, li  { letter-spacing: -0.006em; }

/* ---------- Nav de vidrio (Liquid Glass) ---------- */
.navbar {
  background: rgba(10, 20, 38, .68) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 0.5px solid var(--ap-hairline);
  box-shadow: none !important;
}

/* ---------- Botones: pill Apple ---------- */
.btn, .btn-primary, .btn-secondary, button, a.button, .nav-cta, input[type="submit"] {
  border-radius: var(--ap-r-pill) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: transform .18s var(--ap-ease), box-shadow .25s var(--ap-ease),
              background .25s var(--ap-ease), opacity .25s var(--ap-ease);
}
.btn-primary, .btn[id], input[type="submit"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(212,169,78,.28);
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, button:hover {
  transform: translateY(-1px);
}
.btn:active, .btn-primary:active, .btn-secondary:active, button:active {
  transform: scale(.97);
}
.btn-secondary {
  border: 1px solid var(--ap-hairline) !important;
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
:is(.btn, .btn-primary, .btn-secondary, .nav-cta, button, input, select, textarea):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ap-gold-ring) !important;
}

/* ---------- Tarjetas y paneles: radio continuo + hairline ---------- */
.testimonial-card, .reel-card, .faq-item, .step, .contact-info-item,
.card, .chip, .service-card, .stat-card, .price-card, .plan-card {
  border-radius: var(--ap-r-lg) !important;
  border: 0.5px solid var(--ap-hairline) !important;
  box-shadow: var(--ap-shadow-1) !important;
  transition: transform .25s var(--ap-ease), box-shadow .25s var(--ap-ease);
}
.testimonial-card:hover, .reel-card:hover, .service-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-2) !important;
}

/* ---------- Imágenes y media ---------- */
.hero-image img { border-radius: var(--ap-r-lg) !important; }
.hero-image img, .hero img, .reel-card img, .reel-card video, section img {
  border-radius: var(--ap-r-md);
}

/* ---------- Inputs estilo iOS ---------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
select, textarea {
  border-radius: var(--ap-r-sm) !important;
  border: 1px solid var(--ap-hairline) !important;
  transition: box-shadow .2s var(--ap-ease), border-color .2s var(--ap-ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ap-gold) !important;
}

/* ---------- Chips / etiquetas ---------- */
.section-label, .chip, .stars { border-radius: var(--ap-r-pill) !important; }

/* ---------- FAQ: apertura suave ---------- */
.faq-question { border-radius: var(--ap-r-md) !important; }
.faq-answer   { border-radius: 0 0 var(--ap-r-md) var(--ap-r-md) !important; }

/* ---------- Footer ---------- */
.footer { border-top: 0.5px solid var(--ap-hairline); }

/* ---------- Respeto a reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============ Fase 2 (2026-08-12): matar el look plantilla ============ */

/* Hero a escala Apple: titular enorme y apretado */
.hero h1 {
  font-size: clamp(44px, 6.2vw, 82px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

/* Las tarjetas flotantes dejan de ser sólidas: vidrio de verdad */
.hero-stat {
  background: rgba(14, 30, 55, 0.55) !important;
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border: 0.5px solid rgba(255,255,255,.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
  animation: ap-float 7s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-stat-2 { animation-delay: 2.2s; }
@keyframes ap-float {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}

/* Reveals escalonados (los aplica apple-motion.js) */
.ap-reveal { opacity: 0; transform: translateY(26px) scale(.985); 
  transition: opacity .8s var(--ap-ease), transform .8s var(--ap-ease); }
.ap-reveal.ap-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-stat { animation: none; }
  .ap-reveal { opacity: 1; transform: none; }
}

/* Cobertura total: sin webfonts externas, todo al sistema */
* { font-family: var(--ap-font) !important; }