/* SISTEMA ANTERIOR, CONGELADO PARA LAS LANDINGS DE TALLERES.

   Es una copia exacta de lo que era css/base.css hasta el 2026-09-13, el dia que el sitio
   paso a css/sitio.css. Sigue viva por una sola razon: talleres/audhd/ esta cobrando, y
   cambiarle la paleta y la tipografia en la misma pasada que el sitio dejaba tres paginas de
   venta sin revisar. Las landings se pasan a sitio.css en una segunda etapa y ese dia este
   archivo se borra entero.

   NO AGREGAR NADA ACA. Lo que sirva para todo el sitio va en css/sitio.css.

/* Sistema compartido, heredado de la home (07-mapa).
   La calidez NO viene de los hex: viene del mapa ocupando superficie.

   SUPERFICIES (2026-09-04). El sitio paso de fondo oscuro a fondo claro con bandas oscuras.
   Los colores de marca son los mismos de siempre; lo que cambio es que ahora cada seccion
   declara SOBRE QUE superficie esta, y los componentes leen tokens semanticos en vez de un
   hex. Asi el mismo .cita o el mismo .sello sirven en las dos superficies sin duplicar CSS.

     (nada)     superficie clara, la de por defecto
     .enclaro   idem, para pisar una zona clara dentro de una banda oscura
     .ennoche   banda oscura

   Por que el ocre no es el acento en claro: sobre --papel da 2.01:1 y es ilegible. Sobre
   --noche da 7.50:1 y ahi si. Por eso el ocre vive solo dentro de .ennoche. */
a{color:inherit}
:root{
  /* Alias para js/consentimiento.js, que es compartido con el sitio y pide --oscuro,
     --crema y --lima. Aca apuntan a la paleta vieja para que la barra siga siendo la de
     estas paginas. Se van con el archivo. */
  --oscuro:#1A1418; --lima:#C9A227;

  /* Colores de marca. No cambian segun la superficie. */
  --noche:#1A1418; --crema:#EDE4D8; --ciruela:#8A6070; --ocre:#C9A227;
  --papel:#F2E9DA; --papel-claro:#FBF7F0; --tinta:#2A1F24;

  /* Tokens semanticos. Superficie clara por defecto. Contrastes medidos contra --papel:
     tinta 13.22:1, ciruela oscurecida 5.02:1. El ciruela de marca da 4.37:1 y no llega a
     AA en 11-13px, asi que en claro se usa oscurecido manteniendo el matiz (H 337). */
  --fondo:var(--papel);
  --texto:var(--tinta);
  --texto-tenue:rgba(42,31,36,.66);
  --acento:#7E5866;
  --filete:rgba(42,31,36,.16);
  /* La linea punteada es una firma del diseno: son las paradas del recorrido. En ocre
     sobre papel se volveria invisible, asi que cambia de color con la superficie. */
  --punteado:rgba(126,88,102,.45);
}
/* Banda oscura. Contrastes contra --noche: crema 14.42:1, ocre 7.50:1. */
.ennoche{
  --fondo:var(--noche);
  --texto:var(--crema);
  --texto-tenue:rgba(237,228,216,.62);
  --acento:var(--ocre);
  --filete:rgba(237,228,216,.18);
  --punteado:rgba(201,162,39,.5);
  background:var(--fondo); color:var(--texto);
}
/* Zona clara dentro de una banda oscura, y alias del nombre viejo que usan las legales. */
.enclaro,.enpapel{
  --fondo:var(--papel);
  --texto:var(--tinta);
  --texto-tenue:rgba(42,31,36,.66);
  --ciruela:#7E5866;
  --acento:#7E5866;
  --filete:rgba(42,31,36,.16);
  --punteado:rgba(126,88,102,.45);
}
.enclaro{background:var(--fondo); color:var(--texto)}
.enpapelclaro{--fondo:var(--papel-claro); background:var(--papel-claro)}
*{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;
  background:var(--fondo);color:var(--texto);
  -webkit-font-smoothing:antialiased}
/* height:auto es obligatorio junto a max-width. Sin el, una imagen con los atributos
   width/height puestos (que hay que ponerlos, para que la pagina no salte al cargar) se
   queda con el height del atributo y sale deformada. Se vio en gracias-lista: una plancha
   de 2200x1446 se dibujaba 497x1446. Las reglas que fijan height por clase siguen ganando. */
img{display:block;max-width:100%;height:auto}
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)}
/* La etiqueta toma SIEMPRE el acento de su superficie. Antes cada pagina la pintaba de
   ocre a mano, y sobre papel el ocre da 2.01:1: el QA lo corto en escribime el 2026-09-04. */
.etiqueta{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acento)}
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;
  color:var(--acento)}
.siguiente:hover{background:var(--acento);color:var(--fondo)}

/* ============================================================================
   CHROME DE PAGINA. Cabecera, portada, banda oscura, botones y pie.

   POR QUE ESTA ACA. Hasta el 2026-09-04 cada pagina se traia su propia copia de
   estos bloques, con los mismos comentarios pegados, y habia un comentario en
   escribime/index.html avisando que los tres encabezados tenian que ser identicos
   al pixel o el menu saltaba al cambiar de pagina. Ahora hay uno solo.
   ============================================================================ */

/* Cabecera. Barra solida sobre papel. Antes flotaba encima de la portada oscura;
   con fondo claro no hace falta y ademas se lee mejor. */
.cab{padding:18px 0;border-bottom:1px solid var(--filete)}
.cab .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.cab-der{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cab nav.menu{gap:2px}
.cab nav.menu a{padding:0 11px;opacity:.72}
.cab nav.menu a:hover{opacity:1}
.cab nav.menu a[aria-current="page"]{opacity:1;color:var(--acento)}
.cab .boton{min-height:44px;padding:0 20px;font-size:13px}
/* Debajo de 700px el boton del nav se esconde: el mismo CTA esta a un scroll de
   distancia y en el renglon del menu obligaba a partir en tres lineas. */
@media(max-width:699px){.cab .boton{display:none}}

/* Botones. El solido es el CTA primario y va uno solo por seccion. */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 34px;background:var(--acento);color:var(--papel);text-decoration:none;
  font-size:14px;letter-spacing:.06em;border:1px solid var(--acento);
  transition:background .3s,color .3s}
.boton:hover{background:transparent;color:var(--acento)}
.ennoche .boton{color:var(--noche)}
.ennoche .boton:hover{color:var(--acento)}
.boton-linea{display:inline-flex;align-items:center;min-height:44px;color:var(--acento);
  text-decoration:none;font-size:14px;letter-spacing:.04em;border-bottom:1px solid currentColor}

/* Portada de pagina interior. Texto a la izquierda, plancha de mapa acotada a la
   derecha. El mapa dejo de ir a sangre por debajo del texto: en claro no hay velo
   que lo sostenga, y encima el texto sobre imagen es carga sensorial de mas. */
.portada{padding:clamp(44px,6.5vh,80px) 0 clamp(52px,8vh,92px)}
.portada .wrap{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media(min-width:900px){.portada .wrap{grid-template-columns:1.05fr .95fr;align-items:stretch}}
.portada .etiqueta{letter-spacing:.26em}
.portada h1{font-size:clamp(1.8rem,4vw,2.9rem);margin:14px 0 20px;text-wrap:balance}
.portada .bajada{max-width:56ch;font-size:clamp(1rem,1.5vw,1.12rem)}
.plancha{border:1px solid var(--filete);align-self:stretch}
.plancha img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
@media(min-width:900px){.plancha img{aspect-ratio:auto;min-height:420px}}

/* Banda oscura con mapa de fondo. Es la UNICA superficie donde el texto se apoya
   sobre el mapa, y por eso es la unica que conserva el virado oscuro con velo.
   Medido: con opacidad .48 y velo .52 el crema da 6.16:1 y el ocre 3.21:1. */
.banda{position:relative;overflow:hidden;background:#130F13;
  padding:clamp(56px,9vh,110px) 0}
.banda-fondo{position:absolute;inset:0}
.banda-fondo img{width:100%;height:100%;object-fit:cover;opacity:.48}
.banda-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(19,15,19,.42),rgba(19,15,19,.58) 45%,rgba(19,15,19,.42))}
.banda .wrap{position:relative}

/* Pie. Queda SIEMPRE en noche: logo-mono.png y logo-script.png son casi blancos
   (luminancia media 231 y 235 sobre 255) y sobre papel desaparecen. */
.pie{padding:30px 0;font-size:13px}
.pie .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}


/* 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(--texto)}
/* 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(--acento);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:var(--texto-tenue)}
.cita .quien::before{content:"";display:inline-block;width:26px;height:1px;
  vertical-align:middle;margin-right:12px;background:var(--acento);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. */
/* color:var(--papel) no se ve nunca: el <span> de arriba tapa todo menos 1px. Esta para
   que el <a> declare un par legible por si solo (papel sobre acento, 5.02:1). Sin eso el
   elemento hereda el color del texto de la pagina y queda tinta sobre ciruela, 2.63:1, que
   es lo que corta el QA aunque en pantalla se vea bien. */
.volver{--pico:15px;display:inline-block;padding:1px;background:var(--acento);
  color:var(--papel);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(--fondo);color:var(--acento);
  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(--acento);color:var(--fondo)}

/* 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:var(--texto);line-height:1}
.sello-script{width:auto;height:26px;opacity:.85}