/* ===========================================================
   Valucciara — hoja de estilos compartida
   =========================================================== */

:root {
  --navy: #081A2A;
  --gold: #C69223;
  --cream: #F4F0E8;
  --beige: #B8A58D;
  --charcoal: #1E2429;

  --ink: var(--charcoal);
  --ink-70: rgba(30, 36, 41, .7);
  --ink-55: rgba(30, 36, 41, .55);
  --ink-35: rgba(30, 36, 41, .35);
  --ink-16: rgba(30, 36, 41, .16);

  --cream-85: rgba(244, 240, 232, .85);
  --cream-55: rgba(244, 240, 232, .55);
  --cream-32: rgba(244, 240, 232, .32);
  --cream-18: rgba(244, 240, 232, .18);

  --page-max: 1320px;
  --gutter: 56px;
  --radius: 0px;
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 1440px;
  margin: 0 auto;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 200; line-height: 1.15; }
.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  padding: 16px 32px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 300;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: var(--gold); color: var(--cream); }
.link-underline {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 300;
  border-bottom: 1px solid var(--ink-35);
  padding-bottom: 4px;
  transition: border-color .2s, color .2s;
}
.link-underline:hover { color: var(--gold); border-color: var(--gold); }
.link-underline.on-dark { color: var(--cream); border-color: var(--cream-32); }
.link-underline.on-dark:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- site header ---------- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px var(--gutter);
  border-bottom: 1px solid var(--ink-16);
  background: var(--cream);
  position: relative;
  z-index: 40;
}
.site-header.on-dark {
  background: var(--charcoal);
  color: var(--cream);
  border-bottom-color: var(--cream-18);
}
.site-header .logo-mark {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 44px;
  border: 1px dashed var(--ink-35);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: center;
  padding: 0 10px;
}
.site-header.on-dark .logo-mark { border-color: var(--cream-32); color: var(--cream-55); }
.site-header .logo-mark:has(img) { border: 0; padding: 0; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.main-nav { display: flex; gap: 32px; }
.main-nav a {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 300;
  color: inherit;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav a:hover { color: var(--gold); }
.main-nav a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }

.header-cta { justify-self: end; }

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-35);
}
.site-header.on-dark .nav-toggle { border-color: var(--cream-32); }
.nav-toggle-bars { position: relative; width: 16px; height: 10px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform .25s, opacity .25s, top .25s;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; }
.nav-toggle-bars span:nth-child(3) { top: 100%; }
.nav-open .nav-toggle-bars span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { top: 50%; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header .logo-mark { width: 150px; height: 38px; font-size: 8px; grid-column: 1; justify-self: start; }
  .nav-toggle { display: inline-flex; grid-column: 3; justify-self: end; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    height: 100vh;
    background: var(--charcoal);
    color: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 100px 32px 32px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 30;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { padding: 14px 0; font-size: 13px; width: 100%; border-bottom: 1px solid var(--cream-18); }
  .main-nav a[aria-current="page"] { border-bottom-color: var(--gold); }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(8, 10, 12, .45);
    opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 20;
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* ---------- site footer ---------- */
.site-footer {
  padding: 48px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ink-16);
}
.site-footer.on-dark { border-top-color: var(--cream-18); color: var(--cream); }
.site-footer .footer-brand { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer .footer-brand .logo-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.site-footer .footer-note { font-size: 11px; letter-spacing: .16em; font-weight: 300; color: var(--ink-55); }
.site-footer.on-dark .footer-note { color: var(--cream-55); }
.site-footer .footer-nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 300; }
.footer-simple {
  padding: 30px var(--gutter);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--cream-18);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream-55);
}

/* ---------- hero (Home) ----------
   Todas las capas (foto, degradado, texto) se apilan en la misma celda
   de grid: el alto de la sección es el máximo entre "lo que mide la
   foto a lo ancho completo" y "lo que necesita el bloque de texto".
   Así la foto nunca se recorta Y el texto nunca se corta, sin importar
   cuánto texto haya o qué proporción tenga la imagen. Si no hay <img>
   todavía, min-height deja un placeholder visible. */
.hero-banner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 320px;
  background: var(--beige);
}
.hero-banner-media,
.hero-banner-overlay,
.hero-banner-content {
  grid-area: 1 / 1;
}
.hero-banner-media { line-height: 0; align-self: start; }
.hero-banner-media img { width: 100%; height: auto; display: block; }
.hero-banner-overlay {
  background: linear-gradient(180deg, rgba(8,10,12,.05) 0%, rgba(8,10,12,.4) 40%, rgba(8,10,12,.88) 100%);
  pointer-events: none;
}
.hero-banner-content {
  z-index: 2;
  color: var(--cream);
  max-width: 620px;
  width: 100%;
  padding: 48px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
}
.hero-banner-content h1 { font-size: 42px; line-height: 1.16; letter-spacing: -.01em; text-wrap: pretty; }
.hero-banner-content p { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--cream-85); text-wrap: pretty; }
.hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 4px; }

@media (max-width: 860px) {
  .hero-banner { min-height: 260px; }
  .hero-banner-content { padding: 28px 24px 32px; max-width: none; }
  .hero-banner-content h1 { font-size: 32px; margin-top: 44px; }
}

/* ---------- generic section paddings ---------- */
.section { padding: 84px var(--gutter); }
.section-tight { padding: 56px var(--gutter); }
@media (max-width: 860px) {
  .section { padding: 56px var(--gutter); }
  .section-tight { padding: 40px var(--gutter); }
}

/* ---------- lines / category grid (Home) ---------- */
.lines-section { background: var(--beige); }
.lines-head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin-bottom: 36px;
}
.lines-head h2 { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 300; }
.lines-head .season { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 300; color: var(--ink-70); }
.lines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.lines-card { display: flex; flex-direction: column; gap: 14px; }
.lines-card .media { aspect-ratio: 4 / 5; width: 100%; overflow: hidden; background: rgba(30,36,41,.08); }
.lines-card .media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.lines-card:hover .media img { transform: scale(1.04); }
.lines-card .meta {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(30,36,41,.28); padding-top: 10px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 300;
}
.lines-card .meta span:last-child { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-70); }
@media (max-width: 860px) {
  .lines-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ---------- trust strip (Home) ---------- */
.trust-strip { background: var(--charcoal); color: var(--cream); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.trust-item { display: flex; flex-direction: column; gap: 16px; }
.trust-icon { width: 24px; height: 24px; border: 1px solid var(--gold); }
.trust-icon.circle { border-radius: 50%; }
.trust-icon.diamond { transform: rotate(45deg); }
.trust-icon.line { width: 24px; height: 1px; background: var(--gold); border: 0; margin: 12px 0; }
.trust-item h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 300; }
.trust-item p { font-size: 13px; line-height: 1.7; font-weight: 200; color: var(--cream-55); }
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ---------- process (Home) ---------- */
.process-strip { background: var(--navy); color: var(--cream); }
.process-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.process-media { aspect-ratio: 16 / 9; width: 100%; border: 1px solid rgba(198,146,35,.35); background: rgba(244,240,232,.05); overflow: hidden; }
.process-media img { width: 100%; height: 100%; object-fit: cover; }
.process-copy { display: flex; flex-direction: column; gap: 22px; }
.process-copy h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.01em; }
.process-copy p { font-size: 15px; line-height: 1.8; font-weight: 200; color: var(--cream-85); max-width: 460px; text-wrap: pretty; }
.why-list { display: flex; flex-direction: column; margin-top: 6px; }
.why-row { padding: 16px 0; border-bottom: 1px solid var(--cream-18); }
.why-row:first-child { padding-top: 0; }
.why-row dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 300; margin-bottom: 6px; }
.why-row dd { font-size: 14px; line-height: 1.7; font-weight: 200; color: var(--cream-85); max-width: 460px; }
@media (max-width: 860px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---------- page hero banners (non-home pages) ---------- */
.page-head { padding: 64px var(--gutter) 32px; display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: 40px; letter-spacing: -.01em; }
.page-head p { font-size: 14px; font-weight: 300; color: var(--ink-70); }
.page-head.on-dark p { color: var(--cream-70, rgba(244,240,232,.75)); }

/* ---------- collection carousels ---------- */
.cat-carousel + .cat-carousel { margin-top: 56px; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.cat-head h2 { font-size: 18px; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.cat-arrows { display: flex; gap: 8px; }
.cat-arrow {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-35); font-size: 16px; transition: border-color .2s, color .2s, opacity .2s;
}
.cat-arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.cat-arrow:disabled { opacity: .3; cursor: not-allowed; }
.cat-viewport { overflow: hidden; }
.cat-track { display: flex; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.cat-page { flex: 0 0 100%; display: flex; gap: 20px; }
.cat-item { flex: 0 0 calc(25% - 15px); min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cat-photo { aspect-ratio: 4 / 5; width: 100%; background: rgba(30,36,41,.08); overflow: hidden; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; }
.cat-caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-name, .cat-price {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 200;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.cat-name {
  font-size: 14px;
  color: var(--ink);
  height: 2.6em;
  overflow: hidden;
  overflow-wrap: break-word;
}
.cat-price { font-size: 14px; color: var(--ink-55); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) {
  .cat-page { flex-wrap: wrap; row-gap: 28px; }
  .cat-item { flex-basis: calc(50% - 10px); }
}

.quote-bar {
  background: var(--beige);
  padding: 36px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.quote-bar .count { font-size: 14px; font-weight: 300; letter-spacing: .02em; }
.quote-bar .btn { border-color: var(--charcoal); }
.quote-bar .btn:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* ---------- mayoristas ---------- */
.wholesale-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; }
.wholesale-intro h1 { font-size: 40px; line-height: 1.15; }
.wholesale-media { aspect-ratio: 4 / 5; width: 100%; margin-top: 32px; overflow: hidden; background: rgba(30,36,41,.08); }
.wholesale-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wholesale-intro p { font-size: 15px; line-height: 1.8; font-weight: 300; color: var(--ink-80, rgba(30,36,41,.82)); max-width: 400px; text-wrap: pretty; }
.terms-list { display: flex; flex-direction: column; }
.terms-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  padding: 20px 0; border-top: 1px solid rgba(30,36,41,.3);
}
.terms-row:last-child { border-bottom: 1px solid rgba(30,36,41,.3); }
.terms-row dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 300; }
.terms-row dd { font-size: 14px; line-height: 1.7; font-weight: 300; color: rgba(30,36,41,.85); }
@media (max-width: 860px) {
  .wholesale-intro { grid-template-columns: 1fr; gap: 32px; }
  .terms-row { grid-template-columns: 1fr; gap: 6px; }
}

.form-section { background: var(--cream); }
.form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.form-intro { display: flex; flex-direction: column; gap: 18px; }
.form-intro h2 { font-size: 28px; line-height: 1.2; }
.form-intro p { font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--ink-70); }
.form-rule { width: 52px; height: 1px; background: var(--gold); margin-top: 4px; }
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; gap: 32px; }
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-55); }
.field input, .field textarea {
  border: 0; border-bottom: 1px solid var(--ink-35); background: transparent;
  padding: 10px 0; font-family: inherit; font-size: 15px; font-weight: 300; color: var(--ink); outline: none;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { resize: none; }
.on-dark .field label { color: var(--cream-55); }
.on-dark .field input, .on-dark .field textarea { border-bottom-color: var(--cream-32); color: var(--cream); }
.on-dark .field input:focus, .on-dark .field textarea:focus { border-color: var(--gold); }
.field-submit { grid-column: 1 / -1; padding-top: 4px; }
.form-note { font-size: 11px; color: var(--ink-55); margin-top: 4px; }
.on-dark .form-note { color: var(--cream-55); }
@media (max-width: 600px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ---------- nosotros ---------- */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-intro h1 { font-size: 44px; line-height: 1.15; letter-spacing: -.01em; }
.about-copy { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; }
.about-copy p { font-size: 15px; line-height: 1.85; font-weight: 300; color: rgba(30,36,41,.8); text-wrap: pretty; }
@media (max-width: 860px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
}

.about-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-gallery .media { aspect-ratio: 4 / 5; overflow: hidden; background: rgba(30,36,41,.08); }
.about-gallery .media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .about-gallery { grid-template-columns: 1fr 1fr; }
  .about-gallery .media:last-child { grid-column: 1 / -1; }
}

.values-strip { background: var(--beige); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.value-item { display: flex; flex-direction: column; gap: 14px; }
.value-item .num { font-size: 38px; font-weight: 200; color: var(--navy); }
.value-item .rule { width: 100%; height: 1px; background: var(--gold); }
.value-item h3 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 300; }
.value-item p { font-size: 13px; line-height: 1.8; font-weight: 300; color: rgba(30,36,41,.8); }
@media (max-width: 700px) {
  .values-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- contacto ---------- */
.contact-hero { background: var(--charcoal); color: var(--cream); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.contact-grid h1 { font-size: 44px; line-height: 1.14; letter-spacing: -.01em; }
.contact-rule { width: 52px; height: 1px; background: var(--gold); }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.contact-details .label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream-55); margin-bottom: 6px; }
.contact-details .value { font-size: 18px; font-weight: 200; line-height: 1.5; }
.contact-details a.value:hover { color: var(--gold); }
.contact-form-col { display: flex; flex-direction: column; gap: 28px; }
.contact-map { aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--cream-32); overflow: hidden; }
.contact-map img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- forms JS states ---------- */
.form-status { font-size: 12px; letter-spacing: .04em; margin-top: 6px; display: none; }
.form-status.is-visible { display: block; }
.form-status.is-error { color: #B23B3B; }
.on-dark .form-status.is-error { color: #E08A8A; }