/* ============================================================
   CHIQUITA — reskin claro sobre main.css
   Paleta: crema + terracota + verde salvia
   Se carga DESPUÉS de main.css y sobrescribe variables/estilos.
   ============================================================ */

:root{
  /* Capas claras */
  --bg:        #FBF6EC;
  --bg-alt:    #F6EFDE;
  --surface:   #FFFDF6;
  --surface-2: #F3ECDA;
  --surface-3: #EDE4CE;

  --line:   rgba(78,63,39,0.14);
  --line-2: rgba(78,63,39,0.22);

  --fg:       #3E3527;
  --fg-muted: #6B6049;
  --fg-dim:   #9A8E74;

  /* Acento terracota */
  --accent:       #C46B4A;
  --accent-soft:  rgba(196,107,74,0.14);
  --accent-line:  rgba(196,107,74,0.40);
  --accent-fg:    #FFF9EF;

  --ok:    #4E9F5C;
  --sale:  #B9452C;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;
  --font-mono:    'Nunito', system-ui, sans-serif;

  --radius:   16px;
  --radius-sm: 12px;
  --radius-lg: 24px;

  --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 32px -20px rgba(78,63,39,0.35);
}

/* Verde salvia como color secundario */
:root{
  --sage:      #5B6B47;
  --sage-soft: #EEF0E4;
  --sage-line: #8A9B72;
}

body{ -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4{ letter-spacing:-0.01em; font-weight:900; }

/* ===== Topbar en salvia ===== */
.topbar{ background:var(--sage) !important; border-bottom:none !important; }
.topbar .tb-msg{ color:#F4EFE2 !important; opacity:1 !important; }

/* ===== Marca con script ===== */
.brand{ display:flex; align-items:center; gap:10px; }
.logo-chq, .brand .custom-logo{
  width:46px !important; height:46px !important; border-radius:50%;
  object-fit:cover; box-shadow:0 2px 8px rgba(78,86,52,0.25);
}
.brand-script{
  font-family:'Dancing Script', cursive;
  font-size:28px; font-weight:700; color:#4E653C; line-height:1;
}
.chq-script{
  font-family:'Dancing Script', cursive;
  font-size:22px; font-weight:700; color:#8A9B72;
  margin-left:10px; white-space:nowrap;
}

/* ===== Eyebrows sin mono ===== */
.eyebrow{ letter-spacing:0.14em; font-weight:800; font-size:12px; }

/* ===== Placeholder rayado claro ===== */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(78,63,39,0.05) 0 10px, rgba(78,63,39,0) 10px 20px),
    var(--surface-2) !important;
}
.ph::after{ color:var(--fg-dim) !important; }

/* ===== Hero legible sobre fondo claro o foto ===== */
.hero-scrim{
  background:linear-gradient(90deg, rgba(251,246,236,0.96) 0%, rgba(251,246,236,0.82) 42%, rgba(251,246,236,0.08) 100%) !important;
}
.hero-card{ border:1px solid var(--line); }

/* ===== Botón WhatsApp flotante en verde ===== */
.wa-float{ background:#4E9F5C !important; color:#fff !important; }
.wa-float:hover{ background:#3E8A4C !important; }
.wa-float .wa-ic{
  display:flex; align-items:center; justify-content:center;
  width:auto; height:auto; background:none !important; border:none !important;
}
.wa-float .wa-ic svg{ display:block; }

/* ===== Progreso de delivery gratis (carrito) ===== */
.ship-note.chq-free{
  background:var(--sage-soft); border:1px solid #C9D3B4; color:#3F4C2F;
  font-weight:800; border-radius:12px; padding:10px 14px;
}
.ship-note.chq-progress{
  display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; color:var(--fg-muted); font-weight:700;
}
.ship-note.chq-progress b{ color:#A85535; }
.chq-bar{
  display:block; height:7px; border-radius:999px; background:var(--surface-3); overflow:hidden;
}
.chq-fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--sage-line));
  transition:width .3s ease;
}

/* ===== Perrito Chiquita en el hero ===== */
.chq-puppy{
  position:absolute; right:22px; bottom:0; z-index:5;
  width:250px; height:389px; pointer-events:none;
  animation:chqWalkIn 2.6s cubic-bezier(.3,0,.3,1) .4s both;
  transform-origin:50% 100%;
}
.chq-walk{
  width:100%; height:100%;
  background:url('../perrito-walk.png') 0 0 no-repeat;
  background-size:400% 100%;
  animation:chqFrames .55s steps(4) .4s 5;
}
.chq-bubble{
  position:absolute; top:-42px; right:4px; white-space:nowrap;
  background:var(--surface); border:2px solid var(--accent); color:#A85535;
  font-weight:800; font-size:13px; padding:7px 12px;
  border-radius:14px 14px 4px 14px;
  box-shadow:0 6px 16px rgba(62,53,39,0.14);
  opacity:0;
  animation:chqBubble 5s ease-out 3.1s forwards;
}
@keyframes chqWalkIn{
  0%   { transform:translateY(34%) scale(.45); opacity:0; }
  12%  { opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes chqFrames{
  from{ background-position-x:0%; }
  to  { background-position-x:133.3334%; }
}
@keyframes chqBubble{
  0%,6%    { opacity:0; transform:translateY(12px) scale(.7); }
  14%      { opacity:1; transform:translateY(0) scale(1.05); }
  20%      { transform:translateY(0) scale(1); }
  80%      { opacity:1; }
  100%     { opacity:0; transform:translateY(-8px) scale(.92); }
}
@media (max-width:900px){
  .chq-puppy{ width:160px; height:249px; }
}
@media (max-width:640px){
  .chq-puppy{ right:12px; width:120px; height:187px; }
}
@media (prefers-reduced-motion: reduce){
  .chq-puppy, .chq-walk, .chq-bubble{ animation:none !important; opacity:1; }
}

/* ===== Cards de producto: bordes suaves y hover cálido ===== */
.card{ box-shadow:none; }
.card:hover{ box-shadow:0 10px 22px rgba(78,86,52,0.14); }

/* ===== Checkout modal sobre fondo claro ===== */
.sb-co-overlay{ background:rgba(62,53,39,0.55) !important; }

/* ===== Scrim de drawers ===== */
.scrim{ background:rgba(62,53,39,0.45) !important; }

/* ===== Header sólido claro ===== */
.site-header{ background:rgba(251,246,236,0.94) !important; backdrop-filter:blur(8px); }

/* ============================================================
   FEATURES CHIQUITA
   ============================================================ */

/* ===== Reseñas en home ===== */
.chq-reviews-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px;
}
.chq-review{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.chq-stars{ color:#C4A24A; font-size:16px; letter-spacing:2px; }
.chq-review blockquote{ margin:0; font-size:14.5px; line-height:1.55; color:var(--fg); }
.chq-review figcaption{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px; }
.chq-review figcaption img{ width:44px; height:44px; border-radius:10px; object-fit:cover; }
.chq-review figcaption b{ display:block; font-size:13.5px; color:var(--fg); }
.chq-review figcaption small{ display:block; font-size:12px; color:var(--fg-dim); }
.chq-review figcaption a{ color:var(--accent); }

/* ===== Galería peluditos ===== */
.chq-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;
}
.chq-g-item{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1; }
.chq-g-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s ease; }
.chq-g-item:hover img{ transform:scale(1.04); }
.chq-g-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px;
  background:linear-gradient(transparent, rgba(62,53,39,0.75));
  color:#FFF9EF; font-size:12.5px; font-weight:700;
}

/* ===== Selector visual de talles (tarjetas con perro) ===== */
.chq-select-hidden{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.chq-size-cards{
  display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 4px;
}
.chq-size-card{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:4px; width:96px; min-height:110px; padding:10px 6px 8px;
  background:#fff; border:2px solid rgba(62,53,39,.14); border-radius:14px;
  cursor:pointer; font-family:inherit; color:var(--fg);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.chq-size-card:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.chq-size-card.active{
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 4px 14px rgba(196,107,74,.22);
}
.chq-size-dog{ display:flex; align-items:flex-end; justify-content:center; height:56px; }
.chq-size-dog img{ max-height:56px; max-width:76px; object-fit:contain; border-radius:8px; }
.chq-size-emoji{ line-height:1; filter:grayscale(.15); }
.chq-size-card b{ font-size:15px; }
.chq-size-card small{ font-size:10px; color:var(--fg-dim); line-height:1.25; text-align:center; }
@media (max-width:640px){
  .chq-size-card{ width:calc(33.33% - 7px); }
}

/* ===== Guía de talles ===== */
.chq-open-sizes{
  display:block; width:100%; margin:0 0 14px; padding:11px 14px;
  background:var(--sage-soft); border:1.5px dashed var(--sage-line); border-radius:12px;
  color:#3F4C2F; font-weight:800; font-size:14px; text-align:left; cursor:pointer;
}
.chq-open-sizes:hover{ background:#E4E8D5; }
.chq-sizes-overlay{
  position:fixed; inset:0; z-index:9995; background:rgba(62,53,39,0.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.chq-sizes-overlay[hidden]{ display:none; }
.chq-sizes-modal{
  position:relative; width:min(520px, 96vw); max-height:90vh; overflow-y:auto;
  background:var(--bg); border-radius:var(--radius-lg); padding:24px;
  box-shadow:0 24px 60px rgba(62,53,39,0.35);
}
.chq-sizes-modal h3{ font-size:22px; margin-bottom:8px; }
.chq-sizes-modal p{ color:var(--fg-muted); font-size:14px; line-height:1.5; }
.chq-sizes-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); font-size:15px;
}
.chq-sizes-quiz{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:14px 0; }
.chq-sizes-quiz label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:800; color:var(--fg); flex:1; min-width:120px; }
.chq-sizes-quiz input{
  padding:11px 12px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); font-size:15px; color:var(--fg); width:100%;
}
.chq-sizes-quiz .btn{ flex-basis:100%; }
.chq-sizes-result{
  background:var(--sage-soft); border:1px solid #C9D3B4; border-radius:12px;
  padding:12px 16px; font-size:15px; color:#3F4C2F; margin-bottom:14px;
}
.chq-talle{ font-size:22px; color:var(--accent); }
.chq-sizes-table{ width:100%; border-collapse:collapse; font-size:13px; }
.chq-sizes-table th{ text-align:left; padding:8px 6px; color:var(--fg-dim); text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.chq-sizes-table td{ padding:8px 6px; border-top:1px solid var(--line); color:var(--fg-muted); }
.chq-sizes-table td b{ color:var(--fg); }
.chq-sizes-table tr.active td{ background:var(--accent-soft); }
.chq-sizes-tip{ font-size:13px !important; margin-top:12px; }

/* ===== Seguimiento de pedido ===== */
.chq-track{ max-width:560px; }
.chq-track-form{ display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.chq-track-form input{
  padding:13px 14px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface); font-size:15px; color:var(--fg);
}
.chq-track-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-top:8px;
}
.chq-track-card.error{ border-color:var(--accent-line); color:var(--fg); }
.chq-track-icon{ font-size:34px; }
.chq-track-card b{ font-size:17px; color:var(--fg); }
.chq-track-card p{ margin:4px 0; color:var(--fg-muted); font-size:14px; }
.chq-track-card small{ color:var(--fg-dim); }
.chq-track-card ul{ margin-top:8px; color:var(--fg-muted); font-size:13.5px; }

/* ===== Extras del paso 3 (cupón, QR) ===== */
.chq-extra{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin:10px 0; font-size:14px; color:var(--fg);
}
.chq-extra.chq-qr{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.chq-extra.chq-qr img{ width:180px; height:180px; object-fit:contain; border-radius:8px; }
.chq-extra.chq-qr small{ color:var(--fg-dim); }
.chq-extra.chq-coupon{
  background:var(--sage-soft); border:1px dashed var(--sage-line); color:#3F4C2F; font-weight:700;
}
.chq-track-link{ font-size:13px; color:var(--fg-muted); }
.chq-track-link a{ color:var(--accent); font-weight:700; }