: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:#090B10; 
    --surface-800:#111722; 
    --surface-700:#192232; 
    --ink-50:#F4F7FB; 
    --ink-300:#AEB8C8;
    --gold-400:#E7B75A;
    --red-400:#E35D6A; 
    --blue-400:#55A7FF;
    --border-soft: rgba(255,255,255,.09);
    --shadow-1: 0 18px 48px rgba(0,0,0,.42);
    --shadow-2: 0 8px 24px rgba(0,0,0,.28);
    --radius: 18px;
    --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;
}

/* iOS/Safari progressive enhancement for booking hour picker */
select[name="hora"] {
  color-scheme: dark;
}

/* Some browsers ignore option styling in native pickers (notably iOS) */
select[name="hora"] option:disabled,
select[name="hora"] option[disabled] {
  color: rgba(232,236,243,.58);
  opacity: 1;
}


/* 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: var(--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; }
 }

 

/* ===== CABIGOTE UI REFRESH 2026 — solo selectores existentes ===== */
body{background:radial-gradient(circle at 12% -10%,rgba(85,167,255,.10),transparent 30rem),radial-gradient(circle at 88% 5%,rgba(231,183,90,.09),transparent 28rem),linear-gradient(180deg,#090B10 0%,var(--bg-900) 42%,#0B0E14 100%);background-attachment:fixed;letter-spacing:.002em}
main{padding-block:clamp(20px,3vw,34px)}
.bg-section,.bg-surface{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),var(--surface-800)!important;border-color:rgba(255,255,255,.10);box-shadow:0 14px 38px rgba(0,0,0,.20)}
.navbar{border-radius:calc(var(--radius) + 2px);padding-block:.55rem;box-shadow:0 12px 34px rgba(0,0,0,.22);backdrop-filter:blur(18px) saturate(130%)}
.brand-avatar-badge{background:radial-gradient(circle at 35% 25%,rgba(231,183,90,.14),transparent 45%),linear-gradient(180deg,var(--surface-700),var(--surface-800));border-color:rgba(231,183,90,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.28),0 0 28px rgba(231,183,90,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.navbar-dark .navbar-nav .nav-link{opacity:.84;border-radius:10px;transition:opacity .2s ease,color .2s ease,background-color .2s ease}.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{opacity:1;background:rgba(255,255,255,.035)}
.nav-underline .nav-link-label::after{height:3px;background:linear-gradient(90deg,var(--gold-400),#FF7A6F,var(--blue-400));box-shadow:0 0 14px rgba(231,183,90,.22)}
.btn{min-height:44px;border-radius:13px;padding:.72rem 1.05rem;font-weight:650;letter-spacing:.01em;transition:transform .16s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.985)}
.btn-gold{background:linear-gradient(135deg,#F0C66E 0%,var(--gold-400) 48%,#D79A39 100%);border-color:rgba(255,218,145,.72);color:#15110A;box-shadow:0 8px 22px rgba(231,183,90,.16),inset 0 1px 0 rgba(255,255,255,.28)}.btn-gold:hover,.btn-gold:focus{background:linear-gradient(135deg,#F6D184,#EDBC5B 50%,#DFA143);color:#0B0B0B;filter:none;border-color:rgba(255,229,176,.9);box-shadow:0 12px 30px rgba(231,183,90,.25),0 0 22px rgba(231,183,90,.10)}
.btn-outline-gold{background:rgba(231,183,90,.035);border-color:rgba(231,183,90,.72);color:#F0C66E}.btn-outline-gold:hover,.btn-outline-gold:focus{background:linear-gradient(135deg,rgba(240,198,110,.98),rgba(215,154,57,.98));color:#111;border-color:#F0C66E;box-shadow:0 12px 28px rgba(231,183,90,.22)}
.btn-danger{min-height:44px;border-radius:13px;border-color:rgba(255,112,123,.45);background:linear-gradient(135deg,#C84552,#A92F3C);box-shadow:0 8px 20px rgba(194,83,83,.14)}.btn-danger:hover{filter:brightness(1.08);box-shadow:0 12px 28px rgba(194,83,83,.23)}
.card{border:1px solid rgba(255,255,255,.075);background:linear-gradient(155deg,rgba(255,255,255,.038),rgba(255,255,255,.008) 55%),var(--surface-800);box-shadow:0 10px 30px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.card-glass{background:radial-gradient(circle at 100% 0%,rgba(85,167,255,.055),transparent 36%),radial-gradient(circle at 0% 100%,rgba(231,183,90,.055),transparent 40%),linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.012));backdrop-filter:saturate(135%) blur(12px);border-color:rgba(255,255,255,.09)}.card:hover,.card-user-profile:hover{transform:translateY(-4px);border-color:rgba(231,183,90,.18);box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 30px rgba(85,167,255,.025)}
.card-header{padding:1rem 1.25rem;border-bottom-color:rgba(255,255,255,.06)}.card-header::before{height:52%;background:linear-gradient(180deg,#F2C96F,var(--red-400),var(--blue-400));box-shadow:0 0 14px rgba(231,183,90,.20)}
.price-item{transition:background-color .2s ease,padding-left .2s ease}.price-item:hover{background:linear-gradient(90deg,rgba(231,183,90,.075),rgba(85,167,255,.025));padding-left:1.3rem}.service-price{color:#F2C96F}
.form-control-dark,.form-select-dark{min-height:46px;background:rgba(25,34,50,.82);border-color:rgba(255,255,255,.10);border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.form-control-dark:hover,.form-select-dark:hover{border-color:rgba(255,255,255,.16)}.form-control-dark:focus,.form-select-dark:focus{background:#1A2434;border-color:rgba(231,183,90,.78);box-shadow:0 0 0 .22rem rgba(231,183,90,.12),0 8px 24px rgba(0,0,0,.14)}
.alert{border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.12)}.alert-success{background:linear-gradient(135deg,rgba(76,175,80,.16),rgba(76,175,80,.07))}.alert-info{background:linear-gradient(135deg,rgba(85,167,255,.16),rgba(85,167,255,.07))}.alert-warning{background:linear-gradient(135deg,rgba(240,173,78,.17),rgba(240,173,78,.07))}.alert-danger{background:linear-gradient(135deg,rgba(227,93,106,.18),rgba(227,93,106,.07))}
.price-badge{border-radius:999px;background:linear-gradient(135deg,rgba(231,183,90,.20),rgba(231,183,90,.08));border-color:rgba(231,183,90,.58);color:#F6D184;box-shadow:0 5px 16px rgba(231,183,90,.08)}
details.details-anim summary{min-height:54px;padding-block:.9rem;transition:background-color .2s ease}details.details-anim summary:hover{background:linear-gradient(90deg,rgba(231,183,90,.06),rgba(85,167,255,.035))}.details-chevron{color:var(--gold-400)}
.visits-counter-card{background:radial-gradient(circle at 0 0,rgba(231,183,90,.16),transparent 45%),radial-gradient(circle at 100% 100%,rgba(85,167,255,.08),transparent 48%),var(--surface-800);border-color:rgba(231,183,90,.14);box-shadow:0 14px 38px rgba(0,0,0,.24)}
.social-icon-link{border:1px solid transparent;background:rgba(255,255,255,.018)}.social-icon-link:hover{background:rgba(231,183,90,.075);border-color:rgba(231,183,90,.16);color:#F2C96F;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.whatsapp-float{width:62px;height:62px;background:linear-gradient(145deg,#2BE071,#1EBE5B);box-shadow:0 12px 30px rgba(37,211,102,.20),0 0 0 1px rgba(255,255,255,.08)}.whatsapp-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 38px rgba(37,211,102,.28),0 0 24px rgba(37,211,102,.12)}
.modal-content-contrast,#specialMessageModal .modal-content{background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),var(--surface-800);border-color:rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.overlay{background:rgba(5,7,11,.72);backdrop-filter:blur(12px);filter:none}.loader-dots{border-radius:16px;background:rgba(17,23,34,.94);border-color:rgba(231,183,90,.16);box-shadow:0 18px 50px rgba(0,0,0,.42)}.dot{background:linear-gradient(180deg,#F6D184,var(--gold-400));box-shadow:0 0 16px rgba(231,183,90,.34)}
.footer{border-top-color:rgba(255,255,255,.08);background:linear-gradient(180deg,transparent,rgba(255,255,255,.012))}.footer-link{color:var(--ink-300)}.footer-link:hover{color:var(--ink-50)}
@media(max-width:767.98px){main{padding-block:18px;margin-bottom:42px}.navbar{border-radius:15px;padding:.45rem .55rem}.navbar-dark .navbar-nav .nav-link{padding:.72rem .8rem}.card{border-radius:15px}.card:hover,.card-user-profile:hover{transform:none}.btn{min-height:46px;padding:.72rem .9rem}.btn-login{width:100%;min-width:0}.form-control-dark,.form-select-dark{min-height:48px;font-size:1rem}.price-item:hover{padding-left:.9rem}}
@media(max-width:575.98px){.container{padding-inline:14px}.card-body,.card-user-profile{padding:1.05rem}.card-header{padding:.9rem 1rem}.btn{min-height:48px;border-radius:12px;padding:.76rem .85rem;line-height:1.25}.btn-lg{min-height:50px;padding:.82rem 1rem}.btn-google{width:100%;min-height:50px}.whatsapp-float{width:56px;height:56px;font-size:27px}.whatsapp-icon{margin-top:14px}details.details-anim summary{min-height:56px;padding-inline:.85rem}}
@media(hover:none){.btn:hover,.card:hover,.card-user-profile:hover,.social-icon-link:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.btn,.card,.card-user-profile,.brand-avatar-badge,.price-item,.social-icon-link{transition:none}}