/* ===========================================================
   Andrea Mejía — investigación para proyectos gastronómicos
   Identidad tomada del portafolio: crema, piedra, tinta,
   grotesca ancha, cero esquinas redondeadas, mucho aire.
   =========================================================== */

:root{
  --tinta:  #14140f;
  --crema:  #e8ebd0;
  --piedra: #e3e3dc;
  --papel:  #f7f7f2;
  --humo:   #6d6d60;
  --linea:  rgba(20,20,15,.16);
  --linea-fuerte: rgba(20,20,15,.38);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Newsreader", Georgia, serif;

  --marco: clamp(1.25rem, 5vw, 5.5rem);
  --ancho: 1360px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--piedra);
  color:var(--tinta);
  font-family:var(--display);
  font-weight:400;
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

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

:focus-visible{
  outline:2px solid var(--tinta);
  outline-offset:3px;
}

/* ---------- estructura ---------- */

.marco{
  max-width:var(--ancho);
  margin:0 auto;
  padding-left:var(--marco);
  padding-right:var(--marco);
}

.banda{ padding-block:clamp(4rem, 9vw, 8.5rem); }
.banda--crema{ background:var(--crema); }
.banda--piedra{ background:var(--piedra); }
.banda--tinta{ background:var(--tinta); color:var(--crema); }
.banda--tinta .rotulo{ color:rgba(232,235,208,.62); }
.banda--tinta a{ color:var(--crema); }
.banda--ceñida{ padding-block:clamp(2.75rem, 5vw, 4.5rem); }

/* ---------- tipografía ---------- */

.rotulo{
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--humo);
  margin:0 0 1.75rem;
}

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 5.6vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

.display--alto{ font-size:clamp(2.4rem, 7.4vw, 5.9rem); }

.titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem, 3.2vw, 2.5rem);
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}

.subtitulo{
  font-family:var(--display);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:-.005em;
  margin:0 0 .75rem;
}

/* los pasajes de lectura van en serif: es la investigación hablando */
.lectura{
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height:1.62;
  color:#2b2b22;
}
.lectura p{ margin:0 0 1.15em; max-width:62ch; }
.lectura p:last-child{ margin-bottom:0; }
.lectura em{ font-style:italic; }

.pie{
  font-size:.8125rem;
  line-height:1.55;
  color:var(--humo);
  max-width:52ch;
}

/* ---------- navegación ---------- */

.nav{
  position:sticky; top:0; z-index:50;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.nav__caja{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding-block:.9rem;
  max-width:var(--ancho); margin:0 auto;
  padding-left:var(--marco); padding-right:var(--marco);
}
.nav__nombre{
  font-weight:600; font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
.nav__enlaces{
  display:flex; flex-wrap:wrap; gap:clamp(.9rem,2vw,2rem);
  list-style:none; margin:0; padding:0;
}
.nav__enlaces a{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding-block:.25rem;
  border-bottom:1px solid transparent;
}
.nav__enlaces a:hover{ border-bottom-color:var(--tinta); }
.nav__enlaces a[aria-current="page"]{ border-bottom-color:var(--tinta); }

/* ---------- portada ---------- */

.portada{
  background:var(--crema);
  padding-top:clamp(3.5rem, 8vw, 7rem);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
}
.portada__texto{ max-width:20ch; }
.portada__declaracion{
  font-size:clamp(2.2rem, 6.4vw, 5.2rem);
  line-height:1.0;
  letter-spacing:-.028em;
  font-weight:400;
  margin:0;
  max-width:16ch;
}
.portada__declaracion b{ font-weight:600; }
.portada__bajada{
  margin:clamp(1.75rem,3vw,2.5rem) 0 0;
  max-width:46ch;
}
.portada__reja{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:end;
}

/* ---------- preguntas (elemento firma) ---------- */

.preguntas{ border-top:1px solid var(--linea-fuerte); margin-top:0; }
.preguntas__item{
  border-bottom:1px solid var(--linea);
  padding:1.05rem 0;
  font-size:clamp(1.05rem, 1.85vw, 1.5rem);
  letter-spacing:-.012em;
  line-height:1.25;
  display:block;
}
.preguntas--dos{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5rem);
  border-top:0;
}
.preguntas--dos .preguntas__item{ border-top:1px solid var(--linea-fuerte); border-bottom:0; }

/* ---------- casos: pregunta / hallazgo / decisión ---------- */

.caso{
  border-top:1px solid var(--linea-fuerte);
  padding-top:1.75rem;
  margin-top:clamp(3rem,6vw,5rem);
}
.caso:first-of-type{ margin-top:0; }
.caso__cabecera{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.5rem 1.5rem;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.caso__lugar{
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--humo);
}
.tiempos{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem, 3.5vw, 3.25rem);
}
.tiempo__rotulo{
  font-size:.6875rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.7rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--linea-fuerte);
}
.tiempo p{
  font-family:var(--texto); font-weight:300;
  font-size:1.0625rem; line-height:1.55;
  margin:0; color:#2b2b22;
}
.tiempo--decision p{ font-family:var(--display); font-weight:400; font-size:1rem; line-height:1.5; }

.imagen-hueca{
  background:rgba(20,20,15,.055);
  border:1px dashed var(--linea-fuerte);
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1.5rem;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--humo);
}
.imagen-hueca--ancha{ aspect-ratio:16/9; }

/* ---------- servicios ---------- */

.servicio{
  border-top:1px solid var(--linea-fuerte);
  padding-top:1.6rem;
  margin-top:clamp(2.75rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);
  gap:clamp(1.5rem,4vw,4rem);
}
.servicio:first-of-type{ margin-top:0; }
.servicio__nombre{
  font-size:clamp(1.5rem,2.7vw,2.15rem);
  line-height:1.06; letter-spacing:-.02em; font-weight:400;
  margin:0 0 1rem;
}
.servicio__resumen{
  font-family:var(--texto); font-weight:300; font-style:italic;
  font-size:1.0625rem; line-height:1.55; margin:0; color:#2b2b22;
  max-width:38ch;
}
.lista{ list-style:none; margin:0; padding:0; }
.lista li{
  padding:.55rem 0 .55rem 1.15rem;
  border-bottom:1px solid var(--linea);
  position:relative;
  font-size:.9375rem; line-height:1.45;
}
.lista li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:5px; height:1px; background:var(--tinta);
}
.lista--simple li{ padding-left:0; }
.lista--simple li::before{ display:none; }

/* ---------- índice compacto (home) ---------- */

.indice{ border-top:1px solid var(--linea-fuerte); }
.indice__fila{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:1rem clamp(1.5rem,4vw,3.5rem);
  padding:1.15rem 0;
  border-bottom:1px solid var(--linea);
  text-decoration:none;
  align-items:baseline;
}
.indice__fila:hover .indice__nombre{ text-decoration:underline; text-underline-offset:.22em; }
.indice__nombre{ font-size:clamp(1.1rem,2vw,1.45rem); letter-spacing:-.015em; }
.indice__nota{ font-family:var(--texto); font-weight:300; font-size:1rem; color:#2b2b22; }

/* ---------- publicaciones ---------- */

.refs{ list-style:none; margin:0; padding:0; }
.refs li{
  font-family:var(--texto); font-weight:300;
  font-size:1rem; line-height:1.5;
  padding:.9rem 0;
  border-bottom:1px solid var(--linea);
  max-width:88ch;
}
.refs li:first-child{ border-top:1px solid var(--linea-fuerte); }

/* ---------- botones y enlaces ---------- */

.acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
.boton{
  display:inline-block;
  padding:.85rem 1.6rem;
  background:var(--tinta); color:var(--crema);
  text-decoration:none;
  font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--tinta);
  transition:background .18s ease, color .18s ease;
}
.boton:hover{ background:transparent; color:var(--tinta); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--linea:hover{ background:var(--tinta); color:var(--crema); }
.banda--tinta .boton{ background:var(--crema); color:var(--tinta); border-color:var(--crema); }
.banda--tinta .boton:hover{ background:transparent; color:var(--crema); }

.enlace{
  text-decoration:none;
  border-bottom:1px solid var(--linea-fuerte);
  padding-bottom:1px;
}
.enlace:hover{ border-bottom-color:currentColor; }

/* ---------- rejas auxiliares ---------- */

.dos{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
}
.dos--desigual{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.tres{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.5rem);
}
.nombres{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  list-style:none; margin:0; padding:0;
  font-size:.9375rem; color:#3a3a2f;
}

/* ---------- pie ---------- */

.pie-sitio{
  background:var(--tinta); color:var(--crema);
  padding-block:clamp(3rem,6vw,5rem);
}
.pie-sitio a{ color:var(--crema); text-decoration:none; border-bottom:1px solid rgba(232,235,208,.35); }
.pie-sitio a:hover{ border-bottom-color:var(--crema); }
.pie-sitio__reja{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem clamp(1.5rem,4vw,3rem);
}
.pie-sitio__legal{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.25rem;
  border-top:1px solid rgba(232,235,208,.22);
  font-size:.75rem; color:rgba(232,235,208,.6);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
}

/* ---------- movimiento ---------- */

.revela{ opacity:0; transform:translateY(14px); }
.revela.visible{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  .revela,.revela.visible{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .portada__reja{ grid-template-columns:1fr; align-items:start; }
  .tiempos{ grid-template-columns:1fr; gap:1.75rem; }
  .servicio{ grid-template-columns:1fr; }
  .tres{ grid-template-columns:1fr; }
  .dos,.dos--desigual{ grid-template-columns:1fr; }
  .preguntas--dos{ grid-template-columns:1fr; }
  .indice__fila{ grid-template-columns:1fr; gap:.35rem; }
  .pie-sitio__reja{ grid-template-columns:1fr; }
  .imagen-hueca{ aspect-ratio:3/2; }
}

@media (max-width: 560px){
  .nav__caja{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .nav__enlaces{ gap:.75rem 1.1rem; }
}

/* franja de credenciales */
.banda--papel{ background:var(--papel); border-bottom:1px solid var(--linea); }

/* ---------- fotografía ---------- */
.foto{ width:100%; display:block; background:rgba(20,20,15,.06); }
.foto--retrato{ aspect-ratio:4/5; object-fit:cover; }
.foto--ancha{ aspect-ratio:16/9; object-fit:cover; }
.foto--alta{ aspect-ratio:3/4; object-fit:cover; }

.galeria{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
  margin:0;
}
.galeria figure{ margin:0; }
.galeria figcaption{
  font-size:.75rem; line-height:1.45; color:var(--humo);
  margin-top:.7rem;
}
.tira{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(.75rem,2vw,1.25rem);
  margin-top:clamp(2rem,4vw,3rem);
}

@media (max-width: 900px){
  .galeria{ grid-template-columns:1fr; }
  .tira{ grid-template-columns:1fr; }
}

/* ---------- índice jerárquico de proyectos ---------- */
.proyectos{ list-style:none; counter-reset:grupo; margin:0; padding:0; }
.proyectos > li{
  counter-increment:grupo;
  border-top:1px solid var(--linea-fuerte);
  padding-top:1.35rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.proyectos > li:first-child{ margin-top:0; }
.proyectos__titular{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.65rem);
  letter-spacing:-.015em; line-height:1.1; margin:0;
}
.proyectos__titular::before{
  content:counter(grupo) ".";
  color:var(--humo); margin-right:.6rem;
  font-variant-numeric:tabular-nums;
}
.proyectos__nota{
  font-size:.8125rem; color:var(--humo); margin:.5rem 0 0;
}
.proyectos__lista{
  list-style:none; counter-reset:item;
  margin:1.15rem 0 0; padding:0;
  columns:2; column-gap:clamp(1.5rem,4vw,3.5rem);
}
.proyectos__lista li{
  counter-increment:item;
  break-inside:avoid;
  padding:.4rem 0;
  border-bottom:1px solid var(--linea);
  font-size:.9375rem; line-height:1.35;
}
.proyectos__lista li::before{
  content:counter(grupo) "." counter(item);
  color:var(--humo); margin-right:.7rem;
  font-variant-numeric:tabular-nums;
  font-size:.8125rem;
}
@media (max-width: 700px){
  .proyectos__lista{ columns:1; }
}

/* ===========================================================
   AJUSTES DE PROPORCIÓN — segunda revisión
   =========================================================== */

/* portada: nada de columnas desparejas con aire muerto al costado */
.portada__reja{ align-items:center; }
.portada .foto--retrato{
  aspect-ratio:4/5;
  max-height:520px;
  object-fit:cover;
  object-position:center 35%;
}

/* fotos a escala controlada dentro del texto */
.foto--media{
  max-width:min(100%, 540px);
  aspect-ratio:4/3;
  object-fit:cover;
}
.foto--natural{
  max-width:300px;
  height:auto;
  aspect-ratio:auto;
}

/* tiras y galerías compactas: documentación, no portada */
.tira--chica{
  grid-template-columns:repeat(3, minmax(0, 200px));
  justify-content:start;
  gap:.85rem;
}
.tira--chica .foto{ aspect-ratio:3/4; object-fit:cover; }

.galeria--chica{
  grid-template-columns:repeat(3, minmax(0, 190px));
  justify-content:start;
  gap:1rem;
}
.galeria--chica .foto{ aspect-ratio:4/5; object-fit:cover; }
.galeria--chica figcaption{ font-size:.7rem; line-height:1.4; margin-top:.55rem; }

/* tríptico: una sola familia, la jerarquía la marca el peso */
.tiempo--decision p{
  font-family:var(--texto);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.55;
  color:var(--tinta);
}

@media (max-width: 900px){
  .tira--chica{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .galeria--chica{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .portada .foto--retrato{ max-height:380px; }
}
@media (max-width: 560px){
  .tira--chica{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .galeria--chica{ grid-template-columns:1fr; }
}

/* fotos verticales: formato chico que respeta la toma original */
.foto--chica{
  max-width:300px;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
}
@media (max-width: 560px){
  .foto--chica{ max-width:100%; }
}

/* ===========================================================
   FOTOGRAFÍA — tercera revisión
   Criterio: imagen completa, nunca recortada. El tamaño se
   controla por altura, así una fila queda pareja aunque las
   tomas tengan proporciones distintas.
   =========================================================== */

.foto--chica,
.foto--media,
.foto--ancha,
.foto--natural{
  aspect-ratio:auto;
  object-fit:contain;
  width:auto;
  max-width:100%;
  height:auto;
  background:transparent;
}
.foto--chica{ max-height:330px; }
.foto--media{ max-height:300px; }
.foto--ancha{ max-height:320px; }
.foto--natural{ max-height:340px; }

/* tiras: misma altura, ancho natural, sin recorte */
.tira--chica{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1rem;
  grid-template-columns:none;
}
.tira--chica .foto{
  aspect-ratio:auto;
  object-fit:contain;
  height:220px;
  width:auto;
  max-width:100%;
  background:transparent;
}

/* galerías con epígrafe: misma lógica */
.galeria--chica{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1.5rem;
  grid-template-columns:none;
}
.galeria--chica figure{ min-width:150px; max-width:240px; }
.galeria--chica .foto{
  aspect-ratio:auto;
  object-fit:contain;
  height:230px;
  width:auto;
  max-width:100%;
  margin:0 auto;
  background:transparent;
}
.galeria--chica figcaption{ font-size:.7rem; line-height:1.4; margin-top:.6rem; }

/* franja de credenciales a cuatro */
.cuatro{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.75rem);
}

@media (max-width: 900px){
  .cuatro{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tira--chica .foto{ height:180px; }
  .galeria--chica .foto{ height:190px; }
}
@media (max-width: 560px){
  .cuatro{ grid-template-columns:1fr; }
  .tira--chica .foto,
  .galeria--chica .foto{ height:160px; }
}

/* ---------- archivo de campo: mosaico de altura libre ---------- */
.mosaico-final{
  columns:3;
  column-gap:clamp(.85rem, 2vw, 1.4rem);
}
.mosaico-final figure{
  break-inside:avoid;
  margin:0 0 clamp(.85rem, 2vw, 1.4rem);
}
.mosaico-final img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:auto;
  object-fit:contain;
}
.mosaico-final figcaption{
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--humo);
  margin-top:.5rem;
}

/* ---------- mosaico dos + una vertical al costado ---------- */
.mosaico-2x1{
  display:grid;
  grid-template-columns:1.45fr 0.75fr;
  grid-template-rows:auto auto;
  gap:clamp(.75rem, 1.6vw, 1.1rem);
  align-items:stretch;
}
.mosaico-2x1 img{
  aspect-ratio:auto;
  object-fit:contain;
  width:100%;
  height:auto;
  background:transparent;
}
.mosaico-2x1 img:nth-child(1){ grid-column:1; grid-row:1; }
.mosaico-2x1 img:nth-child(2){ grid-column:1; grid-row:2; }
.mosaico-2x1 img:nth-child(3){
  grid-column:2;
  grid-row:1 / span 2;
  height:100%;
  align-self:center;
}

@media (max-width: 900px){
  .mosaico-final{ columns:2; }
  .mosaico-2x1{ grid-template-columns:1fr; grid-template-rows:auto; }
  .mosaico-2x1 img:nth-child(1),
  .mosaico-2x1 img:nth-child(2),
  .mosaico-2x1 img:nth-child(3){ grid-column:1; grid-row:auto; height:auto; }
}
@media (max-width: 560px){
  .mosaico-final{ columns:1; }
}

/* par de fotos horizontales, centrado en su columna */
.par-centrado{
  display:flex;
  flex-direction:column;
  gap:clamp(.75rem, 1.6vw, 1.1rem);
  align-items:center;
  max-width:520px;
}
.par-centrado img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:auto;
  object-fit:contain;
}

/* los listados largos no deben partirse a media columna */
.proyectos__lista li{ break-inside:avoid; }

/* nombre en la portada: identifica antes de que empiece el argumento */
.portada__nombre{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing:.02em;
  line-height:1.1;
  margin:0 0 .55rem;
  text-transform:uppercase;
}
.portada__nombre + .rotulo{
  margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
  padding-top:.6rem;
  border-top:1px solid var(--linea-fuerte);
  max-width:34ch;
}

/* nombre de portada — ajuste de escala y bajada en una línea */
.portada__nombre{
  font-size:clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing:.015em;
  margin-bottom:.45rem;
}
.portada__nombre + .rotulo{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(.6rem, 1.05vw, .72rem);
  letter-spacing:.14em;
  padding-top:.65rem;
}
@media (max-width: 700px){
  .portada__nombre + .rotulo{
    white-space:normal;
    letter-spacing:.1em;
  }
}

/* nombre de portada — escala final */
.portada__nombre{
  font-size:clamp(2.4rem, 5.2vw, 4.1rem);
  letter-spacing:.01em;
  line-height:1.02;
  margin-bottom:.5rem;
}

/* portada — jerarquía final: nombre, bajada, declaración */
.portada__declaracion{
  font-size:clamp(1.9rem, 4.4vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-.022em;
  max-width:18ch;
}
.portada__nombre + .rotulo{
  margin-bottom:clamp(1.25rem, 2.4vw, 1.75rem);
}
