/* Churito Landing v3 — layout & components on top of tokens.css */
html, body { margin: 0; padding: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); }
input, textarea, button { font-family: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--sol); color: var(--cardon-900); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root { --ease: cubic-bezier(0.23, 1, 0.32, 1); }

.page { background: var(--surface); color: var(--ink); font-family: var(--font-sans); min-height: 100vh; overflow-x: clip; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.h2 { font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; }
.accent-word { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; color: var(--terracota); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); border: none; cursor: pointer; transition: transform 160ms var(--ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn--sm { padding: var(--space-2) var(--space-6); }
.btn--block { width: 100%; }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--cardon-900); color: var(--on-action); }
.hero .btn--primary:hover { background: var(--sol); color: var(--cardon-900); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--naranja); color: var(--naranja); }
.btn--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn--outline:hover { background: var(--surface-sunken); color: var(--ink); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--cardon-900); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: 1280px; margin: 0 auto; padding: var(--space-2) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.nav-link, .nav-cta { font-weight: 700; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); transition: background-color 200ms var(--ease), color 200ms ease, transform 160ms var(--ease); }
.nav-link { color: var(--ink); }
.nav-link:hover { background: var(--cardon-700); color: var(--ink); }
.nav-cta { background: var(--naranja); color: var(--cardon-900); }
.nav-cta:hover { background: var(--sol); color: var(--cardon-900); }
.nav-cta:active { transform: scale(0.97); }
@media (max-width: 480px) {
  .site-header__inner { padding-inline: var(--space-4); }
  .nav-link { padding-inline: var(--space-2); }
}

/* Hero */
.hero { background: var(--cardon-900); color: var(--ink); overflow: hidden; overflow: clip; }
.hero__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space-12) * 2) var(--space-6) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--space-12); align-items: end; }
.hero__copy { padding-bottom: calc(var(--space-12) * 2); display: flex; flex-direction: column; gap: var(--space-8); }
.hero__title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(44px, 6vw, 80px); line-height: 1.32; letter-spacing: -0.02em; margin: 0; text-wrap: balance; color: var(--ink); text-align: center; }
/* Cagakara's glyphs overshoot its declared ascent (~1.15em ink vs 0.95em), so at the
   title's line-height the word nearly touched the line above. As its own block with
   line-height 1, the top margin leaves ~0.3em of ink gap above. The line below is
   mostly x-height (0.5em vs 0.7em ascenders), so the bottom margin is pulled in to
   balance optically against the x-height rather than the ascenders. */
.hero__word { display: block; line-height: 1; margin: 0.375em 0 -0.1em; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; color: var(--naranja); }
.hero__lead { font-size: 19px; line-height: 1.6; max-width: 480px; margin: 0; color: var(--ink-muted); text-wrap: pretty; align-self: center; text-align: center; }
.hero__ctas { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.hero__art { display: flex; justify-content: center; }
.hero__frame { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.1; }
/* Centered on the arch's semicircle: arch top (6%) + half its width (44% of frame width = 40% of frame height, frame is 1:1.1) */
.hero__rays { position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; }
.hero__rays-ring { width: 100%; height: 100%; border-radius: var(--radius-full); background: repeating-conic-gradient(from 0deg, var(--cardon-700) 0deg 6deg, transparent 6deg 15deg); -webkit-mask: radial-gradient(circle, transparent 28%, #000 29%, #000 60%, transparent 70%); mask: radial-gradient(circle, transparent 28%, #000 29%, #000 60%, transparent 70%); will-change: transform; }
.hero__arch { position: absolute; left: 6%; right: 6%; top: 6%; bottom: 0; border-radius: var(--radius-full) var(--radius-full) 0 0; background: var(--naranja); padding: var(--space-2) var(--space-2) 0; }
.hero__arch-clip { width: 100%; height: 100%; border-radius: var(--radius-full) var(--radius-full) 0 0; overflow: hidden; background: var(--cardon-700); }
.parallax-img { width: 100%; height: 112%; object-fit: cover; display: block; will-change: transform; }
/* Above the hero's positioned rays so they slide behind the stripe */
.stripe { position: relative; z-index: 1; height: 18px; background: repeating-linear-gradient(90deg, var(--naranja) 0 36px, var(--sol) 36px 54px, var(--terracota) 54px 90px, var(--cardon-900) 90px 96px); }

/* Definition */
.definition { background: var(--surface); }
.definition__inner { max-width: 980px; margin: 0 auto; padding: 64px var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-12); align-items: start; }
.definition__word { display: flex; flex-direction: column; justify-content: center; }
.definition__title { color: var(--ink); font-size: clamp(56px, 8vw, 96px); line-height: 1.7; text-align: center; }
.definition__phon { color: var(--ink-muted); text-align: center; }
.definition__quote { border-left: var(--space-2) solid var(--naranja); padding-left: 16px; display: flex; flex-direction: column; gap: var(--space-4); }
.definition__quote p { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; font-weight: 400; color: var(--ink); margin: 0; text-wrap: pretty; }

/* Flavors */
.flavors { background: var(--surface-sunken); }
.flavors__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space-12) * 2) var(--space-6); display: flex; flex-direction: column; gap: var(--space-12); }
.flavors__head { display: flex; justify-content: center; align-items: end; gap: var(--space-6); flex-wrap: wrap; }
.flavors__intro { max-width: 380px; margin: 0; text-wrap: pretty; }
.flavors__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -32px var(--cardon-900); }
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cardon-900); }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.card__media img:hover { transform: scale(1.05); }
.card__num { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--sol); color: var(--cardon-900); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); }
.card__band { height: var(--space-2); }
.card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.card__body h3 { margin: 0; color: var(--ink); }
.card__body p { margin: 0; text-wrap: pretty; }
.card__cta { margin-top: auto; align-self: flex-start; }

/* Salta */
.salta { background: var(--surface); color: var(--ink); overflow: hidden; }
.salta__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space-12) * 2.5) var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: calc(var(--space-12) * 1.5); align-items: center; }
.salta__art-wrap { padding-inline: var(--space-12); }
.salta__art { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.salta__photo { border-radius: var(--radius-full) var(--radius-full) var(--radius-md) var(--radius-md); overflow: hidden; aspect-ratio: 4 / 5; border: var(--space-2) solid var(--terracota); background: var(--cardon-700); }
.salta__copy { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; }
.salta__title { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; }
.salta__lead { font-size: 18px; line-height: 1.65; margin: 0 0 var(--space-6); text-wrap: pretty; max-width: 520px; }
@media (max-width: 560px) {
  .salta__art-wrap { padding-inline: var(--space-8); }
  .sticker { scale: 0.72; }
}

/* Stickers */
.sticker { position: absolute; transition: transform 300ms var(--ease); }
.sticker__outline { filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 12px 12px rgba(20, 2, 1, 0.5)); }
.sticker--poncho { top: 5%; left: -7%; transform: rotate(-8deg); }
.sticker--poncho:hover { transform: rotate(-2deg) scale(1.06); }
.sticker--heart { top: 13%; right: -8%; transform: rotate(9deg); }
.sticker--heart:hover { transform: rotate(3deg) scale(1.06); }
.sticker--re { bottom: 15%; left: -8%; transform: rotate(-5deg); }
.sticker--re:hover { transform: rotate(1deg) scale(1.06); }
.sticker--cactus { bottom: 8%; right: -5%; transform: rotate(6deg); }
.sticker--cactus:hover { transform: rotate(0deg) scale(1.06); }
.sticker--logo { bottom: -4%; left: 40%; transform: rotate(-7deg); }
.sticker--logo:hover { transform: rotate(0deg) scale(1.06); }
.sticker--logo img { display: block; width: 118px; height: 118px; border-radius: var(--radius-full); object-fit: cover; border: 5px solid #fff; box-shadow: 0 12px 20px -8px rgba(20, 2, 1, 0.55); }

.poncho { position: relative; width: 150px; height: 126px; background: #C8161D; clip-path: path('M40 8 L75 42 L110 8 Q116 3 122 9 L144 42 Q149 48 144 54 L80 120 Q75 125 70 120 L6 54 Q1 48 6 42 L28 9 Q34 3 40 8 Z'); }
.poncho__stripe { position: absolute; left: 64px; top: -10px; width: 22px; height: 108px; background: #1E1E1E; }
.poncho__stripe--a { transform: rotate(-45deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); }
.poncho__stripe--b { transform: rotate(45deg); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }

.heart { width: 150px; height: 136px; background: #E0131C; clip-path: path('M75 136 C30 100 0 72 0 40 C0 16 18 0 40 0 C56 0 68 9 75 22 C82 9 94 0 110 0 C132 0 150 16 150 40 C150 72 120 100 75 136 Z'); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 18px; color: #fff; }
.heart__word { font-family: var(--font-display); font-size: 44px; line-height: 1; }
.heart__sub { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; }

.re { width: 150px; background: #8E1B1F; border: 5px solid #fff; border-radius: var(--radius-md); box-shadow: 0 12px 20px -8px rgba(20, 2, 1, 0.55); padding: var(--space-4) var(--space-2); display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-family: var(--font-sans); font-weight: 800; line-height: 0.95; text-align: center; }
.re__big { font-size: 64px; letter-spacing: -0.02em; text-shadow: -3px -3px 0 #E9B21C, -6px -6px 0 #D2232A, -9px -9px 0 #1F3A6B; }
.re__mid { font-size: 27px; margin-top: 6px; }
.re__small { font-size: 19px; }

.cactus { position: relative; width: 96px; height: 210px; }
.cactus > div { position: absolute; background: #9BC53D; box-shadow: inset 0 0 0 3px #111; }
.cactus > .cactus__flower { width: 16px; height: 10px; border-radius: 8px 8px 2px 2px; background: #E86A92; box-shadow: inset 0 0 0 2px #111; }
.cactus > .cactus__sign { left: 4px; top: 134px; width: 26px; height: 74px; background: #C8102E; box-shadow: none; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-family: var(--font-sans); font-weight: 800; font-size: 13px; line-height: 1.05; }

/* Hecho a mano */
.handmade { background: var(--surface); }
.handmade__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space-12) * 2.5) var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); align-items: center; }
.handmade__copy { display: flex; flex-direction: column; gap: var(--space-6); padding-right: var(--space-4); }
.handmade__title { font-weight: 700; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--ink); text-wrap: balance; }
.handmade__copy p { font-size: 17px; line-height: 1.65; margin: 0; text-wrap: pretty; }
.handmade__photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface-sunken); }
.handmade__photo--offset { margin-top: var(--space-12); }
.handmade__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); }
.handmade__photo img:hover { transform: scale(1.04); }

/* Contact */
.contact { background: var(--naranja); position: relative; }
.contact__inner { max-width: 1280px; margin: 0 auto; padding: calc(var(--space-12) * 2.5) var(--space-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: calc(var(--space-12) * 1.5); align-items: start; position: relative; }
.contact__copy { color: var(--cardon-900); position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--space-6); }
.contact__title { font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.02em; margin: 0; color: var(--cardon-900); text-wrap: balance; }
.contact__lead { font-size: 18px; line-height: 1.6; margin: 0; max-width: 420px; text-wrap: pretty; }
.contact__ig { font-weight: 700; color: var(--cardon-900); border-bottom: 2px solid var(--cardon-900); }
.contact__ig:hover { color: var(--cardon-700); }
@media (max-width: 860px) { .contact__copy { position: static; } }

.form { background: var(--surface-raised); border-radius: var(--radius-md); padding: clamp(24px, 4vw, 48px); box-shadow: 0 32px 64px -40px var(--cardon-900); }
/* WhatsApp contact card (contactMode: 'whatsapp') */
.wa { display: flex; flex-direction: column; gap: var(--space-6); color: var(--ink); }
.wa[hidden], .form[hidden], [data-mode][hidden] { display: none; }
.wa__intro, .wa__number { margin: 0; }
.btn--wa { background: #1f8a4c; color: #fff; }
.btn--wa:hover { background: #17703d; color: #fff; }
.form__fields { display: flex; flex-direction: column; gap: var(--space-6); }
.form__fields[hidden], .form__done[hidden] { display: none; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-muted); }
.field input, .field textarea { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-transform: none; letter-spacing: 0; outline: none; transition: border-color 160ms ease; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--terracota); outline: 2px solid var(--focus); outline-offset: 2px; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform 160ms var(--ease), background-color 200ms ease, border-color 200ms ease; }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--naranja-100); border-color: var(--terracota); }
.chip__swatch { width: 12px; height: 12px; border-radius: var(--radius-full); border: 1px solid var(--line-strong); }
.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-muted); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cardon-700); }
.form__error { background: var(--coral-100); color: var(--danger); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-weight: 700; }
.form__error[hidden] { display: none; }
.form__done { padding: var(--space-12) var(--space-2); text-align: center; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; color: var(--ink); }
.form__done p { margin: 0; max-width: 340px; }
.form__check { width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--sol); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--cardon-900); }
.form__demo { background: var(--sol-100); color: var(--ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.form__done .btn { margin-top: var(--space-2); }

/* Footer */
.site-footer { background: var(--cardon-900); color: var(--ink); }
.site-footer__band { height: var(--space-2); }
.site-footer__inner { max-width: 1280px; margin: 0 auto; padding: var(--space-12) var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-4); color: var(--ink); }
.site-footer__brand img { width: 72px; height: 72px; border-radius: var(--radius-full); object-fit: cover; }
.site-footer__links { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.site-footer__links a { color: var(--ink); }
.site-footer__links a:hover { color: var(--sol); }