/* ===========================================================================
   BLOG / NOVEDADES — Azahares del Paraná
   ---------------------------------------------------------------------------
   Hoja aparte y no un bloque más dentro de index.html a propósito: el index ya
   pesa 180 KB con todo el CSS embebido, y una nota nueva no tiene por qué
   arrastrar los estilos del hero, la galería de 41 fotos o el mapa de lotes.
   Además, así el blog se cachea una vez y sirve para todas las notas.

   Los tokens se REDECLARAN acá porque el sitio los tiene dentro del <style>
   de index.html, no en un archivo compartido. Son los mismos valores del
   manual de marca; si algún día se extrae un tokens.css, esto se reemplaza
   por un @import y listo.
   =========================================================================== */

:root{
  --durazno:#E69D5A;
  --terracota:#CC7F4E;
  --terra-txt:#95592F;
  --tierra:#6C3F23;
  --papel:#FFFDF8;
  --papel-2:#F7F2E7;
  --papel-3:#EFE6D3;
  --negro:#26362B;
  --negro-2:#2E4234;
  --tinta:#2C2A24;
  --gris-d:#5C5749;
  --foco:#BC6C38;
  --linea:rgba(44,42,36,.14);
  --linea-suave:rgba(44,42,36,.08);
  --linea-inv:rgba(255,253,248,.16);
  --crema:rgba(255,253,248,.92);
  --wa:#128C4A;
  --ease:cubic-bezier(.22,1,.36,1);
  --d1:.32s;
  --r-pill:999px;
  --r-card:14px;
  /* Ancho de lectura. 68 caracteres es el rango donde el ojo no se pierde al
     volver al principio del renglón; más ancho obliga a mover la cabeza. */
  --col:min(720px, 100% - 2 * var(--marco));
  --marco:clamp(20px, 5vw, 40px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:3px}

/* Salto al contenido: lo primero que tabula un lector de pantalla. */
.saltar{position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--papel);
  padding:12px 20px;z-index:100;border-radius:0 0 var(--r-card) 0}
.saltar:focus{left:0}

/* ------------------------------------------------------------------- barra */
/* Misma nav que el home: logo a la izquierda, Propietarios al medio y la
   capsula .bar a la derecha. No es un header "de blog": es el header del
   sitio, para que la nota no se sienta un anexo. */
.barra{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--linea)}
.barra-in{max-width:1240px;margin:0 auto;padding:12px var(--marco);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.barra-logo img{width:190px;height:auto}
.barra-r{display:flex;align-items:center;gap:18px}
.barra-prop{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-d);
  text-decoration:none;transition:color var(--d1)}
.barra-prop:hover{color:var(--terra-txt)}
@media(max-width:700px){.barra-prop{display:none}.barra-logo img{width:150px}}

/* ---------------------------------------------- componentes del sitio ----- */
/* .lbl y .mono: las etiquetas en versalitas que numeran las secciones del
   home ("09 · Prensa"). Es el tic tipografico mas reconocible del sitio. */
.lbl{display:inline-flex;align-items:center;gap:9px;font-family:'Figtree',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terra-txt)}
.mono{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}

/* Cabecera de seccion: etiqueta numerada a la izquierda, glosa a la derecha,
   hairline arriba. Copiado tal cual del home. */
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  max-width:1240px;margin:0 auto;padding:26px var(--marco) 0}
.sec-head .meta{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-d);text-align:right}
.hairline{border-top:1px solid var(--linea)}
@media(max-width:600px){.sec-head .meta{display:none}}

/* .bar: la capsula del sitio. Texto + sufijo /em en gris + bloque de flecha
   terracota que se corre al hover. Reemplaza a los botones genericos que
   tenia el blog: esta es LA forma del boton en Azahares. */
.bar{display:inline-flex;align-items:stretch;background:var(--negro);color:var(--crema);
  font-family:'Figtree',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border-radius:var(--r-pill);overflow:hidden;
  transition:background var(--d1);width:fit-content;max-width:100%}
.bar span{flex:1;display:flex;align-items:center;gap:8px;padding:15px 24px}
.bar span em{font-style:normal;color:rgba(250,250,248,.45)}
.bar .arr{width:46px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--terracota);color:#fff;transition:background var(--d1)}
.bar .arr svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  transition:transform var(--d1) var(--ease)}
.bar:hover .arr{background:var(--durazno)}
.bar:hover .arr svg{transform:translateX(4px)}
.bar.naranja{background:var(--terra-txt)}
.bar.naranja .arr{background:var(--tierra)}
.bar.wa .arr{background:var(--wa)}
.bar.chica{height:44px}
.bar.chica span{padding:0 20px}
.bar.chica .arr{width:40px}
@media(max-width:700px){.bar span em{display:none}}

/* ------------------------------------------------------------------- marco */
.env{max-width:1240px;margin:0 auto;padding:0 var(--marco)}
.col{max-width:720px;margin-inline:auto}

/* --------------------------------------------------------- cabecera de nota */
.nota-head{padding:clamp(34px,6vw,64px) 0 clamp(24px,3.4vw,34px)}
.miga{font-size:12px;letter-spacing:.06em;color:var(--gris-d);margin-bottom:22px}
.miga a{text-decoration:none;color:var(--gris-d);border-bottom:1px solid transparent;
  transition:color var(--d1),border-color var(--d1)}
.miga a:hover{color:var(--terra-txt);border-bottom-color:var(--terra-txt)}
.miga span{opacity:.5;padding:0 7px}

.etiqueta{display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--terra-txt);margin-bottom:18px}
.etiqueta i{width:8px;height:8px;border-radius:50%;background:var(--terracota);flex:none}

h1{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.022em;
  line-height:1.08;font-size:clamp(32px,5.4vw,54px);color:var(--tinta);
  font-optical-sizing:auto;max-width:16ch}
h1 em{font-style:normal;color:var(--terra-txt)}

.bajada{margin-top:20px;font-size:clamp(17px,2.1vw,20px);line-height:1.62;
  color:var(--gris-d);max-width:60ch}

/* Se llama .nota-meta y no .meta a proposito: el sitio ya usa .meta en la
   cabecera de seccion, y el borde superior de este bloque le aparecia tambien
   ahi, como una linea suelta al lado del titulo de seccion. */
.nota-meta{margin-top:26px;padding-top:20px;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:12.5px;letter-spacing:.04em;color:var(--gris-d)}
.nota-meta b{color:var(--tinta);font-weight:600}

/* ---------------------------------------------------------------- imágenes */
.foto{margin:clamp(28px,4vw,44px) 0}
.foto img{width:100%;border-radius:var(--r-card)}
.foto figcaption{margin-top:11px;font-size:13px;line-height:1.55;color:var(--gris-d)}
/* Foto vertical. A ancho completo de columna, un 788x1400 mide 1280 px de alto:
   se come una pantalla entera y corta la lectura en seco. Se acota y se centra. */
.foto.alta img{max-width:min(100%,460px);margin-inline:auto}
.foto.alta figcaption{max-width:min(100%,460px);margin-inline:auto}
/* La foto de apertura se sale de la columna de lectura: es la que sostiene el
   scroll inicial y a 720 px se ve raquítica. */
.foto-hero{margin:clamp(20px,3vw,32px) 0 0}
.foto-hero img{border-radius:var(--r-card);aspect-ratio:16/9;object-fit:cover}

/* ------------------------------------------------------------------ cuerpo */
.cuerpo{padding-bottom:clamp(40px,6vw,72px)}
.cuerpo p{margin:0 0 1.15em}
.cuerpo p:last-child{margin-bottom:0}
.cuerpo h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.018em;
  line-height:1.16;font-size:clamp(24px,3.4vw,32px);color:var(--tinta);
  margin:clamp(38px,5vw,54px) 0 .55em}
.cuerpo h3{font-family:'Figtree',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.01em;margin:2em 0 .5em;color:var(--tinta)}
.cuerpo a{color:var(--terra-txt);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:opacity var(--d1)}
.cuerpo a:hover{opacity:.72}
.cuerpo strong{font-weight:700;color:var(--tinta)}
.cuerpo ul{margin:0 0 1.15em;padding-left:1.15em}
.cuerpo li{margin-bottom:.4em}
.cuerpo li::marker{color:var(--terracota)}

/* Cita textual del medio. Va marcada como cita de verdad —comillas, autoría y
   enlace— y no disimulada como texto propio: es material de un tercero. */
.cita{margin:clamp(30px,4vw,42px) 0;padding:clamp(22px,3vw,30px) clamp(22px,3vw,32px);
  background:var(--papel-2);border-left:4px solid var(--terracota);
  border-radius:0 var(--r-card) var(--r-card) 0}
.cita blockquote{font-family:'Fraunces',Georgia,serif;font-size:clamp(19px,2.4vw,23px);
  line-height:1.42;color:var(--tinta);font-weight:500}
.cita cite{display:block;margin-top:14px;font-family:'Figtree',sans-serif;font-style:normal;
  font-size:12.5px;letter-spacing:.05em;color:var(--gris-d)}
.cita cite a{color:var(--terra-txt)}

/* Ficha de datos duros. Es el bloque que Google levanta como respuesta corta,
   así que va en texto y no en imagen. */
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-card);overflow:hidden;
  margin:clamp(30px,4vw,42px) 0}
.datos div{background:var(--papel);padding:22px 20px;text-align:center}
.datos b{display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(26px,3.6vw,34px);
  font-weight:600;color:var(--terra-txt);line-height:1.1}
.datos span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gris-d)}
@media(max-width:560px){
  .datos{grid-template-columns:1fr}
}

/* Bloque de fuente. Va arriba de todo el cuerpo, para que se lea antes que el
   texto y nadie confunda la nota con periodismo propio. La URL de Clarin se
   muestra ENTERA y no escondida detras de un "leer aca": el lector ve a que
   dominio va antes de hacer click, y queda explicito de donde salio el
   material. */
.fuente{margin:clamp(26px,3.4vw,34px) 0;border:1px solid var(--linea);
  border-radius:var(--r-card);background:var(--papel-2);overflow:hidden}
.fuente-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:baseline;
  padding:16px 22px;border-bottom:1px solid var(--linea);background:var(--papel-3)}
.fuente-top .lbl{color:var(--terra-txt)}
.fuente-top time{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris-d)}
.fuente-cuerpo{padding:20px 22px;font-size:14.5px;line-height:1.62;color:var(--gris-d)}
.fuente-cuerpo b{color:var(--tinta)}
.fuente-titulo{display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(17px,2vw,20px);
  line-height:1.3;color:var(--tinta);font-weight:500;margin-bottom:14px}
/* La URL completa. break-all porque el slug de Clarin mide 95 caracteres y sin
   eso desborda la columna en mobile. */
.fuente-url{display:block;margin-top:4px;font-family:ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;color:var(--terra-txt);
  word-break:break-all;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.fuente-url:hover{color:var(--tierra)}
.fuente-pie{padding:0 22px 20px}

/* ------------------------------------------------------------------- cierre */
.cierre{background:var(--negro);color:var(--papel);border-radius:var(--r-card);
  padding:clamp(30px,4.6vw,50px);margin:clamp(36px,5vw,60px) 0}
.cierre h2{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--papel);
  font-size:clamp(24px,3.6vw,34px);line-height:1.14;letter-spacing:-.018em;margin:0 0 14px}
.cierre h2 em{font-style:normal;color:var(--durazno)}
.cierre p{color:var(--crema);margin:0 0 24px;max-width:52ch}
.cierre-bs{display:flex;flex-wrap:wrap;gap:12px}
/* Las capsulas del cierre viven dentro de .cuerpo, y ".cuerpo a" les imponia
   color terracota y subrayado: se veian como dos links naranjas subrayados,
   no como botones. Ademas .bar es verde negro sobre un panel verde negro, o
   sea invisible. Las dos cosas se corrigen aca. */
.cierre .bar{color:var(--crema);text-decoration:none;
  background:rgba(255,253,248,.07);box-shadow:inset 0 0 0 1px var(--linea-inv)}
.cierre .bar:hover{background:rgba(255,253,248,.12)}
.cierre .bar.wa .arr{background:var(--wa)}
.cierre .bar .arr{background:rgba(255,253,248,.16)}
.cierre .bar.wa .arr{background:var(--wa)}

/* --------------------------------------------------------------- índice blog */
.blog-head{padding:clamp(40px,7vw,80px) 0 clamp(26px,3.4vw,38px)}
.lista{display:grid;gap:clamp(18px,2.4vw,26px)}
/* El aire del final va ACA y no como padding-bottom de .lista. Estaba al
   reves: la lista cerraba con 77 px de padding —que empujaban el boton lejos
   del listado— y despues del boton no quedaba nada, asi que terminaba pegado
   al borde del footer, sin un pixel de separacion. */
.cierre-indice{margin:clamp(30px,4vw,44px) 0 clamp(56px,8vw,96px)}
.item{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(18px,3vw,32px);
  align-items:center;text-decoration:none;padding:clamp(14px,2vw,18px);
  border:1px solid var(--linea);border-radius:var(--r-card);background:var(--papel);
  transition:border-color var(--d1),transform var(--d1) var(--ease),
             box-shadow var(--d1)}
.item:hover{border-color:var(--terracota);transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(44,42,36,.09)}
.item .ph{border-radius:10px;overflow:hidden;aspect-ratio:16/10}
.item .ph img{width:100%;height:100%;object-fit:cover}
.item h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.018em;
  line-height:1.18;font-size:clamp(20px,2.7vw,27px);color:var(--tinta);margin:10px 0 10px}
.item p{font-size:15px;line-height:1.6;color:var(--gris-d);margin-bottom:14px}
.item .ir{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--terra-txt)}
/* La numeracion /01 de los indices del home, dentro de la etiqueta. */
.lbl i{font-style:normal;color:var(--terracota);opacity:.85}
@media(max-width:760px){
  .item{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------ pie */
.pie{background:var(--negro);color:var(--papel);margin-top:auto}
.pie-in{max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,60px) var(--marco)}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
.pie .mono{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--durazno);margin-bottom:14px}
.pie p,.pie a{font-size:14px;line-height:1.7;color:var(--crema);text-decoration:none}
.pie ul{list-style:none}
.pie li{margin-bottom:7px}
.pie a:hover{color:var(--durazno)}
.pie-legal{margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:1px solid var(--linea-inv);
  font-size:12px;line-height:1.65;color:rgba(255,253,248,.60)}
@media(max-width:760px){
  .pie-grid{grid-template-columns:1fr}
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}