/* ============================================================
   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; }
}

/* ============================================================
   LA NOTA EN ESCRITORIO

   El módulo venía del Readymag pensado al revés: 13 px de cuerpo con
   17 de interlineado en pantalla grande, y tamaños mayores recién en
   el teléfono. Para leer 700 palabras eso no sirve. Acá se le pasan
   medidas de lectura de verdad y se aprovecha el ancho con un índice
   al costado.
   ============================================================ */
.sx-nota-marco{ display: block; }

.sx-nota-cuerpo .ntx{
  --cuerpo:      calc(17.5 * var(--ut));
  --cuerpo-alto: 1.68;
  --bajada:      calc(20 * var(--ut));
  --bajada-alto: 1.5;
  --titular:     calc(42 * var(--ut));
  --titular-alto: 1.06;
  --cita:        calc(26 * var(--ut));
  --medida:      66ch;
  --aire-bloque: calc(38 * var(--u));
  --aire-titular: calc(26 * var(--u));
}
.sx-nota-cuerpo .ntx-h2{ font-size: calc(21 * var(--ut)); line-height: 1.25; }
.sx-nota-cuerpo .ntx-p{ font-weight: 400; }
.sx-nota-cuerpo .ntx-lista li{ font-size: calc(17.5 * var(--ut)); line-height: 1.68; margin-bottom: calc(8 * var(--u)); }
/* al saltar desde el índice, el apartado no queda bajo la cabecera */
.sx-nota-cuerpo .ntx-h2{ scroll-margin-top: calc(90 * var(--u)); }

.sx-nota-cuerpo{ max-width: 72ch; margin-inline: auto; }

/* ---- la voz de afuera ---- */
.sx-nota-cuerpo .ntx-voz{
  margin: calc(34 * var(--u)) 0;
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  background: var(--beige);
  border-radius: calc(12 * var(--u));
}
.sx-nota-cuerpo .ntx-voz .dicho{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(19 * var(--ut));
  line-height: 1.38;
  letter-spacing: -.015em;
  color: var(--negro);
  margin: 0 0 calc(14 * var(--u));
  text-wrap: pretty;
}
.sx-nota-cuerpo .ntx-voz .quien{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(4 * var(--u)) calc(10 * var(--u));
  margin: 0;
  font-size: calc(12.5 * var(--ut));
  line-height: 1.5;
}
.sx-nota-cuerpo .ntx-voz .nombre{ font-weight: 600; color: var(--tierra); }
.sx-nota-cuerpo .ntx-voz .rol{ color: var(--gris); }
.sx-nota-cuerpo .ntx-voz .fuente{
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: .22em;
}
.sx-nota-cuerpo .ntx-voz .fuente:hover{ color: var(--tierra); }

@media (max-width: 700px){
  .sx-nota-cuerpo .ntx-voz{ padding: 18px 18px; margin: 26px 0; }
  .sx-nota-cuerpo .ntx-voz .dicho{ font-size: 17px; }
}

/* ---- el índice al costado ---- */
.sx-nota-indice{ display: none; }

@media (min-width: 1100px){
  .sx-nota-marco{
    display: grid;
    grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr);
    gap: calc(56 * var(--u));
    align-items: start;
    justify-content: center;
  }
  .sx-nota-cuerpo{ margin-inline: 0; }
  .sx-nota-indice{
    display: block;
    position: sticky;
    top: calc(96 * var(--u));
    padding-top: calc(6 * var(--u));
  }
  .sx-nota-indice .etq{
    display: block;
    font-size: calc(11 * var(--ut));
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: calc(12 * var(--u));
  }
  .sx-nota-indice ol{
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ap;
    border-left: 1px solid var(--linea);
  }
  .sx-nota-indice li{ counter-increment: ap; margin: 0; }
  .sx-nota-indice a{
    display: block;
    padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(14 * var(--u));
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: calc(12.5 * var(--ut));
    line-height: 1.4;
    color: var(--gris);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
  }
  .sx-nota-indice a:hover{ color: var(--negro); border-left-color: var(--tierra); }
}
.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; }
/* Al volver desde una ficha con /proyectos/#slug, la tarjeta queda
   justo bajo la cabecera en vez de escondida detrás de ella. */
.sx-grilla li{ scroll-margin-top: calc(104 * var(--u)); }

/* ---- 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: var(--tenue, .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,
.js .sx-serv-cabeza h1,
.js .sx-serv-cabeza .bajada,
.js .sx-servicio-cabeza > *{
  animation: sx-aparece 1s cubic-bezier(.4,0,.2,1) both;
}
.js .sx-serv-cabeza .bajada{ animation-delay: .14s; }
.js .sx-servicio-cabeza h1{ animation-delay: .08s; }
.js .sx-servicio-cabeza .bajada{ animation-delay: .18s; }
.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);
}

/* «sube»: lo mismo, pero el bloque llega desde un poco más abajo.
   El recorrido es corto a propósito —16 unidades— porque la idea
   es que se note el movimiento, no que se vea la animación. */
.js .aparece.sube{ transform: translateY(calc(16 * var(--u))); }
.js .aparece.sube.visible{
  transform: none;
  transition: opacity .9s cubic-bezier(.4,0,.2,1),
              transform .9s cubic-bezier(.22,.8,.3,1);
}
/* Dentro de una fila, la foto llega un instante antes que el texto:
   basta esa diferencia para que la fila se lea como una sola cosa
   que entra, y no como dos columnas sueltas. */
.js .sx-serv-lista .pieza.sube .dice{
  opacity: 0;
  transform: translateY(calc(10 * var(--u)));
}
.js .sx-serv-lista .pieza.sube.visible .dice{
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.4,0,.2,1) .14s,
              transform .8s cubic-bezier(.22,.8,.3,1) .14s;
}
/* Las tres columnas y las tres cifras entran una tras otra. */
.js .sx-serv-otros .columnas > div.sube:nth-child(2),
.js .sx-serv-cifras dl > div.sube:nth-child(2){ transition-delay: .09s; }
.js .sx-serv-otros .columnas > div.sube:nth-child(3),
.js .sx-serv-cifras dl > div.sube:nth-child(3){ transition-delay: .18s; }

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

/* ==================================================================
   Servicios
   Reutiliza el sistema que ya existe: el ancho de lectura de
   Preguntas, la grilla de Proyectos y el acordeón de .sx-pregunta.
   Lo único propio es el ritmo entre secciones.
   ================================================================== */
.sx-servicio{
  max-width: calc(760 * var(--u));
  margin: 0 auto calc(40 * var(--u));
  padding-top: calc(72 * var(--u));
}
.sx-servicios{ padding-top: calc(72 * var(--u)); margin-bottom: calc(40 * var(--u)); }

/* --- ficha de un servicio --- */
.sx-servicio-cabeza{ margin-bottom: calc(30 * var(--u)); }
.sx-servicio-cabeza .sobre{
  font-size: calc(12.5 * var(--ut));
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 calc(14 * var(--u));
}
.sx-servicio-cabeza .sobre a{ color: var(--gris); text-decoration: none; }
.sx-servicio-cabeza .sobre a:hover{ color: var(--negro); }
.sx-servicio-cabeza 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-servicio-cabeza .bajada{
  font-size: calc(17 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 50ch;
  margin: 0;
}

.sx-servicio .cuerpo p{
  font-size: calc(16.5 * var(--ut));
  line-height: 1.68;
  color: var(--negro);
  max-width: 64ch;
  margin: 0 0 calc(16 * var(--u));
}

.sx-servicio section{
  margin-top: calc(48 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: 1px solid var(--linea);
}
.sx-servicio section h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(21 * var(--ut));
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--negro);
  margin: 0 0 calc(22 * var(--u));
}

/* qué incluye */
.sx-servicio .puntos{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(26 * var(--u)) calc(32 * var(--u));
}
.sx-servicio .punto h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(15.5 * var(--ut));
  color: var(--negro);
  margin: 0 0 calc(6 * var(--u));
}
.sx-servicio .punto p{
  font-size: calc(14.5 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  margin: 0;
}

/* proceso */
.sx-servicio .pasos{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(22 * var(--u));
}
.sx-servicio .pasos li{
  display: grid;
  grid-template-columns: calc(46 * var(--u)) 1fr;
  align-items: start;
  gap: calc(14 * var(--u));
  padding-bottom: calc(20 * var(--u));
  border-bottom: 1px solid var(--linea);
}
.sx-servicio .pasos li:last-child{ border-bottom: 0; padding-bottom: 0; }
.sx-servicio .pasos .numero{
  font-family: var(--display);
  font-size: calc(13 * var(--ut));
  color: var(--gris);
  letter-spacing: .04em;
  padding-top: calc(2 * var(--u));
}
.sx-servicio .pasos h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(16 * var(--ut));
  color: var(--negro);
  margin: 0 0 calc(5 * var(--u));
}
.sx-servicio .pasos p{
  font-size: calc(14.5 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  margin: 0;
  max-width: 60ch;
}

.sx-servicio .para-quien p{
  font-size: calc(16 * var(--ut));
  line-height: 1.6;
  color: var(--negro);
  max-width: 62ch;
  margin: 0;
}

/* casos: la misma grilla de la página de proyectos, en tres columnas */
.sx-servicio .casos .sx-grilla{
  grid-template-columns: repeat(3, 1fr);
  gap: calc(22 * var(--u));
}
.sx-servicio .casos .sx-grilla h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(14.5 * var(--ut));
  margin: calc(9 * var(--u)) 0 calc(2 * var(--u));
  color: var(--negro);
}

.sx-servicio .dudas .lista{ border-top: 1px solid var(--linea); }

/* pie de la ficha */
.sx-servicio-pie{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: calc(34 * var(--u));
  align-items: start;
}
.sx-servicio-pie .invita h2{ margin-bottom: calc(10 * var(--u)); }
.sx-servicio-pie .invita p{
  font-size: calc(15 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 44ch;
  margin: 0 0 calc(20 * var(--u));
}
.sx-servicio-pie .otros h2{
  font-size: calc(13 * var(--ut));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: calc(12 * var(--u));
}
.sx-servicio-pie .otros ul{ list-style: none; margin: 0; padding: 0; }
.sx-servicio-pie .otros li{ margin-bottom: calc(8 * var(--u)); }
.sx-servicio-pie .otros a{
  font-size: calc(15 * var(--ut));
  color: var(--negro);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: calc(2 * var(--u));
}
.sx-servicio-pie .otros a:hover{ border-color: var(--negro); }

/* el enlace al servicio desde la ficha de un proyecto */
.sx-este-servicio{
  font-size: calc(14 * var(--ut));
  line-height: 1.5;
  color: var(--gris);
  margin: calc(16 * var(--u)) 0 0;
}
.sx-este-servicio span{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: calc(11.5 * var(--ut));
  margin-right: calc(8 * var(--u));
}
.sx-este-servicio a{ color: var(--negro); }

@media (max-width: 700px){
  .sx-servicio .puntos{ grid-template-columns: 1fr; }
  .sx-servicio .casos .sx-grilla{ grid-template-columns: repeat(2, 1fr); }
  .sx-servicio-pie{ grid-template-columns: 1fr; }
  .sx-servicio-cabeza h1{ font-size: calc(30 * var(--ut)); }
}

/* ==================================================================
   Pie de la ficha de proyecto
   Las flechas de la portada quedan arriba de todo; al terminar de
   leer, lo que hace falta es saber a dónde llevan y poder volver al
   listado, al punto donde estaba ese proyecto.
   ================================================================== */
.sx-ficha-pie{
  margin-top: calc(50 * var(--u));
  border-top: 1px solid var(--linea);
}
.sx-ficha-pie .contenedor{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(20 * var(--u));
  padding-top: calc(26 * var(--u));
  padding-bottom: calc(34 * var(--u));
}
.sx-ficha-pie .vecino{
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  text-decoration: none;
  color: inherit;
}
.sx-ficha-pie .adelante{ text-align: right; justify-self: end; }
.sx-ficha-pie .rotulo{
  font-size: calc(11.5 * var(--ut));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.sx-ficha-pie .nombre{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(19 * var(--ut));
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--negro);
  transition: opacity .18s ease;
}
/* La flecha va pegada al nombre y se corre un pelo al pasar el
   cursor: dice hacia dónde sin necesitar una imagen. */
.sx-ficha-pie .atras .nombre::before{
  content: '←';
  display: inline-block;
  margin-right: calc(7 * var(--u));
  transition: transform .18s ease;
}
.sx-ficha-pie .adelante .nombre::after{
  content: '→';
  display: inline-block;
  margin-left: calc(7 * var(--u));
  transition: transform .18s ease;
}
.sx-ficha-pie .atras:hover .nombre::before{ transform: translateX(calc(-3 * var(--u))); }
.sx-ficha-pie .adelante:hover .nombre::after{ transform: translateX(calc(3 * var(--u))); }
.sx-ficha-pie .vecino:hover .nombre{ opacity: .6; }

.sx-ficha-pie .indice{
  justify-self: center;
  font-size: calc(13.5 * var(--ut));
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: calc(3 * var(--u));
  white-space: nowrap;
}
.sx-ficha-pie .indice:hover{ color: var(--negro); border-color: var(--negro); }

@media (max-width: 700px){
  .sx-ficha-pie .contenedor{
    grid-template-columns: 1fr 1fr;
    row-gap: calc(24 * var(--u));
  }
  /* En el teléfono el enlace al listado pasa abajo, cruzado: arriba
     no caben tres cosas sin que los nombres se partan. */
  .sx-ficha-pie .indice{ grid-column: 1 / -1; grid-row: 2; }
  .sx-ficha-pie .nombre{ font-size: calc(16 * var(--ut)); }
}

/* ==================================================================
   Índice de servicios
   Filas grandes que se alternan, con una foto de un proyecto real
   de ese servicio. La página se recorre, no se lee de corrido.
   ================================================================== */
.sx-serv-cabeza{ margin-bottom: calc(56 * var(--u)); max-width: calc(720 * var(--u)); }
.sx-serv-cabeza h1{
  font-family: var(--display);
  font-size: calc(46 * var(--ut));
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--negro);
  margin: 0 0 calc(16 * var(--u));
}
.sx-serv-cabeza .bajada{
  font-size: calc(17 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 58ch;
  margin: 0;
}

.sx-serv-lista{ list-style: none; margin: 0; padding: 0; }
.sx-serv-lista .pieza + .pieza{ margin-top: calc(28 * var(--u)); }
.sx-serv-lista a{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: calc(44 * var(--u));
  text-decoration: none;
  color: inherit;
}
/* Una sí y una no se dan vuelta: la foto cambia de lado y el ojo
   tiene que volver a buscar dónde empieza la fila siguiente. */
.sx-serv-lista .pieza:nth-child(even) a{ direction: rtl; }
.sx-serv-lista .pieza:nth-child(even) .dice{ direction: ltr; }

.sx-serv-lista .foto{ display: block; }
/* El recorte va en el marco, no en .foto: así el zoom al pasar el
   cursor se corta en el borde de la imagen y el pie de foto, que
   va debajo, no queda tapado. */
.sx-serv-lista .marco{
  display: block;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: 3 / 2;   /* las miniaturas vienen 16:9; se recorta poco */
}
.sx-serv-lista .marco img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.sx-serv-lista a:hover .marco img{ transform: scale(1.04); }
/* Qué proyecto es la foto: con el nombre, cada servicio muestra un
   trabajo concreto en vez de una imagen decorativa. */
.sx-serv-lista .foto .pie{
  display: block;
  direction: ltr;
  font-size: calc(12 * var(--ut));
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: calc(10 * var(--u));
}

.sx-serv-lista .dice{ display: block; }
.sx-serv-lista .numero{
  display: block;
  font-family: var(--display);
  font-size: calc(12.5 * var(--ut));
  letter-spacing: .08em;
  color: var(--gris);
  margin-bottom: calc(12 * var(--u));
}
.sx-serv-lista h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(32 * var(--ut));
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--negro);
  margin: 0 0 calc(12 * var(--u));
  transition: opacity .18s ease;
}
.sx-serv-lista a:hover h2{ opacity: .6; }
.sx-serv-lista .resumen{
  display: block;
  font-size: calc(16 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 46ch;
  margin-bottom: calc(16 * var(--u));
}
/* Lo que incluye, en una línea: dice de qué se trata sin obligar a
   entrar, y de paso son las palabras con las que la gente busca. */
.sx-serv-lista .incluye{
  display: block;
  font-size: calc(12.5 * var(--ut));
  line-height: 1.7;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--negro);
  opacity: .5;
  max-width: 44ch;
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--linea);
  margin-bottom: calc(16 * var(--u));
}
.sx-serv-lista .sigue{
  display: inline-block;
  font-size: calc(14 * var(--ut));
  color: var(--negro);
  border-bottom: 1px solid var(--negro);
  padding-bottom: calc(2 * var(--u));
}

/* --- también hacemos --- */
.sx-serv-otros,
.sx-serv-arranque{
  margin-top: calc(70 * var(--u));
  padding-top: calc(34 * var(--u));
  border-top: 1px solid var(--linea);
}
.sx-serv-otros h2,
.sx-serv-arranque h2,
.sx-serv-cifras h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(24 * var(--ut));
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--negro);
  margin: 0 0 calc(12 * var(--u));
}
.sx-serv-otros .bajada{
  font-size: calc(15.5 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 56ch;
  margin: 0 0 calc(30 * var(--u));
}
.sx-serv-otros .columnas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32 * var(--u));
}
.sx-serv-otros h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(17 * var(--ut));
  color: var(--negro);
  margin: 0 0 calc(8 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--negro);
}
.sx-serv-otros p{
  font-size: calc(14.5 * var(--ut));
  line-height: 1.6;
  color: var(--gris);
  margin: 0;
}

/* --- cifras, sobre negro, como en la home --- */
.sx-serv-cifras{
  margin-top: calc(70 * var(--u));
  background: var(--negro);
  color: #fff;
  padding: calc(44 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u));
}
.sx-serv-cifras h2{ color: #fff; margin-bottom: calc(30 * var(--u)); }
.sx-serv-cifras dl{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--u));
  margin: 0;
}
.sx-serv-cifras dt{
  font-family: var(--display);
  font-size: calc(52 * var(--ut));
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: calc(10 * var(--u));
}
.sx-serv-cifras dd{ margin: 0; }
.sx-serv-cifras dd strong{
  display: block;
  font-weight: 500;
  font-size: calc(15 * var(--ut));
  margin-bottom: calc(3 * var(--u));
}
.sx-serv-cifras dd span{
  display: block;
  font-size: calc(13.5 * var(--ut));
  line-height: 1.5;
  opacity: .62;
}

/* --- todos empiezan igual --- */
.sx-serv-arranque{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: calc(40 * var(--u));
  align-items: start;
}
.sx-serv-arranque h2{ margin: 0; }
.sx-serv-arranque p{
  font-size: calc(16.5 * var(--ut));
  line-height: 1.68;
  color: var(--negro);
  max-width: 60ch;
  margin: 0 0 calc(14 * var(--u));
}
.sx-serv-arranque .mas a{
  font-size: calc(15 * var(--ut));
  color: var(--negro);
  border-bottom: 1px solid var(--linea);
  padding-bottom: calc(2 * var(--u));
  text-decoration: none;
}
.sx-serv-arranque .mas a:hover{ border-color: var(--negro); }

.sx-serv-cierre{
  margin-top: calc(70 * var(--u));
  padding-top: calc(34 * var(--u));
  border-top: 1px solid var(--linea);
}
.sx-serv-cierre h2{
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(26 * var(--ut));
  letter-spacing: -.02em;
  color: var(--negro);
  margin: 0 0 calc(10 * var(--u));
}
.sx-serv-cierre p{
  font-size: calc(15.5 * var(--ut));
  line-height: 1.55;
  color: var(--gris);
  max-width: 52ch;
  margin: 0 0 calc(22 * var(--u));
}

@media (max-width: 860px){
  .sx-serv-otros .columnas,
  .sx-serv-cifras dl{ grid-template-columns: 1fr; }
  .sx-serv-arranque{ grid-template-columns: 1fr; gap: calc(18 * var(--u)); }
}
@media (max-width: 700px){
  .sx-serv-cabeza h1{ font-size: calc(32 * var(--ut)); }
  /* En el teléfono no hay dos columnas que alternar: la foto va
     arriba y el texto debajo, siempre en el mismo orden. */
  .sx-serv-lista a{ grid-template-columns: 1fr; gap: calc(18 * var(--u)); }
  .sx-serv-lista .pieza:nth-child(even) a{ direction: ltr; }
  .sx-serv-lista .pieza + .pieza{ margin-top: calc(46 * var(--u)); }
  .sx-serv-lista h2{ font-size: calc(26 * var(--ut)); }
  .sx-serv-cifras{ padding: calc(34 * var(--u)) calc(24 * var(--u)); }
  .sx-serv-cifras dt{ font-size: calc(42 * var(--ut)); }
}

/* --- imágenes dentro de una ficha de servicio --- */
/* Se salen del ancho de lectura, pero nunca del viewport: el ancho
   se topa con la pantalla menos un margen, así que en el teléfono
   simplemente ocupan lo que hay. */
.sx-servicio .ancha{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(1000 * var(--u)), calc(100vw - 56 * var(--u)));
}
.sx-servicio .muestra{
  margin: calc(34 * var(--u)) 0 calc(38 * var(--u));
}
.sx-servicio .muestra a{ display: block; text-decoration: none; color: inherit; }
.sx-servicio .muestra .marco{
  display: block;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: 16 / 9;
}
.sx-servicio .muestra img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.sx-servicio .muestra a:hover img{ transform: scale(1.03); }
.sx-servicio .muestra figcaption{
  display: flex;
  gap: calc(10 * var(--u));
  align-items: baseline;
  margin-top: calc(11 * var(--u));
  font-size: calc(12.5 * var(--ut));
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
}
.sx-servicio .muestra figcaption strong{
  font-weight: 500;
  color: var(--negro);
  border-bottom: 1px solid var(--linea);
  padding-bottom: calc(2 * var(--u));
}
.sx-servicio .muestra a:hover figcaption strong{ border-color: var(--negro); }

/* La imagen de arriba va pegada al encabezado, sin la línea que
   separa las secciones. */
.sx-servicio .sx-servicio-cabeza + .muestra{ margin-top: calc(30 * var(--u)); }

@media (max-width: 700px){
  .sx-servicio .ancha{ width: 100%; left: 0; transform: none; }
  .sx-servicio .muestra .marco{ aspect-ratio: 3 / 2; }
}

/* El cargo de quien habla, cuando lo hay: un nombre con cargo en una
   empresa con nombre pesa más que un nombre de pila suelto. */
.opinion .persona em{
  display: block;
  font-style: normal;
  opacity: .72;
}