/* ===========================
   Panadería Aurora — index.css
   (Diseño editorial/boutique + glass + textura)
   Funciona con tu HTML + Tailwind
=========================== */

:root{
  --bg: #FFF7EE;
  --text: #1F1A17;
  --muted: rgba(31,26,23,.70);

  --card: rgba(255,255,255,.72);
  --card2: rgba(255,255,255,.55);

  --line: rgba(160,120,90,.25);
  --line2: rgba(160,120,90,.18);

  --accent: #E7B458;      /* dorado */
  --accent2: #C06A2B;     /* caramelo */
  --mint: #2F7A6F;        /* contraste premium */

  --shadow: 0 18px 55px rgba(20,16,14,.14);
  --shadow2: 0 12px 28px rgba(20,16,14,.12);

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 14px;

  --fontTitle: "Fraunces", ui-serif, Georgia, serif;
  --fontBody: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--fontBody);
  color: var(--text);
  background: radial-gradient(1000px 600px at 10% -10%, rgba(192,106,43,.20), transparent 55%),
              radial-gradient(900px 520px at 90% 15%, rgba(47,122,111,.14), transparent 55%),
              linear-gradient(180deg, #fff7ee, #fff1df);
  min-height: 100dvh;
}

/* ===========================
   DECOR: grain + orbs
=========================== */
.grain{
  position:absolute;
  inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity:.20;
}

.orb{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity:.28;
  transform: translate3d(0,0,0);
}

.orb-1{
  left:-160px;
  top:-180px;
  background: radial-gradient(circle at 30% 35%, rgba(231,180,88,.85), rgba(192,106,43,.35), transparent 65%);
}

.orb-2{
  right:-180px;
  top:40px;
  background: radial-gradient(circle at 35% 30%, rgba(47,122,111,.60), rgba(231,180,88,.25), transparent 70%);
}

/* ===========================
   NAV: glass + links
=========================== */
.navGlass{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.logoMark{
  display:grid;
  place-items:center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-family: var(--fontTitle);
  font-weight: 700;
  letter-spacing: .02em;
  color: #201a17;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,.35)),
    linear-gradient(135deg, rgba(231,180,88,.75), rgba(192,106,43,.75));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(20,16,14,.12);
}

.navLink{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  color: rgba(31,26,23,.80);
  font-size: .95rem;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}

.navLink:hover{
  background: rgba(255,255,255,.62);
  color: rgba(31,26,23,.96);
  transform: translateY(-1px);
}

.btnIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  box-shadow: 0 10px 20px rgba(20,16,14,.10);
  display:grid;
  place-items:center;
}

.btnIcon .iLine{
  width: 20px;
  height: 2px;
  background: rgba(31,26,23,.80);
  display:block;
  border-radius: 999px;
  margin: 2px 0;
}

/* Cuando haga sticky con JS (opcional) */
.navIsCompact{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(20,16,14,.18);
}

/* ===========================
   Shared UI: badges, titles
=========================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--line);
  color: rgba(31,26,23,.85);
  font-size:.82rem;
  letter-spacing:.02em;
}

.sectionTitle{
  font-family: var(--fontTitle);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: .01em;
}

.sectionSub{
  margin-top:.35rem;
  color: rgba(31,26,23,.70);
}

.textAccent{
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* ===========================
   Cards / panels
=========================== */
.cardSoft{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}

.cardSoft::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(600px 240px at 15% 0%, rgba(231,180,88,.22), transparent 60%),
              radial-gradient(520px 220px at 95% 10%, rgba(47,122,111,.14), transparent 60%);
  pointer-events:none;
}

.cardSoft > *{ position:relative; }

/* mini stats (hero) */
.miniStat{
  border-radius: var(--r-md);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
  padding: .75rem .85rem;
  box-shadow: 0 10px 20px rgba(20,16,14,.08);
}

.miniK{
  font-size: .75rem;
  color: rgba(31,26,23,.62);
}

.miniV{
  font-family: var(--fontTitle);
  font-weight: 700;
  margin-top:.1rem;
}

/* ===========================
   Buttons
=========================== */
.btnPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(192,106,43,.95), rgba(231,180,88,.95));
  color: rgba(20,16,14,.96);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 28px rgba(20,16,14,.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btnPrimary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(20,16,14,.22);
  filter: saturate(1.05);
}

.btnPrimary:active{ transform: translateY(0px) scale(.99); }

.btnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: .72rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  color: rgba(31,26,23,.88);
  font-weight: 600;
  box-shadow: 0 12px 25px rgba(20,16,14,.10);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

.btnGhost:hover{
  background: rgba(255,255,255,.68);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(20,16,14,.14);
}

.btnGhost:active{ transform: translateY(0px) scale(.99); }

/* ===========================
   Hero image frame + overlay
=========================== */
.heroFrame{
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.35);
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)),
    radial-gradient(700px 260px at 20% 0%, rgba(231,180,88,.24), transparent 60%),
    radial-gradient(700px 280px at 80% 10%, rgba(47,122,111,.15), transparent 62%);
  pointer-events:none;
}

.heroCaption{
  background: rgba(255,255,255,.60);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: .9rem 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(20,16,14,.14);
}

/* ===========================
   Chips (filtro productos)
=========================== */
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  color: rgba(31,26,23,.82);
  font-weight: 600;
  font-size:.9rem;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 24px rgba(20,16,14,.10);
}

.chip.isActive{
  background: linear-gradient(135deg, rgba(192,106,43,.20), rgba(231,180,88,.25));
  border-color: rgba(192,106,43,.35);
}

/* ===========================
   Products grid cards (JS)
   (Asegura imagen sin recorte)
=========================== */
.pCard{
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  box-shadow: 0 16px 40px rgba(20,16,14,.12);
  overflow:hidden;
  position:relative;
  transition: transform .18s ease, box-shadow .2s ease;
}

.pCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(20,16,14,.18);
}

.pTop{
  padding: 1rem 1rem .2rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}

.pTag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  font-size:.78rem;
  color: rgba(31,26,23,.80);
}

.pBody{ padding: .6rem 1rem 1rem 1rem; }

.pTitle{
  font-family: var(--fontTitle);
  font-weight: 700;
  font-size: 1.35rem;
  line-height:1.1;
}

.pDesc{
  margin-top:.45rem;
  color: rgba(31,26,23,.72);
  font-size: .95rem;
  line-height: 1.5;
}

.pImgWrap{
  height: 190px;
  margin: .8rem 1rem 0 1rem;
  border-radius: 20px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.pImgWrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* CLAVE: NO RECORTA */
  padding: 10px;         /* aire alrededor */
}

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

.pricePill{
  display:inline-flex;
  align-items:center;
  padding:.45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(47,122,111,.25);
  background: rgba(47,122,111,.08);
  color: rgba(31,26,23,.88);
  font-weight: 700;
}

.pBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .55rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  font-weight: 650;
  transition: transform .15s ease, background .2s ease;
}

.pBtn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.70); }

/* ===========================
   Callout
=========================== */
.callout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1.2rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,106,43,.28);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(231,180,88,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  box-shadow: 0 18px 50px rgba(20,16,14,.12);
}

/* ===========================
   About feature rows
=========================== */
.featureRow{
  display:flex;
  align-items:flex-start;
  gap: .85rem;
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
}

.dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: .35rem;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 10px 18px rgba(20,16,14,.14);
}

/* mini cards en combo */
.miniCard{
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 20px rgba(20,16,14,.08);
}

/* ===========================
   Reviews
=========================== */
.quoteCard{
  padding: 1.15rem 1.2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  box-shadow: 0 18px 50px rgba(20,16,14,.12);
  position:relative;
  overflow:hidden;
}

.quoteCard::before{
  content:"“";
  position:absolute;
  top:-16px;
  right: 16px;
  font-family: var(--fontTitle);
  font-size: 5rem;
  opacity:.12;
}

.quote{
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(31,26,23,.86);
}

.who{
  margin-top:.9rem;
  font-size: .9rem;
  color: rgba(31,26,23,.62);
}

/* ===========================
   Contact: info rows + tags
=========================== */
.infoRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .8rem;
  padding: .8rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
}

.tag{
  display:inline-flex;
  padding:.35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  font-size:.78rem;
  font-weight: 700;
  color: rgba(31,26,23,.78);
}

/* ===========================
   Form fields
=========================== */
.field label{
  display:block;
  font-size: .85rem;
  font-weight: 650;
  color: rgba(31,26,23,.75);
  margin-bottom:.35rem;
}

.field input,
.field textarea{
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.65);
  color: rgba(31,26,23,.90);
  outline: none;
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}

.field input::placeholder,
.field textarea::placeholder{
  color: rgba(31,26,23,.45);
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(192,106,43,.45);
  box-shadow: 0 0 0 5px rgba(231,180,88,.22);
  transform: translateY(-1px);
}

.hint{
  padding: .85rem 1rem;
  border-radius: 16px;
  background: rgba(47,122,111,.08);
  border: 1px solid rgba(47,122,111,.22);
  color: rgba(31,26,23,.82);
  font-size: .92rem;
}

/* ===========================
   Modal
=========================== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(20,16,14,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modalBox{
  position: relative;
  width: min(980px, 100%);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  padding: 1.2rem;
  animation: pop .18s ease-out;
}

@keyframes pop{
  from{ transform: translateY(10px) scale(.98); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.modalClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  box-shadow: 0 14px 25px rgba(20,16,14,.18);
  font-weight: 800;
  transition: transform .15s ease, background .2s ease;
}

.modalClose:hover{ transform: translateY(-2px); background: rgba(255,255,255,.85); }

.modalImgWrap{
  height: 320px;
  border-radius: 22px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.modalImgWrap img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* CLAVE: NO RECORTA */
  padding: 14px;
}

/* ===========================
   Floating WhatsApp
=========================== */
.floatWhats{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;

  display:flex;
  align-items:center;
  gap: .6rem;

  padding: .8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(20,16,14,.52);
  color: rgba(255,255,255,.92);

  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .15s ease, background .2s ease;
}

.floatWhats:hover{
  transform: translateY(-3px);
  background: rgba(20,16,14,.62);
}

.wIcon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.12);
}

.wText{ font-weight: 750; letter-spacing:.01em; }

/* ===========================
   Reveal animations (para JS)
=========================== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal.isIn{
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   Utility: hide scrollbar nicely (chips mobile)
=========================== */
#productos .overflow-auto::-webkit-scrollbar{ height: 10px; }
#productos .overflow-auto::-webkit-scrollbar-thumb{
  background: rgba(31,26,23,.18);
  border-radius: 999px;
}

/* ===========================
   Responsive tweaks
=========================== */
@media (max-width: 768px){
  .sectionTitle{ font-size: 1.75rem; }
  .modalImgWrap{ height: 260px; }
  .floatWhats .wText{ display:none; } /* más limpio en mobile */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .reveal{ transition: none; }
  .modalBox{ animation: none; }
  .btnPrimary, .btnGhost, .chip, .pCard, .navLink{ transition: none; }
}