:root{
  --masa:#FCF4E3;
  --panel:#FBEFD6;
  --panel-2:#F7E4BE;
  --cocoa:#3A2014;
  --cocoa-soft:#7A5740;
  --cobalt:#164E8E;
  --cobalt-deep:#0F3A6B;
  --marigold:#F0A40C;
  --concha:#E3567E;
  --leaf:#3C8A5B;
  --line:rgba(58,32,20,.14);
  --display:"Fraunces",Georgia,serif;
  --body:"DM Sans",system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--masa);
  color:var(--cocoa);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cobalt);
}

/* papel picado strip */
.papel{height:26px;background:
   repeating-linear-gradient(90deg,
     var(--concha) 0 56px, var(--marigold) 56px 112px,
     var(--cobalt) 112px 168px, var(--leaf) 168px 224px);
   -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='26'><path d='M0,0 H56 V14 a8,8 0 0 1 -8,8 a6,6 0 0 1 -6,-6 a6,6 0 0 0 -12,0 a6,6 0 0 1 -6,6 a8,8 0 0 1 -8,-8 a6,6 0 0 0 -6,6 a6,6 0 0 1 -4,2 Z' fill='black'/></svg>") repeat-x bottom/56px 26px;
   mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='26'><path d='M0,0 H56 V14 a8,8 0 0 1 -8,8 a6,6 0 0 1 -6,-6 a6,6 0 0 0 -12,0 a6,6 0 0 1 -6,6 a8,8 0 0 1 -8,-8 a6,6 0 0 0 -6,6 a6,6 0 0 1 -4,2 Z' fill='black'/></svg>") repeat-x bottom/56px 26px;
}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(252,244,227,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:40px;height:40px;flex:none}
.brand .logo{height:62px;width:auto;display:block}
.brand b{font-family:var(--display);font-weight:900;font-size:1.32rem;line-height:1;letter-spacing:-.01em}
.brand b i{font-style:italic;font-weight:600;color:var(--concha)}
.brand small{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa-soft);font-weight:700;margin-top:3px}
nav ul{list-style:none;display:flex;gap:30px;align-items:center}
nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--cocoa)}
nav a:hover{color:var(--cobalt)}
.pill{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:var(--cobalt);color:#fff;font-family:var(--body);font-weight:700;font-size:.9rem;
  padding:11px 18px;border-radius:999px;text-decoration:none;transition:transform .15s,background .15s;
}
.pill:hover{background:var(--cobalt-deep);transform:translateY(-1px)}
.pill.ghost{background:transparent;color:var(--cobalt);border:1.5px solid var(--cobalt)}
.pill.ghost:hover{background:var(--cobalt);color:#fff}
.menu-btn{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}

/* hero */
.hero{position:relative;padding:74px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.openpill{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9rem;margin-bottom:22px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(60,138,91,.18)}
.dot.closed{background:var(--concha);box-shadow:0 0 0 4px rgba(227,86,126,.18)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(2.9rem,6.2vw,5rem);line-height:.98;letter-spacing:-.02em;margin-bottom:8px}
h1 .de{font-style:italic;font-weight:600;color:var(--concha)}
h1 .mx{color:var(--cobalt)}
.lede{font-size:1.18rem;color:var(--cocoa-soft);max-width:34ch;margin:18px 0 28px}
.lede b{color:var(--cocoa);font-weight:700}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.stars{display:flex;align-items:center;gap:10px;margin-top:26px;font-weight:600;color:var(--cocoa-soft);font-size:.95rem}
.stars .s{color:var(--marigold);font-size:1.05rem;letter-spacing:2px}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.tileblock{position:absolute;inset:6% 4%;border-radius:30px;background:
    radial-gradient(circle at 30% 30%, rgba(240,164,12,.18), transparent 60%),
    var(--cobalt);
    overflow:hidden}
.tileblock::before{content:"";position:absolute;inset:0;opacity:.5;background-image:
   radial-gradient(var(--marigold) 2px, transparent 2.6px),
   radial-gradient(rgba(255,255,255,.35) 2px, transparent 2.6px);
   background-size:38px 38px;background-position:0 0,19px 19px}
.concha-hero{position:relative;width:min(360px,72%);filter:drop-shadow(0 22px 30px rgba(15,58,107,.4))}

/* generic section */
section{padding:84px 0}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,2.9rem);line-height:1.04;letter-spacing:-.015em;margin:10px 0 12px}
.sec-head p{color:var(--cocoa-soft);font-size:1.08rem}

/* fresh strip */
.strip{background:var(--cobalt);color:#fff;padding:30px 0}
.strip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;text-align:center}
.strip-in span{font-family:var(--display);font-weight:600;font-size:1.18rem;display:inline-flex;align-items:center;gap:12px}
.strip-in span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--marigold)}

/* category cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(58,32,20,.12)}
.card .ic{width:54px;height:54px;margin-bottom:18px}
.card h3{font-family:var(--display);font-weight:700;font-size:1.34rem;margin-bottom:8px}
.card p{color:var(--cocoa-soft);font-size:.98rem}
.card .es{display:block;font-weight:700;color:var(--cobalt);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}

/* experience */
.exp{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;counter-reset:step}
.step{position:relative;padding-top:14px}
.step .n{font-family:var(--display);font-weight:900;font-size:2.6rem;color:var(--concha);line-height:1}
.step h4{font-family:var(--display);font-weight:700;font-size:1.25rem;margin:8px 0 6px}
.step p{color:var(--cocoa-soft);font-size:.98rem}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;display:flex;flex-direction:column}
.quote .s{color:var(--marigold);letter-spacing:3px;font-size:1.1rem;margin-bottom:14px}
.quote p{font-size:1.04rem;line-height:1.5}
.quote cite{margin-top:18px;font-style:normal;font-weight:700;color:var(--cobalt-deep);font-size:.9rem}
.quote cite span{display:block;font-weight:500;color:var(--cocoa-soft);font-size:.82rem}

/* visit */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.hours{width:100%;border-collapse:collapse;background:var(--panel);border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.hours td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:.98rem}
.hours tr:last-child td{border-bottom:none}
.hours td:last-child{text-align:right;color:var(--cocoa-soft)}
.hours tr.today{background:var(--panel-2)}
.hours tr.today td{font-weight:700;color:var(--cocoa)}
.addr{font-size:1.1rem;line-height:1.7}
.addr strong{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;margin-bottom:6px}
.visit .pill{margin-top:22px}

/* contact details in visit section */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-icon {
  font-size: 1.4rem;
  background: var(--panel-2);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--cobalt);
}
.contact-item strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cocoa);
  margin-bottom: 2px;
}
.contact-item p {
  font-size: 0.95rem;
  color: var(--cocoa-soft);
  line-height: 1.4;
}
.contact-link {
  color: var(--cobalt);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.contact-link:hover {
  color: var(--cobalt-deep);
  border-bottom-color: var(--cobalt-deep);
}

/* footer */
footer{background:var(--cocoa);color:#f7e8d4;padding:54px 0 30px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
footer b{font-family:var(--display);font-size:1.4rem;font-weight:800;color:#fff}
footer .es{color:var(--marigold);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.foot-badge{display:inline-flex;background:#fff;border-radius:16px;padding:14px 20px}
.foot-badge img{height:74px;width:auto;display:block}
section[id]{scroll-margin-top:96px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:#f7e8d4;font-weight:500}
.foot-links a:hover{color:var(--marigold)}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;color:#d8c3a8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.divider{height:30px;background-repeat:repeat-x;background-size:60px 30px;opacity:.5}

@media (max-width:880px){
  .hero-grid,.visit-grid{grid-template-columns:1fr}
  .hero-art{min-height:220px;margin-top:30px}
  .cards,.reviews,.steps,.strip-in{grid-template-columns:1fr}
  .strip-in{gap:12px}
  nav ul{display:none}
  .menu-btn{display:inline-flex}
  nav.open ul{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;background:var(--masa);border-bottom:1px solid var(--line);padding:18px 24px;gap:18px}
  section{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero h1,.hero .lede,.hero .cta-row,.hero .stars,.hero .openpill{animation:rise .7s both}
.hero .lede{animation-delay:.08s}.hero .cta-row{animation-delay:.16s}.hero .stars{animation-delay:.24s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.concha-hero{animation:float 6s ease-in-out infinite}

/* Preview grid (homepage) */
.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
.preview-feature {
  aspect-ratio: 1 / 1;
  grid-row: span 2;
}
.preview-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gallery-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.gallery-cta p {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cocoa);
}

/* Gallery page */
.gallery-hero {
  padding: 60px 0 40px;
  background: var(--masa);
}
.gallery-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--cobalt);
  text-decoration: none;
  margin-bottom: 32px;
  transition: gap 0.2s;
}
.gallery-back:hover { gap: 10px; }
.gallery-full-section {
  padding: 0 0 84px;
}

@media (max-width: 880px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }
  .preview-feature {
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
  .preview-thumbs {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px;
  }
}

/* Gallery section */
.gallery-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.gallery-filter {
  background: transparent;
  border: 1.5px solid var(--cobalt);
  color: var(--cobalt);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-filter:hover, .gallery-filter.active {
  background: var(--cobalt);
  color: #fff;
  transform: translateY(-1px);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.gallery-item {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
.gallery-item.hidden {
  display: none;
}
.gallery-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-item:hover img {
  transform: scale(1.06);
}
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 32, 20, 0.9) 0%, rgba(58, 32, 20, 0.4) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}
.gallery-item-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--marigold);
  margin-bottom: 4px;
}
.gallery-item-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.2;
}

/* Lightbox Modal */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(30, 15, 10, 0.96);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
body.lightbox-open {
  overflow: hidden;
}
.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 85vh;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lightbox.active .lightbox-content img {
  transform: scale(1);
}
.lightbox-caption {
  color: #fff;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 18px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.5rem;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  z-index: 1010;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  color: var(--marigold);
}
.lightbox-close {
  top: 24px;
  right: 24px;
  font-size: 3rem;
}
.lightbox-prev {
  left: 24px;
}
.lightbox-next {
  right: 24px;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }
  .gallery-item-overlay {
    padding: 12px;
  }
  .gallery-item-title {
    font-size: 0.95rem;
  }
  .lightbox-close {
    top: 12px;
    right: 12px;
  }
  .lightbox-prev {
    left: 8px;
  }
  .lightbox-next {
    right: 8px;
  }
  .lightbox-close, .lightbox-prev, .lightbox-next {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }
}