:root {
      color-scheme: dark light;
    --font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --title-font-family: 'Great Vibes', cursive;
    --title-font-family-alt: 'Fjalla One', sans-serif;
    /* Dark Palete */
    --bg-900:#0F1115; 
    --surface-800:#161A22; 
    --surface-700:#1D2330; 
    --ink-50:#E8ECF3; 
    --ink-300:#A8B0BD;
    --gold-400:#C9A76D;
    --red-400:#C25353; 
    --blue-400:#3C8DFF;
    --border-soft: rgba(255,255,255,.06);
    --shadow-1: 0 6px 20px rgba(0,0,0,.35);
    --shadow-2: 0 2px 8px rgba(0,0,0,.25);
    --radius: 14px;
    --brand-avatar-size: 68px;
    --g-blue:#4285F4; 
    --g-red:#DB4437; 
    --g-yellow:#F4B400; 
    --g-green:#0F9D58;
}

/* Asegura navegadores respeten escalado de texto */
html{ text-size-adjust:100%; }
html,body{ height:100%; }
body{ display:flex; flex-direction:column; margin:0;background:var(--bg-900); color:var(--ink-50); font-family:var(--font-family); line-height:1.65;}

/* ---------- HEADER ---------- */
.site-header{ background: transparent; box-shadow: none; }
/* Barber + micro‑anim */
.site-header .icon{ height:46px; margin:0 .25rem; border:0!important; outline:none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); animation: spin-icon 6s linear infinite; }
.animate-on-load{ opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--a-delay, 0ms); will-change: opacity, transform;}
.animate-on-load.loaded{ opacity: 1; transform: none;}
.card-header :is(h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){ letter-spacing: .02em; font-family:var(--title-font-family-alt);}

/* Keyframes */
@keyframes spin-icon{ 0%{ transform: rotateX(0deg);} 100%{ transform: rotateY(360deg);} }

/* No espaciar iconos */
.card-header i,
.card-header .bi,
.card-header .fas,
.card-header .far { letter-spacing: 0;}
/* Solo afecta los title fonts dentro de site title */
.site-title .title-font{ font-family:var(--title-font-family); font-size: clamp(2.25rem, 2vw + 2rem, 3rem); color:var(--ink-50); }
.hero-title { font-family: var(--title-font-family-alt) !important;font-weight: 400; letter-spacing: .01em;line-height: 1.1; }
.text-ink{ color:var(--ink-50)!important; }
.text-ink-muted{ color:var(--ink-300)!important; }
.text-gold{ color:var(--gold-400)!important; }


/* ====== SETTINGS GLOW ====== */
.hero-glow {
  --size: clamp(320px, 55vmin, 560px);
  --br: 1rem;
  --glow-w: 10px;
  --blur: 18px;
  --c1: 210 100% 60%;
  --c2: 280 100% 65%;
  --c3: 170 100% 55%;
}

.hero-glow .hero-image { position: relative; z-index: 1; display: block; border-radius: inherit;}

/* --- Glow que rota alrededor (sin mask, 100% adaptable al tamaño) --- */
.hero-frame { position: relative; display: inline-block; border-radius: var(--br); isolation: isolate;}

.hero-frame::before { content: ""; position: absolute; inset: 0;  border-radius: inherit; z-index: 0; padding: var(--glow-w); 
  /* Pintamos solo la “corona” usando background-clip */
  background:
    linear-gradient(#0000 0 0) content-box, 
    conic-gradient(
      from var(--ang2, 0deg),
      hsl(var(--c1) / .55),
      hsl(var(--c2) / .55),
      hsl(var(--c3) / .55),
      hsl(var(--c1) / .55)
    ) padding-box; 

  filter: blur(var(--blur)) saturate(140%);
  opacity: .45;
  transition: opacity .3s ease, filter .3s ease;
  animation: spin2 10s linear infinite;  
}

.hero-frame:hover::before { opacity: .85; filter: blur(calc(var(--blur) + 6px)) saturate(160%);}

/* Giro del glow alrededor */
@keyframes spin2 { to { --ang2: 360deg; } }

/* (Opcional) Si quieres mantener tu glow orgánico de fondo, déjalo bajito */
.hero-glow::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: var(--size); height: var(--size); z-index: 0;
  background:
    radial-gradient(closest-side at var(--x1,15%) var(--y1,30%), hsl(var(--c1) / 0.60), transparent 60%),
    radial-gradient(closest-side at var(--x2,75%) var(--y2,65%), hsl(var(--c2) / 0.50), transparent 60%),
    radial-gradient(closest-side at var(--x3,45%) var(--y3,75%), hsl(var(--c3) / 0.45), transparent 60%);
  filter: blur(36px) saturate(140%) brightness(1.15);
  border-radius: var(--br);
  opacity: .25;

  /* Evitar warnings: definimos ambas cuando usamos mask */
  animation:
    move1 13s ease-in-out infinite alternate,
    move2 17s ease-in-out infinite alternate,
    move3 21s ease-in-out infinite alternate;
  pointer-events: none;
}


/* Keyframes del borde y del halo */
@keyframes spin   { to { --ang: 360deg;  } }
@keyframes spin2  { to { --ang2: 360deg; } }

/* === Animaciones “orgánicas”  === */
@keyframes move1 {
  0%   { --x1: 12%; --y1: 28%; }
  25%  { --x1: 22%; --y1: 42%; }
  50%  { --x1: 40%; --y1: 25%; }
  75%  { --x1: 28%; --y1: 58%; }
  100% { --x1: 10%; --y1: 40%; }
}
@keyframes move2 {
  0%   { --x2: 78%; --y2: 62%; }
  25%  { --x2: 60%; --y2: 80%; }
  50%  { --x2: 82%; --y2: 72%; }
  75%  { --x2: 68%; --y2: 50%; }
  100% { --x2: 75%; --y2: 65%; }
}
@keyframes move3 {
  0%   { --x3: 42%; --y3: 76%; }
  20%  { --x3: 55%; --y3: 60%; }
  45%  { --x3: 30%; --y3: 70%; }
  70%  { --x3: 58%; --y3: 82%; }
  100% { --x3: 45%; --y3: 75%; }
}


/* Containers */
main{ padding-block: 24px; margin-bottom:60px; flex:1; }
.container{ max-width: 1100px; }
.bg-section{ background: var(--surface-800); border:1px solid var(--border-soft); border-radius: var(--radius); }

/* Navbar */
.bg-surface{ background: var(--surface-800)!important; border:1px solid var(--border-soft); }
.navbar{ border-radius: var(--radius); padding-block:.45rem; }

/* Contenedor circular */
.brand-avatar-badge{ display:inline-flex; align-items:center; justify-content:center; width: calc(var(--brand-avatar-size)); height: calc(var(--brand-avatar-size)); border-radius:50%; background: linear-gradient(180deg, var(--surface-700), var(--surface-800)); border:1px solid var(--border-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 6px rgba(0,0,0,.25); overflow:hidden;}

.navbar-brand:hover .brand-avatar-badge{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.35); transform: translateY(-1px);}

/* Logo IMG */
.brand-avatar{ width: var(--brand-avatar-size) + 12px; height: var(--brand-avatar-size) + 12px; object-fit: contain; display:block; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0;}

.brand-wordmark{ font-weight:700; letter-spacing:.3px; font-family: var(--title-font-family); }

.navbar-dark .navbar-nav .nav-link{ color:var(--ink-50); opacity:.9; }
.navbar-dark .navbar-nav .nav-link:hover{ opacity:1; }

.navbar a:focus-visible{ box-shadow: 0 0 0 3px rgba(60,141,255,.4); border-radius:10px; }

/* underline SOLO sobre el texto */
.nav-link-label{ position: relative; display: inline-block;}

.nav-underline .nav-link-label::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--gold-400),var(--red-400)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}

.nav-underline:hover .nav-link-label::after,
.nav-link.active.nav-underline .nav-link-label::after{ transform:scaleX(1);}


/* Buttons */
.btn{ border-radius:12px; padding:.7rem 1rem; font-weight:600; transition: background-color .18s ease, filter .18s ease, box-shadow .18s ease, color .18s ease, transform .06s ease;}
.btn-gold{ background: var(--gold-400); border: 1px solid var(--gold-400); color: #111;}
.btn-gold:hover,
.btn-gold:focus{ background: var(--gold-400); color: #0b0b0b; filter: brightness(1.06); box-shadow: 0 6px 18px rgba(201,167,109,.25);}
.btn-gold:active{ transform: translateY(1px); filter: brightness(0.98); box-shadow: 0 3px 10px rgba(201,167,109,.25);}
.btn-gold:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem rgba(201,167,109,.35);}
.btn-gold:disabled,
.btn-gold.disabled{ background: color-mix(in srgb, var(--gold-400) 65%, #000 35%); border-color: color-mix(in srgb, var(--gold-400) 65%, #000 35%); color: rgba(0,0,0,.6); box-shadow: none;}
.btn-outline-gold{ background: transparent; border: 1px solid var(--gold-400); color: var(--gold-400);}
.btn-outline-gold:hover,
.btn-outline-gold:focus{ background: var(--gold-400); color: #111; box-shadow: 0 6px 18px rgba(201,167,109,.25);}
.btn-outline-gold:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem rgba(201,167,109,.35);}

/* Cards */
.card { border:none; border-radius:var(--radius); background:var(--surface-800); color:var(--ink-50); box-shadow:var(--shadow-2); }
.card .card-text{ background: transparent !important; box-shadow: none !important; padding: 0 !important; margin-bottom: .5rem; color: var(--ink-300);}
.card-glass{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); backdrop-filter:saturate(120%) blur(4px); border:1px solid var(--border-soft); }
.card-header{ position:relative; padding-left:1.25rem; background:transparent;}
.card-header::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:60%; background: linear-gradient(180deg, var(--gold-400), var(--red-400)); border-radius:4px;}

/* Hero logo */
.hero-image{ max-width:325px; border:0; padding:0; }

/* Price list */
.price-list{ border-top:1px solid var(--border-soft); }
.price-item{ padding: .9rem 1.1rem; border-bottom:1px dashed var(--border-soft); background: transparent; }
.price-item:nth-child(odd){ background: rgba(255,255,255,.02); }
.price-item:hover{ background: rgba(255,255,255,.04); }
.service-name{ font-weight:500; }
.service-price{ font-weight:700; letter-spacing:.3px; color:var(--ink-50); }

/* Instagram */
.instagram-embed{ width:100%; aspect-ratio: 4/5; border:1px solid var(--border-soft); }
.instagram-embed iframe{ width:100%; height:100%; border:0; border-radius:inherit; background: transparent; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border-soft); }
.footer-sep{ border-color: var(--border-soft) !important; opacity:.5; }
.footer-heading{ font-family:'Fjalla One', sans-serif; font-weight:700; margin-bottom:.75rem; position:relative; padding-left:1rem;}
.footer-heading::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:60%; background: linear-gradient(180deg, var(--gold-400), var(--red-400)); border-radius:4px;}
.footer-link{ color:var(--ink-50); opacity:.9; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; padding:.15rem 0; transition:opacity .2s ease, text-decoration-color .2s ease;}
.footer-link:hover{ opacity:1; text-decoration:underline; text-decoration-color:var(--gold-400); }

/* ===== Métricas en lados opuestos (desktop) ===== */
.visits-counter-card{background: linear-gradient(135deg, rgba(201,167,109,.18) 0%, var(--surface-800) 100%);border: 1px solid var(--border-soft);border-radius: var(--radius);box-shadow: var(--shadow-2);color: var(--ink-50); padding: 1rem; position: relative; min-height: 140px;}
.visits-counter-card .metrics{ display: block;}
.visits-counter-card .metrics .metric{ font-size: 1.1rem; position: absolute; max-width: 45%; display: flex; align-items: center; gap: .6rem;}
.visits-counter-card.metrics--opposite .metrics .metric:first-child{ left: 1rem; bottom: 1rem; text-align: left; }
.visits-counter-card.metrics--opposite .metrics .metric:last-child{ right: 1rem; bottom: 1rem;  text-align: right;}
.visits-counter-card.metrics--opposite .metrics .metric:last-child .metric-body{ text-align: left;}
.visits-counter-card .metric-icon{ font-size: 1.7rem; color: var(--gold-400); }

/* Map placeholder dark */
.map-container{ position:relative; overflow:hidden; border-radius:12px; box-shadow:var(--shadow-2); width:100%; padding-bottom:56.25%; background: var(--surface-700); margin-top:1rem; border:1px solid var(--border-soft); }
#gmaps-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; border-radius:12px; color:var(--ink-50); text-align:center; }
#gmaps-placeholder .btn{ margin-top:.5rem; }

/* Alerts */
.alert{ border-radius:12px; border:1px solid var(--border-soft); }
.alert-success{ background: rgba(76,175,80,.12); color:#cfe9d1; }
.alert-info{ background: rgba(60,141,255,.12); color:#d1e1ff; }
.alert-warning{ background: rgba(240,173,78,.12); color:#ffe3bd; }
.alert-danger{ background: rgba(194,83,83,.15); color:#ffd6d6; }

/* Scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#1b1f2a; border-radius:10px; }
::-webkit-scrollbar-thumb{ background:#5a6270; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#6c7381; }

/* TOPBAR redes */
.topbar{ border-bottom: 1px solid var(--border-soft); }
.social-icon-link{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color: var(--ink-50); text-decoration:none; opacity:.85; transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease; outline-offset: 2px;}
.social-icon-link:hover{ opacity:1; transform: translateY(-1px); background: rgba(255,255,255,.06); }
.social-icon-link:focus-visible{ box-shadow: 0 0 0 3px rgba(201,167,109,.45); }

/* Modal:tema oscuro */
.modal-content-contrast{background: var(--surface-800);color: var(--ink-50);border: 1px solid var(--border-soft);}
.modal-content-contrast .modal-header{ border-bottom:1px solid var(--border-soft); }
.modal-content-contrast .modal-footer{ border-top:1px solid var(--border-soft); }

/* ---------- Forms ---------- */
.form-dark .form-label{ color: var(--ink-50); }
.form-control-dark{ background: var(--surface-700); color: var(--ink-50); border: 1px solid var(--border-soft); border-radius: 12px;}
.form-control-dark::placeholder{ color: rgba(232,236,243,.55); }
.form-control-dark:focus{ background: var(--surface-700); color: var(--ink-50); border-color: var(--gold-400); box-shadow: 0 0 0 .2rem rgba(201,167,109,.2);}

/* Input-group */
.input-group .form-control-dark{ border-right: 0; }
.input-group .btn{ border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text-dark{ background: var(--surface-700); color: var(--ink-50); border: 1px solid var(--border-soft); border-right: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
.input-group .form-control-dark,
.input-group .form-select-dark{ border-top-left-radius: 0; border-bottom-left-radius: 0;}

/* Estados de error y validación */
.is-invalid, .form-control-dark.is-invalid{ border-color: var(--red-400) !important; box-shadow: 0 0 0 .2rem rgba(194,83,83,.18);}
.invalid-feedback{ color: #ffbaba; }

.btn-login{ min-width: 220px; }
.form-hint { font-size: .9rem; }
.form-select-dark{ background: var(--surface-700); color: var(--ink-50); border: 1px solid var(--border-soft); border-radius: 12px;}
.form-select-dark:focus{ border-color: var(--gold-400); box-shadow: 0 0 0 .2rem rgba(201,167,109,.2); background: var(--surface-700); color: var(--ink-50);}

select, .form-select {
  transform: none !important;
}


/* Sutileza en botones danger (opcional) */
.btn-danger { border-radius: 12px; }
.btn-danger:hover { filter: brightness(1.05); }

/* Card Styles */
.card-user-profile { border: none; border-radius: 10px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; margin: auto;}
.card:hover, .card-user-profile:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);}
.card img, .card-user-profile img { height: 200px; object-fit: cover; width: 100%; transition: transform 0.3s ease;}
.card img:hover, .card-user-profile img:hover { transform: scale(1.03);}
.card-body, .card-user-profile  { padding: 1.5rem; flex: 1; text-align: center;}

/* Banner de servicio */
.card-img-top-container{ border-bottom:1px solid var(--border-soft) !important; }
.banner-img{ border:0 !important; background:transparent !important; }

/* Image Styles */
img{ box-sizing:border-box; max-width:100%; height:auto; }

/* Mockups */
.mockup-laptop{ max-width:260px; }
.mockup-phone { max-width:140px; }

/* ===== Products  ===== */
.product-card{ overflow:hidden; }
.product-thumb{ position:relative; border-bottom:1px solid var(--border-soft); }
.product-thumb img{ object-fit:cover; display:block; aspect-ratio: 4 / 3; transition: transform .35s ease; border:0}
.product-thumb:hover img{ transform: scale(1.03); }
.product-media:hover .product-img{ transform: scale(1.02); }
.product-hero{ border:1px solid var(--border-soft); }
.product-media{ position:relative; }
.product-img{ display:block; object-fit:cover; border:0; aspect-ratio: 4 / 3; transition: transform .35s ease;}

/* Precio + disponibilidad */
.price-badge{ display:inline-block; padding:.35rem .7rem; border-radius: .6rem; background: rgba(201,167,109,.18); border:1px solid var(--gold-400); color: var(--ink-50); font-weight:700; letter-spacing:.3px;}
.availability-pill{ display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .6rem; border-radius:999px; font-weight:600; border:1px solid var(--border-soft);}
.availability-pill.available{ background: rgba(76,175,80,.12); color:#cfe9d1; }
.availability-pill.neutral{ background: rgba(60,141,255,.12); color:#d1e1ff; }

/* ===== Reseñas (display) ===== */
.stars i.fas.fa-star{ color: var(--gold-400); }
.stars i.far.fa-star{ color: var(--ink-300); }

/* ===== Reseñas (rating input) ===== */
.rating-stars{ display:inline-flex; flex-direction: row; gap:.35rem; align-items:center;}
.rating-input{ position:absolute; opacity:0; pointer-events:none;}
.rating-label{ display:inline-flex; width:36px; height:36px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--border-soft); background: vr(--surface-800); transition: transform .15s ease, box-shadow .2 ease, background .2s ease}
.rating-label i::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f005";  color: var(--ink-300); transition: color .15s ease;}
.rating-label:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); background: var(--surface-700); }
.rating-input:checked ~ .rating-label i::before{ color: var(--ink-300); } /* reset */
.rating-input:checked + .rating-label i::before{ color: var(--gold-400); }

/* Truco para que al pasar el ratón se “rellenen” hasta esa estrella */
.rating-stars:hover .rating-label i::before{ color: var(--ink-300); }
.rating-stars .rating-label:hover ~ .rating-label i::before{ color: var(--ink-300); }

/* Accesibilidad focus */
.rating-label:focus-within{ box-shadow: 0 0 0 .2rem rgba(201,167,109,.25); }

/* ===== Servicios ===== */
.service-card{ overflow:hidden; }
.service-thumb{ position:relative; border-bottom:1px solid var(--border-soft); }
.service-thumb img{ display:block; object-fit:cover; border:0; aspect-ratio: 4 / 3; transition: transform .35s ease;}
.service-thumb:hover img{ transform: scale(1.03); }

/* Contenido animable dentro del <details> */
details.details-anim .card-body{
  overflow: hidden;
  height: 0; /* cerrado por defecto (el JS abrirá poniendo px y luego auto) */
}

/* Quitar marcador nativo del summary */
details.details-anim summary{
  list-style: none;
}
details.details-anim summary::-webkit-details-marker{
  display: none;
}

/* Flecha */
.details-chevron{
  transition: transform 220ms ease;
}
details[open] .details-chevron{
  transform: rotate(180deg);
}


/* POLITICA PRICACIDAD */
.policy-table { background: var(--surface-800); color: var(--ink-50); border-color: var(--border-soft);}
.policy-table thead th { background: var(--surface-700); color: var(--ink-50); border-color: var(--border-soft);}
.policy-table td, .policy-table th { border-color: var(--border-soft) !important;}
.policy-table code { color: var(--ink-50); background: rgba(255,255,255,.06); padding: .1rem .35rem; border-radius: .35rem;}

/* Accesibilidad para caption oculto */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* =========================================
   Overlay + Spinner
   ========================================= */
.overlay{ filter: blur(25px); position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1060; display:none;}
.overlay.is-visible{ display:block; }

#loader{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1061; display:none; opacity:0; transition:opacity .25s ease; background:transparent; border:0; width:auto; height:auto;}
#loader.visible{ display:block; opacity:1; }
.loader-dots{ display:flex; align-items:flex-end; justify-content:center; gap:.5rem; padding:1rem 1.25rem; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border:1px solid var(--border-soft); box-shadow: var(--shadow-2);}
.dot{ width:12px; height:12px; border-radius:50%; background: var(--gold-400); box-shadow: 0 2px 10px rgba(201,167,109,.35); animation: dot-bounce .6s ease-in-out infinite; animation-delay: calc(var(--i) * .08s);}
.loader-text{ margin-top:.6rem; text-align:center; font-weight:600; color: var(--ink-300); font-size:.9rem;}

@keyframes dot-bounce{
  0%, 100% { transform: translateY(0) scale(1);    opacity:.85; }
  40%      { transform: translateY(-10px) scale(1.05); opacity:1; }
}

/* Modal especial */
#specialMessageModal .modal-content{ background: var(--surface-800); color: var(--ink-50); border:1px solid var(--border-soft);}
#specialMessageModal .modal-header,
#specialMessageModal .modal-footer{ border-color: var(--border-soft);}

.dropdown-toggle { background-color: var(--primary-color); color: white; border: none; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s ease;}
.dropdown-toggle:hover { background-color: var(--secondary-color); color: var(--primary-color);}
.dropdown-menu { background-color: var(--light-background); border-radius: 5px; border: 1px solid var(--border-color);}

#cookiesPolicyLink {  padding-top: 1rem; padding-bottom: 1rem;}


/* ============================
   Botón "Google"
   ============================ */
.btn-google{ position: relative; border: 0; border-radius: 999px; padding: .9rem 1.1rem; background: var(--surface-800); color: var(--ink-50) !important; box-shadow: var(--shadow-2); font-weight: 700; transition: transform .06s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease;}

/* Pseudo-borde multicolor: versión con máscaras (estándar + webkit) */
.btn-google::before{ content:""; position:absolute; inset:0; padding:2px; border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--g-blue) 0 25%,
    var(--g-red) 25% 50%,
    var(--g-yellow) 50% 75%,
    var(--g-green) 75% 100%
  );
  /* Truco: se ve solo el borde usando máscara estándar y -webkit- */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  /* WebKit (Safari) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* Fallback: si NO hay soporte de mask, ponemos un borde visible (sin degradado) */
@supports not (mask: linear-gradient(#000 0 0)) {
  .btn-google::before{ content:none; }
  .btn-google{ border:2px solid var(--g-blue); }
}

.btn-google .fa-google{ background: conic-gradient(var(--g-blue), var(--g-red), var(--g-yellow), var(--g-green), var(--g-blue)); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display:inline-block; line-height:1; }

/* Fallback si no hay soporte de background-clip:text */
@supports not (background-clip: text) {
  .btn-google .fa-google{ background: none; color: var(--g-blue);}
}

.visit-card .visit-logo{ width: clamp(11rem, 12vw, 14rem); aspect-ratio: 1 / 1; height: auto; object-fit: contain; border-radius: 50%; background: var(--surface-800); padding: 0.375rem; border: 1px solid var(--border-soft);}

/* Hover/Focus: más contraste y elevación */
.btn-google:hover,
.btn-google:focus{ background: var(--surface-700); filter: brightness(1.06); box-shadow: 0 8px 22px rgba(66,133,244,.18);}
.btn-google:focus-visible{ outline: none; box-shadow: 0 0 0 .2rem rgba(66,133,244,.35), 0 8px 22px rgba(66,133,244,.18);}
.btn-google:active{ transform: translateY(1px); filter: brightness(0.98);}
.btn-google:disabled,
.btn-google.disabled{ opacity:.7; filter:none; box-shadow:none; cursor:not-allowed;}

/* WhatsApp FAB */
.whatsapp-float{ position:fixed; width:60px; height:60px; bottom:20px; right:20px; background:#25d366; color:white; border-radius:50%; text-align:center; font-size:30px; z-index:1000; box-shadow:var(--shadow-2); transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover{ transform: translateY(-2px); box-shadow:var(--shadow-1); }
.whatsapp-icon{ margin-top:15px; }

/* =========================
   Responsive (optimized)
   ========================= */
@media (max-width: 767.98px){
  .visits-counter-card{ min-height: auto; }
  .visits-counter-card .metrics{  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .75rem;}
  .visits-counter-card .metrics .metric{ position: static;max-width: none; text-align: left;}
  .visits-counter-card .metrics .metric .metric-body{ text-align: left; }
  .visit-card .visit-logo{ width: clamp(7.75rem, 9vw, 11.5rem);}
  .site-header .icon{ height:36px;}
}

/* ========================
   Tablas responsive 
   ======================== */
@media (max-width: 575.98px){
  body{ font-size: clamp(.95rem, .2vw + .9rem, 1rem); }
  .mockup-laptop{ max-width:180px; }
  .mockup-phone { max-width:100px; }
  .container{ padding-inline: 16px; }
  .whatsapp-float{ right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));}
  .hero-image{ max-width:220px; }
  .table-responsive table{ border:0; }
  .table-responsive thead{ display:none; }
  .table-responsive tr{ display:block; margin-bottom:1rem; border:1px solid var(--border-soft); border-radius:.75rem; padding:.75rem .5rem; background:var(--surface-800); }
  .table-responsive td{ display:block; text-align:right; padding:.4rem 0; position:relative; }
  .table-responsive td::before{ content: attr(data-label); position:absolute; left:.75rem; width:50%; text-align:left; font-weight:600; color:var(--ink-50); }
  .dot{ --dot-size: 14px; }

  /* Botones + controles */
  .btn{ padding:.65rem .9rem; }
  .btn-lg{ padding:.75rem 1rem; }
  .form-control-lg, .form-select-lg{ padding:.65rem .9rem; font-size:1rem; }
  .input-group-text-dark{ padding:.55rem .65rem; }
  .form-hint{ font-size:.85rem; }

  /* Cards */
  .card{ border-radius:12px; }
  .card-body{ padding:1rem; }
  .visits-counter-card .metrics .metric{ position: static;max-width: none; text-align: left; justify-content: space-evenly;}

  /* Imágenes / thumbs más panorámicas */
  .product-thumb img,
  .service-thumb img,
  .product-img{ aspect-ratio:16/10; }
  .price-item{ padding:.75rem .9rem; }

  /* Footer */
  .footer-heading{ margin-bottom:.5rem; }
  .map-container{ padding-bottom:60%; }
  .odometer{ font-size:1.5rem; }
  .animate-on-load{ transition-duration:.4s; transform: translateY(10px); }
  .hide-xs{ display:none !important; }
  .show-xs{ display:none !important; }
  /* Logo */
  .brand-avatar-badge{ width:56px; height:56px; }
  .brand-avatar{ width:67px; height:67px; }
  .site-header .icon{ height:26px;}
  .site-title .title-font{ font-size: clamp(1.75rem, 6.5vw + .2rem, 2.5rem); line-height: 1.1; letter-spacing: .01em;}

   /* Quitamos el pseudo en móviles */
  .nav-underline::after{ content:none !important; }

  /* Subrayado con background-size animado (no se descuadra) */
  .navbar-dark .navbar-nav .nav-link.nav-underline{
    background-image: none; /* quitamos el underline del <a> */
  }

  .navbar-dark .navbar-nav .nav-link.nav-underline:hover,
  .navbar-dark .navbar-nav .nav-link.nav-underline:focus,
  .navbar-dark .navbar-nav .nav-link.nav-underline.active{ background-size: 100% 3px; opacity: 1;}
  .navbar .navbar-nav{ gap: .15rem; }}


@media (prefers-reduced-motion: reduce){ 
  .animate-on-load{ transition:none; transform:none !important; opacity:1 !important; }
  .dot{ animation:none; opacity:.7; }
 }