/* Huellitas — capa sketch / excalidraw */
:root {
  --cream: #FFF9F3;
  --peach: #FFE8D6;
  --peach-deep: #FFD4B8;
  --header-h: 76px;
  --font-sketch: "Caveat", "Segoe Print", cursive;
  --radius-blob: 42% 58% 55% 45% / 48% 42% 58% 52%;
  --radius-blob-alt: 58% 42% 45% 55% / 52% 58% 42% 48%;
  --sketch-shadow: 4px 5px 0 rgba(200, 160, 32, 0.45);
  --sketch-border: 2.5px solid var(--chocolate);
}
body {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 90% 55% at 8% -5%, rgba(232, 200, 80, 0.28), transparent 58%),
    radial-gradient(ellipse 55% 45% at 98% 12%, rgba(232, 114, 42, 0.14), transparent 52%),
    radial-gradient(ellipse 70% 40% at 50% 105%, rgba(125, 200, 90, 0.1), transparent 50%);
}
main, .site-header, .site-footer, .estela-companion, .cart-drawer { position: relative; z-index: 1; }
.site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 300;
  background: rgba(255, 249, 243, 0.94);
  border-bottom: var(--sketch-border);
  box-shadow: 0 3px 0 var(--gold-light);
}
body { padding-top: var(--header-h); }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
.nav-links a { position: relative; }
.nav-links a:hover { color: var(--cta-hover); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: var(--gold); border-radius: 2px; transform: scaleX(0);
  transition: transform 0.25s ease-out;
}
.nav-links a:hover::after { transform: scaleX(1) rotate(-1deg); }
.btn-cart {
  border: var(--sketch-border);
  box-shadow: 2px 3px 0 rgba(61, 32, 16, 0.15);
  border-radius: 20px 26px 22px 28px / 24px 20px 28px 22px;
}
.hero { position: relative; }
.hero-copy .eyebrow {
  border: 2px dashed var(--leaf);
  border-radius: 20px 28px 24px 22px / 22px 24px 28px 20px;
  transform: rotate(-1deg);
  font-family: var(--font-sketch);
  font-size: 1.05rem;
  color: var(--leaf);
}
.hero h1 em {
  font-family: var(--font-sketch);
  font-size: 1.08em;
  color: var(--cta-hover);
}
.hero-visual { display: grid; place-items: center; }
.hero-estela-wrap {
  margin: 0; max-width: min(100%, 420px);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  border: var(--sketch-border);
  box-shadow: var(--sketch-shadow);
  background: linear-gradient(160deg, var(--peach) 0%, #fff 100%);
  overflow: hidden;
  transform: rotate(1deg);
  will-change: transform;
}
.hero-estela { width: 100%; height: auto; display: block; object-fit: cover; }
.hero-media--accent {
  position: absolute; bottom: -8px; right: -4px; width: 42%; max-width: 200px;
  border-radius: 22px 28px 24px 26px / 26px 22px 28px 24px;
  border: var(--sketch-border);
  box-shadow: 3px 4px 0 rgba(200,160,32,.45);
  transform: rotate(-6deg);
  overflow: hidden;
  background: var(--peach);
  z-index: 3;
}
.hero-media--accent img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.hero-visual { position: relative; min-height: 420px; }
.hero-doodle { position: absolute; pointer-events: none; opacity: 0.5; z-index: 2; }
.hero-doodle--sparkle { top: 6%; right: 8%; width: 56px; transform: rotate(12deg); }
.hero-doodle--heart { top: 12%; left: 6%; width: 44px; transform: rotate(-8deg); }
.btn-primary {
  border: var(--sketch-border);
  border-radius: 28px 22px 26px 24px / 24px 28px 22px 26px;
  box-shadow: var(--sketch-shadow);
  transform: rotate(-0.5deg);
}
.btn-primary:hover { transform: rotate(-0.5deg) translateY(-2px); }
.btn-secondary {
  border-radius: 24px 28px 22px 26px / 26px 22px 28px 24px;
  border-width: 2.5px;
  transform: rotate(0.4deg);
}
.occasion-bar {
  background: linear-gradient(105deg, var(--chocolate) 0%, var(--chocolate-mid) 100%);
  border-block: 3px solid var(--gold-light);
}
.occasion-bar #occasionWord {
  font-family: var(--font-sketch);
  font-size: 1.35em;
  color: var(--peach-deep);
}
.info-strip {
  background: var(--peach);
  border-block: 2px dashed rgba(61, 32, 16, 0.2);
  position: sticky;
  top: var(--header-h);
  z-index: 250;
  box-shadow: 0 4px 12px rgba(61, 32, 16, 0.06);
}
.section-head h2, .b2b-band h2 { display: inline-block; position: relative; }
.section-head h2::after, .b2b-band h2::after {
  content: "";
  position: absolute; left: -6%; right: -6%; bottom: 2px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 C40 2, 80 10, 120 6 S180 4, 198 7' fill='none' stroke='%23E8722A' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  z-index: -1;
}
.prod-card {
  border-radius: 22px;
  border: var(--sketch-border);
  box-shadow: var(--sketch-shadow);
  background: var(--surface);
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.prod-card:nth-child(odd) { transform: rotate(-0.35deg); }
.prod-card:nth-child(even) { transform: rotate(0.3deg); }
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 rgba(200, 160, 32, 0.4);
}
.prod-img {
  margin: 12px 12px 0;
  aspect-ratio: 4 / 3;
  min-height: 200px;
  border-radius: 16px;
  border: 2px solid rgba(61, 32, 16, 0.18);
  background: linear-gradient(145deg, var(--peach) 0%, #fff 85%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}
.prod-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  transform: none !important;
}
.prod-card:hover .prod-img img { transform: none !important; }
.prod-tag, .prod-veg {
  border-radius: 12px;
  z-index: 2;
}
.prod-body { min-height: 0; }
.btn-add {
  border: 2px solid var(--chocolate);
  border-radius: 999px;
  box-shadow: 2px 3px 0 rgba(61, 32, 16, 0.2);
  min-width: auto;
  padding: 10px 18px;
  flex-shrink: 0;
}
.shipping-box, .loc-card, .test-card, .gift-card, .chat-panel {
  border: var(--sketch-border);
  box-shadow: var(--sketch-shadow);
}
.shipping-box { border-radius: 28px 22px 30px 24px / 24px 30px 22px 28px; background: var(--surface); }
.loc-card { border-radius: 22px 28px 24px 26px / 28px 22px 26px 24px; }
.loc-card:nth-child(2) { transform: rotate(-0.5deg); }
.loc-card:nth-child(3) { transform: rotate(0.6deg); }
.gift-card {
  border-radius: 20px 26px 22px 28px / 26px 20px 28px 22px;
  background: var(--peach);
  font-family: var(--font-sketch);
  font-size: 1.2rem;
}
.gift-card:hover { background: var(--surface); transform: translateY(-3px) rotate(-0.5deg); }
.packaging-media {
  border-radius: var(--radius-blob);
  border: var(--sketch-border);
  box-shadow: var(--sketch-shadow);
  transform: rotate(-1deg);
}
.b2b-band {
  background: linear-gradient(135deg, var(--chocolate) 0%, var(--chocolate-mid) 55%, var(--chocolate-mid) 100%);
  border-block: 4px solid var(--gold-light);
}
.estela-section { background: linear-gradient(180deg, var(--peach) 0%, var(--cream) 100%); }
.chat-panel { border-radius: 26px 22px 28px 24px / 22px 28px 24px 26px; }
.bubble { border-radius: 18px 22px 20px 16px / 20px 16px 22px 18px; }
.test-card { border-radius: 24px 20px 28px 22px / 20px 28px 22px 24px; transform: rotate(-0.4deg); }
.test-card:last-child { transform: rotate(0.5deg); }
.test-stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 4px; }
.fab {
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  box-shadow: 4px 5px 0 var(--gold-light);
  transform: rotate(-3deg);
}
.site-header { position: fixed !important; }
.nav { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .prod-card, .prod-card:nth-child(odd), .prod-card:nth-child(even),
  .loc-card, .test-card, .hero-media, .packaging-media, .fab { transform: none !important; }
}
@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .nav-links.open { top: var(--header-h); }
}


/* Estela companion — avatar SalesRoom */
.estela-companion {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 280;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: min(320px, calc(100vw - 24px));
  pointer-events: none;
}
.companion-bubble {
  pointer-events: auto;
  background: #fff;
  border: var(--sketch-border);
  border-radius: 22px 26px 20px 24px / 24px 20px 26px 22px;
  box-shadow: var(--sketch-shadow);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--chocolate);
  transform: rotate(-0.8deg);
  opacity: 0;
  animation: bubbleIn 0.5s ease-out 0.8s forwards;
}
.companion-bubble.is-changing { animation: none; }
.companion-bubble-text { transition: opacity 0.25s ease; }
.companion-bubble-text { font-family: var(--font-sketch); font-size: 1.15rem; }
.companion-avatar {
  pointer-events: auto;
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.avatar-stage {
  display: block;
  width: 96px;
  height: 96px;
}
.avatar-ring {
  display: block;
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 4px 5px 0 rgba(61,32,16,.2);
  background: var(--peach);
  overflow: hidden;
}
.avatar-char {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  background: var(--peach);
}
.avatar-spark {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  animation: sparkFloat 3.2s ease-out infinite;
}
.avatar-spark--1 { right: 8%; top: 18%; color: #e85d8a; animation-delay: 0s; }
.avatar-spark--2 { left: 6%; top: 28%; font-size: 9px; animation-delay: 1.1s; }
.avatar-spark--3 { right: 14%; top: 8%; color: var(--gold); animation-delay: 2.2s; }
.companion-avatar.is-speaking .avatar-ring {
  animation: avatarRingSpeak 0.5s ease-in-out infinite;
}
.companion-avatar.is-speaking .avatar-spark {
  animation-duration: 1.4s;
}
.companion-pulse {
  position: absolute; inset: -6px;
  border: 2px solid var(--gold-light);
  border-radius: 50%;
  animation: companionPulse 2.4s ease-out infinite;
}
@keyframes estelaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes avatarRingSpeak {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes sparkFloat {
  0% { transform: translateY(4px) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-22px) scale(1.1); opacity: 0; }
}
@keyframes companionPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(12px) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(-0.8deg); }
}
@keyframes bubblePop {
  0% { transform: scale(0.96); opacity: 0.6; }
  100% { transform: scale(1) rotate(-0.8deg); opacity: 1; }
}

.estela-intro-photo {
  margin: 0 0 20px; max-width: 220px;
  border-radius: 28px 22px 30px 24px / 24px 30px 22px 28px;
  border: var(--sketch-border);
  box-shadow: var(--sketch-shadow);
  overflow: hidden;
  transform: rotate(-1.5deg);
}
.estela-intro-photo img { width: 100%; display: block; }

.parallax-layer { will-change: transform; }

/* Más alegría */
.occasion-bar { font-family: var(--font-sketch); font-size: 1.35rem; }
.info-strip strong { color: var(--cta-hover); }
.section-head h2 { color: var(--chocolate); }
.b2b-band .btn-primary { transform: rotate(0.6deg); }

@media (max-width: 860px) {
  .hero-visual { min-height: 360px; margin-top: 8px; }
  .hero-media--accent { width: 38%; right: 0; bottom: 0; }
  .estela-companion { bottom: 12px; right: 10px; max-width: 260px; }
  .avatar-stage, .avatar-ring { width: 72px; height: 72px; }
}
@media (max-width: 720px) {
  .companion-bubble { font-size: 13px; }
  .companion-bubble-text { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-stage, .avatar-ring, .avatar-spark, .companion-pulse, .companion-bubble { animation: none !important; }
  .companion-bubble { opacity: 1; }
  .parallax-layer { transform: none !important; }
}

body.has-order-bar .estela-companion { bottom: 76px; }
.info-strip li::before { content: "✦ "; color: var(--gold); font-size: 0.85em; }
.gift-card:nth-child(odd) { transform: rotate(-0.8deg); }
.gift-card:nth-child(even) { transform: rotate(0.7deg); }

/* product overrides final */
#productos .prod-card { overflow: visible !important; padding-bottom: 4px; }
#productos .prod-img {
  aspect-ratio: 4 / 3;
  min-height: 210px;
  border-radius: 14px !important;
  padding: 14px !important;
}
#productos .prod-img img {
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}
#productos .prod-body { padding: 14px 16px 18px !important; }
#productos .prod-desc { margin-bottom: 12px; }
#productos .btn-add { position: relative; z-index: 2; }
.companion-bubble { min-width: 200px; max-width: min(300px, calc(100vw - 120px)); }

/* Mobile polish */
@media (max-width: 860px) {
  .hero-visual { min-height: min(72vw, 320px); }
  .hero-estela-wrap { max-width: min(88vw, 340px); margin-inline: auto; }
}
@media (max-width: 720px) {
  .nav-links.open { top: var(--header-h); }
  .occasion-bar { font-size: 1.1rem; }
  .estela-companion {
    bottom: max(10px, env(safe-area-inset-bottom));
    right: max(8px, env(safe-area-inset-right));
    max-width: min(260px, calc(100vw - 12px));
  }
  body.has-order-bar .estela-companion {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .companion-bubble {
    min-width: 0;
    max-width: min(220px, calc(100vw - 92px));
    padding: 10px 12px;
  }
  .companion-pulse { display: none; }
  .avatar-spark { display: none; }
  #productos .prod-img { min-height: 170px; }
}