/* Sistema compartido, heredado de la home (07-mapa).
   La calidez NO viene de los hex: viene del mapa ocupando superficie. */
a{color:inherit}
:root{
  --noche:#1A1418; --crema:#EDE4D8; --ciruela:#8A6070; --ocre:#C9A227;
  --papel:#F2E9DA; --tinta:#2A1F24;
  /* --acento es el color de enfasis del contexto. Sobre noche es el ocre.
     Sobre papel el ocre da 2.01:1, ilegible, asi que cada zona clara lo pisa. */
  --acento:var(--ocre);
}
/* Sobre papel, el ciruela de marca da 4.37:1 y no llega a AA en 11-13px.
   Se oscurece manteniendo el matiz (H 337) hasta 5.02:1. Solo aplica en claro. */
.enpapel{--ciruela:#7E5866; --acento:#7E5866}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.1}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.etiqueta{font-size:11px;letter-spacing:.24em;text-transform:uppercase}
a.marca{display:inline-flex;align-items:center;min-height:44px;
  font-family:'Playfair Display',serif;font-size:20px;text-decoration:none;color:inherit}
nav.menu{display:flex;gap:4px;flex-wrap:wrap}
/* color:inherit es obligatorio: sin el, sobre fondo claro los links toman el azul del navegador. */
nav.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:inherit;text-decoration:none;font-size:13.5px;opacity:.68}
nav.menu a:hover{opacity:1}
nav.menu a[aria-current="page"]{opacity:1;color:var(--acento)}
.redes{display:inline-flex;gap:12px;align-items:center}
.redes a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:inherit;opacity:.7;transition:opacity .25s}
.redes a:hover{opacity:1}
.redes svg{width:20px;height:20px}
.siguiente{display:inline-flex;align-items:center;min-height:48px;padding:0 30px;
  text-decoration:none;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid currentColor;transition:background .3s,color .3s}

/* Articulos. Vive aca y no en cada pagina porque se repite en todos los que vengan.
   Lo especifico de cada articulo (que mapa va en la portada y como se recorta) queda
   en la pagina. */

/* Cita testimonial, con tratamiento editorial. La comilla grande colgando quedaba
   enorme y ademas solo abria; ahora las comillas son del tamano del texto, en ocre,
   y van una de cada lado. Las pone el diseno sobre .dicho, asi que el texto no las
   lleva escritas y la atribucion queda fuera del entrecomillado. */
.cita{position:relative;margin:40px 0 36px;padding-left:clamp(20px,3vw,34px);
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:clamp(1.12rem,2.2vw,1.4rem);line-height:1.45;max-width:52ch;color:var(--crema)}
/* Las comillas van a la mitad del tamano que tenian cuando colgaban solas. line-height:0
   las saca del calculo del alto del renglon: si no, la primera linea de la cita se
   separaba de la segunda por culpa del glifo mas grande. */
.cita .dicho::before,.cita .dicho::after{color:var(--ocre);font-style:normal;
  font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:0;vertical-align:-.16em}
.cita .dicho::before{content:'"';margin-left:-.38em}
.cita .dicho::after{content:'"';margin-left:.02em}
.cita .quien{display:block;margin-top:18px;font-family:'Inter',system-ui,sans-serif;
  font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,228,216,.62)}
.cita .quien::before{content:"";display:inline-block;width:26px;height:1px;
  vertical-align:middle;margin-right:12px;background:var(--ocre);opacity:.75}

/* Boton de vuelta al indice. Tiene forma de flecha hacia la izquierda: el lado
   izquierdo termina en pico y el derecho lleva la muesca en el mismo sentido, asi
   que la pieza entera se lee como una flecha.
   Va en dos capas porque clip-path recorta tambien el borde: la de abajo pinta el
   filete ocre y la de arriba, 1px mas chica, tapa el interior. */
.volver{--pico:15px;display:inline-block;padding:1px;background:var(--ocre);
  text-decoration:none;
  clip-path:polygon(0 50%, var(--pico) 0, 100% 0, calc(100% - var(--pico)) 50%,
    100% 100%, var(--pico) 100%)}
.volver span{display:flex;align-items:center;min-height:46px;
  padding:0 calc(var(--pico) + 22px);
  background:var(--noche);color:var(--ocre);
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(0 50%, var(--pico) 0, 100% 0, calc(100% - var(--pico)) 50%,
    100% 100%, var(--pico) 100%);
  transition:background .3s,color .3s}
.volver:hover span{background:var(--ocre);color:var(--noche)}

/* Sello del pie: el monograma chico a la izquierda y, al costado, el nombre arriba
   y el script del logo abajo. Monograma y script salieron del mismo archivo,
   separados por componentes conexos, para poder darle a cada uno su tamano: en el
   logo original el script quedaba en 4px de alto y no se leia. */
.sello{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
.sello-mono{width:auto;height:46px;opacity:.9}
.sello-txt{display:flex;flex-direction:column;gap:7px}
.sello-nombre{font-family:'Playfair Display',Georgia,serif;font-size:18px;
  color:rgba(237,228,216,.9);line-height:1}
.sello-script{width:auto;height:26px;opacity:.85}