/* ==========================================================================
   MARCA · Nati Castaño — sistema de identidad visual v1.0 (septiembre 2026)
   Fuente: Manual de marca. Este archivo es la ÚNICA definición de la paleta.

   Reglas que no se rompen (Manual, pág. 8, 9, 10, 14):
   - Siete colores y ni uno más. Tinta escribe, musgo sostiene: nunca se invierten.
   - Cuero solo en etiquetas, filetes cortos, números de sección, hover de botones.
     NUNCA sobre musgo (contraste 2.0:1). Sobre musgo el acento es hueso.
   - Cero sombras, cero border-radius, cero gradientes, cero blur, cero emojis.
   - Máximo dos bloques musgo por pieza.
   - Títulos en Fraunces 300/400, nunca en mayúsculas ni negrita. Cuerpo en Inter.
   - Texto alineado a la izquierda (no centrado en párrafos largos, no justificado).
   ========================================================================== */

:root{
  --lino:#FAF8F5;    /* fondo principal */
  --arena:#F2EDE7;   /* secciones alternas */
  --hueso:#DDD3C8;   /* filetes · texto sobre musgo */
  --topo:#6B635C;    /* texto secundario */
  --cuero:#7D5D45;   /* acento único sobre claro */
  --musgo:#504D3A;   /* bloques profundos · botones */
  --tinta:#1F1D1B;   /* solo texto, nunca fondo */
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lino);color:var(--tinta);
  font-family:var(--sans);font-weight:300;
  font-size:1.0625rem;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--musgo);color:var(--lino)}
a{color:var(--cuero)}
a:hover{color:var(--musgo)}
img{display:block;max-width:100%}
.page{width:100%;overflow-x:hidden}
.oculto,.hidden,[hidden]{display:none !important}

/* ---------- estructura ---------- */
.sec{padding:80px 0}
.sec-tight{padding:64px 0}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.wrap-estrecho{max-width:720px;margin:0 auto;padding:0 48px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:40px}
.a-l{grid-column:1 / span 7}
.a-r{grid-column:6 / span 7}
.bg-arena{background:var(--arena)}
.bg-musgo{background:var(--musgo)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:22px}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:28px}
.center{text-align:center}
.center h2,.center p{margin-left:auto;margin-right:auto}

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:0.6875rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--cuero);
  margin:0 0 20px;line-height:1.5;
}
.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.75rem,5.2vw,4.25rem);line-height:1.06;letter-spacing:-0.025em;margin:0;
}
h1,h2{font-weight:300}
h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.18;letter-spacing:-0.015em;
  margin:0 0 32px;max-width:22ch;
}
h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;line-height:1.35;margin:0}
p{max-width:60ch;margin:0 0 16px}
p:last-child{margin-bottom:0}
.lead{font-size:1.2rem;line-height:1.55}
.muted{color:var(--topo)}
.it{font-family:var(--serif);font-weight:300;font-style:italic}
.serif{font-family:var(--serif);font-weight:300}
.rule{height:1px;background:var(--hueso);border:0;margin:0;width:100%}
.tick{width:26px;height:1px;background:var(--cuero);flex:none;margin-top:13px}
.tick-h{background:var(--hueso)}
u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- botón ---------- */
.btn{
  display:inline-block;background:var(--musgo);color:var(--lino);
  padding:18px 40px;border:0;border-radius:0;text-decoration:none;
  font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:0.12em;text-transform:uppercase;line-height:1.2;
  transition:background 400ms ease, color 400ms ease;cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--cuero);color:var(--lino)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--musgo)}
.btn-suave{
  background:transparent;color:var(--musgo);
  border:1px solid var(--hueso);padding:12px 24px;
}
.btn-suave:hover,.btn-suave:focus-visible{background:var(--arena);color:var(--musgo)}
a.btn-inv,.on-musgo a.btn-inv{background:var(--lino);color:var(--musgo)}
a.btn-inv:hover,a.btn-inv:focus-visible,.on-musgo a.btn-inv:hover,.on-musgo a.btn-inv:focus-visible{background:var(--hueso);color:var(--musgo)}
:focus-visible{outline:1px solid var(--cuero);outline-offset:4px}
.on-musgo :focus-visible{outline-color:var(--hueso)}
.btn-row{margin-top:40px}

/* ---------- sobre musgo ---------- */
.on-musgo{color:var(--lino)}
.on-musgo .eyebrow{color:var(--hueso)}
.on-musgo .rule{background:var(--hueso)}
.on-musgo .muted{color:var(--hueso)}
.on-musgo a:not(.btn){color:var(--hueso)}
.on-musgo a:not(.btn):hover{color:var(--lino)}

/* ---------- formularios ---------- */
.campo{margin-bottom:20px}
.campo label,.etiqueta{
  display:block;font-family:var(--sans);font-weight:500;font-size:0.6875rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--topo);margin:0 0 8px;line-height:1.5;
}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--hueso);border-radius:0;
  background:var(--lino);color:var(--tinta);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.4;
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B635C' stroke-width='1'/></svg>");
  background-position:calc(100% - 14px) 50%;background-repeat:no-repeat;padding-right:38px;
}
input::placeholder{color:var(--topo);opacity:.7}
input:focus,select:focus,textarea:focus{outline:1px solid var(--cuero);outline-offset:0;border-color:var(--cuero)}
.check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 0}
.check input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--musgo)}
.check label{
  display:block;margin:0;font-family:var(--sans);font-weight:300;font-size:0.875rem;
  letter-spacing:0;text-transform:none;color:var(--topo);line-height:1.55;cursor:pointer;
}
.pista{font-size:0.8125rem;color:var(--topo);line-height:1.55;margin:8px 0 0}

/* Avisos: sin color de alerta (no existe en la paleta). Se distinguen por la palabra y el filete. */
.aviso{
  padding:14px 16px;background:var(--arena);border:0;border-left:2px solid var(--cuero);
  font-size:0.9375rem;line-height:1.55;color:var(--tinta);margin:0 0 18px;max-width:none;
}
.aviso.bien{border-left-color:var(--musgo)}

/* ---------- tarjeta sobria (sin sombra ni radio) ---------- */
.tarjeta{background:var(--lino);border:1px solid var(--hueso);padding:40px}
.bg-arena .tarjeta{background:var(--lino)}

/* ---------- pie ---------- */
.footer{background:var(--musgo);color:var(--hueso);padding:28px 0;font-size:0.9375rem}
.footer a{color:var(--hueso)}
.footer a:hover{color:var(--lino)}
.pie-claro{padding:32px 0;font-size:0.8125rem;color:var(--topo);border-top:1px solid var(--hueso)}
.pie-claro a{color:var(--topo)}
.pie-claro a:hover{color:var(--musgo)}

/* ---------- reveal (único movimiento permitido) ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity 700ms ease-out,transform 700ms ease-out}
.rv.is-in{opacity:1;transform:none}

@media (max-width:980px){
  .cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .sec,.sec-tight{padding:56px 0}
  .wrap,.wrap-estrecho{padding:0 24px}
  .a-l,.a-r{grid-column:1 / -1}
  .cols2,.cols4{grid-template-columns:1fr}
  .btn{width:100%;text-align:center;padding:18px 24px}
  .btn-row{margin-top:28px}
  h2{margin-bottom:24px}
  .tarjeta{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}