/* =========================================================
   Fran Infinita – Theme CSS (centralizado)
   ========================================================= */

/* ---------- Tokens / Paleta ---------- */
:root{
  /* Paleta principal (de tu imagen) */
  --color-primary-500:#aa8f66; /* café cálido (PRINCIPAL 1) */
  --color-secondary-500:#ed9b40;/* naranjo (PRINCIPAL 2) */
  --color-tertiary-500:#ffeedb; /* crema (PRINCIPAL 3) */

  /* Apoyos */
  --color-accent-500:#61c9a8;   /* acento / botones */
  --color-danger-500:#ba3b46;   /* alertas / énfasis */

  /* Tonos hover (~15% más oscuro) */
  --color-primary-600:#907956;
  --color-secondary-600:#c98336;
  --color-tertiary-600:#d8caba;
  --color-accent-600:#52aa8e;
  --color-danger-600:#9e323b;

  /* Semántica */
  --bg-page:#ffffff;
  --bg-surface:var(--color-tertiary-500);
  --text-main:#1f2937;     /* slate-800 aprox */
  --text-muted:#6b7280;    /* slate-500 aprox */

  --link:var(--color-accent-500);
  --link-hover:var(--color-accent-600);

  --btn-bg:var(--color-primary-500);
  --btn-bg-hover:var(--color-primary-600);
  --btn-text:#ffffff;

  --ring:var(--color-accent-500);
}

/* Modo oscuro opcional */
@media (prefers-color-scheme: dark){
  :root{
    --bg-page:#0b0f14;
    --bg-surface:#111827;
    --text-main:#f3f4f6;
    --text-muted:#9ca3af;
  }
}

/* ---------- Base ---------- */
html,body{background:var(--bg-page);color:var(--text-main);}
html{scroll-behavior:smooth;}
a{color:var(--link);} a:hover{color:var(--link-hover);}
img{max-width:100%;height:auto;border:0;}
/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:var(--color-accent-500);border-radius:4px}

/* Evita que los anchors queden bajo el navbar fijo */
[id]{scroll-margin-top:80px}

/* ---------- Helpers visuales ---------- */
.gradient-bg{
  background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-secondary-500) 100%);
}
.gradient-text{
  background:linear-gradient(135deg,var(--color-primary-500),var(--color-secondary-500));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fade-in{opacity:0;transform:translateY(30px);transition:all .8s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}
.hover-lift{transition:all .3s cubic-bezier(.4,0,.2,1)}
.hover-lift:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,0,0,.15)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.spinner{border:2px solid #f3f3f3;border-radius:50%;border-top:2px solid var(--color-accent-500);width:20px;height:20px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Navbar fijo ---------- */
#site-navbar{
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:50; /* por encima del contenido */
}
.navbar-scrolled{background:rgba(255,255,255,.98)}
/* Espaciador para que el contenido no quede tapado: usa <div class="h-16"></div> tras el navbar */

/* =======================
   BOTONES – sistema unificado
   ======================= */

/* Base: funciona para <a> y <button> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  /* caja */
  padding: .625rem 1rem;           /* 10px 16px */
  border-radius: .75rem;           /* 12px */
  border: 0;
  line-height: 1.25;
  white-space: nowrap;

  /* texto */
  font-weight: 600;
  text-decoration: none;

  /* color por defecto (primary) */
  background: var(--btn-bg);
  color: var(--btn-text) !important;

  /* efectos */
  transition: transform .06s ease, filter .15s ease, background-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.btn:hover {
  background: var(--btn-bg-hover);
  filter: saturate(1.06);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--ring), 0 8px 20px rgba(0,0,0,.14);
}

/* Asegura que el contenido del botón siempre sea visible */
.btn * { color: inherit; }
.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Estados */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* Variantes semánticas (usa la que prefieras) */
.btn--primary   { background: var(--color-primary-500); color: #fff !important; }
.btn--primary:hover { background: var(--color-primary-600); }

.btn--secondary { background: var(--color-secondary-500); color: #fff !important; }
.btn--secondary:hover { background: var(--color-secondary-600); }

.btn--accent    { background: var(--color-accent-500); color: #fff !important; }
.btn--accent:hover { background: var(--color-accent-600); }

.btn--danger    { background: var(--color-danger-500); color: #fff !important; }
.btn--danger:hover { background: var(--color-danger-600); }

/* Variante outline (por si la necesitas) */
.btn--outline {
  background: transparent;
  color: var(--text-main) !important;
  border: 1.5px solid rgba(0,0,0,.08);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--color-tertiary-500);
  border-color: rgba(0,0,0,.12);
}

/* Botón “fantasma”/texto */
.btn--ghost {
  background: transparent;
  color: var(--link) !important;
  box-shadow: none;
}
.btn--ghost:hover { color: var(--link-hover) !important; background: rgba(0,0,0,.035); }

/* Tamaños opcionales */
.btn--sm { padding: .45rem .75rem; border-radius: .6rem; font-size: .9rem; }
.btn--lg { padding: .8rem 1.15rem; border-radius: .9rem; font-size: 1.05rem; }

/* Por si algún gradiente de utilidades dejaba el texto “transparente” */
.btn.gradient-text, .btn [class*="gradient-text"] { 
  -webkit-text-fill-color: initial; 
  background: none; 
}

/* Botones del footer/CTA heredando colores blancos del footer */
.footer .btn { box-shadow: 0 8px 20px rgba(0,0,0,.18); }


/* ---------- Badges / Cards / Surface ---------- */
.badge{display:inline-block;padding:.25rem .5rem;border-radius:9999px;background:var(--color-tertiary-500);color:var(--text-main);border:1px solid rgba(0,0,0,.06)}
.card{background:var(--bg-surface);border-radius:1rem;border:1px solid rgba(0,0,0,.06);padding:1rem}

/* ---------- Footer ---------- */
/* Fondo del footer usando la paleta. Cambia a secondary si lo prefieres */
.footer{
  background:var(--color-primary-500);
  color:#fff;
}
.footer a{color:#fff;opacity:.9}
.footer a:hover{opacity:1}
.footer-cta{position:relative;z-index:10}

/* ---------- Botones flotantes (WhatsApp / Back-to-top) ---------- */
.fab,.floating-button{
  position:fixed;bottom:24px;width:56px;height:56px;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 25px rgba(0,0,0,.25);color:#fff;text-decoration:none;
  z-index:60; /* por encima del navbar (z-50) y del contenido */
  transition:transform .15s ease,filter .15s ease;
}
.fab:hover,.floating-button:hover{transform:translateY(-2px);filter:saturate(1.05)}
#whatsapp-button{right:24px;background:#25D366}
#back-to-top{left:24px;background:var(--color-primary-500)}
#back-to-top svg,#whatsapp-button svg{width:26px;height:26px}

/* ---------- Ajustes responsivos ---------- */
@media (max-width:768px){
  .fade-in{transform:translateY(20px)}
  .hover-lift:hover{transform:none;box-shadow:none}
}

/* ---------- Estilos de impresión ---------- */
@media print{.no-print{display:none!important}}

/* --- Fix íconos dentro de botones y links --- */
.btn i, .btn .fa, .btn [class^="fa-"], .btn .icon,
.footer .btn i, .footer .btn .fa, .footer .btn [class^="fa-"], .footer .btn .icon {
  color: inherit !important;
}
.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: currentColor; }

/* Evitar texto/ícono invisible por gradientes o text-transparent dentro del botón */
.btn.gradient-text, .btn [class*="gradient-text"] {
  -webkit-text-fill-color: initial !important;
  background: none !important;
}
.btn .text-transparent { color: inherit !important; }


.hero-section {
  position: relative;
  overflow: hidden;
}
.hero-section video {
  filter: brightness(0.6);
}

/* Badges del hero Sobre Fran */
.about-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* Fondo más oscuro semi-transparente */
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: .65rem .9rem;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.about-badge i {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}
.about-badge strong {
  display: block;
  font-weight: 700;
  font-size: .95rem;
}
.about-badge span {
  display: block;
  font-size: .78rem;
  opacity: .95;
  margin-top: -2px;
}


/* Efecto lift genérico si Tailwind no lo cubre */
.hover-lift{transition:transform .2s ease, box-shadow .2s ease}
.hover-lift:hover{transform:translateY(-2px)}