/* ═══════════════════════════════════════════════════════════════
   CHIAPPERO — Aperitivos Artesanales de Autor
   styles.css
═══════════════════════════════════════════════════════════════ */

/* ─── FUENTES LOCALES (/tipos/) ──────────────────────────────── */
@font-face {
  font-family: 'RetroTeam';
  src: url('/tipos/Retro Team.otf') format('opentype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'AmericanTypewriter';
  src: url('/tipos/AmericanTypewriter.ttc') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'OldLetterpress';
  src: url('/tipos/Old Letterpress Type.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: '1942Report';
  src: url('/tipos/1942.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}
@font-face {
  font-family: 'OldNewspaper';
  src: url('/tipos/OldNewspaperTypes.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}

/* Respaldo Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Bebas+Neue&display=swap');


/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Familias tipográficas */
  --f-title:    'RetroTeam',          'Bebas Neue',    'Special Elite', sans-serif;
  --f-body:     'AmericanTypewriter', 'Special Elite', Georgia,         serif;
  --f-highlight:'OldLetterpress',     'Special Elite', monospace;
  --f-product:  '1942Report',         'Special Elite', 'Courier New',   monospace;

  /* Paleta */
  --ink:        #272628;
  --ink-deep:   #1c1b1d;
  --sage:       #ACCBC3;
  --amber:      #E99C17;
  --terra:      #B44335;
  --cream:      #E3E2D6;
  --cream-dim:  rgba(227, 226, 214, 0.75);

  /* Espaciado y transiciones base */
  --section-pad:    9rem 5rem;
  --section-pad-sm: 6rem 2.5rem;
  --transition-base: .3s ease;
}


/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  overflow-x: hidden;
}

/* Textura grain — archivo SVG externo */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  background-image: url('/img/grain.svg');
  background-repeat: repeat;
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  background-color: var(--ink);
  background-image: url('/img/hero_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 7rem;
  position: relative;
  overflow: hidden;
}

#hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 60% at 50% 48%,
    rgba(172, 203, 195, 0.07) 0%, transparent 70%);
}

.hero-logo-img {
  width: clamp(300px, 68vw, 820px);
  height: auto;
  object-fit: contain;
  position: relative; z-index: 2;
  opacity: 0;
  animation: riseIn 1s ease forwards .3s;
}

.hero-rule {
  width: 70px; height: 1px;
  background: var(--amber);
  margin: 2.6rem auto;
  position: relative; z-index: 2;
  opacity: 0;
  animation: riseIn .8s ease forwards .9s;
}

.hero-sub {
  font-family: var(--f-body);
  font-size: .72rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--cream-dim);   /* mejorado de .62 a .75 para mejor contraste */
  position: relative; z-index: 2;
  opacity: 0;
  animation: riseIn .8s ease forwards 1.1s;
}

.hero-manifesto {
  font-family: var(--f-product);
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 2;
  color: var(--cream);
  max-width: 490px;
  margin: 2.8rem auto 0;
  position: relative; z-index: 2;
  opacity: 0;
  animation: riseIn .9s ease forwards 1.3s;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  opacity: 0;
  animation: riseIn .8s ease forwards 2s;
  z-index: 5;
  pointer-events: none;
}
.scroll-cue span {
  font-family: var(--f-body);
  font-size: .5rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--sage);
}
.scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--sage), transparent);
  animation: pulseAnim 2.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════
   SECCIÓN — BASE
═══════════════════════════════════════════════════════════════ */
section { padding: var(--section-pad); }
.container { max-width: 1160px; margin: 0 auto; }

.s-label {
  font-family: var(--f-body);
  font-size: .6rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.2rem;
}

.s-title {
  font-family: var(--f-title);
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: .04em;
  line-height: .92;
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCTOS — terra #B44335
═══════════════════════════════════════════════════════════════ */
#productos { background: var(--terra); color: var(--cream); }
#productos .s-label { color: rgba(227, 226, 214, .5); }
#productos .s-title  { color: var(--cream); }

.prod-header { text-align: center; margin-bottom: 5rem; }

.prod-tagline {
  font-family: var(--f-highlight);
  font-size: clamp(.9rem, 1.2vw, 1.1rem);
  color: rgba(227, 226, 214, .68);
  line-height: 1.9;
  max-width: 520px;
  margin: 1.5rem auto 0;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(227, 226, 214, .1);
}

.prod-card {
  padding: 3.2rem 3rem;
  border: 1px solid rgba(227, 226, 214, .1);
  position: relative; overflow: hidden;
  transition: background var(--transition-base);
  display: flex;
  flex-direction: row;
  gap: 2.2rem;
  align-items: flex-start;
}
.prod-card:hover { background: rgba(227, 226, 214, .05); }

.prod-card::after {
  content: attr(data-num);
  position: absolute; right: 1.8rem; bottom: 1.5rem;
  font-family: var(--f-title);
  font-size: 5rem; opacity: .05;
  color: var(--cream); line-height: 1;
  pointer-events: none;
  user-select: none;
}

.prod-icon {
  flex-shrink: 0;
  width: 72px;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: .3rem;
}
.prod-icon img {
  width: 72px; height: auto; max-height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.28));
}

.prod-content { display: flex; flex-direction: column; }

.prod-badge {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .54rem; letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: .7rem; padding: .28rem .75rem;
  border: 1px solid rgba(227, 226, 214, .38);
  color: rgba(227, 226, 214, .75);
  align-self: flex-start;
}

.prod-name {
  font-family: var(--f-title);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  color: var(--cream); line-height: 1.05; margin-bottom: .35rem;
}

.prod-sub {
  font-family: var(--f-body);
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(227, 226, 214, .42); margin-bottom: 1.4rem;
}

.prod-rule {
  width: 28px; height: 1px;
  background: rgba(227, 226, 214, .28);
  margin-bottom: 1.4rem;
}

.prod-desc {
  font-family: var(--f-body);    /* AmericanTypewriter via variable */
  font-size: .92rem;
  line-height: 2;
  color: rgba(227, 226, 214, .82);
  letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════════════
   HISTORIA — sage #ACCBC3
═══════════════════════════════════════════════════════════════ */
#historia {
  background: var(--sage);
  color: var(--ink);
  overflow: hidden; position: relative;
  padding: 0;
}
#historia .s-label { color: rgba(39, 38, 40, .5); }
#historia .s-title  { color: var(--ink); }

.historia-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: .38;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.historia-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    rgba(172, 203, 195, 0.72) 0%,
    rgba(172, 203, 195, 0.52) 55%,
    rgba(172, 203, 195, 0.38) 100%
  );
  pointer-events: none;
}

.historia-content {
  position: relative; z-index: 2;
  padding: 9rem 5rem;
}

.historia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem; align-items: center;
  max-width: 1160px; margin: 0 auto;
}

/* Pasaporte */
.passport {
  border: 1px solid rgba(39, 38, 40, .22);
  padding: 3.5rem;
  background: rgba(227, 226, 214, .15);
  position: relative;
  backdrop-filter: blur(2px);
}
.passport::before {
  content: ''; position: absolute;
  top: -5px; left: -5px; right: 5px; bottom: 5px;
  border: 1px solid rgba(39, 38, 40, .1);
  pointer-events: none;
}

.passport-stamp-row { display: flex; gap: .8rem; margin-bottom: 2.5rem; flex-wrap: wrap; }

.ps {
  font-family: var(--f-body);
  font-size: .52rem; letter-spacing: .2em; text-transform: uppercase;
  border: 1.5px solid; padding: .38rem .7rem;
}
.ps-ita { border-color: rgba(39, 38, 40, .7);  color: var(--ink); }
.ps-arg { border-color: rgba(39, 38, 40, .38); color: rgba(39, 38, 40, .7); }
.ps-esp { border-color: rgba(39, 38, 40, .38); color: rgba(39, 38, 40, .7); }

.passport-year {
  font-family: var(--f-title);
  font-size: 5.5rem; line-height: 1;
  color: rgba(39, 38, 40, .14); margin-bottom: .5rem;
  user-select: none;
}

.passport-quote {
  font-family: var(--f-highlight);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.72; color: var(--ink); margin-bottom: 1.5rem;
}

.passport-by {
  font-family: var(--f-body);
  font-size: .57rem; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(39, 38, 40, .5);
}

.historia-text p {
  font-family: var(--f-body);
  font-size: .83rem; line-height: 2.05;
  color: rgba(39, 38, 40, .78); letter-spacing: .02em; margin-bottom: 1.5rem;
}

.historia-text p:first-of-type {
  font-family: var(--f-highlight);
  font-size: 1.02rem; color: var(--ink); line-height: 1.82;
}

.historia-text .s-title { margin-bottom: 2.5rem; }

.valores-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; }
.chip {
  font-family: var(--f-body);
  font-size: .55rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .38rem 1rem;
  border: 1px solid rgba(39, 38, 40, .28);
  color: rgba(39, 38, 40, .62);
}


/* ═══════════════════════════════════════════════════════════════
   CONTACTO — amber #E99C17
═══════════════════════════════════════════════════════════════ */
#contacto {
  background: var(--amber);
  color: var(--ink);
  padding: 0;
}

.contacto-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

/* Col izquierda — imagen siempre completa */
.contacto-img-col {
  position: relative;
  background-image: url('/img/elementos-06.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--amber);
  min-height: 400px;
}
.contacto-img-col::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(233, 156, 23, 0.18);
  pointer-events: none;
}

/* Col derecha — formulario */
.contacto-form-col {
  padding: 7rem 5rem 7rem 6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.contacto-form-col .s-title { margin-bottom: .8rem; }

.contacto-sub {
  font-family: var(--f-highlight);
  font-size: 1.02rem; line-height: 1.82;
  color: rgba(39, 38, 40, .65); margin-bottom: .8rem;
}

.contacto-sub2 {
  font-family: var(--f-body);
  font-size: .82rem; line-height: 1.85;
  color: rgba(39, 38, 40, .58); margin-bottom: 2.8rem;
  letter-spacing: .02em;
}

/* Form */
.form-group { margin-bottom: 1.6rem; }

.form-label {
  font-family: var(--f-body);
  display: block; font-size: .57rem; letter-spacing: .38em;
  text-transform: uppercase; color: rgba(39, 38, 40, .6);
  margin-bottom: .52rem;
}

.form-input,
.form-textarea {
  width: 100%; padding: .9rem 1.1rem;
  background: rgba(39, 38, 40, .07);
  border: 1px solid rgba(39, 38, 40, .22);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: .85rem; letter-spacing: .03em;
  transition: border-color var(--transition-base), background var(--transition-base);
  outline: none; appearance: none; border-radius: 0;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(39, 38, 40, .35); }
.form-input:focus,
.form-textarea:focus {
  border-color: rgba(39, 38, 40, .58);
  background: rgba(39, 38, 40, .1);
}
.form-textarea { min-height: 130px; resize: vertical; }

/* Botón y sus estados */
.btn-submit {
  width: 100%; padding: 1.05rem;
  background: var(--ink); color: var(--cream);
  font-family: var(--f-body);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  border: none; cursor: pointer; margin-top: .3rem;
  transition: background var(--transition-base), opacity var(--transition-base);
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-submit:hover:not(:disabled) { background: #3d3b3f; }
.btn-submit:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner dentro del botón */
.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 1.5px solid rgba(227, 226, 214, .3);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: spinAnim .7s linear infinite;
}
.btn-submit.loading .btn-spinner { display: block; }
.btn-submit.loading .btn-text   { opacity: .5; }

/* Mensaje de confirmación */
.form-feedback {
  display: none;
  margin-top: 1.2rem;
  padding: .85rem 1.1rem;
  font-family: var(--f-body);
  font-size: .75rem; letter-spacing: .06em;
  border: 1px solid;
}
.form-feedback.success {
  display: block;
  color: var(--ink);
  border-color: rgba(39, 38, 40, .4);
  background: rgba(39, 38, 40, .06);
}
.form-feedback.error {
  display: block;
  color: var(--terra);
  border-color: rgba(180, 67, 53, .4);
  background: rgba(180, 67, 53, .06);
}

/* Links de contacto */
.contact-links { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.c-link-item   { display: flex; flex-direction: column; gap: .35rem; }
.c-link-label {
  font-family: var(--f-body);
  font-size: .52rem; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(39, 38, 40, .46);
}
.c-link-val {
  font-family: var(--f-body);
  font-size: .8rem; color: var(--ink); text-decoration: none;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(39, 38, 40, .2);
  padding-bottom: .08rem;
  transition: border-color var(--transition-base);
}
.c-link-val:hover { border-color: var(--ink); }


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
footer {
  background: var(--ink-deep);
  padding: 2rem 5rem;
  border-top: 1px solid rgba(227, 226, 214, .06);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
}
.foot-logo-img {
  height: 30px; width: auto;
  object-fit: contain;
  opacity: .35;
  filter: brightness(10);
}
.foot-copy {
  font-family: var(--f-body);
  font-size: .54rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); opacity: .28;
}


/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s ease, transform .85s ease;
}
.sr.visible       { opacity: 1; transform: translateY(0); }
.sr-d1            { transition-delay: .1s; }
.sr-d2            { transition-delay: .2s; }
.sr-d3            { transition-delay: .3s; }
.sr-d4            { transition-delay: .4s; }


/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES
═══════════════════════════════════════════════════════════════ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseAnim {
  0%, 100% { transform: scaleY(1);  opacity: .9; }
  50%       { transform: scaleY(.5); opacity: .3; }
}
@keyframes spinAnim {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — tablet 960px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root {
    --section-pad:    var(--section-pad-sm);
  }

  .historia-content { padding: 6rem 2.5rem; }
  .historia-inner   { grid-template-columns: 1fr; gap: 3rem; }
  .prod-grid        { grid-template-columns: 1fr; }

  .contacto-wrapper { grid-template-columns: 1fr; }
  .contacto-img-col { min-height: 320px; }
  .contacto-form-col { padding: 5rem 2.5rem; }

  footer { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — móvil 600px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .prod-card  { flex-direction: column; }
  .prod-icon  { width: 60px; margin-bottom: .5rem; }
  .prod-icon img { width: 60px; }

  .passport { padding: 2.5rem 2rem; }
  .contacto-form-col { padding: 4rem 1.8rem; }
}