:root{
      --bg:#0b0b0b;
      --panel:#0f0f10;
      --muted:#bdbdbd;
      --accent:#00b7ff; /* Cambiado de naranja (#ff6a00) a azul celeste */
      --white:#ffffff;
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --shadow: 0 8px 30px rgba(3,3,3,0.6);
      --gradient: linear-gradient(135deg, #0b0b0b 0%, #141414 45%, #161217 100%);
    }

    /* Reset */
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,183,255,0.03), transparent),
              radial-gradient(800px 400px at 90% 90%, rgba(0,183,255,0.02), transparent),
              var(--gradient);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  line-height:1.5;
}

/* Evitar selección de texto en la mayoría de elementos, pero permitir en inputs/textarea/select */
*:not(input):not(textarea):not(select) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Si quieres evitar selección también en enlaces móviles cuando se mantiene pulsado */
a { -webkit-touch-callout: none; }

/* page layout */
header{
  position:fixed;left:0;right:0;top:0;z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(11,11,11,0.6), rgba(11,11,11,0.25));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.container{max-width:1100px;margin:0 auto;padding:20px}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{
  display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;
}
.logo .mark{
  width:44px;height:44px;border-radius:50%; /* Cambiado de 10px a 50% para hacerlo circular */
  background: linear-gradient(135deg,var(--accent),#47c4ff);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border: 2px solid rgba(255,255,255,0.1); /* Añadido: borde sutil */
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%; /* Asegura que la imagen también sea circular */
}

.navlinks{display:flex;gap:18px;align-items:center}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:10px}
.navlinks a:hover{color:var(--white);background:var(--glass)}
.cta{background:var(--accent);color:#060606;padding:10px 14px;border-radius:12px;font-weight:700}

/* Hero */
.hero{min-height:100vh;display:grid;place-items:center;padding-top:88px}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:36px;border-radius:16px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.03)}

.eyebrow{color:var(--accent);font-weight:700;letter-spacing:1px;margin-bottom:10px}
h1{font-size:40px;margin-bottom:10px}
p.lead{color:var(--muted);margin-bottom:18px}
.actions{display:flex;gap:12px}

/* Sample tattoo thumbnail */
.showcase{border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}
.showcase img{width:100%;height:100%;object-fit:cover;display:block}

/* Sections */
section{padding:90px 0}
h2.section-title{font-size:28px;margin-bottom:18px}
.sub{color:var(--muted);margin-bottom:22px}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.thumb{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;transform:translateY(0);transition:transform .28s ease, box-shadow .28s ease}
.thumb img{width:100%;height:220px;object-fit:cover;display:block}
.thumb:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,0.6)}

/* About */
.about{display:flex;gap:28px;align-items:center}
.about .bio{color:var(--muted)}
.skills{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.chip{background:rgba(255,255,255,0.03);padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.02)}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:12px}

/* Contact / Form */
.form-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:12px}
label{display:block;font-weight:600;margin-bottom:6px}
input,textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--white);outline:none}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.4)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:700;border:none;cursor:pointer}
.btn-primary{background:var(--accent);color:#080808}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white)}

/* Footer */
footer{padding:36px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:140}
.lightbox img{max-width:92%;max-height:86%;border-radius:10px}

/* Social chips — armonizados con la paleta del sitio */
.chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, opacity .12s;
  -webkit-tap-highlight-color: transparent;
}

/* Base subtle glass for non-branded chips (keeps original look if used elsewhere) */
.chip:not(.instagram):not(.facebook):not(.whatsapp) {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.02);
  color: var(--white);
}

/* Instagram — regreso al gradiente naranja original */
.chip.instagram {
  background: linear-gradient(135deg, #ff6a00 0%, #ff8f47 60%, #d13aff 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(255,106,0,0.12);
}

/* Facebook — azul pero suavizado para encajar con el tema oscuro */
.chip.facebook {
  background: linear-gradient(180deg, #2d6cf6 0%, #1b53d6 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(27,83,214,0.08);
}

/* WhatsApp — verde ligeramente atenuado */
.chip.whatsapp {
  background: linear-gradient(180deg, #28d07b 0%, #0f9b58 100%);
  color: #062019; /* texto oscuro para contraste con verde claro */
  border: none;
  box-shadow: 0 8px 24px rgba(15,155,88,0.08);
}

/* Hover / Active — feedback táctil */
.chip:hover, .chip:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  opacity: 0.98;
  outline: none;
}

/* Focus visible for keyboard users */
.chip:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,183,255,0.12);
}

/* Make them full-width on small screens for better hit area */
@media (max-width:640px) {
  #contacto aside .chip, #contacto aside a.chip {
    display:block;
    width:100%;
    text-align:center;
    padding:12px 14px;
  }
  #contacto aside .chip + .chip { margin-top:8px; }
}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  header .container{padding:12px}
  .navlinks{display:none}
  .hero{padding-top:74px}
  .gallery-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .logo span{display:none}
}

/* Mobile tweaks: servicios, contacto y footer */
@media (max-width:640px) {
  /* Servicios: pasar a una columna y mejorar espaciado */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 4px;
  }
  .service {
    padding: 16px;
    border-radius: 12px;
  }
  .service h3 { font-size: 18px; margin-bottom: 8px; }
  .service .sub { font-size: 14px; color:var(--muted); margin-bottom: 0; }

  /* Contacto: forzar apilado (anular inline grid) */
  #contacto .container > div {
    display: block !important;
    grid-template-columns: none !important;
    gap: 14px !important;
  }
  /* Asegurar que el aside quede debajo del formulario y tenga padding */
  #contacto aside {
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  }

  /* Formulario: aumentar hit targets y apilar botones */
  #bookingForm .row { grid-template-columns: 1fr !important; gap: 10px; }
  #bookingForm .form-actions, /* si decides añadir clase en futuro */ 
  #bookingForm .btn { width: 100%; box-sizing: border-box; }
  /* Forzar que ambos botones queden uno debajo de otro si están juntos */
  #bookingForm button { display: block; width: 100%; margin-top: 8px; }
  #bookingForm textarea { min-height: 100px; }

  /* Mensaje del formulario: mostrar en bloque y con espacio */
  #formMsg { display: block; margin-top: 6px; font-weight:700; }

  /* Mejor lectura y separación */
  .form-card { padding: 16px; }
  .sub { font-size: 14px; line-height: 1.4; }

  /* Thumbs más naturales en móvil */
  .thumb img { height: auto; max-height: 420px; object-fit: cover; border-radius: 10px; }
}

/* Ajustes extra para pantallas muy pequeñas */
@media (max-width:420px) {
  .service h3 { font-size: 16px; }
  .service .sub { font-size: 13px; }
  #bookingForm input, #bookingForm select, #bookingForm textarea { padding: 10px; font-size: 14px; }
  #bookingForm button { padding: 10px; font-size: 15px; }

  /* Footer: apilar y centrar */
  footer .container { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 18px; }
  footer .container a { word-break: break-word; }
}

/* small entrance animations */
.fade-in{animation:fadeUp .9s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* subtle highlight on section anchors */
.anchor{display:inline-block;margin-left:8px;color:var(--muted);font-size:14px}

/* -----------------------------
   Mobile: mejorar "Sobre mí"
   ----------------------------- */

@media (max-width: 980px) {
  /* En pantallas tablet/pequeñas, dar más espacio y centrar la imagen */
  .about { gap: 22px; }
  .about > div:last-child { width: 320px; } /* conserva el ancho en tablet */
  .about .showcase { border-radius: 12px; overflow: hidden; }
  .about .showcase img { display: block; width: 100%; height: auto; object-fit: cover; }
}

@media (max-width: 640px) {
  /* Apilar y centrar todo en móvil */
  .about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Forzar que ambas columnas ocupen 100% */
  .about > div { width: 100% !important; max-width: 100%; }

  /* Bio: lectura óptima en pantallas pequeñas */
  .about .bio {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    padding: 0 10px;
    text-align: center;
    margin-bottom: 6px;
  }

  /* Imagen: centrada, con sombra y borde sutil */
  .about .showcase {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.03);
    overflow: hidden;
  }
  .about .showcase img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
  }

  /* Skills (chips): centrar y aumentar hit area */
  .skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0 8px;
  }
  .chip {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.02);
    cursor:default;
  }

  /* Pequeños ajustes visuales generales */
  .section-title { font-size: 22px; text-align: center; }
  .sub { text-align: center; margin-left: auto; margin-right: auto; max-width: 560px; }
}

@media (max-width: 420px) {
  .about .bio { font-size: 14px; padding: 0 8px; }
  .about .showcase img { max-height: 260px; object-fit: cover; }
  .chip { padding: 8px 12px; font-size: 13px; }
  .section-title { font-size: 20px; }
}

/* Lettering de fondo (agrandado y ajustado) */
.lettering-bg {
    position: absolute;
    font-family: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    font-size: 220px;                 /* aumentado desde 140px */
    color: rgba(255,255,255,0.03);    /* leve aumento de visibilidad */
    white-space: nowrap;
    transform: rotate(-12deg);        /* menos rotación para mejor encaje */
    pointer-events: none;
    user-select: none;
    z-index: 0;
    width: 140%;
    text-align: center;
    top: 42%;                         /* ajustado para centrar detrás de las cards */
    left: 50%;
    transform-origin: center;
    transform: translateX(-50%) rotate(-12deg);
    line-height: 1;
    letter-spacing: 2px;
}

/* Asegurar que las secciones mantienen el texto de fondo contenido */
#inicio, #servicios {
    position: relative;
    overflow: hidden;
}

/* Ajustar z-index para que el contenido quede por encima */
.hero-inner, .services-grid {
    position: relative;
    z-index: 1;
}

/* Responsive: reducir tamaño gradualmente */
@media (max-width: 1200px) {
    .lettering-bg { font-size: 190px; top: 44%; }
}
@media (max-width: 980px) {
    .lettering-bg { font-size: 140px; top: 46%; }
}
@media (max-width: 640px) {
    .lettering-bg { font-size: 90px; top: 48%; opacity: 0.025; }
}
@media (max-width: 420px) {
    .lettering-bg { font-size: 64px; top: 50%; opacity: 0.02; }
}

/* -------------------------
   Welcome modal (estilo tattoo)
   ------------------------- */
.welcome-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(3,3,3,0.55);
  z-index:9999;
  padding:24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .28s ease;
}
.welcome-modal.visible{
  opacity:1;
  pointer-events:auto;
}

/* tarjeta central */
.welcome-card{
  width:min(720px,96%);
  max-width:720px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  padding:22px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.04);
  display:flex;
  gap:16px;
  align-items:center;
  transform: translateY(-10px) scale(.995);
  transition: transform .36s cubic-bezier(.2,.9,.3,1);
}

/* cuando visible, levanta la tarjeta */
.welcome-modal.visible .welcome-card{
  transform: translateY(0) scale(1);
}

/* marca decorativa al estilo tattoo */
.welcome-mark {
  min-width:84px;
  min-height:84px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.06), transparent 30%), linear-gradient(135deg,var(--accent),#47c4ff);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#060606;
  font-weight:900;
  font-family: 'UnifrakturMaguntia', serif;
  font-size:20px;
  border: 3px solid rgba(0,0,0,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  flex-shrink:0;
  text-transform: none;
  letter-spacing:1px;
}

/* texto principal */
.welcome-content { flex:1; color:var(--white); }
.welcome-content h3{
  margin:0 0 6px 0;
  font-family: 'UnifrakturMaguntia', serif;
  font-size:22px;
  color:var(--white);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.welcome-content p{ margin:0;color:var(--muted);font-weight:600; }

/* close */
.welcome-close{
  background:transparent;border:none;color:var(--muted);
  font-size:22px;line-height:1;padding:8px;border-radius:8px;cursor:pointer;
  margin-left:12px;
}
.welcome-close:hover{ color:var(--white); transform:translateY(-2px) }

/* animation (subtle) */
@keyframes welcomePulse {
  0% { transform: scale(.995) }
  50% { transform: scale(1.01) }
  100% { transform: scale(.995) }
}
.welcome-mark { animation: welcomePulse 5s ease-in-out infinite; }

/* hide transition */
.welcome-modal.hide{ opacity:0; pointer-events:none; transition:opacity .25s ease; }

/* responsive */
@media (max-width:640px){
  .welcome-card{ flex-direction:column; align-items:center; text-align:center; padding:18px; gap:10px; }
  .welcome-mark{ min-width:72px; min-height:72px; font-size:18px; }
  .welcome-content h3{ font-size:18px; }
  .welcome-close{ position:absolute; top:12px; right:12px; }
}

/* Quitar subrayado de enlaces que usan estilo de botón
   Añadimos la propiedad estándar `text-decoration-skip-ink` + la prefijada para compatibilidad */
.btn,
.actions a.btn,
.actions a,
a.btn-ghost,
a.btn-primary,
a.cta {
  text-decoration: none !important;
  /* Propiedad estándar (navegadores modernos) */
  text-decoration-skip-ink: none;
  /* Variante prefijada para WebKit (Chromium, Safari) */
  -webkit-text-decoration-skip-ink: none;
}

/* Asegurar que en hover/focus/active tampoco aparezca */
.btn:hover,
.btn:focus,
.btn:active,
.actions a:hover,
.actions a:focus,
.actions a:active,
a.cta:hover,
a.cta:focus,
a.cta:active {
  text-decoration: none !important;
  outline: none;
}

/* Si el subrayado venía por un border-bottom en algún estilo, ocultarlo */
.btn,
.actions a,
a.cta {
  border-bottom: none !important;
}