/*
 * nammi.css — design system del sitio nammiskin (diseño final julio 2026).
 * - Botones (.btn*) globales, reutilizables en toda la app.
 * - Estilos del home aislados bajo .nammi-home.
 * - Página de clases (servicios) bajo .nammi-services.
 * - Menú completo del café bajo .nammi-menu.
 * Los colores vienen de los tokens definidos en theme.css. Las fotos de
 * fondo se inyectan inline desde ERB con asset_path (sprockets).
 */

/* ---------- BOTONES (globales) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px;
  border-radius:999px;
  font-family:var(--font-sans);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:12px;
  font-weight:500;
  line-height:1;
  border:1px solid currentColor;
  transition:all .25s ease;
  cursor:pointer;
  background:none;
}
.btn-sm{ padding:11px 24px; font-size:11px; letter-spacing:0.14em; }
.btn-solid{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.btn-solid:hover{ background:var(--rust); border-color:var(--rust); }
.btn-outline{ color:var(--espresso); }
.btn-outline:hover{ background:var(--espresso); color:var(--cream); }
.btn-outline-light{ color:var(--cream); }
.btn-outline-light:hover{ background:var(--cream); color:var(--espresso); }

/* ---------- BASE COMPARTIDA DE PÁGINAS DE MARKETING ---------- */
html{ scroll-behavior:smooth; }
.nammi-home, .nammi-services, .nammi-menu{ background:var(--cream); color:var(--ink); }
.nammi-home section[id], .nammi-services section[id], .nammi-menu section[id]{ scroll-margin-top:5rem; }
.nammi-home .wrap, .nammi-services .wrap, .nammi-menu .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.nammi-home section, .nammi-services section{ padding:110px 0; position:relative; }
.nammi-home .section-tight, .nammi-services .section-tight{ padding:80px 0; }
.nammi-home .eyebrow, .nammi-services .eyebrow, .nammi-menu .eyebrow{
  font-family:var(--font-sans);
  text-transform:uppercase; letter-spacing:0.28em;
  font-size:12px; font-weight:500;
}
.nammi-home .section-head, .nammi-services .section-head{ text-align:center; max-width:640px; margin:0 auto 60px; }
.nammi-home .section-head .eyebrow, .nammi-services .section-head .eyebrow{ color:var(--rust); display:block; margin-bottom:14px; }
.nammi-home .section-head h2, .nammi-services .section-head h2{ font-size:clamp(32px,5vw,48px); line-height:1.08; color:var(--espresso); }
.nammi-home .section-head p, .nammi-services .section-head p{ margin-top:16px; color:var(--espresso-soft); font-size:16px; }

/* ---------- HOME · HERO ---------- */
.nammi-home .hero{
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:90px 32px 60px;
  background-color:var(--cream-warm);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
.nammi-home .hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(43,27,18,0.035) 39px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(43,27,18,0.035) 39px);
}
.nammi-home .hero-eyebrow{ color:var(--rust); margin-bottom:22px; position:relative; }
.nammi-home .hero h1{
  font-size:clamp(34px, 5.5vw, 64px);
  line-height:1.1;
  max-width:780px;
  margin:0 auto;
  color:#4B2024;
  position:relative;
}
.nammi-home .hero h1 em{ font-style:italic; color:var(--clay); }
.nammi-home .hero-tagline{
  max-width:520px; margin:26px auto 40px;
  font-size:18px; color:var(--espresso-soft);
  position:relative;
}
.nammi-home .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; position:relative; }

/* ---------- HOME · BOOKING / SCHEDULE ---------- */
.nammi-home .booking{ background:var(--espresso); color:var(--cream); }
.nammi-home .booking .section-head .eyebrow{ color:var(--clay-soft); }
.nammi-home .booking .section-head h2{ color:var(--cream); }
.nammi-home .booking .section-head p{ color:rgba(247,239,227,0.7); }
.nammi-home .schedule-card{
  background:rgba(247,239,227,0.05);
  border:1px solid rgba(247,239,227,0.16);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:18px;
}
.nammi-home .schedule-row{
  display:grid; grid-template-columns:110px 1fr auto auto;
  align-items:center; gap:18px;
  padding:20px 26px;
  border-bottom:1px solid rgba(247,239,227,0.1);
}
.nammi-home .schedule-row:last-child{ border-bottom:none; }
.nammi-home .schedule-time{ font-family:var(--font-heading); font-size:20px; color:var(--clay-soft); }
.nammi-home .schedule-day{ font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(247,239,227,0.5); display:block; margin-bottom:2px; }
.nammi-home .schedule-info .cls-name{ font-family:var(--font-heading); font-size:17px; margin-bottom:4px; }
.nammi-home .schedule-info .cls-meta{ font-size:12px; color:rgba(247,239,227,0.55); letter-spacing:0.04em; }
.nammi-home .schedule-spots{ font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--sage-light); }
.nammi-home .schedule-spots.is-full{ color:var(--clay-soft); }
.nammi-home .schedule-book{
  padding:9px 20px; border-radius:999px; border:1px solid rgba(247,239,227,0.5);
  font-size:11px; text-transform:uppercase; letter-spacing:0.14em;
  transition:all .2s ease; white-space:nowrap;
}
.nammi-home .schedule-book:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.nammi-home .booking-note{
  text-align:center; margin-top:30px; font-size:12px; color:rgba(247,239,227,0.45);
  max-width:520px; margin-left:auto; margin-right:auto;
}
.nammi-home .booking-cta{ text-align:center; margin-top:34px; }

/* ---------- HOME · SERVICES / PRICING ---------- */
.nammi-home .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.nammi-home .price-card{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:40px 32px; display:flex; flex-direction:column;
}
.nammi-home .price-card.featured{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.nammi-home .price-card .tag{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rust); }
.nammi-home .price-card.featured .tag{ color:var(--clay-soft); }
.nammi-home .price-card h3{ font-size:26px; line-height:1.1; margin:14px 0 6px; }
.nammi-home .price-card .sub{ font-size:13px; color:var(--espresso-soft); margin-bottom:26px; }
.nammi-home .price-card.featured .sub{ color:rgba(247,239,227,0.65); }
.nammi-home .price-list{ flex:1; margin-bottom:26px; }
.nammi-home .price-list li{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-bottom:1px dashed var(--line); font-size:14px;
}
.nammi-home .price-card.featured .price-list li{ border-bottom:1px dashed rgba(247,239,227,0.2); }
.nammi-home .price-list li span:last-child{ font-family:var(--font-heading); font-size:17px; }
.nammi-home .price-list li.group-label{
  display:block; border-bottom:none; padding:16px 0 6px;
  font-family:var(--font-sans); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.18em; color:var(--rust);
}
.nammi-home .price-list li.group-label:first-child{ padding-top:0; }
.nammi-home .price-card.featured .price-list li.group-label{ color:var(--clay-soft); }
.nammi-home .price-list li .note{ display:block; font-size:10px !important; font-family:var(--font-sans) !important; color:var(--tan); margin-top:2px; letter-spacing:0.01em; }
.nammi-home .price-card.featured .price-list li .note{ color:rgba(247,239,227,0.55); }
.nammi-home .price-card .btn{ align-self:flex-start; }
.nammi-home .services-cta{ text-align:center; margin-top:44px; }

/* ---------- HOME · TEAM (carrusel) ---------- */
.nammi-home .team-carousel{ overflow:hidden; }
.nammi-home .team-track{ display:flex; gap:24px; transition:transform .6s ease; }
.nammi-home .team-card{ flex:0 0 calc((100% - 48px)/3); text-align:center; }
.nammi-home .team-photo{
  aspect-ratio:3/4; border-radius:20px; margin-bottom:18px;
  background:linear-gradient(155deg, var(--clay-soft), var(--sage-light));
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.nammi-home .team-photo::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%);
}
.nammi-home .team-photo.has-photo::after{ display:none; }
.nammi-home .team-initials{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:15px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--espresso-soft);
}
.nammi-home .team-bio{
  position:absolute; inset:0; z-index:2;
  background:rgba(36,24,17,0.88); color:var(--cream);
  display:flex; align-items:center; padding:22px;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.nammi-home .team-card:hover .team-bio{ opacity:1; }
.nammi-home .team-bio p{ font-size:12.5px; line-height:1.6; text-align:left; color:rgba(247,239,227,0.9); }
.nammi-home .team-card h4{ font-size:16px; margin-bottom:4px; }
.nammi-home .team-card .role{ font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--rust); }

/* ---------- HOME · RITUAL ---------- */
.nammi-home .ritual{ background:var(--sage-dark); color:var(--cream); }
.nammi-home .ritual .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.nammi-home .ritual-visual{
  aspect-ratio:4/5; border-radius:26px;
  background-color:var(--sage-dark);
  background-size:cover;
  background-position:center;
}
.nammi-home .ritual-content .eyebrow{ color:var(--mustard); margin-bottom:18px; display:block; }
.nammi-home .ritual-content h2{ font-size:clamp(30px,4vw,44px); line-height:1.15; margin-bottom:24px; }
.nammi-home .ritual-content p{ margin-bottom:18px; color:rgba(247,239,227,0.85); font-size:16px; }
.nammi-home .ritual-words{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.nammi-home .ritual-words span{
  font-family:var(--font-heading); font-style:italic; font-size:14px;
  border:1px solid rgba(247,239,227,0.35); border-radius:999px; padding:8px 18px;
}

/* ---------- HOME · COFFEE BAR ---------- */
.nammi-home .coffee{ background:var(--cream-warm); }
.nammi-home .menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.nammi-home .menu-card{
  display:flex; justify-content:space-between; gap:18px;
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:24px 26px;
}
.nammi-home .menu-card .m-info h4{ font-size:17px; margin-bottom:6px; }
.nammi-home .menu-card .m-info p{ font-size:13px; color:var(--espresso-soft); max-width:280px; }
.nammi-home .menu-card .m-price{ text-align:right; white-space:nowrap; }
.nammi-home .menu-card .m-price .amt{ font-family:var(--font-heading); font-size:20px; display:block; margin-bottom:8px; }
.nammi-home .menu-card .m-price a{ font-size:10px; text-transform:uppercase; letter-spacing:0.14em; border-bottom:1px solid var(--rust); color:var(--rust); }
.nammi-home .menu-cta{ text-align:center; margin-top:36px; }

/* ---------- SERVICIOS (página de clases) ---------- */
.nammi-services .movement-hero{ padding:100px 0; background:var(--cream-warm); overflow:hidden; }
.nammi-services .movement-hero .wrap{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
}
.nammi-services .movement-hero .eyebrow{ color:var(--rust); display:block; margin-bottom:22px; }
.nammi-services .movement-hero h1{
  font-size:clamp(38px,5.6vw,64px); line-height:1.05; color:var(--espresso);
  font-family:var(--font-heading); font-weight:500;
}
.nammi-services .movement-hero h1 em{ font-style:italic; color:var(--clay); }
.nammi-services .movement-hero p{ margin:24px 0 34px; color:var(--espresso-soft); max-width:440px; font-size:16px; }
.nammi-services .movement-hero .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.nammi-services .movement-visual{
  aspect-ratio:4/5; border-radius:26px; position:relative; overflow:hidden;
  background-color:var(--sage-dark);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
.nammi-services .movement-visual .visual-tag{
  position:absolute; left:24px; right:24px; bottom:24px;
  background:rgba(36,24,17,0.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(247,239,227,0.25);
  border-radius:16px;
  padding:18px 20px;
  color:var(--cream);
  z-index:2;
}
.nammi-services .visual-tag .eyebrow{ color:var(--clay-soft); display:block; margin-bottom:6px; font-size:10px; }
.nammi-services .visual-tag strong{ font-family:var(--font-heading); font-size:19px; font-weight:500; }

.nammi-services .mission{ text-align:center; }
.nammi-services .mission .wrap{ max-width:760px; }
.nammi-services .mission h2{ font-size:clamp(26px,4vw,40px); color:var(--espresso); line-height:1.3; }
.nammi-services .mission h2 em{ font-style:italic; color:var(--rust); }
.nammi-services .mission a{ display:inline-block; margin-top:30px; }

.nammi-services .coming-soon{ text-align:center; max-width:520px; margin:0 auto; }
.nammi-services .soon-badge{
  display:inline-block; padding:8px 22px; border-radius:999px;
  border:1px solid var(--rust); color:var(--rust);
  font-family:var(--font-sans); font-size:11px; text-transform:uppercase;
  letter-spacing:0.18em; font-weight:500; margin-bottom:22px;
}
.nammi-services .coming-soon p{ color:var(--espresso-soft); font-size:15px; line-height:1.7; margin-bottom:30px; }

.nammi-services .class-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.nammi-services .recovery-grid{ grid-template-columns:repeat(2,1fr); max-width:820px; margin:0 auto; }
.nammi-services .class-card{
  position:relative; aspect-ratio:3/4.1; border-radius:24px; overflow:hidden; isolation:isolate;
}
.nammi-services .class-visual{ position:absolute; inset:0; }
.nammi-services .class-field .class-visual{ background:linear-gradient(155deg, var(--sage-dark) 0%, var(--espresso) 125%); }
.nammi-services .class-frame .class-visual{ background:linear-gradient(155deg, var(--rust) 0%, var(--brown-deep) 125%); }
.nammi-services .class-form  .class-visual{ background:linear-gradient(155deg, var(--tan) 0%, var(--espresso-soft) 125%); }
.nammi-services .class-coldplunge .class-visual{ background:linear-gradient(155deg, var(--sage-light) 0%, var(--sage-dark) 55%, var(--espresso) 130%); }
.nammi-services .class-sauna .class-visual{ background:linear-gradient(155deg, var(--mustard) 0%, var(--rust) 55%, var(--brown-deep) 130%); }
.nammi-services .class-visual::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 34px, rgba(247,239,227,0.05) 35px),
    repeating-linear-gradient(90deg, transparent, transparent 34px, rgba(247,239,227,0.05) 35px);
}
.nammi-services .class-base{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:28px 26px; color:var(--cream);
  transition:opacity .3s ease;
}
.nammi-services .class-base .class-eyebrow{
  display:block; margin-bottom:8px; font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(247,239,227,0.75);
}
.nammi-services .class-base h3{ font-size:30px; letter-spacing:0.03em; }
.nammi-services .class-hover{
  position:absolute; inset:0; z-index:3;
  background:rgba(36,24,17,0.94);
  color:var(--cream);
  padding:30px 26px;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
}
.nammi-services .class-hover h3{ font-size:23px; margin-bottom:4px; }
.nammi-services .class-hover .class-eyebrow{
  display:block; margin-bottom:16px; font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--clay-soft);
}
.nammi-services .class-hover .btn{ align-self:flex-start; font-size:11px; padding:11px 24px; }
.nammi-services .class-desc{ flex:1; overflow-y:auto; padding-right:8px; margin-bottom:16px; }
.nammi-services .class-desc p{ font-size:12.5px; line-height:1.65; color:rgba(247,239,227,0.85); margin-bottom:10px; }
.nammi-services .class-desc::-webkit-scrollbar{ width:4px; }
.nammi-services .class-desc::-webkit-scrollbar-track{ background:transparent; }
.nammi-services .class-desc::-webkit-scrollbar-thumb{ background:rgba(247,239,227,0.3); border-radius:4px; }
.nammi-services .class-card:hover .class-hover,
.nammi-services .class-card:focus-within .class-hover{ opacity:1; transform:translateY(0); }
.nammi-services .class-card:hover .class-base,
.nammi-services .class-card:focus-within .class-base{ opacity:0; }
.nammi-services .classes-note{ text-align:center; margin-top:44px; font-size:13px; color:var(--espresso-soft); }
.nammi-services .classes-note a{ color:var(--rust); border-bottom:1px solid var(--rust); }

/* ---------- MENÚ COMPLETO (café) ---------- */
.nammi-menu .menu-hero{
  padding:100px 0 60px; text-align:center;
  background-color:var(--cream-warm);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.nammi-menu .menu-hero .eyebrow{ color:var(--rust); margin-bottom:18px; display:block; }
.nammi-menu .menu-hero h1{ font-size:clamp(34px,5vw,54px); margin-bottom:16px; color:var(--espresso); font-family:var(--font-heading); font-weight:500; }
.nammi-menu .menu-hero p{ color:var(--espresso-soft); max-width:520px; margin:0 auto; }
.nammi-menu .menu-section{ padding:70px 0; }
.nammi-menu .menu-section.alt{ background:var(--paper); }
.nammi-menu .menu-section-head{ margin-bottom:36px; }
.nammi-menu .menu-section-head .eyebrow{ color:var(--rust); margin-bottom:10px; display:block; }
.nammi-menu .menu-section-head h2{ font-size:clamp(26px,3.4vw,36px); color:var(--espresso); }
.nammi-menu .preorder-badge{
  display:inline-block; vertical-align:middle; margin-left:14px;
  font-family:var(--font-sans); font-size:10px; text-transform:uppercase;
  letter-spacing:0.14em; font-weight:500; color:var(--rust);
  border:1px solid var(--rust); border-radius:999px; padding:5px 14px;
  transition:all .2s ease;
}
.nammi-menu a.preorder-badge:hover{ background:var(--rust); color:var(--cream); }
.nammi-menu .item-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; }
.nammi-menu .item{ border-bottom:1px solid var(--line); padding-bottom:18px; }
.nammi-menu .item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:6px; }
.nammi-menu .item h4{ font-size:16px; color:var(--espresso); }
.nammi-menu .item-price{ font-family:var(--font-sans); font-weight:500; color:var(--rust); font-size:14px; white-space:nowrap; }
.nammi-menu .item p{ font-size:13.5px; color:var(--espresso-soft); }
.nammi-menu .item .item-tags{ margin-top:8px; font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--rust); }
.nammi-menu .simple-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 40px; }
.nammi-menu .simple-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:15px; color:var(--espresso-soft); padding:10px 0; border-bottom:1px solid var(--line); }
.nammi-menu .simple-list li .item-price{ font-size:13px; }
.nammi-menu .size-note{ margin-top:14px; font-size:11px; color:var(--tan); text-transform:uppercase; letter-spacing:0.1em; }
.nammi-menu .addons{ margin-top:30px; border:1px dashed var(--rust); border-radius:16px; padding:22px 26px; }
.nammi-menu .addons h5{ font-family:var(--font-heading); font-style:italic; color:var(--rust); margin-bottom:10px; font-size:16px; }
.nammi-menu .addons p{ font-size:13px; color:var(--espresso-soft); letter-spacing:0.04em; }
.nammi-menu .addons-list{ margin-top:14px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px; }
.nammi-menu .addons-list div{ font-size:12.5px; color:var(--espresso-soft); }
.nammi-menu .addons-list strong{ color:var(--rust); font-weight:500; }
.nammi-menu .menu-cta{ text-align:center; margin-top:36px; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .nammi-home .ritual .wrap{ grid-template-columns:1fr; }
  .nammi-home .pricing-grid{ grid-template-columns:1fr; }
  .nammi-home .team-card{ flex-basis:100%; }
  .nammi-home .menu-grid{ grid-template-columns:1fr; }
  .nammi-home .schedule-row{ grid-template-columns:1fr; text-align:left; gap:8px; }
  .nammi-services .movement-hero .wrap{ grid-template-columns:1fr; }
  .nammi-services .movement-visual{ aspect-ratio:16/10; }
  .nammi-services .class-grid{ grid-template-columns:1fr; }
}
@media(max-width:720px){
  .nammi-menu .item-grid{ grid-template-columns:1fr; }
  .nammi-menu .simple-list{ grid-template-columns:1fr; }
  .nammi-menu .addons-list{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  /* touch: sin hover, la descripción queda visible bajo el visual */
  .nammi-services .class-card{ aspect-ratio:auto; display:flex; flex-direction:column; }
  .nammi-services .class-visual{ position:relative; inset:auto; height:180px; }
  .nammi-services .class-visual::after{ position:absolute; }
  .nammi-services .class-base{ position:relative; padding:22px 22px 0; opacity:1 !important; }
  .nammi-services .class-hover{
    position:relative; inset:auto; opacity:1 !important; transform:none !important;
    padding:16px 22px 26px;
  }
  .nammi-services .class-desc{ overflow-y:visible; }
}
/*
 * Nammiskin — theme tokens
 * Estética: cálida y orgánica.
 * Paleta de marca (Manual de Marca Nammiskin):
 *   Primarios   — Ocre #8A3A22, Calabaza #CD8C66
 *   Secundarios — Eucalipto #516C60, Pistache #9DA58E, Mostaza #AD8214, Miel #DEBA59
 * Tipografías de marca: Candlefish (títulos) · Neue Regrade (cuerpo).
 */

/*
 * Tipografías.
 * Las fuentes de marca (Candlefish para títulos, Neue Regrade para cuerpo)
 * son comerciales, así que usamos las alternativas más parecidas de Google
 * Fonts, cargadas desde los <head> de los layouts:
 *   Candlefish    → Fraunces        (serif cálida/orgánica)
 *   Neue Regrade  → Hanken Grotesk  (grotesca geométrica-humanista)
 * Si en el futuro se licencian las fuentes reales, suelta los .woff2 en
 * `app/assets/fonts/`, declara los @font-face y antepón sus nombres en las
 * variables --font-sans / --font-heading de abajo.
 */

:root {
  /* Paleta del diseño (nammi skin) */
  --cream: #f7efe3;
  --cream-warm: #f0e2cc;
  --paper: #fbf6ec;
  --espresso: #241811;
  --espresso-soft: #33241a;
  --brown-deep: #4a2c1f;
  --clay: #c08862;
  --clay-soft: #dcb392;
  --rust: #a15c3c;
  --sage-dark: #4f6657;
  --sage-light: #abc0ac;
  --tan: #a67c52;
  --mustard: #d8ac4c;
  --ink: #2b1b12;
  --line: rgba(43, 27, 18, 0.14);

  /* Alias de marca previos (compatibilidad) */
  --color-calabaza: var(--clay);

  /* Semantic colors */
  --color-primary: var(--espresso);
  --color-primary-foreground: var(--cream);
  --color-primary-hover: var(--rust);
  --color-secondary: var(--cream-warm);
  --color-secondary-foreground: var(--espresso);
  --color-accent: var(--rust);
  --color-accent-foreground: var(--cream);
  --color-background: var(--cream);
  --color-foreground: var(--ink);
  --color-muted: var(--cream-warm);
  --color-muted-foreground: #7c6a58;
  --color-border: #ddd2c0;
  --color-destructive: #b84a3e;
  --color-destructive-foreground: var(--cream);
  --color-success: var(--sage-dark);
  --color-success-foreground: var(--cream);
  --color-warning: var(--mustard);
  --color-warning-foreground: var(--espresso);
  --color-card: #ffffff;
  --color-card-foreground: var(--espresso);
  --color-sidebar: var(--paper);
  --color-sidebar-foreground: var(--espresso);
  --color-footer: var(--espresso);
  --color-footer-foreground: var(--cream);

  /* Navbar — clara (cream) */
  --color-navbar: var(--cream);
  --color-navbar-foreground: var(--espresso);

  /* Superficie de la tarjeta de reservas */
  --color-booking-surface: var(--paper);
  --color-booking-surface-foreground: var(--espresso);

  /* Typography */
  --font-sans: "Jost", system-ui, -apple-system, sans-serif;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

  /* Spacing & Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(43, 33, 28, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(43, 33, 28, 0.07), 0 2px 4px -2px rgba(43, 33, 28, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(43, 33, 28, 0.08), 0 4px 6px -4px rgba(43, 33, 28, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(43, 33, 28, 0.1), 0 8px 10px -6px rgba(43, 33, 28, 0.1);
}

/* Headings use the brand display font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Dark mode — applied when <html> has the `dark` class */
.dark {
  /* De noche, las superficies "cocoa" (tarjetas, secciones, muted) usan
     terracotta ocre en lugar de #3A2D26. */
  --color-cocoa: #8a3a22;

  /* Navbar y fondo en modo oscuro: vino/marrón profundo (uniforme).
     La tarjeta de reservas se mantiene salmón, igual que de día. */
  --color-navbar: #441f1d;
  --color-navbar-foreground: var(--color-crema);
  --color-booking-surface: var(--color-calabaza);
  --color-booking-surface-foreground: var(--color-espresso);

  --color-primary: var(--color-calabaza);
  --color-primary-foreground: var(--color-espresso);
  --color-primary-hover: #d99e7c;
  --color-secondary: var(--color-cocoa);
  --color-secondary-foreground: var(--color-crema);
  --color-accent: var(--color-calabaza);
  --color-accent-foreground: var(--color-espresso);
  --color-background: #4a2622;
  --color-foreground: var(--color-crema);
  --color-muted: var(--color-cocoa);
  --color-muted-foreground: #b3a596;
  --color-border: #463730;
  --color-destructive: #e06b5c;
  --color-destructive-foreground: var(--color-espresso);
  --color-success: var(--color-pistache);
  --color-success-foreground: var(--color-espresso);
  --color-warning: var(--color-miel);
  --color-warning-foreground: var(--color-espresso);
  --color-card: var(--color-cocoa);
  --color-card-foreground: var(--color-crema);
  --color-sidebar: #221a16;
  --color-sidebar-foreground: var(--color-crema);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Smooth color transitions when toggling dark mode */
html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/*
 * Dark-mode compatibility layer for Tailwind utility classes that don't yet
 * use theme variables. Always-dark surfaces (e.g. the site footer) are scoped
 * out via :not([data-theme-static]).
 */
.dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); }
.dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); }
.dark .bg-gray-50:not([data-theme-static]),
.dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); }
.dark .bg-gray-100:not([data-theme-static]),
.dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); }

.dark .text-gray-900:not([data-theme-static]),
.dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-800:not([data-theme-static]),
.dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-700:not([data-theme-static]),
.dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-600:not([data-theme-static]),
.dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-500:not([data-theme-static]),
.dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-400:not([data-theme-static]),
.dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); }

.dark .border-gray-200:not([data-theme-static]),
.dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); }
.dark .border-gray-300:not([data-theme-static]),
.dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); }

/*
 * Admin sidebar — fixed full-viewport column.
 * Off-canvas on mobile, permanently visible on desktop (≥1024px).
 * Toggled on mobile via the `open` state class from the mobile-menu controller.
 * On desktop we force `display: flex` so the controller's `hidden` toggling
 * (used for the public navbar mobile menu) can't take the sidebar down.
 */
.admin-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 200ms ease-out;
}

.admin-sidebar.open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .admin-sidebar {
    display: flex !important;
    width: 16rem;
    max-width: none;
    transform: translateX(0);
    transition: none;
  }
}

/* Admin sidebar — stays white in light mode, uses themed surface in dark mode. */
.dark aside[data-mobile-menu-target="menu"][data-theme-static] {
  background-color: var(--color-sidebar);
  color: var(--color-sidebar-foreground);
}

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}