/* ============================================================
   studio.x — hoja base del sitio
   Tipografías: Syne (display) + Inter (texto) desde Google Fonts.
   Los títulos grandes de proyecto usan Neue Haas Unica (Adobe
   Fonts). Mientras no esté el kit, cae en Inter y se ve bien.

   ESCALA
   El sitio se diseñó sobre un lienzo de 1024 px y, como en el
   Readymag original, ese lienzo se estira hasta los bordes de la
   pantalla: todo crece en proporción en vez de quedar centrado con
   márgenes blancos. La unidad de diseño es --u ("un píxel del
   lienzo"), así que una medida de 51 px se escribe
   calc(51 * var(--u)). Bajo 1024 px --u vale 1 px y mandan las
   reglas de móvil de más abajo.
   ============================================================ */

:root{
  /* ---- color ---- */
  --blanco:  #ffffff;
  --tinta:   #2c2c2c;   /* texto general */
  --negro:   #111111;   /* menú y titulares */
  --tierra:  #722b1a;   /* único acento: estado activo y etiquetas */
  --gris:    #767676;   /* 4.5:1 sobre blanco — mínimo legible */
  --beige:   #f0efec;   /* el mismo de los módulos */
  --linea:   rgba(0,0,0,.12);
  --fondo:   var(--blanco);

  /* ---- tipografía ---- */
  --display: 'Syne', Inter, sans-serif;
  --texto:   'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --titular: 'neue-haas-unica', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- escala ---- */
  --escala: 1;                                       /* respaldo si tan()/atan2() no existen */
  --escala: clamp(1, tan(atan2(100vw, 1024px)), 2);  /* 100vw / 1024px, tope 2× */
  --u: calc(1px * var(--escala));

  /* El texto NO sigue la escala del lienzo. Si lo hiciera, en un
     monitor ancho terminaría en 25 px y en uno de 1024 en 13. Tiene
     su propia unidad, que arranca en 1 y se detiene en 1.28: así el
     cuerpo se mueve entre 15 y 19 px, que es la franja cómoda de
     lectura en web, sea cual sea la pantalla. */
  --escala-texto: 1;
  --escala-texto: clamp(1, tan(atan2(100vw, 1280px)), 1.28);
  --ut: calc(1px * var(--escala-texto));
  --margen: calc(40 * var(--u));   /* aire lateral; el Readymag traía 24 */
}

@media (max-width: 700px){
  :root{ --margen: 22px; }
}

*{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: calc(15 * var(--ut));
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }

.contenedor{
  max-width: none;
  margin: 0;
  padding: 0 var(--margen);
}

.solo-lectores{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   ENCABEZADO
   En el original el encabezado se desvanece al bajar (animación
   de scroll, opacidad 100 → 0). Lo hace animaciones.js.
   ============================================================ */
.sx-cabecera{
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--linea);
}
.sx-cabecera .contenedor{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  min-height: calc(70 * var(--u));
  padding-top: calc(22 * var(--u));
  padding-bottom: calc(14 * var(--u));
}
.sx-logo{ display: block; line-height: 0; }
.sx-logo img{ width: calc(86 * var(--u)); }
.sx-logo:focus-visible{ outline: 2px solid var(--negro); outline-offset: 3px; }

.sx-menu{
  display: flex;
  gap: calc(28 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-menu a{
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--negro);
  text-decoration: none;
  padding: calc(4 * var(--u)) 0;
}
.sx-menu a:hover{ text-decoration: none; }
.sx-menu a:active{ color: var(--tierra); }

/* el menú de escritorio se esconde donde entra el hamburguesa (menu.js) */
@media (max-width: 700px){
  .sx-menu{ display: none; }
  .sx-cabecera .contenedor{ min-height: 58px; padding-top: 18px; }
  .sx-logo img{ width: 78px; }
}

/* cabecera sobre una portada a sangre (fichas de proyecto) */
.sx-cabecera.sobre-portada{
  position: absolute;
  top: 0; left: 0; right: 0;
  border-bottom: 0;
  background: transparent;
}
/* Cuando la portada es oscura el logo negro no se ve, así que la
   cabecera se pone en blanco. Qué portada es oscura se mide al
   preparar el contenido con scripts/tono-portadas.sh y queda
   anotado en content/proyectos.json. */
.sx-cabecera.sobre-portada.clara .sx-logo img{ filter: brightness(0) invert(1); }
.sx-cabecera.sobre-portada.clara .sx-menu a{ color: var(--blanco); }
.sx-cabecera.sobre-portada.clara .sx-menu a:active{ color: #e8c4b8; }

/* ============================================================
   PIE
   ============================================================ */
.sx-pie{
  margin-top: calc(40 * var(--u));
  border-top: 1px solid var(--linea);
  padding: calc(40 * var(--u)) 0 calc(34 * var(--u));
}
/* La invitación abre el pie: es el último lugar donde alguien que
   bajó hasta acá puede escribirnos sin tener que buscar el menú. */
.sx-pie .llamada{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(12 * var(--u)) calc(28 * var(--u));
  padding-bottom: calc(34 * var(--u));
  margin-bottom: calc(34 * var(--u));
  border-bottom: 1px solid var(--linea);
}
.sx-pie .invita{
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(19 * var(--u));
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--negro);
  margin: 0;
  text-wrap: balance;
}
.sx-pie .conversemos{
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(19 * var(--u));
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--tierra);
  text-decoration: none;
  white-space: nowrap;
}
.sx-pie .conversemos span{
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.sx-pie .conversemos:hover{ text-decoration: none; }
.sx-pie .conversemos:hover span{ transform: translateX(.22em); }

.sx-pie .columnas{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--u));
}
.sx-pie ul{ list-style: none; margin: 0; padding: 0; }
.sx-pie li{ margin-bottom: calc(4 * var(--u)); }
.sx-pie a,
.sx-pie .etiqueta,
.sx-pie li{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  letter-spacing: -.012em;
  line-height: 1.6;
  color: var(--negro);
  text-decoration: none;
}
.sx-pie .etiqueta{ color: var(--gris); display: block; margin-bottom: calc(4 * var(--u)); }
.sx-pie a:hover{ text-decoration: underline; text-underline-offset: .22em; }
.sx-pie a:active{ color: var(--tierra); }
.sx-pie .escribenos{ text-align: left; }
.sx-pie .escribenos a{ overflow-wrap: anywhere; }
.sx-pie .cierre{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-top: calc(36 * var(--u));
}
.sx-pie .copyright{
  font-family: var(--texto);
  font-size: calc(11 * var(--ut));
  color: rgba(0,0,0,.5);
}
.sx-pie .marca img{ width: calc(38 * var(--u)); }

@media (max-width: 700px){
  .sx-pie{ margin-top: 40px; padding: 34px 0 30px; }
  .sx-pie .columnas{ grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .sx-pie .escribenos{ grid-column: 1 / -1; }
  .sx-pie .escribenos a{ word-break: break-all; }
  .sx-pie .cierre{ margin-top: 30px; }
  .sx-pie .llamada{
    display: block;
    padding-bottom: 26px;
    margin-bottom: 28px;
  }
  .sx-pie .invita,
  .sx-pie .conversemos{ font-size: 17px; }
  .sx-pie .conversemos{ display: inline-block; margin-top: 10px; }
}

/* El diseño de nota que venía del Readymag dejaba el texto en una
   columna angosta a la izquierda y media página en blanco a la
   derecha. Acá el cuerpo se centra y toma un ancho de lectura real,
   con o sin foto de portada. */
.sx-nota-cuerpo{
  /* la columna de lectura ES el contenedor: así el rail, el título y
     el cuerpo quedan alineados y no sobra media página a la derecha */
  max-width: 72ch;
  margin-inline: auto;
}
.ntx-titular,
.ntx-cuerpo{ width: auto !important; max-width: 68ch; }
.ntx-rail, .ntx-pie{ width: auto !important; }
.sin-portada .ntx-hueco{ display: none; }
.sin-portada .sx-nota-vecinos{ margin-bottom: calc(10 * var(--u)); }

@media (max-width: 860px){
  .sx-nota-cuerpo{ max-width: none; }
}

/* Las fotos de una ficha entran con un fundido: aparecer de golpe al
   terminar de cargar se siente tosco. La opacidad 0 la pone el script
   y solo sobre las que todavía no están cargadas, así que sin
   JavaScript —o con la foto ya en caché— se ven igual de inmediato. */
.sx-lienzo .foto,
.sx-ficha-portada > img{ transition: opacity .55s ease; }
.sx-lienzo .foto.cargando,
.sx-ficha-portada > img.cargando{ opacity: 0; }
.sx-ficha-portada.tenue > img.cargando{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .sx-lienzo .foto, .sx-ficha-portada > img{ transition: none; }
}

/* ============================================================
   LA MARCA AL ENTRAR
   La cortina la crea el script; acá solo vive su aspecto. Sin
   JavaScript no se dibuja nada y la página se ve de inmediato.
   ============================================================ */
.sx-intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--blanco);
  animation: sx-intro-entra .5s ease both;
}
.sx-intro img{
  width: calc(132 * var(--u));
  height: auto;
  animation: sx-intro-marca 1.1s cubic-bezier(.2,.7,.3,1) both;
}
.sx-intro.fuera{
  animation: sx-intro-sale .65s cubic-bezier(.65,0,.35,1) both;
  pointer-events: none;
}
/* mientras está la cortina no se puede scrollear por debajo */
.sx-con-intro, .sx-con-intro body{ overflow: hidden; }

@keyframes sx-intro-entra{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes sx-intro-sale{ to{ opacity: 0; visibility: hidden } }
@keyframes sx-intro-marca{
  from{ opacity: 0; transform: translateY(calc(10 * var(--u))) scale(.97) }
  to{ opacity: 1; transform: none }
}
@media (prefers-reduced-motion: reduce){
  .sx-intro{ display: none }
  .sx-con-intro, .sx-con-intro body{ overflow: auto }
}

/* ---- el cuerpo de la ficha entra al llegar ---- */
.sx-lienzo .pieza.porLlegar{
  opacity: 0;
  transform: translateY(calc(26 * var(--u)));
  transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
}
.sx-lienzo .pieza.porLlegar.llego{ opacity: 1; transform: none; }

/* ---- la portada del proyecto se asienta al cargar ---- */
.sx-ficha-portada > img{ animation: sx-portada-asienta 1.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sx-portada-asienta{
  from{ transform: scale(1.06) }
  to{ transform: none }
}

/* ---- las opiniones se levantan al pasar el cursor ---- */
.sx-testimonios .opinion{
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease;
}
.sx-testimonios .opinion:hover{
  transform: translateY(calc(-3 * var(--u)));
  border-color: rgba(0,0,0,.26);
}

@media (prefers-reduced-motion: reduce){
  .sx-lienzo .pieza.porLlegar{ opacity: 1; transform: none; transition: none }
  .sx-ficha-portada > img{ animation: none }
  .sx-testimonios .opinion{ transition: none }
}

/* ---- dos detalles de movimiento, sin exagerar ---- */
/* la ficha del carrusel se levanta apenas al pasar el cursor */
.sx-carrusel .ficha .imagen{ overflow: hidden; display: block; }
.sx-carrusel .ficha img{ transition: transform .6s cubic-bezier(.2,.7,.3,1); }

/* El menú subraya desde el centro. Reemplaza al `text-decoration`
   de más arriba, que si no se dibujaban los dos a la vez. */
.sx-menu a{ position: relative; }
.sx-menu a::after{
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: calc(-4 * var(--u));
  height: 1px;
  background: currentColor;
  transition: left .28s ease, right .28s ease;
}
.sx-menu a:hover::after{ left: 0; right: 0; }

@media (prefers-reduced-motion: reduce){
  .sx-carrusel .ficha img, .sx-menu a::after{ transition: none }
}

/* ============================================================
   PREGUNTAS FRECUENTES
   Cada una es un <details>: se pliega sin JavaScript y el texto
   sigue en el HTML aunque esté cerrada.
   ============================================================ */
.sx-preguntas{
  max-width: calc(760 * var(--u));
  margin: 0 auto calc(40 * var(--u));
  /* el mismo aire bajo el menú que tienen Contacto y Nosotras: sin
     esto el título quedaba pegado a la cabecera */
  padding-top: calc(72 * var(--u));
}
/* La página se encabeza como Contacto: un título grande y su bajada.
   Antes usaba el rótulo chico de sección, que la hacía parecer un
   bloque suelto en vez de una página. */
.sx-preguntas h1{
  font-family: var(--display);
  font-size: calc(38 * var(--ut));
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--negro);
  margin: 0 0 calc(14 * var(--u));
}
.sx-preguntas .bajada{
  font-size: calc(15.5 * var(--ut));
  line-height: 1.6;
  color: var(--gris);
  max-width: 54ch;
  margin: 0 0 calc(30 * var(--u));
}
.sx-preguntas .lista{ border-top: 1px solid var(--linea); }

.sx-pregunta{ border-bottom: 1px solid var(--linea); }
.sx-pregunta summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  padding: calc(20 * var(--u)) 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(17 * var(--ut));
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--negro);
}
.sx-pregunta summary::-webkit-details-marker{ display: none; }
.sx-pregunta summary::after{
  content: '+';
  flex: 0 0 auto;
  font-family: var(--texto);
  font-size: calc(18 * var(--ut));
  line-height: 1;
  color: var(--tierra);
  transition: transform .25s ease;
}
.sx-pregunta[open] summary::after{ content: '−'; }
.sx-pregunta summary:hover{ color: var(--tierra); }
.sx-pregunta summary:focus-visible{ outline: 2px solid var(--tierra); outline-offset: 3px; }

.sx-pregunta .respuesta{ padding: 0 calc(38 * var(--u)) calc(22 * var(--u)) 0; }
.sx-pregunta .respuesta p{
  margin: 0;
  font-size: calc(14.5 * var(--ut));
  line-height: 1.65;
  color: var(--tinta);
  max-width: 62ch;
}
.sx-pregunta .respuesta .mas{ margin-top: calc(10 * var(--u)); }
.sx-pregunta .respuesta .mas a{
  font-size: calc(13.5 * var(--ut));
  color: var(--tierra);
  text-decoration: none;
}
.sx-pregunta .respuesta .mas a:hover{ text-decoration: underline; text-underline-offset: .22em; }

/* el puente desde Contacto hacia las preguntas */
.antes-de-escribir{ margin: calc(26 * var(--u)) 0 0; }
.antes-de-escribir a{
  font-size: calc(13.5 * var(--ut));
  color: var(--gris);
  text-decoration: none;
}
.antes-de-escribir a:hover{ color: var(--tierra); }

.sx-queda{ margin-top: calc(34 * var(--u)); }
.sx-queda a{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(16 * var(--ut));
  color: var(--negro);
  text-decoration: none;
}
.sx-queda a:hover{ color: var(--tierra); }

@media (max-width: 700px){
  .sx-preguntas{ max-width: none; padding-top: 40px; }
  .sx-preguntas h1{ font-size: 30px; }
  .sx-preguntas .bajada{ font-size: 15.5px; max-width: none; }
  .sx-pregunta summary{ font-size: 16px; padding: 17px 0; }
  .sx-pregunta .respuesta{ padding-right: 0; }
  .sx-pregunta .respuesta p{ font-size: 14.5px; }
  .sx-queda a{ font-size: 15px; }
}

/* ============================================================
   PIEZAS COMUNES
   ============================================================ */
.sx-etiqueta{            /* «Proyectos seleccionados» */
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--tierra);
  margin: 0;
}
.sx-rotulo{              /* etiqueta a la izquierda, conteo a la derecha */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding-bottom: calc(12 * var(--u));
  border-bottom: 1px solid var(--linea);
}
.sx-rotulo .conteo{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  font-weight: 500;
  letter-spacing: -.015em;
  color: rgba(44,44,44,.5);
}

.sx-boton{               /* píldora «Contáctanos» */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(38 * var(--u));
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--negro);
  border-radius: 999px;
  background: var(--beige);
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--negro);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.sx-boton:hover,
.sx-boton:focus-visible{
  background: var(--tierra);
  border-color: var(--tierra);
  color: var(--blanco);
}

/* ============================================================
   INICIO — portada
   ============================================================ */
.sx-portada{ padding: calc(18 * var(--u)) 0 0; }
.sx-portada .bajada{
  font-family: var(--display);
  font-size: calc(16 * var(--ut));
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--tierra);
  margin: 0 0 calc(16 * var(--u));
}
.sx-portada h1{
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(51 * var(--u));
  line-height: .96;
  letter-spacing: -.035em;
  color: var(--tinta);
  margin: 0;
}
/* El titular va todo en un mismo peso. La marca .fuerte sigue en el
   contenido por si vuelve a hacer falta, pero hoy no cambia nada. */
.sx-portada h1 .fuerte{ font-weight: inherit; }
.sx-portada .pie-portada{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  margin-top: calc(-32 * var(--u));
  padding-bottom: calc(34 * var(--u));
}
.sx-portada .pie-portada .hueco{ flex: 1; }
/* ============================================================
   WHATSAPP QUE ACOMPAÑA
   Abajo a la derecha, fijo: desde cualquier punto del sitio se
   puede escribir sin volver al menú ni bajar hasta el pie.
   ============================================================ */
.sx-wa-flota{
  position: fixed;
  right: calc(22 * var(--u));
  bottom: calc(22 * var(--u) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border-radius: 999px;
  background: var(--beige);
  border: 1px solid var(--linea);
  box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.14);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease, border-color .25s ease;
}
.sx-wa-flota img{
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  object-fit: contain;
}
.sx-wa-flota:hover{
  background: var(--tierra);
  border-color: var(--tierra);
  transform: translateY(calc(-2 * var(--u))) scale(1.04);
}
.sx-wa-flota:hover img{ filter: brightness(0) invert(1); }
.sx-wa-flota:focus-visible{ outline: 2px solid var(--tierra); outline-offset: 3px; }

/* mientras está la cortina de entrada, el botón no asoma */
.sx-con-intro .sx-wa-flota{ opacity: 0; pointer-events: none; }

@media (max-width: 700px){
  .sx-wa-flota{ right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  .sx-wa-flota img{ width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .sx-wa-flota{ transition: none }
}

@media (max-width: 700px){
  .sx-portada{ padding-top: 18px; }
  .sx-portada h1{ font-size: clamp(32px, 8.6vw, 51px); }
  .sx-portada .pie-portada{ margin-top: 28px; padding-bottom: 28px; }
}

/* ============================================================
   CARRUSEL DE PROYECTOS (inicio)
   Se mueve solo al bajar la página, como en el original
   (animación de scroll, dx -2342). Lo hace animaciones.js;
   sin JavaScript queda un carrusel que se arrastra a mano.
   ============================================================ */
.sx-carrusel{ margin-top: calc(28 * var(--u)); }
/* El rótulo de esta sección va sin su línea: la tira de abajo llega
   hasta las paredes y la línea, que respeta el margen, quedaba
   cortada y flotando sobre las fichas. */
.sx-carrusel .sx-rotulo{ border-bottom: 0; padding-bottom: calc(14 * var(--u)); }
.sx-carrusel .marco{
  overflow: hidden;
  /* La tira toca las dos paredes de la ventana: se sangra el margen
     del contenedor y NO se devuelve como relleno, así la primera
     ficha arranca pegada al borde y la última se corta contra él,
     como en el original. */
  margin: 0 calc(var(--margen) * -1);
}
.sx-carrusel .pista{
  display: flex;
  gap: calc(8 * var(--u));
  will-change: transform;
}
.sx-carrusel .ficha{
  flex: 0 0 calc(198 * var(--u));
  text-decoration: none;
  color: inherit;
}
.sx-carrusel .ficha .imagen{
  display: block;
  aspect-ratio: 198 / 289;
  overflow: hidden;
  background: #f2f2f2;
}
.sx-carrusel .ficha img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.sx-carrusel .ficha:hover img{ transform: scale(1.03); }
.sx-carrusel .ficha .nombre{
  display: block;
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--negro);
  margin-top: calc(12 * var(--u));
}
.sx-carrusel .ficha .servicio{
  display: block;
  font-family: var(--texto);
  font-size: calc(12 * var(--ut));
  line-height: 1.4;
  letter-spacing: -.01em;
  color: rgba(44,44,44,.62);
  margin-top: calc(2 * var(--u));
}
.sx-carrusel a.ficha:hover .nombre{ text-decoration: underline; text-underline-offset: .22em; }

/* sin JS (o con «reducir movimiento») el marco se arrastra a mano */
/* el carrusel del inicio también se corre a mano */
.sx-carrusel .marco.agarrable{ cursor: grab; }
.sx-carrusel .marco.agarrando{ cursor: grabbing; }
.sx-carrusel .marco.agarrando *{ user-select: none; }
.sx-carrusel .marco.agarrable img{ -webkit-user-drag: none; user-drag: none; }

.sx-carrusel .marco.manual{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.sx-carrusel .marco.manual::-webkit-scrollbar{ display: none; }
.sx-carrusel .marco.manual .ficha{ scroll-snap-align: start; }

@media (max-width: 700px){
  .sx-carrusel .ficha{ flex-basis: 198px; }
}

/* ============================================================
   GRILLA DE PROYECTOS
   ============================================================ */
.sx-titulo-seccion{
  font-family: var(--display);
  font-size: calc(24 * var(--ut));
  font-weight: 600;
  color: var(--tierra);
  margin: calc(46 * var(--u)) 0 calc(34 * var(--u));
}
/* ---- filtros y cambio de vista ---- */
.sx-filtros{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u)) calc(24 * var(--u));
  padding-bottom: calc(14 * var(--u));
  margin-bottom: calc(34 * var(--u));
  border-bottom: 1px solid var(--linea);
}
.sx-filtros .etiquetas{ display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(20 * var(--u)); }
.sx-filtros button{
  border: 0;
  background: none;
  padding: calc(4 * var(--u)) 0;
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  letter-spacing: -.015em;
  color: rgba(44,44,44,.62);
  cursor: pointer;
}
.sx-filtros button span{ font-size: .8em; color: rgba(44,44,44,.4); }
.sx-filtros button:hover{ color: var(--negro); }
.sx-filtros button.activo{ color: var(--tierra); }
.sx-filtros button.activo span{ color: var(--tierra); opacity: .55; }
.sx-filtros .vista{ display: flex; gap: calc(14 * var(--u)); flex: 0 0 auto; }
.sx-filtros .vista button.activo{ text-decoration: underline; text-underline-offset: .3em; }
.sx-sin-resultados{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  color: rgba(44,44,44,.6);
  padding: calc(40 * var(--u)) 0;
}
.sx-sin-resultados[hidden]{ display: none; }
.sx-grilla li[hidden]{ display: none; }

/* ---- vista de lista: sin fotos, como un índice ---- */
.sx-proyectos[data-vista="lista"] .sx-grilla{
  display: block;
  border-top: 1px solid var(--linea);
}
.sx-proyectos[data-vista="lista"] .sx-grilla li{ border-bottom: 1px solid var(--linea); }
.sx-proyectos[data-vista="lista"] .sx-grilla a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(16 * var(--u)) 0;
  transition: padding-left .25s cubic-bezier(.2,.7,.3,1);
}
.sx-proyectos[data-vista="lista"] .sx-grilla a:hover{ padding-left: calc(10 * var(--u)); }
.sx-proyectos[data-vista="lista"] .imagen{ display: none; }
.sx-proyectos[data-vista="lista"] .nombre{ margin: 0; font-size: calc(22 * var(--ut)); }
.sx-proyectos[data-vista="lista"] .servicio{ text-align: right; }

.sx-grilla{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(46 * var(--u)) calc(24 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-grilla a{ text-decoration: none; color: inherit; display: block; }
.sx-grilla .imagen{
  display: block;
  aspect-ratio: 227 / 145;
  overflow: hidden;
  background: #f2f2f2;
}
.sx-grilla img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.sx-grilla a:hover img{ transform: scale(1.03); }
.sx-grilla .nombre{
  font-family: var(--display);
  font-size: calc(22 * var(--ut));
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--negro);
  margin: calc(14 * var(--u)) 0 calc(4 * var(--u));
}
.sx-grilla .servicio{
  font-family: var(--texto);
  font-size: calc(14 * var(--ut));
  line-height: 1.4;
  letter-spacing: -.008em;
  color: rgba(44,44,44,.62);
}

@media (max-width: 860px){
  .sx-filtros{ gap: 14px; padding-bottom: 12px; margin-bottom: 26px; }
  .sx-filtros .etiquetas{ gap: 4px 16px; }
  .sx-filtros button{ font-size: 13px; }
  .sx-proyectos[data-vista="lista"] .nombre{ font-size: 18px; }
  .sx-proyectos[data-vista="lista"] .sx-grilla a{ padding: 14px 0; gap: 14px; }
  .sx-grilla{ grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
  .sx-grilla .nombre{ font-size: 20px; margin: 12px 0 2px; }
  .sx-grilla .servicio{ font-size: 14px; }
}
@media (max-width: 460px){
  .sx-grilla .nombre{ font-size: 17px; }
  .sx-grilla .servicio{ font-size: 12px; }
}

/* ============================================================
   FICHA DE PROYECTO
   ============================================================ */
.sx-ficha-portada{
  position: relative;
  background: var(--blanco);
}
.sx-ficha-portada > img{
  width: 100%;
  aspect-ratio: 1024 / 408;
  object-fit: cover;
}
/* Cada ficha decide su portada. Las que llevan `portadaTenue` en
   proyectos.json bajan la foto al 30 % para que el título se lea
   encima; las demás conservan su contraste. Hoy solo Aylwin. */
.sx-ficha-portada.tenue > img{ opacity: .3; }
.sx-ficha-portada .vecinos{
  position: absolute;
  left: 0; right: 0; bottom: calc(42 * var(--u));
  display: flex;
  justify-content: space-between;
  padding: 0 var(--margen);
  pointer-events: none;
}
.sx-ficha-portada .vecinos a{
  pointer-events: auto;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  display: grid; place-items: center;
  opacity: .75;
  transition: opacity .18s;
}
.sx-ficha-portada .vecinos a:hover{ opacity: 1; }
.sx-ficha-portada .vecinos img{ width: calc(25 * var(--u)); }
.sx-ficha-portada .vecinos .atras img{ transform: scaleX(-1); }
/* Cuando la portada no es ni clara ni oscura del todo, ni la flecha
   negra ni la blanca se ven. Esas fichas llevan `flechasGrises` en
   proyectos.json y usan un gris medio, que se lee sobre las dos. */
.sx-ficha-portada.flechas-grises .vecinos img{ filter: brightness(0) invert(.55); }
.sx-ficha-portada.flechas-grises .vecinos a{ opacity: 1; }

/* sobre una portada oscura las flechas negras tampoco se ven */
.sx-ficha-portada.oscura .vecinos img{ filter: brightness(0) invert(1); }
.sx-ficha-portada.oscura .vecinos a{ opacity: .85; }
.sx-ficha-portada.oscura .vecinos a:hover{ opacity: 1; }

/* En la ficha, el título y la fila de datos se alinean con el texto
   del cuerpo (28 unidades), no con el margen general (40). Es lo que
   hace el original: medido en studioxcompany.com/villa/, los tres
   arrancan en la misma vertical. */
.sx-ficha > .contenedor{
  padding-left: calc(28 * var(--u));
  padding-right: calc(28 * var(--u));
}

.sx-ficha h1{
  font-family: var(--titular);
  font-weight: 500;
  font-size: calc(96 * var(--u));
  line-height: .95;
  letter-spacing: -.023em;
  color: var(--negro);
  /* El borde de la portada corta el título por la mitad de las
     mayúsculas, no por arriba. Con line-height .95 la caja de
     línea deja la mitad de la altura de mayúscula a .48em de su
     borde superior, así que ese es el desplazamiento. Vale igual
     para Inter y para Neue Haas Unica: se llevan un 1%. */
  margin: -.48em 0 0;
  position: relative;
  z-index: 2;
}
.sx-ficha .datos{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(18 * var(--u)) calc(24 * var(--u));
  margin: calc(46 * var(--u)) 0 0;
  max-width: calc(720 * var(--u));
}
/* una ficha con cinco datos necesita más ancho que una con cuatro */
.sx-ficha .datos.anchos{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: calc(930 * var(--u));
}
.sx-ficha .datos dd a{ color: inherit; text-decoration: underline; text-underline-offset: .22em; }
.sx-ficha .datos dd a:hover{ color: var(--tierra); }
.sx-ficha .datos dt{
  font-size: calc(13 * var(--ut));
  letter-spacing: -.012em;
  color: rgba(0,0,0,.5);
  margin: 0 0 calc(4 * var(--u));
}
.sx-ficha .datos dd{
  font-size: calc(14 * var(--ut));
  letter-spacing: -.012em;
  color: var(--negro);
  margin: 0;
}
/* ---- cuerpo de la ficha: el lienzo del diseño original ----
   Cada pieza lleva su x, su y y su ancho tal como estaban en el
   diseño de 1024, y el lienzo mide justo 1024 unidades, que con la
   escala del sitio es el ancho de la pantalla. Así la diagramación
   queda igual que en el original en cualquier monitor. */
.sx-lienzo{
  position: relative;
  width: calc(1024 * var(--u));
  height: calc(var(--alto) * var(--u));
  margin: calc(56 * var(--u)) auto 0;
}
.sx-lienzo .pieza{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}
.sx-lienzo .foto{
  height: calc(var(--h) * var(--u));
  object-fit: cover;
}
.sx-lienzo .texto{
  font-size: calc(14.4 * var(--ut));
  line-height: 1.45;
  color: var(--tinta);
}
.sx-lienzo .texto p{ margin: 0 0 .75em; }
.sx-lienzo .texto p:last-child{ margin-bottom: 0; }
.sx-lienzo .texto.derecha{ text-align: right; }
.sx-lienzo .texto.centrada{ text-align: center; }

@media (max-width: 860px){
  /* en el teléfono no cabe el lienzo: las piezas se apilan en orden */
  .sx-lienzo{ width: auto; height: auto !important; margin: 40px 0 0; padding: 0 var(--margen); }
  .sx-lienzo .pieza{ position: static; width: auto !important; margin: 0 0 28px; }
  .sx-lienzo .foto{ height: auto !important; width: 100%; }
  .sx-lienzo .texto{ font-size: 15px; }

  .sx-ficha h1{ font-size: clamp(48px, 11vw, 96px); }
  .sx-ficha .datos, .sx-ficha .datos.anchos{ grid-template-columns: repeat(2, 1fr); max-width: none; gap: 18px 24px; margin-top: 40px; }
  .sx-ficha .datos dt, .sx-ficha .datos dd{ font-size: 12px; }
  .sx-ficha-portada .vecinos{ bottom: 18px; padding: 0 16px; }
  .sx-ficha-portada .vecinos a{ width: 34px; height: 34px; }
  .sx-ficha-portada .vecinos img{ width: 25px; }
}

/* ============================================================
   NOSOTRAS
   ============================================================ */
.sx-intro-estudio{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  line-height: 1.15;
  letter-spacing: -.015em;
  text-align: center;
  max-width: calc(493 * var(--u));
  margin: calc(62 * var(--u)) auto calc(52 * var(--u));
  color: var(--tinta);
}
.sx-equipo{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(18 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-equipo .encabezado{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(10 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.sx-equipo .nombre{
  font-family: var(--display);
  font-size: calc(12 * var(--ut));
  font-weight: 500;
  letter-spacing: -.017em;
  line-height: 1.42;
  color: var(--tinta);
  margin: 0;
}
.sx-equipo .cargo{
  font-size: calc(10 * var(--ut));
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0;
}
.sx-equipo .redes{ display: flex; gap: calc(5 * var(--u)); flex: 0 0 auto; }
.sx-equipo .redes img{ width: calc(18 * var(--u)); height: calc(18 * var(--u)); object-fit: contain; }
.sx-equipo .redes a{ opacity: .9; }
.sx-equipo .redes a:hover{ opacity: .6; }
.sx-equipo .retrato{
  position: relative;
  z-index: 1;
  aspect-ratio: 313 / 358;
  overflow: hidden;
  background: var(--fondo);
}
.sx-equipo .retrato img{ width: 100%; height: 100%; object-fit: cover; }

/* Como en el original: al cargar, cada retrato empieza tapando el
   nombre y baja a su lugar, una tras otra. El nombre y el cargo
   quedan debajo, así que la foto los va descubriendo. */
@keyframes sx-baja-retrato{
  from{ transform: translateY(calc(-56 * var(--u))); }
  to{ transform: none; }
}
.js .sx-equipo .encabezado{ position: relative; z-index: 0; }
.js .sx-equipo .retrato{
  animation: sx-baja-retrato .75s cubic-bezier(.65,0,.15,1) both;
}
.js .sx-equipo li:nth-child(1) .retrato{ animation-delay: .45s; }
.js .sx-equipo li:nth-child(2) .retrato{ animation-delay: .75s; }
.js .sx-equipo li:nth-child(3) .retrato{ animation-delay: 1.05s; }

@media (prefers-reduced-motion: reduce){
  .js .sx-equipo .retrato{ animation: none; }
}

@media (max-width: 860px){
  .sx-equipo{ grid-template-columns: 1fr; gap: 34px; max-width: 420px; margin-inline: auto; }
  /* apiladas en una columna, la fundadora abre la lista */
  .sx-equipo li:nth-child(2){ order: -1; }
  .js .sx-equipo li:nth-child(2) .retrato{ animation-delay: .45s; }
  .js .sx-equipo li:nth-child(1) .retrato{ animation-delay: .75s; }
  .sx-intro-estudio{ margin: 40px auto 36px; font-size: 14px; max-width: 493px; }
  .sx-equipo .nombre{ font-size: 13px; }
  .sx-equipo .cargo{ font-size: 11px; }
  .sx-equipo .redes img{ width: 18px; height: 18px; }
}

/* ============================================================
   CONTACTO
   Un brief guiado en vez de una caja en blanco: marcar qué
   necesitas y para cuándo es más rápido para quien escribe, y
   deja al estudio con datos con los que se puede cotizar.
   ============================================================ */
body.pagina-contacto{ --fondo: #e6e6e6; }
.sx-contacto{
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: calc(64 * var(--u));
  padding: calc(84 * var(--u)) 0 calc(120 * var(--u));
  align-items: start;
}
.sx-contacto h1{
  font-family: var(--display);
  font-size: calc(38 * var(--ut));
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--negro);
  margin: 0 0 calc(20 * var(--u));
}
.sx-contacto .bajada{
  font-family: var(--display);
  font-size: calc(16 * var(--ut));
  line-height: 1.45;
  letter-spacing: -.012em;
  margin: 0;
  max-width: 36ch;
}

.sx-contacto .directo{ margin-top: calc(48 * var(--u)); }
.sx-contacto .directo .etiqueta{
  display: block;
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  letter-spacing: -.012em;
  color: rgba(44,44,44,.6);
  margin-bottom: calc(10 * var(--u));
}
.sx-contacto .directo ul{ list-style: none; margin: 0; padding: 0; }
.sx-contacto .directo li{ margin-bottom: calc(3 * var(--u)); }
.sx-contacto .directo a{
  font-family: var(--display);
  font-size: calc(15 * var(--ut));
  letter-spacing: -.015em;
  color: var(--negro);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.sx-contacto .directo a:hover{ border-bottom-color: var(--tierra); color: var(--tierra); }

/* ---- formulario ---- */
.sx-formulario{ display: grid; gap: calc(32 * var(--u)); }
.sx-formulario .grupo{ border: 0; margin: 0; padding: 0; }
.sx-formulario legend{
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--negro);
  padding: 0;
  margin-bottom: calc(12 * var(--u));
}
.sx-formulario .opcional{
  font-weight: 400;
  color: rgba(44,44,44,.55);
}

/* fichas: casillas y opciones con aspecto de píldora */
.sx-formulario .fichas{ display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.sx-formulario .ficha{ position: relative; }
.sx-formulario .ficha input{
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.sx-formulario .ficha span{
  display: block;
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 999px;
  background: transparent;
  font-family: var(--display);
  font-size: calc(12.4 * var(--ut));
  letter-spacing: -.015em;
  color: var(--tinta);
  transition: background .16s, color .16s, border-color .16s;
}
.sx-formulario .ficha input:hover + span{ border-color: var(--negro); }
.sx-formulario .ficha input:focus-visible + span{ outline: 2px solid var(--tierra); outline-offset: 2px; }
.sx-formulario .ficha input:checked + span{
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

.sx-formulario .par{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
.sx-formulario .campo{ display: block; }
.sx-formulario label{
  display: block;
  font-family: var(--display);
  font-size: calc(15 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--negro);
  margin-bottom: calc(8 * var(--u));
}
.sx-formulario input[type="text"],
.sx-formulario input[type="email"],
.sx-formulario textarea{
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.45);
  background: transparent;
  padding: calc(7 * var(--u)) 0 calc(10 * var(--u));
  font-family: var(--display);
  font-size: calc(17 * var(--ut));
  letter-spacing: -.012em;
  color: var(--negro);
  border-radius: 0;
  -webkit-appearance: none;
}
.sx-formulario textarea{ min-height: calc(132 * var(--u)); resize: vertical; line-height: 1.45; }
.sx-formulario ::placeholder{ color: rgba(0,0,0,.38); }
.sx-formulario input:focus,
.sx-formulario textarea:focus{ outline: none; border-bottom-color: var(--tierra); }
.sx-formulario .campo.mal input,
.sx-formulario .campo.mal textarea{ border-bottom-color: var(--tierra); }
.sx-formulario .error{
  display: block;
  font-size: calc(13 * var(--ut));
  color: var(--tierra);
  margin-top: calc(5 * var(--u));
  min-height: 1em;
}

.sx-formulario .enviar{
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  flex-wrap: wrap;
}
.sx-formulario button[type="submit"]{
  border: 1px solid var(--negro);
  border-radius: 999px;
  background: var(--beige);
  padding: calc(14 * var(--u)) calc(44 * var(--u));
  font-family: var(--display);
  font-size: calc(15 * var(--ut));
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--negro);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.sx-formulario button[type="submit"]:hover,
.sx-formulario button[type="submit"]:focus-visible{
  background: var(--tierra);
  border-color: var(--tierra);
  color: var(--blanco);
}
.sx-formulario button[disabled]{ opacity: .45; cursor: default; }
.sx-formulario .por-whatsapp{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  letter-spacing: -.015em;
  color: rgba(44,44,44,.72);
}
.sx-formulario .por-whatsapp:hover{ color: var(--tierra); }
.sx-formulario .aviso{
  font-size: calc(14 * var(--ut));
  line-height: 1.5;
  margin: 0;
  min-height: 1.4em;
}
.sx-formulario .aviso.error{ color: var(--tierra); }
.sx-formulario .aviso a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* pantalla de gracias */
.sx-gracias{
  font-family: var(--display);
  padding: calc(20 * var(--u)) 0;
}
.sx-gracias h2{
  font-size: calc(26 * var(--ut));
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--negro);
  margin: 0 0 calc(12 * var(--u));
}
.sx-gracias p{
  font-size: calc(14 * var(--ut));
  line-height: 1.4;
  color: var(--tinta);
  margin: 0 0 calc(24 * var(--u));
  max-width: 44ch;
}

@media (max-width: 860px){
  .sx-contacto{ grid-template-columns: 1fr; gap: 40px; padding: 44px 0 64px; }
  .sx-contacto h1{ font-size: 32px; }
  .sx-contacto .bajada{ font-size: 16px; max-width: none; }
  .sx-contacto .pasos{ margin-top: 32px; }
  .sx-contacto .pasos li{ padding: 14px 0; }
  .sx-contacto .pasos h2{ font-size: 15px; }
  .sx-contacto .pasos p{ font-size: 13px; }
  .sx-contacto .directo a{ font-size: 16px; }
  .sx-formulario{ gap: 28px; }
  .sx-formulario label{ font-size: 15px; }
  .sx-formulario input[type="text"],
  .sx-formulario input[type="email"],
  .sx-formulario textarea{ font-size: 16px; }
  .sx-formulario textarea{ min-height: 120px; }
  .sx-formulario button[type="submit"]{ font-size: 15px; padding: 15px 36px; width: 100%; }
  .sx-formulario .enviar{ gap: 14px; }
  .sx-gracias h2{ font-size: 22px; }
  .sx-gracias p{ font-size: 14px; }
}

/* ============================================================
   BLOG — listado
   ============================================================ */
.sx-blog-titulo{
  font-family: var(--display);
  font-size: calc(14 * var(--ut));
  font-weight: 500;
  color: var(--negro);
  margin: calc(46 * var(--u)) 0 calc(32 * var(--u));
}
.sx-notas{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(46 * var(--u)) calc(24 * var(--u));
  list-style: none;
  margin: 0; padding: 0;
}
.sx-notas a{ text-decoration: none; color: inherit; display: block; }
.sx-notas .imagen{ display: block; aspect-ratio: 227 / 145; overflow: hidden; background: #f2f2f2; }
.sx-notas img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.sx-notas a:hover img{ transform: scale(1.03); }
.sx-notas .titulo{
  font-family: var(--display);
  font-size: calc(22 * var(--ut));
  font-weight: 500;
  color: var(--negro);
  margin: calc(14 * var(--u)) 0 calc(4 * var(--u));
  line-height: 1.18;
  letter-spacing: -.012em;
}
.sx-notas .categoria{
  font-family: var(--texto);
  font-size: calc(14 * var(--ut));
  line-height: 1.4;
  letter-spacing: -.008em;
  color: rgba(44,44,44,.62);
}
@media (max-width: 860px){
  .sx-notas{ grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
  .sx-notas .titulo{ font-size: 20px; margin: 12px 0 2px; }
  .sx-notas .categoria{ font-size: 14px; }
  .sx-blog-titulo{ font-size: 14px; margin: 34px 0 26px; }
}

/* ============================================================
   BLOG — nota
   ============================================================ */
.sx-nota-portada img{
  width: 100%;
  aspect-ratio: 1024 / 306;
  object-fit: cover;
}
.sx-nota-vecinos{
  display: flex;
  justify-content: space-between;
  padding: calc(16 * var(--u)) 0 0;
}
.sx-nota-vecinos a{ opacity: .75; }
.sx-nota-vecinos a:hover{ opacity: 1; }
.sx-nota-vecinos img{ width: calc(25 * var(--u)); }
.sx-nota-vecinos .atras img{ transform: scaleX(-1); }
.sx-nota-cuerpo{ padding: calc(34 * var(--u)) 0 0; }

/* ============================================================
   TESTIMONIOS
   Carrusel: la tarjeta activa al centro y las vecinas asomando
   apagadas a los lados. Sin JavaScript el marco se arrastra a
   mano y se ven todas.
   ============================================================ */
/* la salida del carrusel hacia la lista completa, alineada a la
   derecha como en el original */
.sx-ver-todos{
  display: flex;
  justify-content: flex-end;
  margin-top: calc(34 * var(--u));
}
@media (max-width: 700px){
  .sx-ver-todos{ justify-content: flex-start; margin-top: 26px; }
}

.sx-testimonios{ margin: calc(96 * var(--u)) 0; }
.sx-testimonios .sx-rotulo{ margin-bottom: calc(26 * var(--u)); }

/* Pared de opiniones: columnas que reparten las tarjetas solas, así
   una frase larga no estira a las cortas. */
.sx-testimonios .pared{
  column-count: 3;
  column-gap: calc(18 * var(--u));
}
.sx-testimonios .opinion,
.sx-testimonios .invitacion{
  break-inside: avoid;
  margin: 0 0 calc(18 * var(--u));
  border: 1px solid var(--linea);
  border-radius: calc(14 * var(--u));
  padding: calc(26 * var(--u)) calc(24 * var(--u));
  background: var(--blanco);
}
.sx-testimonios blockquote{
  margin: 0;
  font-size: calc(14.5 * var(--ut));
  line-height: 1.6;
  color: var(--tinta);
}
.sx-testimonios blockquote p{ margin: 0 0 calc(10 * var(--u)); }
.sx-testimonios blockquote p:last-child{ margin-bottom: 0; }
.sx-testimonios figcaption{
  margin-top: calc(18 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--linea);
}
.sx-testimonios .cliente{
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(14 * var(--ut));
  color: var(--tierra);
}
.sx-testimonios .cliente a{ color: inherit; text-decoration: none; }
.sx-testimonios .cliente a:hover{ text-decoration: underline; text-underline-offset: .22em; }
.sx-testimonios .nota{
  display: block;
  font-size: calc(13 * var(--ut));
  letter-spacing: .12em;
  color: var(--tierra);
  margin-bottom: calc(12 * var(--u));
}
.sx-testimonios .servicios{
  display: block;
  font-size: calc(11.5 * var(--ut));
  letter-spacing: .04em;
  color: var(--gris);
  margin-top: calc(6 * var(--u));
}
.sx-testimonios .persona{
  display: block;
  font-size: calc(12.5 * var(--ut));
  color: var(--gris);
  margin-top: calc(2 * var(--u));
}

/* La invitación cierra la pared, con el beige del estudio para que se
   lea como una tarjeta distinta y no como una opinión más. */
.sx-testimonios .invitacion{
  background: var(--beige);
  border-color: transparent;
  text-align: left;
}
.sx-testimonios .estrellas{
  display: block;
  font-size: calc(15 * var(--ut));
  letter-spacing: .14em;
  color: var(--tierra);
  margin-bottom: calc(10 * var(--u));
}
.sx-testimonios .invitacion .titulo{
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(15 * var(--ut));
  color: var(--negro);
  margin: 0 0 calc(6 * var(--u));
}
.sx-testimonios .invitacion .texto{
  font-size: calc(13.5 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  margin: 0 0 calc(16 * var(--u));
}

@media (max-width: 1000px){
  .sx-testimonios .pared{ column-count: 2; }
}
@media (max-width: 700px){
  .sx-testimonios{ margin: 64px 0; }
  .sx-testimonios .pared{ column-count: 1; column-gap: 0; }
  .sx-testimonios .opinion,
  .sx-testimonios .invitacion{ margin-bottom: 14px; padding: 22px 20px; border-radius: 14px; }
  .sx-testimonios blockquote{ font-size: 14.5px; }
}

/* ============================================================
   MÓDULOS RESCATADOS (servicios, cifras, método, blog, instagram)
   Traen su propio CSS con variables arriba; aquí solo se les da
   aire y se les pasa la escala del lienzo para que crezcan junto
   con el resto en pantallas anchas.
   ============================================================ */
.sx-modulo{ margin: calc(110 * var(--u)) 0; }
.sx-modulo:first-child{ margin-top: calc(56 * var(--u)); }
.sx-modulo + .sx-modulo{ margin-top: calc(130 * var(--u)); }

@media (min-width: 701px){
  .sx-modulo .xmod{
    --titulo: calc(12 * var(--u));
    --titulo-item: calc(13 * var(--u));
    --cuerpo: calc(12 * var(--u));
    --gap-fila: calc(26 * var(--u));
    --gap-titulo: calc(30 * var(--u));
    --gap-bloques: calc(72 * var(--u));
    --foto-alto: calc(190 * var(--u));
    --foto-gap: calc(14 * var(--u));
    --panel-alto: calc(300 * var(--u));
    --panel-radio: calc(20 * var(--u));
    --panel-padding: calc(34 * var(--u)) calc(30 * var(--u));
    --ficha-radio: calc(20 * var(--u));
    --ficha-padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
    --cx-num: calc(62 * var(--u));
    --cx-logo: calc(29 * var(--u));
    --cx-gap: calc(80 * var(--u));
    --cx-ancho: calc(200 * var(--u));
    --cx-arriba: calc(36 * var(--u));
    --cx-abajo: calc(44 * var(--u));
    --banda-y: calc(40 * var(--u));
    --banda-junta: calc(64 * var(--u));
  }
}
/* El diagnóstico traía sus tamaños en px fijos, así que en pantallas
   anchas quedaba diminuto dentro de una banda enorme. Acá se le pasa la
   escala del lienzo y la pregunta toma el peso que le corresponde. */
.sx-modulo .xmod .dx-label{ font-size: calc(14 * var(--ut)); }
.sx-modulo .xmod .dx-step{ font-size: calc(14 * var(--ut)); }
.sx-modulo .xmod .dx-bajada{ font-size: calc(13 * var(--ut)); max-width: 42ch; }
.sx-modulo .xmod .dx-q{
  font-size: calc(28 * var(--ut));
  line-height: 1.16;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.sx-modulo .xmod .dx-hint{ font-size: calc(13 * var(--ut)); }
.sx-modulo .xmod .dx-opt{
  font-size: calc(14 * var(--ut));
  padding: calc(12 * var(--u)) calc(30 * var(--u));
}
.sx-modulo .xmod .dx-opts{ gap: calc(12 * var(--u)); margin-top: calc(26 * var(--u)); }
.sx-modulo .xmod .dx-back{ font-size: calc(13 * var(--ut)); }
.sx-modulo .xmod .dx-res-tit{ font-size: calc(22 * var(--ut)); }
.sx-modulo .xmod .dx-res-p{ font-size: calc(14 * var(--ut)); max-width: 46ch; }

@media (max-width: 700px){
  .sx-modulo .xmod .dx-label,
  .sx-modulo .xmod .dx-step,
  .sx-modulo .xmod .dx-bajada,
  .sx-modulo .xmod .dx-q,
  .sx-modulo .xmod .dx-hint,
  .sx-modulo .xmod .dx-opt,
  .sx-modulo .xmod .dx-opts,
  .sx-modulo .xmod .dx-back,
  .sx-modulo .xmod .dx-res-tit,
  .sx-modulo .xmod .dx-res-p{ font-size: initial; padding: initial; gap: initial; margin-top: initial; }
}

/* Los logos vienen con proporciones muy distintas: uno muy ancho y
   bajo llenaría la franja y uno cuadrado quedaría diminuto. Se les da
   una caja con tope de alto y de ancho, y cada uno se acomoda dentro. */
.sx-modulo .xmod .cx-logo img{
  max-width: calc(var(--cx-logo) * 4.1);
  object-fit: contain;
}
/* Ajustes de a uno. Los logos muy anchos y bajos pesan de más en la
   fila aunque midan lo mismo, así que se les baja el tope de ancho. */
/* Todas las casillas miden lo mismo: así el ritmo de la franja no
   depende de qué tan ancho sea cada logo. Antes, un logo angosto
   dejaba un hueco y uno largo se comía el aire del vecino. */
.sx-modulo .xmod .cx-logo{
  flex: 0 0 auto;
  /* medido contra el tope de altura de los logos, no en píxeles fijos:
     en móvil ese tope es más chico y la casilla se encoge con él */
  width: calc(var(--cx-logo) * 5.5);
  padding: 0;
}

/* Los logos cuadrados o verticales quedaban diminutos al toparlos por
   altura: 36 px de ancho contra los 140 de un logotipo horizontal. Se
   les da más alto para que pesen ópticamente parecido. La casilla se
   fija en ese alto —y el aire de arriba se descuenta— para que la
   franja negra siga midiendo lo mismo. */
/* el logo de un cliente con ficha lleva a su proyecto */
.sx-modulo .xmod a.cx-logo{ cursor: pointer; }
.sx-modulo .xmod a.cx-logo:hover{ opacity: 1; }
.sx-modulo .xmod a.cx-logo:focus-visible{ outline: 2px solid var(--cx-blanco); outline-offset: 4px; opacity: 1; }

.sx-modulo .xmod .cx-mask{ height: calc(var(--cx-logo) * 1.53); }
/* En el teléfono la franja no se mueve sola —la animación está
   apagada— así que se arrastra con el dedo, como cualquier carrusel.
   La barra de scroll se oculta: el gesto se descubre solo. */
.sx-modulo .xmod.sx-mini .cx-mask{
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sx-modulo .xmod.sx-mini .cx-mask::-webkit-scrollbar{ display: none; }
.sx-modulo .xmod .cx-track{ height: 100%; }
.sx-modulo .xmod .cx-logo[data-cliente="AYC Advisors"] img{ max-height: calc(var(--cx-logo) * 1.53); }
.sx-modulo .xmod .cx-logo[data-cliente="Gabri Patagonia"] img{ max-height: calc(var(--cx-logo) * .95); }
.sx-modulo .xmod .cx-logo[data-cliente="Veus"] img{ max-height: calc(var(--cx-logo) * .76); }

.sx-modulo .xmod .cx-logo[data-cliente="Besolar"] img{ max-width: calc(var(--cx-logo) * 2.88); }
.sx-modulo .xmod .cx-logo[data-cliente="KDPack"] img{ max-width: calc(var(--cx-logo) * 2.88); }

/* En la lista apilada, el número quedaba pegado a la foto del
   servicio. Ojo: este margen se junta con el de abajo de la foto
   —son hermanos en flujo normal, así que se funden en uno—, de modo
   que el hueco final es este número, no la suma. */
.sx-modulo .xmod.sx-mini .sx-item .sx-info{ margin-top: 30px; }

/* El respaldo en texto de los módulos. Solo lo ve quien llega sin
   JavaScript: con JavaScript el propio módulo lo retira del DOM
   apenas monta la versión interactiva. */
.sx-legible{ max-width: 70ch; margin: calc(24 * var(--u)) 0; }
.sx-legible h3{
  font-family: var(--display);
  font-size: calc(15 * var(--ut));
  font-weight: 600;
  margin: calc(22 * var(--u)) 0 calc(8 * var(--u));
}
.sx-legible dt{ font-weight: 600; margin-top: calc(10 * var(--u)); }
.sx-legible dd{ margin: 0; color: var(--tinta); }
.sx-legible dd, .sx-legible li, .sx-legible p{ font-size: calc(14 * var(--ut)); line-height: 1.6; }
.sx-legible ul{ margin: 0; padding-left: 1.1em; }

/* enlace «Ver proyectos» dentro de las tarjetas de servicio */
.sx-modulo .xmod .sx-ver{
  display: inline-block;
  margin-top: calc(18 * var(--u));
  font-family: var(--display);
  font-size: calc(12 * var(--ut));
  letter-spacing: -.015em;
  color: var(--tierra);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .12em;
}
.sx-modulo .xmod .sx-ver:hover{ color: var(--negro); }
/* los servicios que tienen proyectos publicados llevan a su filtro */
.sx-modulo .xmod .sx-item.sx-lleva{ cursor: pointer; }
/* la capa del panel está con pointer-events:none para no tapar el
   hover de la grilla; el enlace sí tiene que recibir el clic */
.sx-modulo .xmod .sx-capa{ pointer-events: none; }
.sx-modulo .xmod .sx-capa .sx-ver,
.sx-modulo .xmod .sx-ficha .sx-ver{ pointer-events: auto; position: relative; z-index: 3; }

@media (min-width: 701px){
  .sx-modulo .mx-metodo{
    --titulo: calc(14 * var(--u));
    --cuerpo: calc(12 * var(--u));
    --gap-head: calc(40 * var(--u));
  }
  .sx-modulo .nxmod{
    --titulo: calc(13 * var(--u));
    --titulo-item: calc(15 * var(--u));
    --cuerpo: calc(12 * var(--u));
    --gap-fila: calc(40 * var(--u));
    --gap-titulo: calc(30 * var(--u));
    --foto-alto: calc(170 * var(--u));
    --foto-radio: calc(4 * var(--u));
    --foto-gap: calc(16 * var(--u));
  }
  .sx-modulo .sx-ig{
    --titulo: calc(13 * var(--u));
    --cuerpo: calc(12 * var(--u));
    --gap: calc(14 * var(--u));
    --radio: calc(10 * var(--u));
  }
}

/* En móvil cada módulo vuelve a sus propias medidas — y lo hace porque
   las de arriba solo existen sobre 700 px, no porque acá se anulen:
   poner `initial` en una variable no la devuelve al valor del módulo,
   la deja inválida, y todo lo que la usaba se cae. Así se veían los
   logos de clientes a tamaño original en el teléfono. */
@media (max-width: 700px){
  .sx-modulo{ margin: 64px 0; }
  .sx-modulo + .sx-modulo{ margin-top: 76px; }
}

/* ============================================================
   ANIMACIONES (las mismas del Readymag)
   · lo que está arriba: fundido de entrada al cargar la página
   · lo que está más abajo: fundido al entrar en pantalla
   · encabezado: se desvanece al bajar
   La clase «js» la pone un script en el <head>; sin JavaScript
   todo se ve normal, sin fundidos.
   ============================================================ */
@keyframes sx-aparece{ from{ opacity: 0 } to{ opacity: 1 } }

/* --- al cargar --- */
.js .sx-portada .bajada,
.js .sx-portada h1,
.js .sx-portada .pie-portada,
.js .sx-rotulo,
.js .sx-titulo-seccion,
.js .sx-blog-titulo,
.js .sx-intro-estudio,
.js .sx-contacto h1,
.js .sx-contacto .bajada,
.js .sx-ficha h1,
.js .sx-ficha .datos{
  animation: sx-aparece 1s cubic-bezier(.4,0,.2,1) both;
}
.js .sx-rotulo,
.js .sx-ficha .datos{ animation-delay: .25s; }

/* lo que ya se ve al abrir la página, aunque esté más abajo */
.js .carga{ animation: sx-aparece 1s cubic-bezier(.4,0,.2,1) both; }

/* --- al entrar en pantalla --- */
.js .aparece{ opacity: 0; }
.js .aparece.visible{
  opacity: 1;
  transition: opacity 1s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  .js *{ animation: none !important; }
  .js .aparece,
  .js .aparece.visible{ opacity: 1; transition: none; }
  .sx-carrusel .pista{ transform: none !important; }
}