/* ============================================================
   Siam interior — hoja de estilos
   Tipografía: Newsreader + Noto Serif Thai
   Paleta: papel / tinta / terracota (acción) / azul Siam / oro mate
   ============================================================ */

/* --- Fuentes autoalojadas (RGPD + velocidad). Variables: un archivo cubre todos los pesos. --- */
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight:300 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Noto Serif Thai";
  src:url("../fonts/NotoSerifThai.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  --papel:        #F4EFE4;   /* fondo, papel cálido */
  --papel-hondo:  #ECE4D3;   /* bloques diferenciados */
  --tinta:        #211C16;   /* texto, negro cálido */
  --tinta-suave:  #5C5448;   /* texto secundario */
  --terracota:    #9C3D2A;   /* acción: CTA */
  --azul-siam:    #1F4868;   /* travesía, vínculos, divisorias */
  --oro:          #9A7B3F;   /* oro mate de manuscrito: acentos thai y ๏ */
  --linea:        #D8CFBC;   /* hairlines */

  /* escala fluida de espaciado vertical */
  --sec: clamp(3.4rem, 9vw, 6.8rem);
  /* margen lateral fluido */
  --gut: clamp(20px, 5.5vw, 30px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--papel);
  /* textura de papel muy sutil (SVG en línea, sin dependencias) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color:var(--tinta);
  font-family:"Newsreader","Noto Serif Thai", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(17px, 1.1vw + 14px, 19px);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{
  max-width:660px;
  margin:0 auto;
  padding:0 var(--gut);
}

/* escritura tailandesa como acento */
.th{ font-family:"Noto Serif Thai", serif; color:var(--oro); font-weight:500; }

/* ---------- marca ๏ y eyebrows ---------- */
.mark{
  font-family:"Noto Serif Thai", serif;
  line-height:1;
  color:var(--oro);
  text-align:center;
}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--azul-siam);
}

/* separador thai: ๏ centrado entre hairlines */
.sep{
  display:flex;
  align-items:center;
  gap:1.1rem;
  max-width:660px;
  margin:0 auto;
  padding:0 var(--gut);
  color:var(--oro);
}
.sep::before,.sep::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--linea);
}
.sep span{
  font-family:"Noto Serif Thai", serif;
  font-size:1.5rem;
  line-height:1;
  transform:translateY(-.05em);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(8vh,11vh,140px) 0 clamp(6vh,8vh,96px);
  text-align:center;
}
/* marca de agua: สยาม (Siam) */
.hero .watermark{
  position:absolute;
  top:52%; left:50%;
  transform:translate(-50%,-50%);
  font-family:"Noto Serif Thai", serif;
  font-weight:600;
  font-size:clamp(7rem, 34vw, 19rem);
  color:var(--oro);
  opacity:.06;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }
.hero .mark{ font-size:clamp(2rem,7vw,2.5rem); }
.hero .eyebrow{
  display:block;
  margin:1.1rem 0 clamp(1.8rem,5vw,2.7rem);
}
.hero h1{
  font-weight:400;
  font-size:clamp(1.95rem, 6.4vw, 3.45rem);
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0 auto;
  max-width:13.5em;
  text-wrap:balance;
}
.hero h1 .vuelta{
  display:block;
  font-style:italic;
  font-weight:300;
  margin-top:.18em;
}
.hero .sub{
  margin:clamp(1.7rem,4.5vw,2.4rem) auto 0;
  max-width:30em;
  color:var(--tinta-suave);
  font-size:1.06rem;
  line-height:1.6;
}

/* ---------- manifiesto ---------- */
.manifiesto{ padding:var(--sec) 0; }
.manifiesto p{
  font-size:clamp(1.1rem,2.6vw,1.22rem);
  line-height:1.66;
  margin:0;
}
.manifiesto .remate{
  display:block;
  margin-top:1.1rem;
  font-style:italic;
  color:var(--azul-siam);
}

/* ---------- filtro ---------- */
.filtro{
  background:var(--papel-hondo);
  padding:var(--sec) 0;
}
.filtro .cols{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,5vw,48px);
}
.filtro h2{
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 .55rem;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--azul-siam);
}
.filtro .glosa{
  margin:0 0 1.1rem;
  font-style:italic;
  color:var(--tinta-suave);
  font-size:.95rem;
}
.filtro h2 .th{ text-transform:none; letter-spacing:0; font-size:1.05em; margin-left:.5em; }
.filtro .no h2{ border-bottom-color:var(--terracota); }
.filtro ul{ list-style:none; margin:0; padding:0; }
.filtro li{
  font-size:1.02rem;
  line-height:1.5;
  color:var(--tinta-suave);
  padding:.55rem 0;
  border-top:1px solid var(--linea);
}
.filtro li:first-child{ border-top:0; }
.filtro .nota{
  grid-column:1 / -1;
  margin:clamp(1.6rem,4vw,2.4rem) 0 0;
  font-style:italic;
  color:var(--tinta-suave);
  font-size:1.02rem;
}

/* ---------- lista de interés ---------- */
.lista{ padding:var(--sec) 0 calc(var(--sec) * .8); text-align:center; }
.lista .eyebrow{ display:block; margin-bottom:1.5rem; }
.lista h2{
  font-weight:400;
  font-size:clamp(1.55rem,4.6vw,2.2rem);
  line-height:1.22;
  margin:0 auto 1.4rem;
  max-width:16em;
  text-wrap:balance;
}
.lista p{
  color:var(--tinta-suave);
  max-width:30em;
  margin:0 auto clamp(1.9rem,5vw,2.6rem);
  font-size:1.04rem;
}

form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:440px;
  margin:0 auto;
}
input[type="email"]{
  flex:1 1 200px;
  min-width:0;
  font-family:inherit;
  font-size:1rem;
  color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:2px;
  padding:.9rem 1rem;
  min-height:50px;
  transition:border-color .18s ease;
}
input[type="email"]::placeholder{ color:#A89E8C; }
input[type="email"]:focus{
  outline:2px solid var(--azul-siam);
  outline-offset:1px;
  border-color:var(--azul-siam);
}
button{
  flex:0 0 auto;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  color:var(--papel);
  background:var(--terracota);
  border:0;
  border-radius:2px;
  padding:.9rem 1.6rem;
  min-height:50px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, transform .12s ease;
}
button:hover{ background:#85311F; }
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:2px solid var(--azul-siam); outline-offset:2px; }

.privacidad{
  margin:1.5rem auto 0;
  font-size:.88rem;
  color:var(--tinta-suave);
  font-style:italic;
}
.gracias{
  display:none;
  max-width:30em;
  margin:0 auto;
  font-size:1.16rem;
  line-height:1.55;
}
.gracias.visible{ display:block; }
form.oculto,.privacidad.oculto{ display:none; }

/* ---------- pie ---------- */
footer{
  border-top:1px solid var(--linea);
  padding:calc(var(--sec) * .8) 0 var(--sec);
  text-align:center;
}
footer .mark{ font-size:1.7rem; margin-bottom:1.3rem; }
footer p{
  color:var(--tinta-suave);
  max-width:26em;
  margin:0 auto 1.3rem;
  font-size:1.02rem;
  line-height:1.55;
}
footer a{
  color:var(--azul-siam);
  text-decoration:none;
  border-bottom:1px solid var(--azul-siam);
  padding-bottom:1px;
}
footer a:hover{ color:var(--terracota); border-bottom-color:var(--terracota); }
footer .cierre-th{
  display:block;
  margin-top:1.7rem;
  font-family:"Noto Serif Thai", serif;
  color:var(--oro);
  font-size:1.9rem;
  line-height:1;
  opacity:.8;
}

/* ---------- entrada suave ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s ease; }

/* ---------- responsive ---------- */
@media (min-width:600px){
  .filtro .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:380px){
  form{ flex-direction:column; }
  button{ width:100%; }
  .hero .watermark{ opacity:.05; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none; }
  button,input{ transition:none; }
}