/* Natika Tattoo · estilos públicos */
:root{--ink:#091540;--paper:#fbfcff;--blue:#296BA1;--muted:#566078;--line:#dce2ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}body,button,input,textarea,select{font-family:'DM Sans',Arial,sans-serif}img{max-width:100%}a{color:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}.site-header{position:sticky;top:0;z-index:100;background:rgba(251,252,255,.94);border-bottom:1px solid rgba(220,226,239,.95);backdrop-filter:blur(12px)}.bar{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{font-family:'DM Serif Display',Georgia,serif;font-size:2rem;line-height:1;text-decoration:none}.nav{display:flex;align-items:center;gap:30px}.nav a{font-size:.86rem;font-weight:600;text-decoration:none}.nav a:hover{color:var(--blue)}.mobile-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:1.55rem;cursor:pointer}.hero{padding:86px 0 106px}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:clamp(50px,8vw,110px);align-items:center}.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.serif,.section-title{font-family:'DM Serif Display',Georgia,serif;font-weight:400}.hero h1{max-width:760px;margin:22px 0 26px;font-size:clamp(4rem,7vw,7.6rem);line-height:.88;letter-spacing:-.045em}.hero h1 em,.section-title em{font-weight:400}.hero-copy p{margin:0;color:#3f4a63;font-size:1.06rem;line-height:1.8}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border:1px solid #b8c4d8;border-radius:999px;font-size:.86rem;font-weight:700;text-decoration:none;transition:transform .18s,background .18s,color .18s,border-color .18s}.pill:hover{transform:translateY(-1px)}.pill.outline{background:transparent}.pill.outline:hover{border-color:var(--blue);color:var(--blue)}.hero-photo{position:relative;overflow:hidden;border-radius:220px 220px 10px 10px;aspect-ratio:4/5;background:#dbe4f6}.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}.section-title{margin:18px 0 24px;line-height:.96;letter-spacing:-.035em}.gallery-head{display:flex;justify-content:space-between;gap:30px}.filters{display:flex;flex-wrap:wrap}.filter{border-radius:999px;background:transparent;cursor:pointer;font:inherit;font-size:.8rem;font-weight:700}.gallery-item{position:relative;overflow:hidden;border:0;padding:0;cursor:pointer;text-align:left}.gallery-item[hidden]{display:none!important}.connect{padding:88px 0}.cta{display:flex;align-items:center;justify-content:space-between;gap:50px}.cta>div{max-width:760px}.cta .section-title{font-size:clamp(2.7rem,4.8vw,5rem)}.cta p{max-width:720px;margin:0;color:#44506a;font-size:1rem;line-height:1.8}.footer{padding:28px 0}.footer .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer .inner>span,.footer .inner>a{font-size:.78rem}.footer .inner>a{text-decoration:none}.lightbox{position:fixed;inset:0;z-index:99999;display:none;place-items:center;padding:70px 22px 50px;background:rgba(4,8,20,.92)}.lightbox.open{display:grid}.lightbox img{max-width:min(92vw,1100px);max-height:78vh;object-fit:contain;border-radius:6px}.lightbox .close{position:absolute;top:20px;right:24px;width:48px;height:48px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:transparent;color:#fff;font-size:2rem;line-height:1;cursor:pointer}.lightbox .label{max-width:min(92vw,1000px);color:#fff;text-align:center;font-size:.9rem;line-height:1.5}.portfolio-empty{padding:30px;border:1px dashed var(--line);color:var(--muted);text-align:center}@media(max-width:900px){.hero-grid{grid-template-columns:1fr 1fr;gap:48px}.hero h1{font-size:clamp(3.8rem,9vw,6rem)}}@media(max-width:680px){.wrap{width:min(100% - 30px,1180px)}.bar{min-height:70px}.mobile-toggle{display:block}.nav{display:none}.hero{padding:58px 0 78px}.hero-grid{grid-template-columns:1fr;gap:46px}.hero h1{font-size:clamp(3.4rem,15vw,5.4rem)}.hero-photo{width:min(92%,480px);margin:0 auto}.cta{align-items:flex-start;flex-direction:column}.footer .inner{align-items:flex-start;flex-direction:column}.lightbox{padding-top:82px}}

.hero {
  background: radial-gradient(circle at 4% 22%, #e9efff 0, transparent 26%), #fbfcff;
}
.hero-copy p { max-width: 470px; }

.artist-section {
  padding: 104px 0;
  background: #eef2fb;
  border-top: 1px solid #dce5f6;
  border-bottom: 1px solid #dce5f6;
}
.artist-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
}
.artist-portrait { margin: 0; min-width: 0; }
.artist-photo-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #bfcbeb;
  border-radius: 210px 210px 10px 10px;
  background: linear-gradient(145deg, #dbe5fb, #c8d6f7 65%, #e8efff);
  box-shadow: 22px 22px 0 #d6e1f7;
  color: #29417f;
  text-align: center;
}
.artist-photo-placeholder::before,
.artist-photo-placeholder::after {
  content: "";
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border: 1px solid rgba(41,107,161,.16);
  border-radius: 50%;
}
.artist-photo-placeholder::before { transform: translate(-36%, -58%); }
.artist-photo-placeholder::after { transform: translate(42%, 68%); }
.photo-symbol { position: relative; z-index: 1; font-size: 4.2rem; line-height: 1; color: #296BA1; }
.photo-placeholder-title { position: relative; z-index: 1; margin-top: 20px; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(1.8rem, 4vw, 3rem); }
.artist-portrait figcaption { margin-top: 39px; color: #546492; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.artist-copy .eyebrow { color: #296BA1; }
.artist-copy .section-title { margin: 20px 0 32px; max-width: 600px; font-size: clamp(2.9rem, 4.6vw, 5rem); }
.artist-copy p { max-width: 570px; margin: 0 0 16px; font-size: 1.03rem; line-height: 1.85; color: #39455f; }
.artist-signoff { display: flex; align-items: baseline; gap: 30px; margin-top: 40px; padding-top: 22px; border-top: 1px solid #cbd6ed; }
.artist-signoff .signature { color: #296BA1; font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; font-style: italic; }


.ui-icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.ui-icon{width:1.08em;height:1.08em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.pill .ui-icon{margin-left:8px}.portfolio-follow .ui-icon{width:1.2rem;height:1.2rem}
 .portfolio-section { padding: 108px 0 118px; background: #fbfcff; }
.portfolio-section .gallery-head { align-items: end; }
.portfolio-section .gallery-head .eyebrow { color: #296BA1; }
.portfolio-section .section-title { max-width: 740px; font-size: clamp(3.4rem, 5.5vw, 6.2rem); }
.portfolio-section .section-title em { color: #296BA1; font-weight: 400; }
.portfolio-section .section-lead { max-width: 560px; color: #566078; }
.portfolio-section .filters { gap: 5px; margin: 42px 0 18px; padding-bottom: 10px; border-bottom: 1px solid #dce2ef; }
.portfolio-section .filter { padding: 11px 19px; border: 0; color: #49546c; opacity: 1; }
.portfolio-section .filter:hover { background: #edf1fb; color: #296BA1; }
.portfolio-section .filter[aria-pressed="true"] { background: #091540; color: #fff; }
.portfolio-carousel-shell { position: relative; }
.portfolio-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 34px; min-height: 46px; margin-top: 20px; }
.portfolio-carousel-controls[hidden] { display: none !important; }
.carousel-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 0; background: transparent; color: #091540; cursor: pointer; transition: color .2s, opacity .2s, transform .2s; }
.carousel-arrow-icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow:hover:not(:disabled) { color: #296BA1; transform: scale(1.08); }
.carousel-arrow:focus-visible { outline: 2px solid #296BA1; outline-offset: 3px; }
.carousel-arrow:disabled { opacity: .25; cursor: default; }
.portfolio-section .gallery { gap: 16px; }
.portfolio-section .gallery[data-mode="featured"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 250px; }
.portfolio-section .gallery-item { position: relative; height: 100%; overflow: hidden; border: 0; border-radius: 8px; background: #dbe4f6; box-shadow: none; isolation: isolate; cursor: pointer; text-align: left; }
.portfolio-section .gallery-item[hidden] { display: none !important; }
.portfolio-section .gallery[data-mode="featured"] .gallery-item.is-featured { grid-column: span 2; grid-row: span 2; order: -1; }
.portfolio-section .gallery[data-mode="carousel"] { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.portfolio-section .gallery[data-mode="carousel"]::-webkit-scrollbar { display: none; }
.portfolio-section .gallery[data-mode="carousel"] .gallery-item { flex: 0 0 calc((100% - 32px) / 3); height: 430px; scroll-snap-align: start; }
.portfolio-section .gallery[data-mode="carousel"][data-visible-count="2"] .gallery-item { flex-basis: calc((100% - 16px) / 2); }
.portfolio-section .gallery[data-mode="carousel"][data-visible-count="1"] .gallery-item { flex-basis: min(100%, 670px); }
.portfolio-section .gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.portfolio-section .gallery-item:hover img,
.portfolio-section .gallery-item:focus-visible img { transform: scale(1.055); }
.portfolio-section .gallery-item::before { content: ""; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(4,9,24,.73)); pointer-events: none; }
.portfolio-section .gallery-open-icon { position: absolute; z-index: 2; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; transition: background .2s, color .2s; }
.portfolio-section .gallery-open-icon .ui-icon { width: 18px; height: 18px; }
.portfolio-section .gallery-item:hover .gallery-open-icon,
.portfolio-section .gallery-item:focus-visible .gallery-open-icon { background: #fff; color: #091540; }
.portfolio-section .gallery-item .caption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 5px; padding: 24px; color: #fff; }
.portfolio-section .gallery-item .caption strong { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.portfolio-section .gallery-item .caption span { font-size: .72rem; font-weight: 700; letter-spacing: .1em; opacity: .86; text-transform: uppercase; }
.portfolio-follow { margin-top: 28px; padding: 26px 0 0; border-top: 1px solid #dce2ef; background: transparent; }
.portfolio-follow a { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 5px; border-bottom: 1px solid #296BA1; color: #296BA1; font-size: .9rem; font-weight: 700; text-decoration: none; transition: color .2s, border-color .2s; }
.portfolio-follow a:hover { color: #091540; border-color: #091540; }
.footer { border-top: 1px solid #dce2ef; background: #fbfcff; color: #556078; }
.footer-social { display: flex; align-items: center; gap: 30px; }
.footer-social a { color: #26345b; font-size: .76rem; letter-spacing: .19em; text-transform: uppercase; }
.footer-social a:hover { color: #296BA1; }

.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.hero-photo.reveal-on-scroll { transition-delay: .12s; }
.artist-copy.reveal-on-scroll { transition-delay: .1s; }
@media (max-width: 900px) {
  .artist-layout { gap: 50px; }
  .portfolio-section .gallery[data-mode="featured"] { grid-auto-rows: 210px; }
  .portfolio-section .gallery[data-mode="carousel"] .gallery-item { height: 360px; }
}
@media (max-width: 680px) {
  .artist-section { padding: 70px 0; }
  .artist-layout { grid-template-columns: 1fr; gap: 58px; }
  .artist-portrait { max-width: 420px; }
  .artist-photo-placeholder { box-shadow: 14px 14px 0 #d6e1f7; }
  .artist-copy .section-title { font-size: clamp(2.7rem, 12vw, 4rem); }
  .artist-signoff { flex-wrap: wrap; gap: 8px 24px; }
  .portfolio-section { padding: 76px 0 80px; }
  .portfolio-section .section-title { font-size: clamp(3rem, 13vw, 5rem); }
  .portfolio-section .filters { gap: 4px; margin-top: 32px; }
  .portfolio-section .filter { padding: 9px 12px; font-size: .76rem; }
  .portfolio-carousel-controls { display: none !important; }
  .portfolio-section .gallery[data-mode="featured"] { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .portfolio-section .gallery[data-mode="featured"] .gallery-item,
  .portfolio-section .gallery[data-mode="featured"] .gallery-item.is-featured { grid-column: auto; grid-row: auto; height: 340px; }
  .portfolio-section .gallery[data-mode="featured"] .gallery-item.is-featured { height: 420px; }
  .portfolio-section .gallery[data-mode="carousel"] { gap: 12px; margin-right: -15px; padding-right: 15px; scroll-padding-inline: 0 15px; }
  .portfolio-section .gallery[data-mode="carousel"] .gallery-item,
  .portfolio-section .gallery[data-mode="carousel"][data-visible-count="2"] .gallery-item { flex: 0 0 84%; height: 390px; }
  .portfolio-section .gallery[data-mode="carousel"][data-visible-count="1"] .gallery-item { flex-basis: 100%; }
  .portfolio-section .gallery-item .caption { padding: 22px !important; }
  .portfolio-follow { padding-top: 23px; }
  .portfolio-follow a { line-height: 1.5; }
  .footer .inner .footer-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-bottom: 20px; }
  .footer-social a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 12px; border: 1px solid #cbd5ea; border-radius: 7px; background: transparent; color: #26345b; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* Natika · accent and mobile navigation */
.brand span,
.hero h1 em,
.intro .signature { color: #296BA1; }
.pill.primary { background: #296BA1; color: #fff; }
.pill.primary:hover { background: #205681; }
.filter[aria-pressed="true"] { background: #296BA1; border-color: #296BA1; color: #fff; }
:focus-visible { outline-color: #296BA1; }
.connect { background: #e9f2f8; }
.hero-photo { box-shadow: 35px 35px 0 #e4f0f7; }

/* Menú móvil de pantalla completa. */
.mobile-menu-overlay[hidden] { display: none !important; }
.mobile-menu-overlay { display: none; }

@media (max-width: 680px) {
  body.mobile-menu-open { overflow: hidden; }

  /* El menú original de escritorio se conserva solo para escritorio. */
  .site-header .nav,
  .site-header .nav.open { display: none !important; }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fbfcff;
    color: #091540;
  }

  .mobile-menu-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: max(26px, env(safe-area-inset-top)) 8% max(27px, env(safe-area-inset-bottom));
  }

  .mobile-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex: none;
  }

  .mobile-menu-brand {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.8rem, 7vw, 2.25rem);
    line-height: 1.1;
    text-decoration: none;
    color: #091540;
  }
  .mobile-menu-brand span { color: #296BA1; }

  .mobile-menu-close {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #091540;
  }
  .mobile-menu-close span::before,
  .mobile-menu-close span::after {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    top: 25px;
    width: 32px;
    height: 1.5px;
    background: currentColor;
  }
  .mobile-menu-close span::before { transform: rotate(45deg); }
  .mobile-menu-close span::after { transform: rotate(-45deg); }

  .mobile-menu-links {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 4vh, 36px);
    margin: clamp(34px, 6vh, 75px) 0;
    text-align: center;
  }
  .mobile-menu-links a {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2.05rem, 8.9vw, 4.3rem);
    line-height: 1.1;
    letter-spacing: .035em;
    text-decoration: none;
    font-weight: 400;
    color: #091540;
    transition: color .2s ease;
  }
  .mobile-menu-links a:hover,
  .mobile-menu-links a:focus-visible { color: #296BA1; }

  .mobile-menu-bottom {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 4vh, 42px);
  }
  .mobile-menu-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }
  .mobile-menu-socials a {
    display: inline-flex;
    align-items: center;
    color: #091540;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-decoration: none;
  }
  .mobile-menu-book {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    width: min(100%, 420px);
    padding: 12px 20px;
    border-radius: 100px;
    color: #fff;
    background: #296BA1;
    text-decoration: none;
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: clamp(.95rem, 4vw, 1.05rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  .mobile-menu-book:hover { background: #205681; }
}

/* Transiciones del menú móvil. */
@media (max-width: 680px) {
  .mobile-menu-overlay:not([hidden]) {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .mobile-menu-overlay.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .mobile-menu-overlay.is-closing {
    opacity: 0;
    transform: translateY(-7px);
    pointer-events: none;
  }
  .mobile-menu-links,
  .mobile-menu-bottom {
    transition: opacity 300ms ease, transform 300ms cubic-bezier(.22,.61,.36,1);
  }
  .mobile-menu-overlay:not(.is-open) .mobile-menu-links,
  .mobile-menu-overlay:not(.is-open) .mobile-menu-bottom {
    opacity: 0;
    transform: translateY(9px);
  }
  .mobile-menu-overlay.is-open .mobile-menu-links,
  .mobile-menu-overlay.is-open .mobile-menu-bottom {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-overlay,
  .mobile-menu-links,
  .mobile-menu-bottom {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 370px) and (max-height: 700px) {
  .mobile-menu-inner { padding-inline: 6%; }
  .mobile-menu-links { margin: 20px 0; gap: 13px; }
  .mobile-menu-links a { font-size: 1.9rem; }
  .mobile-menu-bottom { gap: 15px; }
  .mobile-menu-book { min-height: 54px; }
}
/* Foto de Natika, administrable desde /admin/. */
.artist-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid #bfcbeb;border-radius:210px 210px 10px 10px;background:#dbe5fb;box-shadow:22px 22px 0 #d6e1f7}.artist-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.artist-portrait .artist-photo+figcaption{margin-top:39px}@media(max-width:680px){.artist-photo{box-shadow:14px 14px 0 #d6e1f7}}