@import url("styles.css");

:root {
  --ink: #241f1b;
  --cocoa: #332a25;
  --terracotta: #a66a3f;
  --terracotta-dark: #7f4b2c;
  --caramel: #a66a3f;
  --cream: #f8f7f4;
  --paper: #ffffff;
  --blush: #f4f1ed;
  --line: rgba(36, 31, 27, .12);
}

body { background: #fff; color: var(--ink); }
.announcement { min-height: 34px; background: #f4f2ee; color: #665c55; border-bottom: 1px solid var(--line); }
.announcement strong { color: var(--terracotta); }
.site-header { min-height: 82px; background: rgba(255,255,255,.96); }
.brand img { width: 250px; }
.desktop-nav a { font-weight: 500; }
.cart-button strong { background: var(--ink); }

.compare-link { position: fixed; z-index: 80; left: 1.2rem; bottom: 1.2rem; padding: .7rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 100px; box-shadow: 0 10px 35px rgba(45,35,28,.12); color: var(--ink); font-size: .7rem; font-weight: 700; }
.compare-link:hover { border-color: var(--ink); }

.hero { min-height: min(780px,calc(100vh - 116px)); display: grid; grid-template-columns: 1fr; align-items: center; background: linear-gradient(180deg,#f6e7e0 0%,#f7e8e3 35%,#f2e2db 58%,#f0dfd5 82%,#f5eae5 100%); color: var(--ink); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; background: transparent; border-radius: 0; }
.hero-overlay { display: none; background: none; }
.hero-copy { position: relative; z-index: 2; max-width: 670px; margin-left: max(1.2rem,calc((100vw - var(--max))/2)); padding: 7rem 0 8rem; display: block; transform: translateY(-2.5rem); }
.hero .eyebrow { color: var(--terracotta); }
.hero-ingredient-line { position: relative; width: max-content; margin-bottom: 1rem; }
.hero-ingredient-line .eyebrow { margin: 0; white-space: nowrap; }
.hero-ingredient-line img { position: absolute; left: calc(100% + .85rem); top: 50%; width: 78px; height: auto; transform: translateY(-50%); }
.hero h1 { font-size: clamp(4rem,6.5vw,7rem); }
.hero h1 em { color: var(--terracotta); }
.hero-copy > p:not(.eyebrow) { max-width: 480px; color: #6e655f; }
.hero .button-ghost { border-color: var(--ink); color: var(--ink); }
.hero .button-ghost:hover { background: #f5f3ef; }
.hero-note { right: 2rem; bottom: 2rem; padding: .6rem .8rem; background: rgba(255,255,255,.9); color: var(--ink); border-radius: 2px; backdrop-filter: blur(8px); }

.moment-strip { background: #fff; }
.section { padding-top: 9rem; padding-bottom: 9rem; }
.catalog.section { padding-top: 4.5rem; }
.split-heading > p, .product-price span, .catalog-status { color: #78716b; }
.filter-button { background: #fff; }
.product-grid { gap: 3.5rem 1.6rem; }
.product-card { background: #fff; }
.product-image-wrap { border-radius: 16px; background: #f6f4f0; }
.product-image-wrap span { background: rgba(255,255,255,.9); border-radius: 100px; }
.product-copy { padding: 1.25rem .2rem; }
.catalog-gift { margin-top: 1rem; color: #6e655f; }
.product-copy > .product-gift { margin: 1rem 0 2rem; color: var(--terracotta); font-size: .84rem; line-height: 1.45; font-weight: 650; letter-spacing: 0; text-transform: none; }
.button-dark { border-radius: 100px; }

.craft-section { height: 720px; min-height: 0; align-items: stretch; overflow: hidden; background: #f7f6f3; color: var(--ink); gap: 0; }
.craft-copy { min-height: 0; padding-top: 3rem; padding-bottom: 3rem; }
.craft-copy h2 { font-size: clamp(3rem,4.8vw,4.8rem); }
.craft-copy .eyebrow { color: var(--terracotta); }
.craft-copy h2 em { color: var(--terracotta); }
.craft-copy > p:not(.eyebrow) { margin: 1.25rem 0 2rem; color: #6e655f; }
.craft-list { border-color: var(--line); }
.craft-list article { padding-top: .75rem; padding-bottom: .75rem; border-color: var(--line); }
.craft-list article:nth-child(odd) { border-color: var(--line); }
.craft-list span { color: var(--terracotta); }
.craft-list p { color: #776e68; }
.craft-visual { height: calc(100% - 4rem); min-height: 0; margin: 2rem 2rem 2rem 0; border-radius: 18px; }
.craft-visual img { display: block; height: 100%; }
.craft-copy .text-link-light { margin-top: 1.25rem; }

.story-section { background: #fff; }
.story-card > p:not(.eyebrow,.story-placeholder) { color: #6e655f; }
.story-section blockquote { background: #f7f6f3; border: 0; border-radius: 16px; }

.care-section { background: #fff; color: var(--ink); }
.order-section { padding-top: 6rem; padding-bottom: 6rem; background: #fbfaf8; border-top: 1px solid var(--line); }
.order-section .section-heading { max-width: 900px; margin-bottom: 3.25rem; }
.order-section .section-heading h2 { font-size: clamp(3.2rem,5.2vw,5.5rem); line-height: 1; }
.section-heading-light .eyebrow { color: var(--terracotta); }
.care-grid { gap: 1rem; border: 0; }
.order-section .care-grid { grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.care-grid article, .care-grid article + article { min-height: 250px; padding: 2rem; background: #f7f6f3; border: 0; border-radius: 14px; }
.order-section .care-grid article, .order-section .care-grid article + article { position: relative; min-height: 230px; padding: 2.2rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 35px rgba(47,34,26,.05); }
.order-section .care-grid span { width: 40px; height: 40px; display: grid; place-items: center; background: #f4eadf; border-radius: 50%; font-weight: 700; }
.order-section .care-grid h3 { max-width: 340px; margin: 1.5rem 0 .8rem; font-size: clamp(1.4rem,1.8vw,1.8rem); line-height: 1.15; }
.order-section .care-grid p { max-width: 390px; font-size: .9rem; line-height: 1.6; }
.care-grid span { color: var(--terracotta); }
.care-grid p { color: #776e68; }

.reviews { max-width: none; padding-left: max(1.2rem,calc((100vw - var(--max))/2)); padding-right: max(1.2rem,calc((100vw - var(--max))/2)); background: #faf9f7; }
.review-grid { gap: 1rem; border: 0; }
.review-grid blockquote { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.review-grid blockquote + blockquote { border-left: 1px solid var(--line); }

.faq-section, .journal { border-top-color: var(--line); }
.faq-list summary { padding-top: 1.9rem; padding-bottom: 1.9rem; }
.journal-grid { gap: 1.2rem; }
.journal-grid article { background: #fff; border: 1px solid var(--line); border-radius: 14px; }

.closing-cta { background: #f5f3ef; color: var(--ink); border-top: 1px solid var(--line); }
.closing-cta .eyebrow { color: var(--terracotta); }
.closing-cta h2 em { color: var(--terracotta); }
.closing-cta .button-light { background: var(--ink); color: #fff; border-radius: 100px; }

.site-footer { background: #fff; color: #6e655f; border-top: 1px solid var(--line); }
.brand-light { filter: none; }
.footer-brand p { color: var(--terracotta); }
.footer-main h2 { color: var(--ink); }
.footer-main a:hover { color: var(--ink); }
.footer-bottom { border-top-color: var(--line); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-image { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
  .hero-copy { position: relative; margin-left: clamp(1.2rem,6vw,4rem); padding: 6rem 0 7rem; }
  .hero-note { display: none; }
  .craft-section { height: auto; min-height: 0; overflow: visible; }
  .craft-visual { height: 560px; min-height: 0; margin: 0 1.2rem 2rem; }

}

@media (max-width: 700px) {
  .site-header { min-height: 72px; }
  .brand img { width: 195px; }
  .hero { min-height: 710px; align-items: end; }
  .hero-image { height: 100%; object-fit: cover; object-position: 64% center; }
  .hero-overlay { display: none; background: none; }
  .hero-copy { margin: 0; padding: 3.8rem 1.2rem 5.5rem; transform: translateY(-1rem); }
  .hero-ingredient-line .eyebrow { font-size: .52rem; letter-spacing: .12em; }
  .hero-ingredient-line img { left: calc(100% + .5rem); width: 58px; }
  .hero h1 { font-size: clamp(3.3rem,15vw,5rem); }
  .section { padding-top: 6rem; padding-bottom: 6rem; }
  .catalog.section { padding-top: 4rem; }
  .order-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .order-section .section-heading { margin-bottom: 2.25rem; }
  .order-section .section-heading h2 { font-size: clamp(2.8rem,13vw,4rem); }
  .craft-copy { padding-top: 4rem; padding-bottom: 4rem; }
  .craft-visual { height: 440px; min-height: 0; }
  .care-grid article, .care-grid article + article { min-height: 0; padding: 1.7rem; }
  .order-section .care-grid { grid-template-columns: 1fr; }
  .review-grid blockquote + blockquote { border-left: 1px solid var(--line); }
  .compare-link { left: .8rem; bottom: .8rem; }
}

/* Multipage Emociones */
.desktop-nav a[aria-current="page"]::after { right: 0; }
.text-link-light { display: inline-block; margin-top: 2rem; padding-bottom: .25rem; color: var(--terracotta); border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 700; }
.catalog-gift { max-width: 650px; font-size: 1rem; }
.catalog-gift strong { color: var(--terracotta); }
.gift-detail { margin: 1.2rem 0; padding: 1rem; background: #f6eee9; border-left: 3px solid var(--terracotta); }

.inner-hero { height: min(620px,calc(100svh - 116px)); min-height: 540px; display: grid; grid-template-columns: minmax(0,.95fr) minmax(440px,1.05fr); align-items: stretch; overflow: hidden; background: #f4e7e0; }
.inner-hero-copy { align-self: center; max-width: 820px; padding: 4.5rem clamp(2rem,5vw,6rem); }
.inner-hero h1, .shop-hero h1 { margin: 0 0 1.35rem; font-family: var(--serif); font-size: clamp(3.5rem,4.5vw,5.5rem); line-height: .96; letter-spacing: -.045em; font-weight: 600; }
.inner-hero-copy > p:not(.eyebrow) { max-width: 620px; color: #6e655f; font-size: 1.08rem; }
.inner-hero figure { height: calc(100% - 2.5rem); min-height: 0; margin: 1.25rem 1.25rem 1.25rem 0; overflow: hidden; border-radius: 16px; }
.inner-hero figure img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.method-hero figure img { object-position: center 55%; }
.wholesale-hero figure img { object-position: center; }
.inspiration-hero figure img { object-position: center; }
.editorial-intro { display: grid; grid-template-columns: minmax(0,.9fr) minmax(400px,1.1fr); gap: 7rem; align-items: start; }
.editorial-intro h2, .recipe-sidebar h2, .ingredient-feature h2, .source-head h2, .comparison h2, .store-note h2, .wholesale-uses h2, .sample-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.7rem,5vw,5rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; }
.prose { color: #625a54; font-size: 1.03rem; }
.prose p { max-width: 680px; margin-bottom: 1.3rem; }

.recipe-section { background: #f7f6f3; }
.recipe-wrap { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: 6rem; align-items: start; }
.recipe-sidebar { position: sticky; top: 145px; }
.recipe-sidebar > p:not(.eyebrow) { margin: 1.4rem 0 2rem; color: #6e655f; }
.recipe-facts { display: grid; gap: .7rem; padding-top: 1.3rem; border-top: 1px solid var(--line); color: #6e655f; font-size: .78rem; }
.recipe-facts span { display: flex; justify-content: space-between; gap: 1rem; }
.recipe-content h3 { margin: 0 0 1.5rem; font-family: var(--serif); font-size: 2rem; }
.recipe-content h3:not(:first-child) { margin-top: 4rem; }
.ingredient-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ingredient-columns > div { padding: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.ingredient-columns h4, .recipe-steps h4 { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.15rem; }
.ingredient-columns ul { margin: 0; padding-left: 1.2rem; color: #625a54; }
.ingredient-columns li + li { margin-top: .45rem; }
.recipe-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.recipe-steps li { display: grid; grid-template-columns: 55px 1fr; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.recipe-steps li > span { color: var(--terracotta); font-size: .72rem; font-weight: 700; }
.recipe-steps p { margin: 0; color: #625a54; }
.ingredient-feature { padding: 5rem max(1.2rem,calc((100vw - var(--max))/2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 7rem; align-items: center; background: #f4e7e0; }
.ingredient-feature > div:first-child { min-height: 500px; display: grid; place-items: center; background: #fff; border-radius: 18px; }
.ingredient-feature img { max-height: 450px; object-fit: contain; }
.ingredient-feature .chimbote-logo-feature { width: min(72%,320px); max-height: none; }
.ingredient-feature > div:last-child { max-width: 650px; }
.ingredient-feature p:not(.eyebrow) { margin: 1.5rem 0 2rem; color: #625a54; font-size: 1.05rem; }

.sources-section { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.2rem,4vw,3.4rem) 8rem; }
.source-recipe { position: relative; margin-bottom: 2rem; padding: clamp(2rem,5vw,5rem); background: #f7f6f3; border-radius: 18px; }
.source-alt { background: #f4e7e0; }
.source-number { position: absolute; top: 2rem; right: 2rem; color: rgba(36,31,27,.14); font-family: var(--serif); font-size: 5rem; line-height: 1; }
.source-head { max-width: 850px; }
.source-head h2 { max-width: 780px; }
.source-head > p:not(.eyebrow) { max-width: 720px; margin: 1.5rem 0 3rem; color: #625a54; }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.source-grid > div { padding: 1.6rem; background: rgba(255,255,255,.76); border-radius: 12px; }
.source-grid h3 { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.35rem; }
.source-grid ul, .source-grid ol { margin: 0; padding-left: 1.2rem; color: #625a54; }
.source-grid li + li { margin-top: .45rem; }
.source-take { margin: 2rem 0; padding-left: 1.2rem; border-left: 3px solid var(--terracotta); }
.source-take strong { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.source-take p { margin: .45rem 0 0; color: #625a54; }
.source-link { display: inline-block; padding-bottom: .2rem; color: var(--terracotta); border-bottom: 1px solid currentColor; font-size: .76rem; font-weight: 700; }
.source-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.comparison-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.comparison-grid article { min-height: 260px; padding: 2rem; display: flex; flex-direction: column; background: #f7f6f3; border-radius: 14px; }
.comparison-grid span { color: var(--terracotta); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.comparison-grid h3 { margin: 2rem 0 .5rem; font-family: var(--serif); font-size: 1.7rem; }
.comparison-grid p { color: #625a54; }
.comparison-grid b { margin-top: auto; font-size: .72rem; }

.shop-hero { height: min(620px,calc(100svh - 116px)); min-height: 540px; padding: 1.5rem max(1.2rem,calc((100vw - var(--max))/2)); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; background: #f4e7e0; overflow: hidden; }
.shop-hero-copy { max-width: 730px; padding: 1.5rem 0; }
.shop-hero h1 { margin-bottom: 1rem; font-size: clamp(3.4rem,4vw,4.8rem); }
.chimbote-brand { width: 120px; max-height: 60px; margin-bottom: .75rem; object-fit: contain; object-position: left center; }
.shop-hero-copy > p:not(.eyebrow) { max-width: 560px; margin-bottom: 1.25rem; color: #625a54; font-size: 1.05rem; }
.shop-hero-image { height: 100%; min-height: 0; display: grid; place-items: center; background: rgba(255,255,255,.72); border-radius: 18px; }
.shop-hero-image img { max-width: 72%; max-height: 460px; object-fit: contain; }
.store-catalog .filter-row { margin-bottom: .6rem; }
.product-chimbote .product-image-wrap { background: #fff; }
.product-chimbote .product-image-wrap img { padding: 1.5rem; object-fit: contain; }
.store-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.store-note { padding: 5rem max(1.2rem,calc((100vw - var(--max))/2)); display: flex; align-items: center; justify-content: space-between; gap: 3rem; background: #f4e7e0; }
.store-note > div { max-width: 780px; }
.store-note h2 { font-size: clamp(2.4rem,4vw,4rem); }

.wholesale-benefits { padding: 0 max(1.2rem,calc((100vw - var(--max))/2)) 8rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.wholesale-benefits article { min-height: 260px; padding: 2rem; background: #f7f6f3; border-radius: 14px; }
.wholesale-benefits span { color: var(--terracotta); font-size: .68rem; font-weight: 700; }
.wholesale-benefits h3 { margin: 2rem 0 .7rem; font-family: var(--serif); font-size: 1.5rem; }
.wholesale-benefits p { margin: 0; color: #625a54; font-size: .86rem; }
.use-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.use-grid article { min-height: 240px; padding: 2rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.use-grid h3 { margin: 2.5rem 0 .7rem; font-family: var(--serif); font-size: 1.7rem; }
.use-grid p { color: #625a54; }
.sample-section { padding: 7rem max(1.2rem,calc((100vw - var(--max))/2)); display: grid; grid-template-columns: 1.1fr .9fr; gap: 7rem; align-items: center; background: #f4e7e0; }
.sample-section > div:first-child > p:not(.eyebrow) { max-width: 650px; margin-top: 1.5rem; color: #625a54; }
.sample-card { padding: 2rem; background: #fff; border-radius: 16px; }
.sample-card > span { color: var(--terracotta); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sample-card ol { margin: 1.5rem 0 2rem; padding-left: 1.2rem; color: #625a54; }
.sample-card li + li { margin-top: .5rem; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 1rem; }
  .desktop-nav a { font-size: .72rem; }
  .inner-hero { grid-template-columns: 1fr 1fr; }
  .editorial-intro { gap: 3rem; }
  .recipe-wrap { gap: 3rem; }
  .wholesale-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .inner-hero, .shop-hero { height: auto; min-height: 0; grid-template-columns: 1fr; overflow: visible; }
  .inner-hero-copy { padding: 4.5rem clamp(1.2rem,7vw,5rem) 3.5rem; }
  .inner-hero figure { height: 520px; min-height: 0; margin: 0 1.2rem 1.2rem; }
  .shop-hero-image { height: 480px; min-height: 0; }
  .ingredient-feature { gap: 3rem; }
  .store-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .inner-hero-copy { padding: 5rem 1.2rem 3rem; }
  .inner-hero h1, .shop-hero h1 { font-size: clamp(3.1rem,14vw,4.6rem); }
  .inner-hero figure { height: 440px; min-height: 0; }
  .editorial-intro, .recipe-wrap, .ingredient-feature, .source-grid, .sample-section { grid-template-columns: 1fr; }
  .editorial-intro, .recipe-wrap, .sample-section { gap: 2.5rem; }
  .recipe-sidebar { position: static; }
  .ingredient-columns, .comparison-grid, .use-grid { grid-template-columns: 1fr; }
  .ingredient-feature { padding: 4rem 1.2rem; }
  .ingredient-feature > div:first-child { min-height: 380px; }
  .source-number { font-size: 3.5rem; }
  .source-recipe { padding: 2rem 1.2rem; }
  .shop-hero { padding: 0 1.2rem 1.2rem; gap: 1rem; }
  .shop-hero-copy { padding: 5rem 0 2rem; }
  .shop-hero-image { min-height: 400px; }
  .store-grid { grid-template-columns: 1fr; }
  .store-note { align-items: flex-start; flex-direction: column; }
  .wholesale-benefits { grid-template-columns: 1fr; padding-bottom: 5rem; }
  .wholesale-benefits article { min-height: 0; }
}