/* Café La Paix — estilos */

:root{
  --cream: #FBF3E7;
  --cream-2: #F6E9D8;
  --ink: #2E2420;
  --ink-soft: #6B5A4E;
  --coral: #D6478C;
  --coral-dark: #B12F70;
  --teal: #2E2420;
  --teal-dark: #1B1512;
  --white: #FFFDFB;
  --radius: 18px;
  --shadow: 0 12px 30px rgba(59,46,39,0.12);
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-script: 'Caveat', cursive;
  --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-elegant: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0 0 .5em; line-height:1.15; font-weight:800; }
p{ margin:0 0 1em; }

.wrap{ max-width:1140px; margin:0 auto; padding:0 20px; }
.center{ text-align:center; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--white);
  padding:.75em 1em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.eyebrow{
  font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; color:var(--coral-dark); margin:0 0 .6em;
}
.eyebrow.center{ text-align:center; }
.script{ font-family:var(--font-script); font-weight:700; color:var(--coral); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:.85em 1.6em; border-radius:999px; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--coral); color:var(--white); box-shadow:0 10px 24px rgba(242,120,107,.35); }
.btn-primary:hover{ background:var(--coral-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }
.btn-call{ background:var(--teal); color:var(--white); font-size:.92rem; padding:.65em 1.2em; }
.btn-call:hover{ background:var(--teal-dark); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,243,231,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(59,46,39,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:1rem; }
.brand{
  display:inline-flex; align-items:baseline; gap:.3em;
  font-family:var(--font-elegant); font-style:italic; font-weight:600;
  font-size:1.3rem; color:var(--ink);
}
.brand span{
  font-family:var(--font-display); font-style:normal; font-weight:900;
  font-size:1.3em; letter-spacing:-.015em;
  color:var(--coral); text-shadow:1.2px 1.2px 0 rgba(46,36,32,.35);
  -webkit-text-stroke:.5px rgba(46,36,32,.55);
}
.brand-mark{ width:34px; height:34px; flex-shrink:0; align-self:center; }
.brand-mark .cup-body{ fill:var(--white); stroke:var(--ink); stroke-width:1.6; }
.brand-mark .cup-handle{ fill:none; stroke:var(--ink); stroke-width:2.2; }
.brand-mark .cup-rim{ fill:var(--white); stroke:var(--ink); stroke-width:1.2; }
.brand-mark .cup-coffee{ fill:#3B2314; }
.brand-mark .cup-coffee-shine{ fill:none; stroke:var(--cream); stroke-width:1; opacity:.7; stroke-linecap:round; }
.brand-mark .steam{ fill:none; stroke:var(--ink-soft); stroke-width:1.6; stroke-linecap:round; }
.main-nav{ display:flex; gap:1.8rem; }
.main-nav a{ font-weight:700; color:var(--ink-soft); padding:.3em 0; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a.active{ color:var(--ink); border-color:var(--coral); }
.header-actions{ display:flex; align-items:center; gap:.9rem; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ display:block; width:100%; height:3px; background:var(--ink); border-radius:2px; }

/* Hero con logo ilustrado real */
.hero-brand{ background:var(--cream); padding:3.4rem 0 4.5rem; }
.hero-logo-img{
  display:block; width:100%; max-width:720px; height:auto;
  margin:0 auto 2.6rem; border-radius:14px;
  box-shadow:0 18px 40px rgba(59,46,39,.14);
}
.hero-brand-content{ max-width:640px; margin:0 auto; text-align:center; }
.hero-brand-content .eyebrow{ color:var(--coral-dark); }
.hero-brand-content h1{ font-size:clamp(2.1rem, 4.5vw, 2.9rem); color:var(--ink); }
.hero-brand-content .hero-lead{ color:var(--ink-soft); max-width:520px; margin-left:auto; margin-right:auto; }
.hero-brand-content .hero-cta{ justify-content:center; }
.hero-brand-content .hero-rating{ justify-content:center; color:var(--ink); }

.hero-lead{ font-size:1.15rem; max-width:540px; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.6rem 0; }
.hero-cta.center{ justify-content:center; }
.hero-rating{ display:flex; align-items:center; gap:.6em; font-weight:700; }
.stars{ color:#FFC85C; letter-spacing:.1em; }

/* Sections */
.section{ padding:5rem 0; }
.page-hero{ padding:7rem 0 2rem; }
.page-hero h1{ font-size:clamp(2.1rem, 4.5vw, 3rem); }

/* Reputation quotes */
.reputation{ background:var(--white); }
.quotes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.quotes-grid blockquote{
  margin:0; padding:1.6rem; background:var(--cream); border-radius:var(--radius);
  border-left:4px solid var(--coral);
}
.quotes-grid p{ font-style:italic; margin-bottom:.8em; }
.quotes-grid cite{ font-weight:700; font-style:normal; color:var(--ink-soft); font-size:.9rem; }
.review-cta{ text-align:center; margin-top:2.6rem; }
.review-cta p{ font-weight:700; color:var(--ink); margin-bottom:1rem; }

/* Specialties */
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.4rem; }
.card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .25s ease;
}
a.card{ display:block; color:inherit; cursor:pointer; }
.card:hover{ transform:translateY(-6px); }
a.card:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; }
.menu-category, .subsection-title{ scroll-margin-top:96px; }
.card img{ height:170px; width:100%; object-fit:cover; }
.card h3{ font-size:1.05rem; margin:1rem 1rem .4rem; }
.card p{ margin:0 1rem 1.2rem; color:var(--ink-soft); font-size:.92rem; }

/* Camino */
.camino{ background:var(--teal); color:var(--white); }
.camino-inner{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:center; }
.camino-img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.camino .eyebrow{ color:#DFFFFA; }
.camino h2{ color:var(--white); font-size:2rem; }

/* Menu preview / full */
.menu-preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 2.4rem; max-width:900px; margin:2rem auto 0; }
.menu-preview-item, .menu-list li{
  display:flex; align-items:baseline; gap:.5em; padding:.5em 0;
  border-bottom:1px dashed rgba(59,46,39,.2);
}
.menu-name{ font-weight:700; }
.menu-dots{ flex:1; border-bottom:2px dotted rgba(59,46,39,.25); transform:translateY(-4px); }
.menu-price{ font-weight:800; color:var(--coral-dark); white-space:nowrap; }

.menu-full{ background:var(--white); }
.menu-category{ max-width:760px; margin:0 auto 2.6rem; }
.menu-category h2{ font-size:1.4rem; color:var(--coral-dark); }
.menu-list li{ justify-content:space-between; }
.menu-list li span:first-child{ font-weight:700; }
.menu-list li span:last-child{ font-weight:800; white-space:nowrap; padding-left:1em; }
.menu-note{ font-size:.88rem; color:var(--ink-soft); font-style:italic; margin-top:.6em; }

.cta-band{ background:var(--cream-2); }

/* Badge destacado (Novedad, etc.) */
.badge-new{
  display:inline-block; background:var(--coral); color:var(--white);
  font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  padding:.35em .9em; border-radius:999px; margin-bottom:.8em;
}

/* Frappés / batidos con tarjetas de sabor ilustradas */
.flavor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2rem; }
.flavor-card{
  background:var(--white); border-radius:var(--radius); padding:0 1.1rem 1.4rem; overflow:hidden;
  box-shadow:var(--shadow); text-align:center; transition:transform .25s ease;
}
.flavor-card:hover{ transform:translateY(-5px); }
.flavor-art{ display:block; width:calc(100% + 2.2rem); max-width:none; height:auto; margin:0 -1.1rem .8rem; }
.flavor-tag{
  display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--white); padding:.25em .75em; border-radius:999px; margin-bottom:.5em;
}
.flavor-tag--matcha{ background:#7A8C4A; }
.flavor-tag--cheesecake{ background:#C23B4D; }
.flavor-tag--rocher{ background:#2C4A6B; }
.flavor-tag--bueno{ background:#D97B29; }
.flavor-tag--dubai{ background:#A67C00; }
.flavor-tag--speculos{ background:#D2691E; }
.flavor-tag--pistacho{ background:#8A8B4E; }
.flavor-tag--blackcookies{ background:#2B2B2E; }
.flavor-card h4{ margin:0 0 .3em; font-size:1.02rem; }
.flavor-card p{ margin:0; font-size:.85rem; color:var(--ink-soft); }
.flavor-price{ margin-top:2rem; font-weight:800; color:var(--coral-dark); }

/* Infusiones (tés y tisanas) */
.tea-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.6rem; }
.tea-card{
  display:flex; gap:.9rem; align-items:flex-start; background:var(--white);
  border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.tea-icon{
  width:38px; height:38px; flex-shrink:0; margin-top:.15em; border-radius:50%;
  background:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.tea-card h4{ margin:0 0 .25em; font-size:.98rem; }
.tea-card p{ margin:0; font-size:.82rem; color:var(--ink-soft); }

.subsection-title{ margin-top:3.5rem; }
.subsection-title:first-child{ margin-top:0; }
.subsection-lead{ color:var(--ink-soft); max-width:640px; }

/* Decorativo estilo boceto parisino */
.sketch-decor{ opacity:.5; color:var(--ink-soft); }
.beverages-hero{ background:var(--ink); color:var(--cream); }
.beverages-hero .eyebrow{ color:#F0C6DC; }
.beverages-hero h1{ color:var(--white); }
.beverages-hero .hero-lead{ color:var(--cream-2); }

/* Location */
.location-inner{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:start; }
.info-list{ margin-bottom:1.4rem; }
.info-list li{ padding:.35em 0; font-weight:600; }
.info-list.big li{ font-size:1.1rem; }
.hours-table{ border-collapse:collapse; width:100%; margin-bottom:1.6rem; background:var(--white); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.hours-table th, .hours-table td{ padding:.7em 1em; text-align:left; border-bottom:1px solid var(--cream-2); }
.hours-table th{ font-weight:700; color:var(--ink-soft); width:45%; }
.hours-table tr:last-child th, .hours-table tr:last-child td{ border-bottom:none; }
.amenities{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem; }
.amenities li{ background:var(--white); padding:.5em 1em; border-radius:999px; font-size:.88rem; font-weight:700; box-shadow:var(--shadow); }
.location-map iframe{ width:100%; height:420px; border:0; border-radius:var(--radius); box-shadow:var(--shadow); }

/* Footer */
.site-footer{ background:var(--ink); color:var(--cream); padding:3rem 0 1.4rem; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.footer-brand{ margin-bottom:.3em; color:var(--cream); }
.footer-brand span{ color:var(--coral); }
.site-footer a{ color:var(--cream); }
.footer-nav{ display:flex; gap:1.6rem; font-weight:700; }
.footer-bottom{ text-align:center; margin:2rem 0 0; font-size:.82rem; opacity:.7; }

/* Mobile sticky call bar */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:150;
  background:var(--coral); color:var(--white); text-align:center;
  padding:.9em; font-weight:800; box-shadow:0 -6px 20px rgba(0,0,0,.15);
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 900px){
  .quotes-grid{ grid-template-columns:1fr; }
  .cards-grid{ grid-template-columns:1fr 1fr; }
  .camino-inner{ grid-template-columns:1fr; }
  .location-inner{ grid-template-columns:1fr; }
  .menu-preview-grid{ grid-template-columns:1fr; }
  .flavor-grid{ grid-template-columns:1fr 1fr; }
  .tea-grid{ grid-template-columns:1fr; }
}

@media (max-width: 700px){
  .main-nav{
    position:fixed; top:70px; left:0; right:0; background:var(--cream);
    flex-direction:column; padding:1.4rem 20px; gap:1rem;
    transform:translateY(-130%); transition:transform .3s ease;
    border-bottom:1px solid rgba(59,46,39,.1);
  }
  .main-nav.is-open{ transform:translateY(0); }
  .nav-toggle{ display:flex; }
  .header-actions .btn-call{ display:none; }
  .cards-grid{ grid-template-columns:1fr; }
  .flavor-grid{ grid-template-columns:1fr 1fr; }
  .hero-content{ padding-top:6rem; }
  .mobile-call-bar{ display:block; }
  body{ padding-bottom:56px; }
}