:root{
  /* colores de la marca (ajustables) - actualizados para coincidir con Logo.jpg */
  --brand-900: #2E4F30; /* deep green for strong elements (updated) */
  --brand-700: #2E4F30; /* primary brand green for letters and buttons (updated) */
  --brand-500: #60a858; /* lighter accent green */
  --bg: #FDD1C8;
  --text: #111827;
  --muted: #6b7280;
  --accent: var(--brand-700);
  --surface: #f8fafc;
  --radius: 10px;
  --container: 1000px;
  font-family: 'Lobster', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 18px;
}

* {box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:1rem;
  letter-spacing:0.35px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem;
}

.site-header{
  border-bottom:1px solid #eef2f6;
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:40;
}

.header-row{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:0.5rem 0;
}

.brand{
  font-weight:700;
  text-decoration:none;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:0.18rem; /* tightened so the letrero sits closer to the logo */
}

.logo{ width:96px; height:96px; object-fit:cover; border-radius:8px; }
.logo-complete{
  width:220px;
  height:64px;
  object-fit:contain; /* preserve whole logo appearance */
  object-position: center;
  border-radius:0;
  background:transparent;
}
.logo-hero{
  width:320px;
  max-width:80%;
  height:72px;
  object-fit:none;
  object-position:12% 48%; /* ajustar para centrar "Las Trenzas de María" */
  border-radius:6px;
  display:block;
  margin:0 auto 0.6rem auto;
  background:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}

/* increase logo a bit on larger screens */
@media (min-width:801px){
  .logo-complete{ width:260px; height:76px; object-fit:contain; object-position:center; }
}

.nav{
  display:flex;
  gap:0.75rem;
  align-items:center;
}

.nav a{
  position:relative; /* enable pseudo-element underline */
  overflow:visible;
  text-decoration:none;
  color:var(--text);
  padding:0.45rem 0.6rem;
  border-radius:8px;
  font-weight:500;
  font-size:0.95rem;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

/* sliding underline (rollover) */
.nav a::after{
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6px;
  height: 3px;
  background: var(--brand-500); /* changed to use the requested green tone */
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
  opacity: 0;
}

/* refined hover: lift slightly and reveal underline */
.nav a:hover,
.nav a:focus{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.04);
  color: var(--brand-700);
  box-shadow: 0 8px 18px rgba(16,24,40,0.06);
  outline: none;
}
.nav a:hover::after,
.nav a:focus::after{
  transform: scaleX(1);
  opacity: 1;
}

.nav a.primary{
  background:var(--accent);
  color:#fff;
  padding:0.5rem 0.8rem;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.nav a.primary:hover,
.nav a.primary:focus{
  background: color-mix(in srgb, var(--accent) 85%, #000 15%);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16,24,40,0.12);
}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:0.25rem;
}

.hamburger{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--text);
}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}

/* Hero (carousel) */
.hero{
  position:relative;
  min-height:76vh;
  display:flex;
  align-items:center;
  padding:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
}
.carousel{ position:absolute; inset:0; display:block; }
.carousel-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 900ms ease; filter:contrast(0.9) saturate(1.02) brightness(0.9); }
.carousel-img.active{ opacity:1; }
.hero-content{ position:relative; z-index:3; text-align:center; padding:2.25rem 1rem; width:100%; max-width:920px; margin:0 auto; }
.hero h1{ margin:0 0 0.35rem 0; font-size:2.25rem; line-height:1.05; letter-spacing:1px; color:#fff; text-shadow:0 6px 18px rgba(0,0,0,0.45); }
.lead{ margin:0 0 1rem 0; color:rgba(255,255,255,0.9); }
.kicker{ display:block; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#fff; margin-bottom:0.6rem; font-family: Verdana, Geneva, sans-serif; font-size:1.25rem; }
/* Make the "Panadería Artesanal" more prominent */
.kicker{ font-size:1.60rem; letter-spacing:1.6px; text-shadow:0 6px 18px rgba(0,0,0,0.45); }

.hero-content .small{ margin-top:0.35rem; opacity:0.95; font-weight:600; color:rgba(255,255,255,0.95); }

/* Buttons */
.btn{
  display:inline-block;
  background:var(--brand-900);
  color:#fff;
  padding:0.9rem 1.2rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:400;
  font-size:1.05rem;
  font-family: Arial, Helvetica, sans-serif; /* changed to Arial as requested */
  letter-spacing:1.6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.btn.ghost{
  background:transparent;
  border:1px solid #e6eef6;
  color:var(--text);
}

/* Sections */
.section{ padding:2rem 0; }
.section.alt{ background:#fcfdff; }
.about-section{ padding:1.25rem 0 2rem 0; background:var(--surface); color:var(--text); }

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0.9rem;
  margin-top:1rem;
}
.card{
  background:#fff;
  border:1px solid #eef2f6;
  padding:1rem;
  border-radius:10px;
}

/* Team */
.team{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.member{
  background:#fff;
  border:1px solid #eef2f6;
  padding:1rem;
  border-radius:10px;
  width:calc(33.333% - 0.66rem);
  min-width:140px;
  text-align:center;
}
.avatar{
  width:56px;
  height:56px;
  border-radius:12px;
  background:#eef2f6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  margin-bottom:0.6rem;
}

/* Contact */
.contact-section{ padding:1.5rem 0; background:var(--bg); color:var(--text); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.contact-form label{
  display:block;
  margin-bottom:0.6rem;
  font-size:0.95rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:0.6rem;
  border:1px solid #e6eef6;
  border-radius:8px;
  font-size:0.95rem;
  margin-top:0.3rem;
}
.form-actions{ display:flex; gap:0.6rem; margin-top:0.6rem; }
.form-status{ margin-top:0.6rem; color:var(--muted) }

/* Footer */
.site-footer{
  border-top:1px solid #eef2f6;
  padding:1rem 0;
  color:var(--muted);
  text-align:center;
  font-size:0.95rem;
}

/* Small Puff section inserted above footer */
.puff-section{ padding:0.6rem 0 1rem 0; background:transparent; }
.puff-mini-card{
  display:flex;
  gap:0.6rem;
  align-items:center;
  justify-content:center;
  max-width:420px;
  margin:0 auto;
  padding:0.4rem 0.6rem;
  border-radius:8px;
  isolation: isolate; /* allow mix-blend-mode on the child without affecting the rest of the page */
}
.puff-mini-img{
  width:120px;               /* increased size */
  height:120px;              /* increased size */
  object-fit:contain;
  border-radius:0;           /* remove circular mask so background removal reads cleaner */
  background:transparent;    
  box-shadow:0 14px 36px rgba(2,6,23,0.18);
  -webkit-filter: drop-shadow(0 6px 18px rgba(0,0,0,0.18));
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.18));
  padding:0;                 /* remove internal padding so image edges align */
  mix-blend-mode: multiply;  /* visually remove white background by blending it with page bg */
  /* keep colors readable: slightly reduce brightness so blend looks natural */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.18)) contrast(1.02) saturate(1.02);
}
.puff-mini-text{
  margin:0;
  font-size:0.95rem;
  color:var(--brand-900);
  font-weight:600;
}
/* ensure it remains compact on very small screens */
@media(max-width:420px){
  .puff-mini-card{ gap:0.45rem; padding:0.3rem 0.5rem; }
  .puff-mini-text{ font-size:0.9rem; } /* slight shrink for tiny displays */
}

/* Responsive */
@media (max-width:800px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .letrero{ margin-left:-6px; max-width:40%; } /* keep spacing compact on mobile */
  .hero h1{ font-size:1.5rem; }
  .brand-text{ display:block; }
  .member{ width:100%; }
  .contact-grid{ grid-template-columns:1fr; }
  .logo{ width:64px; height:64px; object-fit:contain; border-radius:6px; }
  .logo-complete{ width:160px; height:52px; object-fit:contain; object-position:center; }
  .logo-hero{ width:260px; height:56px; object-position:13% 50%; }
}

/* Nav shown when active */
.nav.open{ display:flex; flex-direction:column; position:absolute; right:1rem; top:64px; background:var(--bg); padding:0.75rem; border-radius:8px; box-shadow:0 6px 18px rgba(16,24,40,0.06); }

/* Puff fixed image bottom-left */
.puff{
  position:fixed;
  left:12px;
  bottom:12px;
  width:88px;
  height:auto;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(2,6,23,0.25);
  z-index:60;
  pointer-events:auto;
  opacity:0.95;
  cursor:pointer;
}

/* small speech bubble for Puff */
.puff-bubble {
  position:fixed;
  left:112px; /* sits to the right of the puff on mobile */
  bottom:28px;
  z-index:70;
  background:#fff;
  color:var(--brand-900);
  border-radius:12px;
  padding:0.6rem 0.8rem;
  box-shadow:0 10px 30px rgba(2,6,23,0.18);
  font-size:0.92rem;
  max-width:68%;
  pointer-events:none;
  transform-origin:left bottom;
  animation:pop 420ms cubic-bezier(.2,.9,.2,1);
}
@keyframes pop {
  from { transform: scale(0.86) translateY(6px); opacity:0; }
  to   { transform: scale(1) translateY(0); opacity:1; }
}
@media (min-width:640px){
  .puff-bubble { left:120px; bottom:36px; }
}

.letrero{
  width:180px;
  max-width:36%;
  height:auto;
  object-fit:contain;
  margin-left:-8px; /* nudge left to sit closer to the main logo */
}

.coming{
  color:#fff;
  font-weight:700;
  font-size:1.25rem;
  margin-top:0.5rem;
  letter-spacing:2px;
  text-shadow:0 6px 18px rgba(0,0,0,0.45);
}

/* New styles for the generated 'PROXIMAMENTE' image */
.coming-image{
  display:block;
  width:320px;
  max-width:86%;
  height:auto;
  margin:0.75rem auto 0.6rem auto;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(2,6,23,0.25);
  -webkit-filter:drop-shadow(0 8px 20px rgba(0,0,0,0.28));
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.28));
}

/* Background audio small floating toggle (top-left) */
.bg-toggle{
  position:fixed;
  top:12px;
  left:12px;
  z-index:121;
  background:#ffffff;
  color:var(--brand-900);
  border:0;
  padding:0.4rem 0.55rem;
  border-radius:8px;
  font-size:0.92rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  cursor:pointer;
  font-family: Arial, Helvetica, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:36px;
}
.bg-toggle[aria-pressed="true"]{
  background:var(--brand-900);
  color:#fff;
}
/* ensure it doesn't overlap deploy button on very small screens */
@media (max-width:420px){
  .bg-toggle{ top:10px; left:10px; width:40px; height:34px; font-size:0.9rem; }
  .deploy-btn{ top:10px; right:10px; }
}

/* ensure modal is compact on very small screens */
@media (max-width:420px){
  .quienes-content{ max-width:92%; padding:0.5rem; }
  .quienes-header h3{ font-size:0.98rem; }
}

/* hide the quienes section by default; will be revealed via JS */
#quienes { display:none; }
/* when revealed we keep the previous .about-section layout */
#quienes.revealed { display:block; }

/* QUIENES modal (small, discreet ventanita) */
.quienes-modal{ display:none; position:fixed; inset:0; z-index:220; align-items:center; justify-content:center; padding:1rem; }
.quienes-modal[aria-hidden="false"]{ display:flex; }
.quienes-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.38); z-index:221; }
.quienes-content{ position:relative; background:#fff; z-index:222; max-width:420px; width:100%; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.35); overflow:hidden; display:flex; flex-direction:column; align-items:center; padding:0.6rem; }
.quienes-header{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:0.45rem 0.6rem; border-bottom:1px solid #eef2f6; }
.quienes-header h3{ margin:0; font-size:1rem; color:var(--brand-900); }
.quienes-close{ background:transparent; border:0; font-size:1.05rem; cursor:pointer; color:var(--muted); }
.quienes-body{ padding:0.8rem; text-align:center; color:var(--muted); font-size:0.95rem; line-height:1.4; }
.quienes-image{ width:100%; max-width:320px; height:auto; border-radius:10px; opacity:0.86; filter:brightness(0.98); margin-bottom:0.6rem; }