@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap');

:root{
  --crema:#F5ECDB;
  --papel:#FBF5E6;
  --arena:#E9DDC2;
  --tinta:#2E2216;
  --tierra:#6E4F31;
  --terracota:#BC5A2B;
  --terracota-osc:#933F1D;
  --ocre:#D6993A;
  --ocre-osc:#A8720F;
  --blanco:#FFFCF3;
}

html{scroll-behavior:smooth}

body{
  font-family:'Archivo',system-ui,sans-serif;
  background-color:var(--crema);
  color:var(--tinta);
  font-size:1.0625rem;
  line-height:1.8;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(rgba(110,79,49,.06) 1px,transparent 1.4px);
  background-size:26px 26px;
  pointer-events:none;
  z-index:1;
}

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

h1,h2,h3,h4,h5,.fuente-display{font-family:'Fraunces',Georgia,serif}

[id]{scroll-margin-top:84px}

@media (min-width:992px){
  [id]{scroll-margin-top:0}
}

.rieles{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:236px;
  background:var(--tinta);
  padding:2.25rem 1.75rem;
  z-index:1030;
}

.rieles-logo{
  width:92px;
  background:var(--crema);
  padding:.55rem .45rem .35rem;
  border-radius:999px 999px 12px 12px;
}

.rieles-menu{
  margin-top:2.75rem;
}

.rieles-menu .nav-link{
  color:rgba(245,236,219,.6);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  font-weight:600;
  padding:.6rem 0;
  position:relative;
  transition:color .3s ease;
}

.rieles-menu .nav-link::before{
  content:"";
  position:absolute;
  left:-1.2rem;
  top:50%;
  width:0;
  height:2px;
  background:var(--ocre);
  transition:width .3s ease;
}

.rieles-menu .nav-link:hover{color:var(--crema)}

.rieles-menu .nav-link:hover::before,
.rieles-menu .nav-link.active::before{width:14px}

.rieles-menu .nav-link.active{color:var(--ocre)}

.icono-social{
  display:inline-flex;
  color:rgba(245,236,219,.75);
  transition:color .3s ease,transform .3s ease;
}

.icono-social:hover{
  color:var(--ocre);
  transform:translateY(-3px);
}

.icono-social svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

.rieles-linea{
  width:1px;
  height:54px;
  background:rgba(245,236,219,.22);
}

.rieles-rotulo{
  writing-mode:vertical-rl;
  text-transform:uppercase;
  letter-spacing:.45em;
  font-size:.6rem;
  font-weight:600;
  color:rgba(245,236,219,.45);
}

.barramovil{
  background:var(--tinta);
  min-height:64px;
  box-shadow:0 12px 30px rgba(46,34,22,.2);
}

.logo-movil{
  height:42px;
  background:var(--crema);
  padding:.2rem .45rem;
  border-radius:999px 999px 8px 8px;
}

.boton-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:var(--crema);
  border:1px solid rgba(245,236,219,.35);
  border-radius:999px;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}

.boton-menu:hover{
  background:var(--ocre);
  border-color:var(--ocre);
  color:var(--tinta);
}

.boton-menu svg{
  width:22px;
  height:22px;
}

.menu-lateral{
  --bs-offcanvas-width:320px;
  background:var(--tinta);
  color:var(--crema);
}

.menu-lateral .offcanvas-title{font-size:1.3rem}

.menu-movil-lista .nav-link{
  color:rgba(245,236,219,.72);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.78rem;
  font-weight:600;
  padding:.85rem 0;
  border-bottom:1px solid rgba(245,236,219,.12);
  transition:color .3s ease;
}

.menu-movil-lista .nav-link:hover{color:var(--ocre)}

.contenido{margin-left:236px}

@media (max-width:991.98px){
  .contenido{
    margin-left:0;
    padding-top:64px;
  }
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:.7rem;
  font-weight:700;
  color:var(--terracota);
}

.kicker::before{
  content:"";
  width:44px;
  height:2px;
  background:var(--terracota);
}

.btn-terra{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background-color:var(--terracota);
  border:2px solid var(--terracota);
  color:var(--blanco);
  font-weight:600;
  letter-spacing:.02em;
  padding:.75rem 1.5rem;
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease,color .3s ease;
}

.btn-terra:hover{
  background-color:var(--terracota-osc);
  border-color:var(--terracota-osc);
  color:var(--blanco);
  transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(147,63,29,.3);
}

.btn-contorno{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background-color:transparent;
  border:2px solid var(--tinta);
  color:var(--tinta);
  font-weight:600;
  padding:.75rem 1.5rem;
  transition:background-color .3s ease,color .3s ease,transform .3s ease,border-color .3s ease;
}

.btn-contorno:hover{
  background-color:var(--tinta);
  color:var(--crema);
  transform:translateY(-3px);
}

.btn-contorno-claro{
  border-color:rgba(245,236,219,.55);
  color:var(--crema);
}

.btn-contorno-claro:hover{
  background-color:var(--crema);
  border-color:var(--crema);
  color:var(--tinta);
}

.btn svg{
  width:17px;
  height:17px;
  fill:currentColor;
  flex-shrink:0;
}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:5rem 0;
  overflow:hidden;
  background:radial-gradient(circle at 88% 10%,rgba(214,153,58,.2),transparent 42%),radial-gradient(circle at 4% 92%,rgba(188,90,43,.1),transparent 36%),var(--crema);
}

@media (max-width:991.98px){
  .hero{min-height:calc(100vh - 64px)}
}

.sol-hero{
  position:absolute;
  top:-120px;
  right:9%;
  width:390px;
  height:390px;
  border-radius:50%;
  background:var(--ocre);
  opacity:.26;
}

@media (max-width:767.98px){
  .sol-hero{
    width:250px;
    height:250px;
    top:-60px;
    right:-50px;
  }
}

.aro-hero{
  position:absolute;
  bottom:11%;
  left:3%;
  width:76px;
  height:76px;
  border:2px solid rgba(188,90,43,.45);
  border-radius:50%;
}

.rotulo-vertical{
  position:absolute;
  top:50%;
  right:1.25rem;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  text-transform:uppercase;
  letter-spacing:.5em;
  font-size:.66rem;
  font-weight:600;
  color:var(--tierra);
}

.titulo-hero{
  font-size:clamp(3.1rem,8.5vw,6.8rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.025em;
}

.italica-hero{
  font-style:italic;
  font-weight:500;
  color:var(--terracota);
}

.subtitulo-hero{
  font-size:clamp(1.15rem,2.3vw,1.55rem);
  font-weight:300;
  line-height:1.55;
  color:var(--tierra);
  max-width:30ch;
  border-left:3px solid var(--ocre);
  padding-left:1.25rem;
  margin-bottom:2rem;
}

.nota-cta{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.92rem;
  color:var(--tierra);
  max-width:56ch;
  margin-bottom:0;
}

.nota-cta svg{
  width:18px;
  height:18px;
  fill:var(--terracota);
  flex-shrink:0;
  margin-top:.3rem;
}

.nota-cta a{
  color:var(--terracota-osc);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}

.nota-cta a:hover{color:var(--terracota)}

.figura-hero{
  position:relative;
  max-width:430px;
  margin-inline:auto;
}

.marco-fondo{
  position:absolute;
  top:-20px;
  left:-20px;
  width:100%;
  height:100%;
  border:2px solid var(--terracota);
  border-radius:999px 999px 0 0;
}

.img-arco{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:999px 999px 0 0;
  box-shadow:0 30px 60px rgba(46,34,22,.22);
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}

.figura-hero:hover .img-arco,
.figura-bloque:hover .img-arco{transform:scale(1.045)}

.sello-hero{
  position:absolute;
  bottom:-24px;
  left:-24px;
  z-index:2;
  width:104px;
  height:104px;
  border-radius:50%;
  background:var(--tinta);
  color:var(--crema);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  box-shadow:0 18px 36px rgba(46,34,22,.28);
}

.sello-hero svg{
  width:20px;
  height:20px;
  fill:var(--ocre);
}

.sello-hero span{
  font-size:.56rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:600;
}

@media (max-width:575.98px){
  .sello-hero{
    left:-10px;
    bottom:-18px;
    width:88px;
    height:88px;
  }
}

.seccion{
  position:relative;
  padding-block:clamp(4.5rem,9vw,7.5rem);
}

.fondo-papel{background:var(--papel)}

.titulo-seccion{
  font-size:clamp(2.3rem,5.4vw,4.2rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
}

.resalte-ocre{background:linear-gradient(180deg,transparent 62%,rgba(214,153,58,.55) 62%)}

.italica-terra{
  font-style:italic;
  font-weight:500;
  color:var(--terracota);
}

.marca-agua{
  position:absolute;
  top:3%;
  right:-1.5%;
  font-weight:700;
  font-size:clamp(5rem,14vw,12rem);
  line-height:1;
  letter-spacing:-.03em;
  color:rgba(110,79,49,.05);
  -webkit-text-stroke:1.5px rgba(110,79,49,.14);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

.marca-izquierda{
  top:auto;
  right:auto;
  bottom:1%;
  left:-1.5%;
}

.figura-presentacion{position:relative}

.bloque-ocre{
  position:absolute;
  top:26px;
  left:26px;
  right:-26px;
  bottom:-26px;
  background:var(--ocre);
  border-radius:16px;
}

.img-retrato{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 26px 55px rgba(46,34,22,.18);
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}

.figura-presentacion:hover .img-retrato{transform:scale(1.03)}

.pie-figura{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:1.1rem;
  position:relative;
  z-index:1;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--tierra);
}

.pie-figura svg{
  width:16px;
  height:16px;
  fill:var(--terracota);
  flex-shrink:0;
}

.texto-presentacion p,
.texto-bloque p{
  margin-bottom:1.35rem;
  max-width:62ch;
}

.texto-presentacion p:last-child,
.texto-bloque p:last-child{margin-bottom:0}

.texto-presentacion p:first-child::first-letter{
  font-family:'Fraunces',Georgia,serif;
  font-size:3.8em;
  font-weight:600;
  line-height:.78;
  float:left;
  padding:.06em .16em 0 0;
  color:var(--terracota);
}

.aparte{
  border-left:3px solid var(--ocre);
  background:rgba(233,221,194,.55);
  border-radius:0 16px 16px 0;
  padding:1.5rem 1.75rem;
}

@media (min-width:992px){
  .baja-1{margin-top:3.5rem}
  .baja-2{margin-top:5.5rem}
  .titulo-solapado{
    margin-right:-4rem;
    background:var(--crema);
    position:relative;
    z-index:2;
    padding-right:1.25rem;
  }
}

.seccion-informativas{
  background:var(--crema);
  overflow:hidden;
}

.arco-gigante{
  position:absolute;
  top:6%;
  right:-150px;
  width:460px;
  height:620px;
  border:2px solid rgba(188,90,43,.14);
  border-radius:999px 999px 0 0;
  pointer-events:none;
}

.arcos-deco{
  display:flex;
  gap:.6rem;
  align-items:flex-end;
}

.arcos-deco span{
  display:block;
  width:32px;
  height:48px;
  border-radius:999px 999px 0 0;
  border:2px solid var(--terracota);
}

.arcos-deco span:nth-child(2){
  height:64px;
  border-color:var(--ocre);
}

.arcos-deco span:nth-child(3){
  height:80px;
  border-color:var(--tierra);
}

.ventanilla{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  font-weight:700;
  margin-bottom:.9rem;
}

.ventanilla svg{
  width:18px;
  height:18px;
  fill:currentColor;
  flex-shrink:0;
}

.a-terra .ventanilla{color:var(--terracota)}
.a-ocre .ventanilla{color:var(--ocre-osc)}
.a-tierra .ventanilla{color:var(--tierra)}
.a-terra .marco-fondo{border-color:var(--terracota)}

.titulo-bloque{
  font-size:clamp(1.85rem,3.6vw,3rem);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin-bottom:1.4rem;
}

.figura-bloque{
  position:relative;
  margin:0;
}

.img-paisaje{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 26px 55px rgba(46,34,22,.18);
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}

.figura-bloque:hover .img-paisaje{transform:scale(1.035)}

.bloque-fondo{
  position:absolute;
  top:-22px;
  right:-22px;
  bottom:22px;
  left:22px;
  border-radius:18px;
  background:var(--ocre);
}

.figura-mat{
  background:var(--blanco);
  padding:12px 12px 16px;
  border-radius:6px;
  box-shadow:0 26px 50px rgba(46,34,22,.2);
  transform:rotate(-2deg);
  transition:transform .5s ease;
  max-width:400px;
}

.figura-mat:hover{transform:rotate(0deg)}

.figura-mat img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:3px;
}

.figura-mat figcaption{
  margin-top:.75rem;
  text-align:center;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:.92rem;
  color:var(--tierra);
}

.divisor{
  border:0;
  height:2px;
  width:min(220px,45%);
  margin:clamp(3.5rem,7vw,5.5rem) auto;
  background:repeating-linear-gradient(90deg,rgba(110,79,49,.45) 0 12px,transparent 12px 24px);
}