/* ===== CANTERA STUDIO — shared stylesheet ===== */

:root{
  /* ---- Brandbook palette (Cantera Studio) ---- */
  --rosa-neutro:#EAE1E4;
  --rosa-cantera:#EAD6DA;
  --amarillo-neutro:#F2EADF;
  --amarillo-cantera:#E4DAC4;
  --verde-neutro:#BCC7C2;
  --verde-cantera:#6F8164;
  --verde-cantera-deep:#56624D;
  --gris-cantera:#676971;
  --negro-cantera:#2F2B29;
  --grana:#BE1622; /* acento específico — usar con moderación, nunca como color dominante */

  /* ---- Working aliases used throughout the stylesheet ---- */
  --beige:var(--rosa-neutro);
  --beige-light:var(--rosa-neutro);
  --beige-deep:var(--rosa-cantera);
  --verde:var(--verde-cantera);
  --verde-deep:var(--verde-cantera-deep);
  --rosa:var(--rosa-cantera);
  --gris:var(--gris-cantera);
  --negro:var(--negro-cantera);

  --font-display:'Fraunces', serif;
  --font-body:'Archivo', sans-serif;
  --font-mono:'Archivo', sans-serif; /* alias kept for existing markup — brandbook uses 2 typefaces only */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  background:var(--beige);
  color:var(--negro);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1920px;margin:0 auto;padding:0 48px;}

.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde-deep);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--verde-deep);flex-shrink:0;}
.eyebrow.on-dark{color:var(--rosa-cantera);}
.eyebrow.on-dark::before{background:var(--grana);}
.eyebrow.accent::before{background:var(--grana);}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(234,225,228,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(46,43,40,0.08);
}
header.on-dark{background:rgba(46,43,40,0.92);border-bottom-color:rgba(239,232,218,0.12);}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;max-width:1920px;margin:0 auto;flex-wrap:wrap;gap:14px;}
.nav-mark{display:flex;align-items:center;}
.nav-mark img{height:23px;width:auto;display:block;}
header.on-dark .nav-mark{color:var(--beige-light);}
.nav-links{display:flex;gap:30px;list-style:none;flex-wrap:wrap;}
.nav-links a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;transition:opacity .2s ease;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
header.on-dark .nav-links a{color:var(--beige-light);}
.nav-cta{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--verde);color:var(--beige-light);padding:9px 16px;border-radius:2px;
  transition:background .2s ease;
}
.nav-cta:hover{background:var(--verde-deep);}

/* ---------- SECTIONS / TYPE ---------- */
section{padding:96px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.08;}
h1,h2,h3{font-family:var(--font-display);}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.btn-primary{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--negro);color:var(--beige-light);padding:16px 26px;border-radius:2px;
  display:inline-block;transition:background .2s ease, transform .2s ease;
}
.btn-primary:hover{background:var(--verde-deep);transform:translateY(-2px);}
.btn-ghost{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--negro);color:var(--negro);padding:16px 26px;border-radius:2px;
  display:inline-block;transition:border-color .2s ease, color .2s ease;
}
.btn-ghost:hover{border-color:var(--verde-deep);color:var(--verde-deep);}

/* ---------- PLACEHOLDER MEDIA PANELS ---------- */
/* Used wherever real photography/video isn't produced yet. Honest, styled, never pretends to be final content. */
.media-panel{
  position:relative;overflow:hidden;border-radius:2px;
  display:flex;align-items:flex-end;
  background:linear-gradient(135deg, var(--rosa-cantera) 0%, var(--amarillo-cantera) 45%, var(--verde-cantera) 100%);
}
.media-panel::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,43,40,0.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(46,43,40,0.14), transparent 50%);
}
.media-panel .tag{
  position:relative;z-index:1;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--beige-light);background:rgba(46,43,40,0.55);padding:8px 14px;margin:16px;border-radius:2px;
}
.media-panel.tone-a{background:linear-gradient(135deg, var(--verde-cantera) 0%, var(--negro-cantera) 100%);}
.media-panel.tone-b{background:linear-gradient(135deg, var(--rosa-cantera) 0%, var(--rosa-neutro) 100%);}
.media-panel.tone-c{background:linear-gradient(135deg, var(--amarillo-cantera) 0%, var(--rosa-neutro) 55%, var(--verde-cantera) 100%);}
.media-panel.tone-d{background:linear-gradient(135deg, var(--gris-cantera) 0%, var(--negro-cantera) 100%);}

/* ---------- FACETED SYMBOL (animated) ---------- */
.facet-symbol{width:100%;height:100%;overflow:visible;}
.facet-symbol polygon{
  fill:var(--verde-cantera); fill-opacity:.14; stroke:var(--rosa-neutro); stroke-width:2; stroke-linejoin:round;
}
.facet-symbol.on-light polygon{stroke:var(--negro-cantera); fill-opacity:.08;}

/* ---------- FOOTER ---------- */
footer{
  background:var(--negro);color:rgba(239,232,218,0.6);
  padding:36px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;
}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer .foot-mark{display:flex;align-items:center;}
footer .foot-mark img{height:19px;width:auto;display:block;}
footer .foot-links{display:flex;gap:28px;}
footer .foot-links a{
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:color .2s ease;
}
footer .foot-links a:hover{color:var(--grana);}

@media (max-width:820px){
  .nav-links{order:3;width:100%;justify-content:flex-start;}
}