/* ==========================================================
   Decopied — Valle de Aconcagua
   Paleta del valle: arcilla, cerro al atardecer, río, greda
   quemada, ocre del cerro seco, canto rodado.
   El color va en planos grandes; el dibujo, en una sola tinta.
   Los colores están todos acá abajo: cambie el valor y cambia
   en toda la página.
   ========================================================== */

:root{
  /* ---- color ---- */
  --arcilla:#e9d6b4;
  --crema:#f4e9d2;
  --crema-2:#faf3e4;
  --basalto:#241d1b;
  --violeta:#402745;
  --violeta-claro:#5d3a60;
  --turquesa:#12585c;
  --turquesa-2:#0c3f42;
  --turquesa-claro:#7fc3bd;
  --cielo:#2f9a94;
  --ocre:#c9891f;
  --ocre-claro:#e8b23f;
  --rojo:#9e3a24;
  --rojo-vivo:#a83c22;
  --rosa:#c98a76;
  --gris-canto:#a9a49a;
  --tierra:#54432e;        /* texto secundario sobre arcilla */

  /* ---- tipografía ---- */
  --serif:"Alegreya",Georgia,serif;
  --sans:"Alegreya Sans","Helvetica Neue",Arial,sans-serif;
  --caps:"Alegreya Sans SC","Alegreya Sans",Arial,sans-serif;

  /* ---- ritmo vertical ---- */
  --aire-franja:clamp(3rem,7vw,5.6rem);
  --aire-lado:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--ocre) var(--arcilla);
}

body{
  margin:0;
  background:var(--arcilla);
  color:var(--basalto);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.98rem + .25vw,1.12rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
a{ color:inherit; }
p{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }

::selection{ background:var(--ocre-claro); color:var(--basalto); }

:focus-visible{ outline:3px solid var(--basalto); outline-offset:3px; }
.franja--violeta :focus-visible,
.franja--turquesa :focus-visible,
.franja--rojo :focus-visible,
.franja--basalto :focus-visible{ outline-color:var(--ocre-claro); }

.salto{
  position:absolute; left:-9999px; top:0; z-index:30;
  background:var(--basalto); color:var(--crema);
  padding:.6rem 1rem;
  font-family:var(--caps); font-size:.95rem;
}
.salto:focus{ left:.75rem; top:.75rem; }

/* ==========================================================
   Franjas: la página es un tejido de bandas
   ========================================================== */
.franja{ position:relative; }
.franja--arcilla{ background:var(--arcilla); color:var(--basalto); }
.franja--crema{ background:var(--crema-2); color:var(--basalto); }
.franja--violeta{ background:var(--violeta); color:var(--crema); }
.franja--turquesa{ background:var(--turquesa); color:var(--crema); }
.franja--rojo{ background:var(--rojo); color:var(--crema); }
.franja--basalto{ background:var(--basalto); color:var(--arcilla); }

/* textura de greda apenas insinuada en las bandas claras */
.franja--arcilla::before,
.franja--crema::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(36,29,27,.055) 1px, transparent 1.1px);
  background-size:22px 22px;
}
.franja > *{ position:relative; }

.contenedor{
  max-width:1180px; margin:0 auto;
  padding:var(--aire-franja) var(--aire-lado);
}

.greca{ display:block; }

/* ==========================================================
   Tipografía
   ========================================================== */
.rotulito{
  margin:0 0 .9rem;
  font-family:var(--caps); font-weight:700;
  font-size:1rem; letter-spacing:.07em;
  color:var(--rojo);
}
.franja--violeta .rotulito,
.franja--turquesa .rotulito{ color:var(--ocre-claro); }
.franja--rojo .rotulito{ color:var(--arcilla); }

h1{
  margin:0 0 1.5rem;
  font-family:var(--serif); font-weight:800;
  font-size:clamp(2.4rem,1.35rem + 4.2vw,4.4rem);
  line-height:1.01;
  letter-spacing:-.018em;
}
h1 em{
  font-style:italic; font-weight:800;
  color:var(--rojo);
}
h2{
  margin:0 0 2.2rem;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);
  line-height:1.08;
  letter-spacing:-.014em;
}
h3{
  margin:0 0 .5rem;
  font-family:var(--serif); font-weight:700;
  font-size:1.34rem; line-height:1.18;
}

/* ==========================================================
   Portada
   ========================================================== */
.barra{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.3rem 2rem; flex-wrap:wrap;
  padding-top:clamp(1.3rem,3vw,2.1rem);
  padding-bottom:0;
}
.marca{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(1.55rem,1.2rem + 1.4vw,2.15rem);
  letter-spacing:.01em; line-height:1;
  text-decoration:none;
}
.sitio{
  margin:0;
  font-family:var(--caps); font-weight:500;
  font-size:1.02rem; letter-spacing:.05em;
  color:var(--tierra);
}

.portada{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.96fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding-top:clamp(1.4rem,3.5vw,2.6rem);
}
.portada-texto{ max-width:34rem; }
.entrada{
  margin:0 0 2.3rem;
  max-width:44ch;
  font-size:1.09rem;
}

.botones{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0; }
.boton{
  display:inline-block;
  padding:.84rem 1.75rem;
  border-radius:999px;
  border:2px solid var(--basalto);
  background:var(--basalto); color:var(--crema);
  font-family:var(--caps); font-weight:700;
  font-size:1.04rem; letter-spacing:.035em;
  text-decoration:none;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease;
}
.boton:hover{ background:var(--rojo); border-color:var(--rojo); }
.boton--linea{ background:transparent; color:var(--basalto); }
.boton--linea:hover{ background:var(--basalto); border-color:var(--basalto); color:var(--crema); }

/* ==========================================================
   La rueda del valle
   ========================================================== */
.tambor{ margin:0; }
.tambor-rueda{ position:relative; }
.rueda{ display:block; width:100%; height:auto; }

.plato{ fill:var(--crema); }
.canto-plato{ fill:none; stroke:var(--basalto); stroke-width:2.5; }
.filete{ fill:none; stroke:var(--basalto); stroke-width:.8; }
.cerro-a{ fill:var(--ocre); }
.cerro-b{ fill:var(--rojo-vivo); }
.cerro-ojo{ fill:var(--crema); }
.semilla{ fill:var(--basalto); }
.rio-fondo{ fill:var(--turquesa); }
.rio-onda{ fill:none; stroke:var(--crema); stroke-width:2.6; }
.rio-onda--fina{ stroke:var(--turquesa-claro); stroke-width:1.3; }
.piedra-rio{ stroke:var(--turquesa-2); stroke-width:1.4; }
.piedra-rio--a{ fill:var(--rosa); }
.piedra-rio--b{ fill:var(--gris-canto); }
.piedra-rio--c{ fill:var(--crema); }
.rombo{ fill:var(--violeta); }
.rombo-ojo{ fill:var(--crema); }
.cielo{ fill:var(--cielo); }
.sol{ fill:var(--ocre-claro); }
.sol-halo{ fill:none; stroke:var(--ocre-claro); stroke-width:1.6; }
.sol-halo--punteado{ stroke-dasharray:3 8; }
.sol-rayo{ stroke:var(--ocre-claro); stroke-width:2; stroke-linecap:round; }
.cerro-fondo{ fill:var(--violeta-claro); }
.cerro-medio{ fill:var(--violeta); }
.cerro-frente{ fill:var(--basalto); }
.trama circle{ fill:var(--crema); opacity:.28; }
.agua{ fill:var(--turquesa); }
.agua-linea{ fill:none; stroke:var(--turquesa-claro); stroke-width:2; }
.agua-linea--fina{ stroke:var(--crema); stroke-width:1.2; opacity:.6; }
.canto{ stroke:var(--basalto); stroke-width:1.6; }
.canto--a{ fill:var(--rosa); }
.canto--b{ fill:var(--gris-canto); }
.canto--c{ fill:var(--crema); }
.canto-medallon{ fill:none; stroke:var(--basalto); stroke-width:3; }

/* gira despacio, como el sol sobre el valle.
   Las tres bandas son simétricas respecto del centro, así que
   el eje de giro cae en el centro de la rueda. */
.gira{ transform-box:view-box; transform-origin:50% 50%; }
.tambor--anda .gira--horario{ animation:girar 170s linear infinite; }
.tambor--anda .gira--antihorario{ animation:girar 230s linear infinite reverse; }
.tambor--anda .gira--horario-lento{ animation:girar 320s linear infinite; }
@keyframes girar{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

/* el sello, apoyado en el canto de la rueda */
.sello{
  position:absolute; left:1%; bottom:5%;
  width:clamp(94px,13.5vw,152px); height:auto;
  transform:rotate(-9deg);
}
.sello-fondo{ fill:var(--rojo); }
.sello-aro{ fill:none; stroke:var(--crema); stroke-width:1.8; }
.sello-aro--fino{ stroke-width:.9; }
.sello-aro--punteado{ stroke-width:1; stroke-dasharray:2 6; }
.sello-texto{
  fill:var(--crema);
  font-family:var(--caps); font-weight:700;
  font-size:16px; letter-spacing:.1em;
}
.sello-punto,.sello-cerros{ fill:var(--crema); }
.sello-sol{ fill:var(--ocre-claro); }
.sello-suelo{ stroke:var(--crema); stroke-width:2; }

.pie-figura{
  margin:1.5rem 0 0;
  max-width:44ch;
  font-family:var(--caps); font-weight:500;
  font-size:.97rem; line-height:1.45;
  color:var(--tierra);
}

/* ==========================================================
   Las piezas
   ========================================================== */
.piedras{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(2rem,4vw,3.2rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.piedra:nth-child(2){ margin-top:clamp(1rem,4.5vw,4rem); }
.piedra:nth-child(3){ margin-top:clamp(.4rem,1.6vw,1.4rem); }

.disco{
  aspect-ratio:1; width:100%;
  border-radius:50%;
  margin-bottom:1.5rem;
  display:grid; place-items:center;
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
}
.disco--ocre{ background:var(--ocre); }
.disco--turquesa{ background:var(--turquesa-claro); }
.disco--rosa{ background:var(--rosa); }

.dibujo-pieza{
  width:80%; height:auto;
  transition:transform .7s cubic-bezier(.25,.8,.25,1);
}
.piedra:hover .disco{ transform:scale(1.018); }
.piedra:hover .dibujo-pieza{ transform:rotate(-16deg); }

.dibujo-pieza .pl-1{ fill:none; stroke:var(--basalto); stroke-width:2.4; }
.dibujo-pieza .pl-2{ fill:none; stroke:var(--basalto); stroke-width:1.6; }
.dibujo-pieza .pl-3{ fill:var(--basalto); }
.dibujo-pieza .pl-4{ fill:none; stroke:var(--basalto); stroke-width:5.5; stroke-linecap:round; }
.dibujo-pieza .pl-eje{
  stroke:var(--basalto); stroke-width:.9;
  stroke-dasharray:14 4 3 4; opacity:.55;
}

.piedra p{ margin:0 0 1.05rem; color:#e2d6c4; }
.piedra .ficha{
  margin:0;
  padding-top:.9rem;
  border-top:1px solid rgba(244,233,210,.3);
  font-family:var(--caps); font-weight:500;
  font-size:.98rem; letter-spacing:.035em;
  color:var(--ocre-claro);
}

/* ==========================================================
   El muestrario
   ========================================================== */
.titulo-doble{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,3.5rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.titulo-doble h2{ margin-bottom:0; }
.apunte{
  margin:0;
  max-width:44ch;
  color:#4a4038;
  border-left:3px solid var(--ocre);
  padding-left:1.1rem;
}

.muestras{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.muestra h3{ font-size:1.14rem; margin-bottom:.35rem; }
.muestra p{ margin:0; font-size:.98rem; color:#4a4038; }

.muestra-disco{
  display:block; width:100%; aspect-ratio:1;
  border-radius:50%;
  margin-bottom:1.1rem;
  border:2px solid var(--basalto);
  box-shadow:inset 0 0 0 6px var(--crema-2);
}
.muestra-disco--canto{ background:var(--gris-canto); }
.muestra-disco--granito{ background:var(--rosa); }
.muestra-disco--basalto{ background:#3b3532; }
.muestra-disco--travertino{ background:#d8c49a; }
.muestra-disco--pizarra{ background:#6f7b7a; }

/* ==========================================================
   Del río a su casa
   ========================================================== */
.pasos{
  list-style:none; margin:0; padding:0;
  position:relative;
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pasos::before{
  content:""; position:absolute; z-index:0;
  top:32px; left:13%; right:13%;
  border-top:2px dotted rgba(244,233,210,.42);
}
.paso{ position:relative; z-index:1; }
.paso-numero{
  display:grid; place-items:center;
  width:66px; height:66px; margin-bottom:1.35rem;
  border-radius:50%;
  background:var(--turquesa);
  border:2px solid var(--turquesa-claro);
  box-shadow:0 0 0 5px var(--turquesa);
  color:var(--crema);
  font-family:var(--serif); font-weight:700; font-size:1.65rem;
  line-height:1;
}
.paso p{ margin:0; color:#d9e7e3; max-width:34ch; }

/* ==========================================================
   Contacto
   ========================================================== */
.contacto{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.contacto-texto{ max-width:38rem; }
.datos{
  margin:0;
  display:grid; gap:1.35rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.datos dt{
  font-family:var(--caps); font-weight:700;
  font-size:.98rem; letter-spacing:.06em;
  color:var(--arcilla);
}
.datos dd{
  margin:.1rem 0 0;
  font-size:1.09rem;
  font-variant-numeric:oldstyle-nums;
  font-feature-settings:"onum" 1;
}
.datos a{ text-decoration:none; border-bottom:1.5px solid rgba(244,233,210,.48); }
.datos a:hover{ border-bottom-color:var(--crema); }

.moneda{
  position:relative;
  justify-self:center;
  width:clamp(206px,25vw,272px); aspect-ratio:1;
  border-radius:50%;
  background:var(--crema); color:var(--rojo);
  border:2px solid var(--basalto);
  display:grid; place-content:center; gap:.18rem;
  text-align:center; text-decoration:none;
  padding:1.6rem;
  transition:transform .35s ease, background-color .35s ease;
}
.moneda-aro{
  position:absolute; inset:9px;
  border-radius:50%;
  border:1.5px dashed rgba(36,29,27,.35);
}
.moneda:hover{ transform:rotate(-4deg) scale(1.03); background:var(--ocre-claro); }
.moneda-grande{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(1.55rem,1.1rem + 1.5vw,2.1rem);
  line-height:1.04;
}
.moneda-chico{
  font-family:var(--caps); font-weight:500;
  font-size:.95rem; letter-spacing:.045em; line-height:1.28;
  color:var(--basalto);
}

/* ==========================================================
   Pie
   ========================================================== */
.pie{
  display:flex; flex-wrap:wrap; gap:.3rem 2rem; justify-content:space-between;
  padding-top:1.9rem; padding-bottom:2.1rem;
  font-family:var(--caps); font-weight:500;
  font-size:1rem; letter-spacing:.035em;
}
.pie p{ margin:0; }
.pie-nota{ color:#b09c86; }

/* ==========================================================
   Pantallas medianas y chicas
   ========================================================== */
@media (max-width:1040px){
  .muestras{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:940px){
  .portada{ grid-template-columns:1fr; }
  .tambor{ max-width:540px; margin:1rem auto 0; }
  .pie-figura{ margin-inline:auto; text-align:center; }
  .piedras{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .piedra:nth-child(n){ margin-top:0; }
  .piedra:nth-child(2){ margin-top:clamp(1rem,5vw,3rem); }
  .titulo-doble{ grid-template-columns:1fr; align-items:start; }
  .pasos{ grid-template-columns:1fr; gap:1.9rem; }
  .pasos::before{ display:none; }
  .paso{ display:grid; grid-template-columns:66px 1fr; gap:0 1.3rem; align-items:start; }
  .paso-numero{ margin-bottom:0; grid-row:span 2; }
  .contacto{ grid-template-columns:1fr; }
  .moneda{ justify-self:start; }
}

@media (max-width:640px){
  .piedras{ grid-template-columns:1fr; gap:2.6rem; }
  .piedra:nth-child(n){ margin-top:0; }
  .disco{ max-width:320px; margin-inline:auto; }
  .muestras{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; }
  .paso{ grid-template-columns:56px 1fr; gap:0 1rem; }
  .paso-numero{ width:56px; height:56px; font-size:1.42rem; box-shadow:0 0 0 4px var(--turquesa); }
  .botones .boton{ flex:1 1 100%; text-align:center; }
  .moneda{ justify-self:center; }
  .sello{ width:clamp(88px,22vw,120px); }
}

@media (max-width:400px){
  .muestras{ grid-template-columns:1fr; }
  .muestra{ display:grid; grid-template-columns:72px 1fr; gap:0 1rem; align-items:start; }
  .muestra-disco{ margin-bottom:0; grid-row:span 2; }
}

/* ==========================================================
   Si el sistema pide menos movimiento, todo se queda quieto
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .tambor--anda .gira--horario,
  .tambor--anda .gira--antihorario,
  .tambor--anda .gira--horario-lento{ animation:none; }
  .disco,.dibujo-pieza,.moneda,.boton{ transition:none; }
  .piedra:hover .disco,
  .piedra:hover .dibujo-pieza,
  .moneda:hover{ transform:none; }
}

/* ==========================================================
   Impresión
   ========================================================== */
@media print{
  .greca,.salto,.botones,.moneda{ display:none; }
  .franja{ background:#fff !important; color:#000 !important; }
  .franja--arcilla::before,.franja--crema::before{ display:none; }
  .contenedor{ padding:1.2rem 0; }
}