:root{
  --bg:#1A1612;        /* café oscuro cálido */
  --surface:#2A241E;   /* superficie café claro */
  --ink:#F5F1EB;       /* texto crema */
  --muted:#C4B5A0;     /* texto suave beige */
  --accent:#E8A558;    /* dorado café vibrante */
  --accent-dark:#D4924A; /* dorado más profundo */
  --ring:rgba(232,165,88,.25);
  --warm:#8B4513;      /* café marrón para acentos */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--ink); line-height:1.6;
}

/* Grid container 12 columns (desktop) */
.container{
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 72px 0;
}

/* Utilidades */
h1,h2,h3{margin:0 0 10px}
p{margin:0 0 12px}

/* Logo Styles */
.logo-header{
  width: 130px;
  height: 130px;
  object-fit: contain;
}

.logo-footer{
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.muted{color: var(--muted)}
.lead{font-size:1.15rem; color:#d4dde1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; text-decoration:none;
  border:1px solid #3A2F24; color: var(--ink);
  background: linear-gradient(180deg, #2A241E, #241F19);
  transition:.2s;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 28px rgba(139,69,19,.25) }
.btn.primary{ background: linear-gradient(180deg, #E8A558, #D4924A); color:#1A1612; border-color: transparent }
.btn.ghost{ background: transparent; border-color: var(--accent) }

/* Header */
.header{ align-items:center; padding-top:28px }
.brand{
  grid-column: 1 / span 4; display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.4px; font-size: 1.1rem;
}
.brand img{ border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3) }
.nav{ grid-column: 5 / span 5; display:flex; justify-content:center; gap:18px; align-items:center }
.nav a{ 
  color: var(--ink); 
  text-decoration:none; 
  opacity:.9;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.nav a:hover{ 
  opacity:1;
  background: rgba(232,165,88,0.1);
  color: var(--accent);
  transform: translateY(-1px);
}

.nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav a:hover::before {
  width: 80%;
}

.nav-btn{
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  opacity: 0.9 !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-btn:hover{
  color: var(--accent) !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
  background: rgba(232,165,88,0.1) !important;
}

.nav-btn::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--accent) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.nav-btn:hover::before {
  width: 80% !important;
}

.social-links{ 
  grid-column: 10 / span 3; 
  display:flex; 
  justify-content:flex-end; 
  gap:16px; 
  align-items:center 
}
.social-links a{ 
  opacity: 0.9; 
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid #3A2F24;
}
.social-links a:hover{ 
  opacity: 1; 
  transform: translateY(-2px);
  background: var(--accent);
  border-color: var(--accent);
}

.social-links img{
  width: 24px !important;
  height: 24px !important;
  transition: all 0.3s ease;
}

/* Colores específicos por red social */
.social-links a[aria-label="Instagram"] {
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

.social-links a[aria-label="Facebook"] {
  background: #1877F2;
}

.social-links a[aria-label="TikTok"] {
  background: linear-gradient(45deg, #ff0050, #00f2ea);
}

/* Filtros para las imágenes */
.social-links a[aria-label="Instagram"] img {
  filter: brightness(0) invert(1);
}

.social-links a[aria-label="Facebook"] img {
  filter: brightness(0) invert(1);
}

.social-links a[aria-label="TikTok"] img {
  filter: brightness(0) invert(1);
}

.social-links a:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.social-links a:hover img{
  filter: brightness(0) invert(1);
}

/* Hero */
.hero{
  position: relative;
  background:
    radial-gradient(60% 60% at 80% 10%, rgba(232,165,88,.12), transparent 60%),
    linear-gradient(180deg, #201A16, #1C1713);
  border:1px solid #3A2F24; border-radius:18px; padding:64px;
}
.hero-card{ grid-column: 2 / span 8 }
.hero h1{ font-size: clamp(2rem, 4.5vw, 3.2rem) }
.hero p{ color: var(--muted) }
.cta-row{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap }

/* About (texto ancho) */
.about h2{ grid-column: 1 / span 12 }
.about .lead{ grid-column: 1 / span 7 }
.about p:nth-of-type(2){ grid-column: 9 / span 4 }

/* Coffees/Teas (3 cards x 4 cols) */
.coffees h2, .teas h2{ grid-column: 1 / span 12 }
.card{
  grid-column: span 4; background: var(--surface); border:1px solid #3A2F24;
  border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.coffee-image{
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.2) brightness(1.1) saturate(1.15);
}

.card:hover .coffee-image{
  transform: scale(1.05);
}
.link{ color: var(--accent); text-decoration:none }
.link:hover{ text-decoration:underline }

/* Placeholders de imagen (reemplaza por <img>) */
.ph{ width:100%; height:190px; border-radius:12px; background:#1A1612; border:1px dashed #3A2F24 }
.ph-1{ background: linear-gradient(180deg, #2F2520, #241F1A) }
.ph-2{ background: linear-gradient(180deg, #332823, #28231E) }
.ph-3{ background: linear-gradient(180deg, #372B26, #2C2621) }

/* Gallery tira */
.gallery{
  padding-top: 24px; padding-bottom: 24px;
}
.g-item{
  grid-column: span 3; height: 160px; border-radius:14px; border:1px solid #1b2428;
  background: radial-gradient(60% 60% at 50% 40%, rgba(158,208,201,.12), transparent 60%);
}
.g1{ background: linear-gradient(180deg, #0c1316, #0b1012) }
.g2{ background: linear-gradient(180deg, #0c1416, #0b1112) }
.g3{ background: linear-gradient(180deg, #0d1517, #0b1111) }
.g4{ background: linear-gradient(180deg, #0d1617, #0b1211) }

/* Visit */
.visit h2{ grid-column: 1 / span 12 }
.visit .muted{ grid-column: 1 / span 8 }
.hours{
  grid-column: 1 / span 6; display:flex; gap:24px; flex-wrap:wrap; margin: 6px 0 14px;
}
.hours a{ color: var(--accent); text-decoration:none }

/* Footer */
.footer{ align-items:center; border-top:1px solid #3A2F24; padding-top:28px }
.footer-brand{ 
  grid-column: 1 / span 6; 
  display: flex; 
  align-items: center; 
  gap: 12px;
}
.footer-brand p{ margin: 0; color: var(--muted) }
.footer-brand img{ border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.2) }
.foot-links{ grid-column: 7 / span 6; display:flex; gap:16px; justify-content:flex-end }
.foot-links a{ color: var(--muted); text-decoration:none }
.foot-links a:hover{ color: var(--ink) }

/* Menu Page Styles */
.menu-section{ padding: 48px 0 }
.menu-section h2{ grid-column: 1 / span 12; margin-bottom: 32px }

.menu-category{ 
  grid-column: 1 / span 12; 
  margin-bottom: 40px;
}
.menu-category h3{ 
  color: var(--accent); 
  font-size: 1.3rem; 
  margin-bottom: 20px;
  border-bottom: 1px solid #1b2428;
  padding-bottom: 8px;
}

.menu-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.menu-item.with-image{
  grid-template-columns: 120px 1fr auto;
  align-items: center;
}

.menu-image{
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.15) brightness(1.1) saturate(1.2);
}

.menu-item:hover .menu-image{
  transform: scale(1.05);
}
.menu-item:last-child{ border-bottom: none }

.item-info h4{ margin: 0 0 6px; color: var(--ink) }
.item-info p{ margin: 0; color: var(--muted); font-size: 0.9rem }
.item-price{ 
  color: var(--accent); 
  font-weight: 600; 
  font-size: 1.1rem;
  align-self: flex-start;
}

.note-section{ padding: 64px 0 }
.special-note{
  grid-column: 3 / span 8;
  text-align: center;
  padding: 32px;
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 16px;
}

/* About Page Styles */
.story-section{ padding: 48px 0 }
.story-section h2{ grid-column: 1 / span 12 }
.story-content{ grid-column: 1 / span 12 }

.philosophy-section{ padding: 48px 0 }
.philosophy-section h2{ grid-column: 1 / span 12 }

.philosophy-grid{
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.philosophy-card{
  background: var(--surface);
  border: 1px solid #3A2F24;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.philosophy-card h3{ color: var(--accent); margin-bottom: 12px }

.team-section{ padding: 48px 0 }
.team-section h2{ grid-column: 1 / span 12 }

.team-grid{
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.team-member{
  background: var(--surface);
  border: 1px solid #3A2F24;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.member-photo{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 16px;
  object-fit: cover;
  border: 3px solid var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.1) brightness(1.05) saturate(1.1);
}

.team-member:hover .member-photo{
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(232,165,88,0.3);
}

.team-member h3{ margin: 0 0 4px; color: var(--ink) }
.role{ color: var(--accent); font-weight: 600; margin: 0 0 12px }

.process-section, .awards-section{ padding: 48px 0 }
.process-section h2, .awards-section h2{ grid-column: 1 / span 12 }
.process-content, .awards-content{ grid-column: 1 / span 12 }
.awards-content ul{ color: var(--muted) }
.awards-content li{ margin-bottom: 8px }

.cta-section{ padding: 64px 0 }
.cta-content{
  grid-column: 3 / span 8;
  text-align: center;
}
.cta-buttons{ margin-top: 20px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }

/* Contact Page Styles */
.location-section{
  padding: 48px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.location-info{ grid-column: 1 / span 6 }
.hours-info{ grid-column: 7 / span 6 }

.address-block{ 
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 12px;
  padding: 24px;
}

.hours-grid{
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.day-hours{
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.day-hours:last-child{ border-bottom: none }
.day{ font-weight: 600 }
.time{ color: var(--accent) }

.special-hours{
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 12px;
  padding: 20px;
}

.contact-form-section{ padding: 48px 0 }
.contact-form-section h2{ grid-column: 1 / span 12 }
.form-intro{ grid-column: 1 / span 12; color: var(--muted); margin-bottom: 32px }

.contact-form{
  grid-column: 3 / span 8;
}

.form-group{
  margin-bottom: 20px;
}

.form-group label{
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.checkbox-group{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checkbox-group input[type="checkbox"]{
  width: auto;
  margin: 0;
}

.checkbox-group label{
  margin: 0;
  font-weight: normal;
  color: var(--muted);
}

.services-section, .directions-section, .faq-section{ padding: 48px 0 }
.services-section h2, .directions-section h2, .faq-section h2{ grid-column: 1 / span 12 }

.services-grid{
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card{
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 12px;
  padding: 24px;
}
.service-card h3{ color: var(--accent); margin-bottom: 12px }

.directions-content{ 
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.directions-info, .neighborhood-info{
  background: var(--surface);
  border: 1px solid #1b2428;
  border-radius: 12px;
  padding: 24px;
}

.location-image{
  width: 100%;
  max-width: 450px;
  height: auto;
  min-height: 280px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin-bottom: 20px;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.1) brightness(1.05) saturate(1.1);
}

.events-images{
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.event-image{
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--accent);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.15) brightness(1.1) saturate(1.2);
  transition: all 0.3s ease;
}

.event-image:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 12px rgba(232, 165, 88, 0.4);
}

.interior-section{
  padding: 32px 0;
  text-align: center;
}

.interior-image{
  width: 100%;
  max-width: 800px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  grid-column: 2 / span 10;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: contrast(1.1) brightness(1.05) saturate(1.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.faq-content{ grid-column: 1 / span 12 }
.faq-item{
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.faq-item:last-child{ border-bottom: none }
.faq-item h4{ color: var(--accent); margin-bottom: 8px }
.faq-item p{ color: var(--muted); margin: 0 }

/* Mini-responsivo suave (opcional, por si el profe achica ventana) */
@media (max-width: 980px){
  .about .lead{ grid-column: 1 / span 12 }
  .about p:nth-of-type(2){ grid-column: 1 / span 12 }
  .card{ grid-column: span 6 }
  .g-item{ grid-column: span 6 }
  .visit .muted{ grid-column: 1 / span 12 }
  .hours{ grid-column: 1 / span 12 }
  .brand{ grid-column: 1 / span 6 }
  .nav{ grid-column: 7 / span 6; gap:12px; justify-content:flex-end }
  .social-links{ grid-column: 1 / span 12; justify-content:center; margin-top: 16px }
  
  .philosophy-grid,
  .team-grid,
  .services-grid{ grid-template-columns: 1fr }
  
  .location-info,
  .hours-info{ grid-column: 1 / span 12 }
  
  .contact-form{ grid-column: 1 / span 12 }
  .special-note{ grid-column: 1 / span 12 }
  .cta-content{ grid-column: 1 / span 12 }
  
  .directions-content{ grid-template-columns: 1fr }
}