/* ==========================================================================
   Secciones de la portada y tarjeta de producto.
   Depende de tokens.css, base.css y componentes.css.
   ========================================================================== */

/* --- Piezas compartidas --------------------------------------------------- */

.sf-seccion__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sf-esp-2);
}

/* El titulo de seccion tiene tamano propio, mas chico que el H2 del sistema.
   Ver --sf-seccion-titulo-tam en tokens.css para el porque. El bloque de la
   marca ancla NO lleva esta clase: ese si va con el H2 grande, que es lo que
   hace el artefacto. */
.sf-seccion__cabecera h2 {
  margin: 0;
  font-size: var(--sf-seccion-titulo-tam);
  line-height: var(--sf-seccion-titulo-alto);
  text-transform: uppercase;
  letter-spacing: var(--sf-titulo-mayus-tracking);
}

.sf-seccion__bajada {
  max-width: 640px;
  color: var(--sf-texto-secundario);
  margin: 0 0 var(--sf-esp-6);
}

/* Titulo y bajada apilados a la izquierda, con el enlace al otro extremo. Es
   `.sc__h` del artefacto, que mete los dos en un div y deja el enlace fuera. */
.sf-seccion__titulos { display: flex; flex-direction: column; gap: var(--sf-esp-1); }
.sf-seccion__titulos .sf-seccion__bajada { margin: 0; font-size: var(--sf-cuerpo-s); }

/* Variante compacta: titulo, bajada y enlace en una sola linea. La cabecera
   apilada costaba 104px antes de que empezara el contenido de la seccion. */
.sf-seccion__cabecera--compacta {
  align-items: baseline;
  margin-bottom: var(--sf-esp-4);
}

.sf-seccion__cabecera--compacta .sf-enlace-acento { margin-left: auto; }

.sf-seccion__bajada--linea {
  margin: 0;
  font-size: var(--sf-cuerpo-s);
}

/* En pantallas donde no cabe todo en una linea, la bajada se pasa entera
   abajo en vez de partirse en dos palabras por linea. */
@media (max-width: 899px) {
  .sf-seccion__bajada--linea { flex: 1 0 100%; order: 3; }
  .sf-seccion__cabecera--compacta .sf-enlace-acento { order: 2; }
}

.sf-etiqueta--acento { color: var(--sf-acento-texto); letter-spacing: .16em; }
.sf-superficie-inversa .sf-etiqueta--acento { color: var(--sf-acento-inverso); }

/* Ojal con regla roja delante (`.hr__e` y `.tn__p` del artefacto). Marca donde
   arranca el bloque de texto cuando no hay borde ni tarjeta que lo haga, que es
   el caso del hero y del bloque de Tenryu, los dos sobre foto. Es el unico rojo
   fuera del boton de la marca. */
.sf-etiqueta--regla {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
  color: var(--sf-texto-inverso);
}

.sf-etiqueta--regla::before {
  content: "";
  flex: none;
  width: 3px;
  height: 1em;
  background: var(--sf-accion-tenryu);
}

/* Sobre superficie inversa gana `.sf-superficie-inversa .sf-etiqueta--acento`,
   que pinta el ojal en azul claro. En el artefacto es blanco, igual que el resto
   del bloque: el azul lo hacia competir con el titular. Se iguala la
   especificidad en vez de subirla con !important. */
.sf-superficie-inversa .sf-etiqueta--regla { color: var(--sf-texto-inverso); }

/* Sin foto el hero vuelve a fondo claro y el ojal a texto oscuro. */
.sf-hero:not(.sf-hero--con-imagen) .sf-etiqueta--regla { color: var(--sf-texto-secundario); }

.sf-enlace-acento {
  line-height: var(--sf-alto-compacto);
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  color: var(--sf-acento-texto);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sf-enlace-acento:hover { color: var(--sf-acento-texto); text-decoration: underline; }

/* Botón grande: el de las bandas y el hero. */
.sf-boton.sf-boton--l { min-height: var(--sf-boton-l); padding-inline: var(--sf-esp-8); font-size: var(--sf-cuerpo-m); }

.sf-boton.sf-boton--inverso {
  background: var(--sf-accion-inversa);
  color: var(--sf-texto-marca);
}
/* El fondo del hover tiene que dar vuelta con el modo, igual que el normal:
   --sf-texto-inverso-suave es un gris claro en los dos modos y en oscuro
   dejaba el texto en 1,10:1. */
.sf-boton.sf-boton--inverso:hover { background: var(--sf-accion-inversa-hover); color: var(--sf-texto-marca); }

/* Contorno sobre fondo oscuro. El `--contorno` normal se dibuja en marino y
   sobre la banda marino desaparece. */
.sf-boton.sf-boton--contorno-inverso {
  background: transparent;
  border-color: var(--sf-texto-inverso-tenue);
  color: var(--sf-texto-inverso);
}
.sf-boton.sf-boton--contorno-inverso:hover {
  background: var(--sf-accion-inversa);
  border-color: var(--sf-accion-inversa);
  color: var(--sf-texto-marca);
}

/* --- Hero ----------------------------------------------------------------- */

/* La foto va a sangre y el texto encima, no dentro de una tarjeta blanca.
   Es lo que hace el artefacto v3 (`.hr`), y la tarjeta era una invencion del
   fork: tapaba media foto con un rectangulo opaco.

   Lo que hace legible el titular sobre la foto es el velo, un degradado que
   sube desde abajo. Sin el, el texto blanco se pierde en cuanto la foto tiene
   cielo. Con el, el contraste no depende de que foto suba el cliente. */
.sf-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--sf-hero-alto);
  /* Sin la foto de campaña queda una textura discreta, no un hueco. */
  background: repeating-linear-gradient(45deg,
    var(--sf-superficie-hundida) 0 12px,
    var(--sf-superficie-calida) 12px 24px);
}

.sf-hero--con-imagen {
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* El sello de representación oficial de Tenryu, punto 4 del correo de Carlos
   del 03-09-2026. Abajo a la derecha, que es el único costado del hero que está
   vacío: el texto ocupa la mitad izquierda y arriba está la cabecera fija.

   El z-index lo pone por encima del velo (::before, sin z-index) sin necesidad
   de tocar el apilamiento del resto del hero. */
.sf-hero__sello {
  position: absolute;
  z-index: 2;
  right: var(--sf-esp-6);
  bottom: var(--sf-esp-6);
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  background: color-mix(in srgb, var(--sf-superficie-inversa) 82%, transparent);
  border: 1px solid var(--sf-borde-inverso);
  backdrop-filter: blur(3px);
}

.sf-hero__sello-logo { height: 26px; width: auto; }

.sf-hero__sello-texto {
  margin: 0;
  padding-left: var(--sf-esp-3);
  border-left: 1px solid var(--sf-borde-inverso);
  line-height: 1.25;
}

.sf-hero__sello-texto strong {
  display: block;
  font-family: var(--sf-fuente-marca);
  font-size: var(--sf-etiqueta);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sf-texto-inverso);
}

.sf-hero__sello-texto span {
  display: block;
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-texto-min);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sf-texto-inverso-suave);
}

/* En móvil el sello se lleva media pantalla y se come el botón de WhatsApp
   flotante, que vive en esa misma esquina. Se esconde: el pie ya dice lo mismo
   y la franja de arriba también. */
@media (max-width: 899px) {
  .sf-hero__sello { display: none; }
}

/* El velo. Solo cuando hay foto: sobre la textura de respaldo el texto ya va en
   oscuro y un velo negro lo dejaria ilegible. */
.sf-hero--con-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sf-hero-velo);
  pointer-events: none;
}

.sf-hero .sf-contenido {
  position: relative;
  width: 100%;
}

/* El bloque de texto. Ya no es una tarjeta: ni fondo, ni borde, ni tope de
   ancho pequeño. El tope de 880px es el `max-width:44rem` del artefacto llevado
   a 1280, y sirve para que la bajada no cruce toda la pantalla. */
.sf-hero__tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  max-width: var(--sf-hero-texto-ancho);
  padding-block: var(--sf-esp-8);
  color: var(--sf-texto-inverso);
}

/* El tope va en `ch` y no en píxeles a propósito: `ch` mide el ancho del cero de
   la fuente en uso, así que se ajusta sola cuando la tipografía cambia. Fue
   justo lo que reclamó Carlos el 14-09-2026 al elegir Oswald: «me gusta el texto
   con tipo letra Oswald, pero se debe ajustar en página principal». Oswald es
   condensada, así que en los 880px del bloque le cabían los 41 caracteres del
   titular en UNA línea que llegaba hasta el borde, donde Archivo los repartía en
   tres. Con 20ch vuelven a ser dos o tres, y `balance` las deja parejas. */
.sf-hero__titulo {
  margin: 0;
  max-width: 20ch;
  color: var(--sf-texto-inverso);
  text-wrap: balance;
}

/* La segunda linea del titular, que el fork no tenia. En el artefacto es
   `.hr__t2`: media pulgada mas chica que el H1 y en semibold, para separar la
   promesa de la explicacion sin abrir otro parrafo. */
.sf-hero__subtitulo {
  margin: 0;
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-cuerpo-l);
  font-weight: 600;
  color: var(--sf-texto-inverso);
}

.sf-hero__bajada {
  margin: 0;
  max-width: 52ch;
  color: var(--sf-texto-inverso-suave);
}

.sf-hero__acciones {
  display: flex;
  gap: var(--sf-esp-2);
  flex-wrap: wrap;
  margin-top: var(--sf-esp-4);
}

/* Sin foto el hero vuelve a texto oscuro sobre la textura clara. */
.sf-hero:not(.sf-hero--con-imagen) .sf-hero__tarjeta,
.sf-hero:not(.sf-hero--con-imagen) .sf-hero__titulo { color: var(--sf-texto-principal); }

.sf-hero:not(.sf-hero--con-imagen) .sf-hero__subtitulo,
.sf-hero:not(.sf-hero--con-imagen) .sf-hero__bajada { color: var(--sf-texto-secundario); }

@media (min-width: 900px) {
  /* Arriba mas que abajo, como el artefacto (`padding:var(--e6) var(--e5)`):
     el bloque esta apoyado en el borde inferior, no centrado. Con esp-12 en las
     dos el hero se iba a 460px y el artefacto lo deja en 425. */
  .sf-hero__tarjeta { padding-block: var(--sf-esp-9) var(--sf-esp-8); }
}

/* --- Carrusel de banners (3979) -------------------------------------------

   Estas reglas SOLO tienen efecto cuando hay mas de un banner cargado: con uno
   el PHP no pinta el modificador --carrusel ni las flechas, y el contenedor se
   comporta como un div suelto alrededor del hero de siempre. Es a proposito:
   asi el dia que esto se despliega, la portada no cambia hasta que el cliente
   cargue el segundo banner. */

.sf-banners { position: relative; }

/* El banner escondido sale del flujo pero no del documento: display:none lo
   sacaria del arbol de accesibilidad y el lector de pantalla perderia el aviso
   de que hay tres. Lo que lo esconde de verdad para quien no ve es el
   aria-hidden que pone el JS. */
.sf-hero--oculto {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.sf-banners--carrusel .sf-hero { transition: opacity .25s ease; }

.sf-banners__flecha {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px es el minimo tactil del proyecto, no un numero elegido por como se ve. */
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--sf-texto-inverso);
  background: color-mix(in srgb, var(--sf-superficie-inversa) 62%, transparent);
  border: 1px solid var(--sf-borde-inverso);
  border-radius: var(--sf-radio-redondo);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.sf-banners__flecha:hover { background: color-mix(in srgb, var(--sf-superficie-inversa) 82%, transparent); }

.sf-banners__flecha--antes   { left: var(--sf-esp-4); }
.sf-banners__flecha--despues { right: var(--sf-esp-4); }

.sf-banners__puntos {
  position: absolute;
  z-index: 3;
  left: var(--sf-esp-6);
  bottom: var(--sf-esp-6);
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
}

/* La zona que se puede tocar mide 44px de alto aunque la marca se vea de 6:
   el padding transparente la agranda sin engordar el diseño. */
.sf-banners__punto {
  position: relative;
  width: 14px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: width .25s ease;
}

.sf-banners__punto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--sf-texto-inverso) 50%, transparent);
  border-radius: var(--sf-radio-redondo);
}

.sf-banners__punto--activo { width: 30px; }
.sf-banners__punto--activo::after { background: var(--sf-texto-inverso); }

/* El sello de Tenryu vive abajo a la derecha y los puntos abajo a la izquierda,
   asi que no se pisan. Las flechas si quedarian encima del sello en pantallas
   angostas: ahi se esconden y el carrusel se pasa deslizando o con los puntos. */
@media (max-width: 640px) {
  .sf-banners__flecha { display: none; }
  .sf-banners__puntos { left: var(--sf-esp-4); bottom: var(--sf-esp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-banners--carrusel .sf-hero,
  .sf-banners__punto { transition: none; }
}

/* --- Franja de marcas ----------------------------------------------------- */

.sf-marcas { border-bottom: 1px solid var(--sf-borde-medio); }

/* La franja de marcas era una grilla de cinco fichas con borde, nombre grande y
   contador: 321px de alto para mostrar cinco de diecisiete marcas. Ahora es una
   tira que desliza, del alto de un logo. Ver docs/ecommerce/09-densidad-home.md. */

.sf-marcas__carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
}

.sf-marcas__tira {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--sf-esp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sf-marcas__tira::-webkit-scrollbar { display: none; }

.sf-marcas__ficha {
  flex: 0 0 auto;
  width: 132px;
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .sf-marcas__ficha { width: 148px; }
}

.sf-marcas__ficha a {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sf-esp-3);
  text-align: center;
  text-decoration: none;
}

/* --- El muro del final ----------------------------------------------------

   Es la misma tira, pero abajo cada baldosa lleva el conteo de productos y por
   eso el enlace deja de ser una caja de alto fijo y pasa a apilar. El artefacto
   (`.mc`) le da 156x52 a la baldosa sobre un lienzo de 1024, que a 1280 son
   195x65, y 9,92px al conteo, que son 12,4. */

/* El muro no es un carrusel: es una reja de seis que llena el ancho, como `.mc`
   del artefacto. Con el carrusel las flechas se comian 40px del ancho util y
   la sexta marca quedaba cortada, con una flecha encima. */
.sf-marcas__carrusel--muro .sf-marcas__flecha { display: none; }

.sf-marcas__carrusel--muro .sf-marcas__tira {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sf-esp-3);
  overflow: visible;
}

.sf-marcas__carrusel--muro .sf-marcas__ficha { width: auto; }

@media (max-width: 899px) {
  .sf-marcas__carrusel--muro .sf-marcas__tira { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .sf-marcas__carrusel--muro .sf-marcas__tira { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sf-marcas__carrusel--muro .sf-marcas__ficha a {
  height: auto;
  flex-direction: column;
  gap: var(--sf-esp-2);
  padding-inline: 0;
}

.sf-marcas__carrusel--muro .sf-marcas__baldosa {
  width: 100%;
  height: 65px;
}

.sf-marcas__conteo {
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-etiqueta);
  line-height: var(--sf-alto-compacto);
  letter-spacing: .06em;
  color: var(--sf-texto-secundario);
}

/* La atenuación va en el logo y no en el enlace entero: puesta en el enlace,
   también atenuaba el nombre de las catorce marcas que todavía no tienen logo,
   y el texto al 75% sobre la baldosa blanca caía a 4,47:1. Un logo se puede
   atenuar, un texto que hay que leer no. */
.sf-marcas__logo {
  opacity: .75;
  transition: opacity .15s ease;
}

.sf-marcas__ficha a:hover .sf-marcas__logo { opacity: 1; }

/* Catorce de las diecisiete marcas todavia no tienen logo cargado: para esas,
   sf_logo_marca() imprime el nombre y tiene que caber en el mismo alto. */
.sf-marcas__nombre {
  font-size: var(--sf-cuerpo-s);
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/* DENTRO de la baldosa el texto no puede seguir al modo, porque la baldosa es
   blanca en los dos (D10 y D15): --sf-texto-secundario en oscuro daba 2,16:1
   sobre blanco. Fuera de la baldosa sí sigue al modo, porque el mismo `span` lo
   imprime `sf_logo_marca()` también en el mega menú, donde el fondo es el de la
   página. Con la regla sin acotar, las catorce marcas sin logo del mega menú
   quedaban en 2,19:1 sobre el fondo oscuro. */
.sf-marcas__baldosa .sf-marcas__nombre { color: var(--sf-marca-baldosa-txt); }

/* Los logos de assets/marcas/ vienen tal cual del sitio de cada fabricante, sin
   normalizar, asi que las proporciones son muy distintas entre si: el de Daiwa
   es casi cuadrado y el de Major Craft es un wordmark de 8 a 1. Se encajan por
   alto maximo y ancho maximo, no estirando, para que ninguno domine la fila. */
.sf-marcas__logo {
  max-width: 100%;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* La baldosa va clara SIEMPRE, tambien en modo oscuro. Tres de los seis logos
   son monocromos oscuros y desaparecen sobre fondo oscuro, y invertirlos no
   sirve: el de Tenryu es rojo y al invertirlo se va a cian, un color que la
   marca no tiene. Un logo sobre baldosa blanca es ademas como se exhiben las
   marcas de verdad, asi que no es un parche. Decision D10. */
.sf-marcas__baldosa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--sf-esp-2) var(--sf-esp-3);
  background: var(--sf-marca-baldosa);
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
}

.sf-marcas__flecha {
  flex: none;
  width: 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sf-borde-medio);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-marca);
  cursor: pointer;
}

.sf-marcas__flecha:hover { border-color: var(--sf-accion-primaria); }
.sf-marcas__flecha[hidden] { display: none; }

/* --- Recién llegados ------------------------------------------------------ */

.sf-recientes { border-bottom: 1px solid var(--sf-borde-medio); }


/* --- Carrusel de productos ------------------------------------------------ */

/* Mismo mecanismo que la tira de marcas: desliza con el dedo y con la rueda, y
   las flechas son para el ratón. Las clases son propias porque las tarjetas de
   producto tienen otro alto y otras flechas que los logos. */

.sf-carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
}

.sf-productos.sf-productos--tira {
  flex: 1;
  min-width: 0;
  display: flex;
  grid-template-columns: none;
  gap: var(--sf-esp-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--sf-esp-2);
}

.sf-productos.sf-productos--tira::-webkit-scrollbar { display: none; }

.sf-productos.sf-productos--tira > .sf-producto {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .sf-productos.sf-productos--tira > .sf-producto { width: 268px; }
}

.sf-carrusel__flecha {
  flex: none;
  width: 36px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sf-borde-medio);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-marca);
  cursor: pointer;
}

.sf-carrusel__flecha:hover { border-color: var(--sf-accion-primaria); }
.sf-carrusel__flecha[hidden] { display: none; }

/* --- Explora por marca ---------------------------------------------------- */

.sf-explora__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
  margin-bottom: var(--sf-esp-6);
}

.sf-explora__pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  min-height: 40px;
  padding: 0 var(--sf-esp-4);
  border: 1px solid var(--sf-borde-medio);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sf-explora__pestana:hover { border-color: var(--sf-accion-primaria); }

.sf-explora__pestana--activa {
  background: var(--sf-accion-primaria);
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

.sf-explora__total {
  font-size: var(--sf-etiqueta);
  color: var(--sf-texto-secundario);
  font-variant-numeric: tabular-nums;
}

/* El contador va atenuado, pero con el color del texto de la pestaña y no con
   un gris fijo: --sf-texto-inverso-tenue sobre el fondo de la pestaña activa
   daba 1,95:1 en los dos modos, así que el número no se leía ni antes. La
   opacidad lo deja secundario sin bajar de 4,5:1. */
.sf-explora__pestana--activa .sf-explora__total { color: var(--sf-accion-inversa); opacity: .8; }

/* Mientras llega la grilla nueva, la anterior se atenúa en vez de desaparecer:
   así la página no da un salto de alto en cada pestaña. */
.sf-explora__panel { transition: opacity .15s ease; }
.sf-explora__panel[data-cargando] { opacity: .4; }

.sf-marca-vacia { color: var(--sf-texto-secundario); }

/* --- Cierre de la portada ------------------------------------------------- */

/* Motivos y receta en un solo bloque, sobre marfil.

   El orden de color de la portada es marino (probador), marfil (motivos), ámbar
   (la caja de la receta) y marino otra vez (el pie). Antes los motivos también
   iban en marino y quedaban tres marinos seguidos con el pie: se leía como una
   sola mancha larga. La receta va DENTRO de este bloque, no en su propia banda,
   para que se siga leyendo como continuación de los motivos. */

.sf-cierre { padding-block: var(--sf-esp-9); }

.sf-cierre__razones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-6);
}

@media (min-width: 900px) {
  .sf-cierre__razones { grid-template-columns: repeat(3, 1fr); gap: var(--sf-esp-8); }
}

/* Cada motivo se abre con una regla roja de 2px, no con un icono: es `.cf__i`
   del artefacto. La regla alinea las tres columnas por arriba, cosa que el
   icono no hacia porque cada uno tenia su propio alto optico. */
.sf-cierre__razon {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  border-top: 2px solid var(--sf-accion-tenryu);
  padding-top: var(--sf-esp-3);
}

.sf-cierre__titulo {
  margin: 0;
  /* 15,2px sobre el lienzo de 1024 son 19 a 1280, que es el H5 del sistema. */
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
  font-family: var(--sf-fuente-ui);
  font-weight: 600;
  color: var(--sf-texto-principal);
}

.sf-cierre__razon p {
  margin: 0;
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-cierre__texto { max-width: 620px; }
.sf-cierre__texto h2 { margin: 0 0 var(--sf-esp-2); color: var(--sf-texto-marca); }
.sf-cierre__texto p { margin: 0; color: var(--sf-texto-marca); }

.sf-cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--sf-esp-3); flex: none; }

/* Sobre el ámbar el contorno marino sí se ve, así que los dos botones usan la
   pareja normal: marino sólido y marino en contorno. */
.sf-cierre__acciones .sf-boton--contorno { background: transparent; }
.sf-cierre__acciones .sf-boton--contorno:hover { background: var(--sf-accion-primaria); color: var(--sf-accion-inversa); }

/* --- Confianza ------------------------------------------------------------ */

.sf-confianza { border-bottom: 1px solid var(--sf-borde-medio); }

.sf-confianza__grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-6);
}

@media (min-width: 900px) {
  .sf-confianza__grilla { grid-template-columns: repeat(3, 1fr); }
}

.sf-confianza__item {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-3);
  padding-top: var(--sf-esp-6);
  border-top: 2px solid var(--sf-accion-primaria);
}

.sf-confianza__item .sf-icono { color: var(--sf-accion-primaria); }
.sf-confianza__titulo { margin: 0; font-size: var(--sf-h4); }
.sf-confianza__item p { margin: 0; color: var(--sf-texto-secundario); }

/* --- Banda de receta ------------------------------------------------------ */

.sf-receta {
  background: var(--sf-accion-acento);
  color: var(--sf-accion-inversa);
  padding-block: var(--sf-esp-8);
}

.sf-receta__interior {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-8);
  flex-wrap: wrap;
}

.sf-receta__texto { flex: 1 1 460px; min-width: 0; }
.sf-receta__texto h2 { margin: 0 0 var(--sf-esp-3); }
.sf-receta__texto p { margin: 0; max-width: 560px; }

.sf-receta__acciones { display: flex; gap: var(--sf-esp-3); flex-wrap: wrap; flex: none; }

/* Sobre el ámbar, el contorno va en marino y no en blanco. */
.sf-receta .sf-boton.sf-boton--contorno { border-color: var(--sf-accion-primaria); color: var(--sf-accion-primaria); }
.sf-receta .sf-boton.sf-boton--contorno:hover { background: var(--sf-accion-primaria); color: var(--sf-accion-inversa); }

/* --- Cabecera de catálogo ------------------------------------------------- */

/* Las migas se pegan al menú: son una referencia, no una sección. El aire de
   arriba lo pone el contenedor, que en las páginas de tienda se recorta. */
.woocommerce-breadcrumb {
  margin: 0 0 var(--sf-esp-3);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.woocommerce-breadcrumb a { color: var(--sf-texto-secundario); }

.woocommerce-products-header { margin-bottom: var(--sf-esp-6); }
.woocommerce-products-header__title { margin: 0; }

.woocommerce-result-count {
  margin: 0;
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.woocommerce-ordering { margin: 0 0 var(--sf-esp-6); }

.woocommerce-ordering select {
  height: var(--sf-campo-alto);
  padding: 0 var(--sf-esp-3);
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-principal);
}

@media (min-width: 700px) {
  .woocommerce-result-count { float: left; }
  .woocommerce-ordering { float: right; }
  .woocommerce ul.products { clear: both; }
}

/* --- Tarjeta de producto -------------------------------------------------- */

.sf-productos,
.woocommerce ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sf-esp-4);
}

/* WooCommerce le pone un clearfix con ::before y ::after a `ul.products`. En
   un contenedor grid esos pseudo-elementos cuentan como celdas y corren la
   grilla entera. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

@media (min-width: 900px) {
  .sf-productos--4,
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
  .sf-productos--3,
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .sf-productos,
  .woocommerce ul.products { gap: var(--sf-esp-6); }
}

/* La tarjeta es un bloque: va en blanco sobre el marfil de la página, y al
   revés en la ficha, donde el fondo es blanco. */
/* La tarjeta es el contexto de posicionamiento de lo suyo. Sin esto, el
   `span.screen-reader-text` que WooCommerce mete en el botón se posiciona
   contra el ancestro que haya más arriba: dentro del carrusel se salía del
   contenedor con overflow y le daba scroll horizontal a la página entera. */
.sf-producto {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sf-borde-sutil);
  background: var(--sf-superficie-bloque);
  transition: border-color .15s ease;
}

.sf-producto:hover { border-color: var(--sf-accion-primaria); }

/* Los packshots vienen sobre blanco, así que este recuadro va siempre en
   blanco, cambie o no la superficie del resto de la tarjeta. */
/* El aire lo pone la imagen con su propio padding, no la caja: la imagen va
   absoluta y un padding aquí no la afectaría. */
.sf-producto__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--sf-superficie-base);
}

/* La imagen va absoluta para que el aspect-ratio de la caja mande solo. En
   flujo, un packshot 2:1 y uno 3:2 daban cajas de distinto alto y las tarjetas
   de una misma fila quedaban descuadradas.
   Ocupa la caja entera y el aire lo pone su padding: una `img` es un elemento
   reemplazado, así que con `width: auto` usaría su tamaño intrínseco en vez de
   estirarse al inset.
   El segundo selector repite el contexto de WooCommerce, que fuerza
   `width: 100%` a las imágenes del catálogo con más especificidad. */
.sf-producto__foto img,
.woocommerce ul.products li.product .sf-producto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--sf-esp-4);
  object-fit: contain;
}

@media (max-width: 699px) {
  .sf-producto__foto img,
  .woocommerce ul.products li.product .sf-producto__foto img { padding: var(--sf-esp-3); }
}

/* El hueco de la derecha es del corazón de favoritos, que va encima de la foto
   en esa esquina. Sin reservarlo, la insignia «Pruébatelos» le pasaba por
   debajo y quedaba cortada. */
.sf-producto__insignias {
  position: absolute;
  inset: var(--sf-esp-2) calc(var(--sf-boton-s) + var(--sf-esp-3)) auto var(--sf-esp-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sf-esp-2);
  /* Con dos insignias en una tarjeta de cuatro columnas no caben en la misma
     línea y «Pruébatelos» se cortaba a media palabra. Que baje entera. */
  flex-wrap: wrap;
  pointer-events: none;
}

.sf-insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-1) var(--sf-esp-2);
  /* Iba a 10px, por debajo del mínimo del sistema, en un sitio cuyo público es
     adulto mayor. Con el espaciado entre letras un poco menor entra igual. */
  font-size: var(--sf-etiqueta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Nunca se parten en dos líneas: si no cabe, se achica la tarjeta, no el
     badge. Con «Sin stock» y «Pruébatelos» juntos se notaba. */
  white-space: nowrap;
}

.sf-insignia--descuento { background: var(--sf-descuento); color: var(--sf-accion-inversa); }
.sf-insignia--nuevo     { background: var(--sf-accion-primaria); color: var(--sf-accion-inversa); }
/* «Sin stock» no es un control desactivado, es información que el comprador
   tiene que leer, y con 36% del catálogo agotado la lee todo el tiempo. Va con
   --sf-stock-agotado, que es el token que existe justamente para eso. */
.sf-insignia--agotado   { background: var(--sf-accion-desactivada); color: var(--sf-stock-agotado); }

.sf-producto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-3) var(--sf-esp-4) var(--sf-esp-4);
  border-top: 1px solid var(--sf-borde-sutil);
  flex: 1;
}

.sf-producto__marca {
  font-size: var(--sf-etiqueta);
  line-height: var(--sf-alto-compacto);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/* El tamaño y el interlineado del nombre NO se declaran acá: los pone
   `catalogo.css`, que carga después y ganaba por orden de carga. Esta regla
   pedía `--sf-h6` y 1,35 y llevaba sin aplicarse desde que existe. Un componente,
   una hoja. */
.sf-producto__nombre {
  margin: 0;
  font-family: var(--sf-fuente-ui);
  font-weight: 500;
  color: var(--sf-texto-principal);
}

/* Mismo caso que el nombre: el tamaño lo pone `catalogo.css`. */
.sf-producto__precio {
  font-weight: 600;
  color: var(--sf-precio);
  font-variant-numeric: tabular-nums;
}

.sf-producto__precio del {
  margin-left: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-s);
  font-weight: 400;
  color: var(--sf-precio-tachado);
}

.sf-producto__precio ins { text-decoration: none; }

.sf-producto__stock { font-size: var(--sf-cuerpo-s); line-height: var(--sf-alto-compacto); color: var(--sf-texto-secundario); }
.sf-producto__stock p { margin: 0; }
.sf-producto__stock--agotado { color: var(--sf-stock-agotado); }

/* El botón se alinea abajo para que quede a la misma altura en toda la fila,
   aunque una tarjeta tenga una línea más de texto. El aire mínimo es corto: con
   uno grande, las tarjetas cortas quedaban con un hueco enorme. */
.sf-producto__accion { margin-top: auto; padding-top: var(--sf-esp-3); }

/* Antes acá había un `margin-top` de 4px en el precio y otro en el stock, y el
   cuerpo de la tarjeta ya trae `gap: var(--sf-esp-1)`. Los dos se sumaban: 8px
   entre el nombre y el precio donde el artefacto deja 4,6. Es el espaciado alto
   que Daniel marcó el 01-09-2026 en la tarjeta del catálogo. La separación la
   pone el `gap` y nada más: un `gap` y un `margin` sobre la misma junta es la
   forma más fácil de que un espaciado quede al doble sin que se note por qué. */

/* El botón de añadir es el único ámbar de la tarjeta.
   La primera pareja de selectores existe solo para ganarle a
   `.woocommerce ul.products li.product .button`, que en el catálogo lo volvía
   inline-block con line-height 14 dentro de una caja de 48px (texto pegado
   arriba) y le sumaba margin-top: 1em. Esa regla vale (0,4,2) por los dos
   elementos de la cadena, así que hay que repetir su contexto para superarla.
   En la home no hacía falta: la lista no es `ul.products`. Sin !important. */
.woocommerce ul.products li.product .sf-producto__accion .button,
.woocommerce ul.products li.product .sf-producto__accion .added_to_cart,
.sf-producto .sf-producto__accion .button,
.sf-producto .sf-producto__accion .added_to_cart {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sf-boton-m);
  padding: 0 var(--sf-esp-4);
  border: 1px solid var(--sf-accion-acento);
  background: var(--sf-accion-acento);
  color: var(--sf-accion-inversa);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sf-producto .sf-producto__accion .button:hover { background: var(--sf-accion-acento-hover); border-color: var(--sf-accion-acento-hover); }

/* Mientras WooCommerce añade al carrito marca el botón con `loading`, pero su
   rueda vive en woocommerce-layout.css, que el tema desencola: sin esto no hay
   ninguna señal de que pasó algo entre el clic y el panel. Se reusa el mismo
   giro de la ficha (`.sf-cargando`, en compra.css) y se anula el padding de
   2.618em que WooCommerce le mete a la derecha para su spinner. */
.woocommerce ul.products li.product .sf-producto__accion .button.loading,
.sf-producto .sf-producto__accion .button.loading {
  padding: 0 var(--sf-esp-4);
  position: relative;
  color: transparent;
  pointer-events: none;
}

.woocommerce ul.products li.product .sf-producto__accion .button.loading::after,
.sf-producto .sf-producto__accion .button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--sf-cargando-pista);
  border-top-color: var(--sf-texto-marca);
  border-radius: var(--sf-radio-redondo);
  background: none;
  animation: sf-girar .6s linear infinite;
}

/* Variables y avisos de stock no compran: van en contorno marino. */
.sf-producto.product_type_variable .sf-producto__accion .button,
.sf-producto.outofstock .sf-producto__accion .button {
  background: transparent;
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-primaria);
}

.sf-producto.product_type_variable .sf-producto__accion .button:hover,
.sf-producto.outofstock .sf-producto__accion .button:hover {
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

/* El «Ver carrito» que aparece tras añadir es un enlace secundario: no compite
   con el botón de compra. */
.sf-producto .sf-producto__accion .added_to_cart {
  margin-top: var(--sf-esp-2);
  background: transparent;
  border-color: var(--sf-accion-primaria);
  color: var(--sf-accion-primaria);
}

.sf-producto .sf-producto__accion .added_to_cart:hover {
  background: var(--sf-accion-primaria);
  color: var(--sf-accion-inversa);
}

/* Con dos tarjetas por fila, «Añadir al carrito» no cabe en una línea al
   tamaño de escritorio. Se aprieta el botón en vez de partir la frase. */
@media (max-width: 599px) {
  .sf-producto .sf-producto__accion .button,
  .sf-producto .sf-producto__accion .added_to_cart {
    padding-inline: var(--sf-esp-2);
    font-size: 13px;
  }

  .sf-producto__cuerpo { padding: var(--sf-esp-3); }
}

/* --- Página Nosotros ------------------------------------------------------ */

/* Era un muro de texto de 122 caracteres por línea, sin una sola imagen y sin
   ningún camino de salida. La plantilla reparte el mismo texto en bloques y
   aquí se le da la forma. */

.sf-nosotros__portada { padding-block: var(--sf-esp-12); }
.sf-nosotros__portada h1 { margin: var(--sf-esp-2) 0 var(--sf-esp-4); color: var(--sf-texto-inverso); }

.sf-nosotros__bajada {
  max-width: 58ch;
  color: var(--sf-texto-inverso-suave);
}

.sf-nosotros__bajada p { margin: 0; }

/* Dos columnas: el texto a medida legible y el hueco de la foto al lado. */
.sf-nosotros__cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .sf-nosotros__cuerpo { grid-template-columns: 1fr 340px; gap: var(--sf-esp-12); }
}

/* 65 caracteres es la medida que se lee sin perder el renglón. A 1280px de
   ancho el texto iba a 122, casi el doble, y el sistema de diseño avisa de que
   el público es adulto mayor. */
.sf-nosotros__texto { max-width: 65ch; }
.sf-nosotros__texto p { margin: 0 0 var(--sf-esp-4); }
.sf-nosotros__texto p:last-child { margin-bottom: 0; }

.sf-nosotros__foto {
  margin: 0;
  /* Apaisada y no vertical: a 340px de ancho, la relación 4/5 daba 425px de
     alto contra unos 200 de texto al lado, o sea 220px de hueco. */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sf-esp-4);
  text-align: center;
  background: repeating-linear-gradient(45deg,
    var(--sf-superficie-hundida) 0 12px,
    var(--sf-superficie-calida) 12px 24px);
  border: 1px dashed var(--sf-borde-medio);
}

.sf-nosotros__foto-pendiente {
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

/* Con la foto puesta se va el rayado y el borde punteado, que eran la marca de
   «acá falta algo». La imagen llena la caja sin deformarse: la de Carlos viene
   recortada a 4/3 desde el original vertical de WhatsApp, así que `cover` solo
   ajusta el sobrante de los bordes. */
.sf-nosotros__foto--con-imagen {
  background: var(--sf-superficie-hundida);
  border: 0;
  padding: 0;
  border-radius: var(--sf-radio);
  overflow: hidden;
}

.sf-nosotros__foto--con-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Los motivos, con su iconografía. La rejilla se adapta a CUÁNTOS haya: los
   escribe quien edita la página, así que fijarla en tres dejaba el cuarto solo
   en una fila con dos huecos al lado. */
.sf-nosotros__motivos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sf-esp-8);
}

.sf-nosotros__motivo { display: flex; flex-direction: column; gap: var(--sf-esp-2); }
.sf-nosotros__motivo .sf-icono { color: var(--sf-acento-texto); }

/* Estos h2 son tarjetas, no cabeceras de sección: van en la escala de la
   interfaz, no en la de los titulares de página. */
.sf-nosotros__motivo h2 {
  margin: 0;
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
  font-weight: 600;
}

.sf-nosotros__motivo p { margin: 0; color: var(--sf-texto-secundario); }

.sf-nosotros__cierre { padding-block: var(--sf-esp-12); }

.sf-nosotros__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-3);
  justify-content: center;
}

/* --- Guías de ayuda ------------------------------------------------------- */

/* Eran páginas sueltas de texto corrido a todo el ancho: 94 caracteres por
   línea, sin migas, sin enlaces y sin salida. */

.sf-guia__migas {
  margin-bottom: var(--sf-esp-4);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-guia__migas a { color: var(--sf-texto-secundario); }
.sf-guia__migas span { margin-inline: var(--sf-esp-1); }

.sf-guia__cabecera { max-width: 65ch; margin-bottom: var(--sf-esp-8); }
.sf-guia__cabecera h1 { margin: 0 0 var(--sf-esp-3); font-size: var(--sf-h2); line-height: var(--sf-h2-alto); }
.sf-guia__entrada { color: var(--sf-texto-secundario); }
.sf-guia__entrada p { margin: 0 0 var(--sf-esp-3); }
.sf-guia__entrada p:last-child { margin-bottom: 0; }

/* 65 caracteres es la medida que se lee sin perder el renglón. */
.sf-guia__cuerpo { max-width: 65ch; }

.sf-guia__bloque + .sf-guia__bloque { margin-top: var(--sf-esp-8); }

/* Los bloques son destino de enlace desde el pie: sin este margen, al saltar
   quedan justo debajo de la cabecera fija y parece que no pasó nada. */
.sf-guia__bloque { scroll-margin-top: calc(var(--sf-header-fijo-alto) + var(--sf-esp-6)); }

.sf-guia__bloque h2 {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h5);
  line-height: var(--sf-h5-alto);
  font-weight: 600;
}

/* El h3 dentro de un bloque hay que bajarlo A MANO: el h2 de arriba esta pisado
   al h5 del sistema (17px, fuente de UI, peso 600) y el h3 se quedaba con el
   global, que es Archivo a 22 y peso 800. O sea el subtitulo salia mas grande y
   mas pesado que el titulo que lo contiene. Se vio el 09-09-2026 al cargar la
   garantia de Tenryu, y no era de ese texto: le pasaba a cualquier h3 que
   alguien escriba en una pagina legal o de guia. */
.sf-guia__bloque h3 {
  margin: var(--sf-esp-5) 0 var(--sf-esp-2);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h6);
  line-height: var(--sf-h6-alto);
  font-weight: 600;
  color: var(--sf-texto-secundario);
}

.sf-guia__bloque p { margin: 0 0 var(--sf-esp-3); }
.sf-guia__bloque p:last-child { margin-bottom: 0; }

/* --- La salida de cada guía ----------------------------------------------- */

.sf-guia__ayuda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-esp-4);
  margin-top: var(--sf-esp-12);
  padding: var(--sf-esp-6);
  background: var(--sf-superficie-base);
  border-left: 3px solid var(--sf-accion-acento);
}

@media (min-width: 700px) {
  .sf-guia__ayuda { flex-direction: row; align-items: center; justify-content: space-between; }
  .sf-guia__ayuda .sf-boton { flex: none; }
}

.sf-guia__ayuda strong { display: block; color: var(--sf-texto-marca); }
.sf-guia__ayuda p { margin: var(--sf-esp-1) 0 0; color: var(--sf-texto-secundario); font-size: var(--sf-cuerpo-s); }

/* --- Las otras guías ------------------------------------------------------ */

/* Sin esto cada guía es un callejón: se lee y no lleva a ninguna parte. */
.sf-guia__otras { margin-top: var(--sf-esp-12); }

.sf-guia__otras-titulo {
  margin: 0 0 var(--sf-esp-4);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h6);
  font-weight: 600;
}

.sf-guia__otras ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-3);
}

@media (min-width: 700px) {
  .sf-guia__otras ul { grid-template-columns: repeat(3, 1fr); }
}

.sf-guia__otras a {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  height: 100%;
  padding: var(--sf-esp-4);
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-sutil);
  text-decoration: none;
  transition: border-color .15s ease;
}

.sf-guia__otras a:hover { border-color: var(--sf-accion-primaria); }
.sf-guia__otras .sf-icono { color: var(--sf-acento-texto); }
.sf-guia__otras-nombre { font-weight: 600; color: var(--sf-texto-marca); }
.sf-guia__otras-bajada { font-size: var(--sf-cuerpo-s); color: var(--sf-texto-secundario); }

/* --- Receta de ejemplo ---------------------------------------------------- */

/* La página explicaba OD, ESF, CIL y compañía en párrafos. Sobre una receta de
   mentira se entienden sin leer: quien llega aquí tiene el papel en la mano. */

.sf-receta-ejemplo {
  margin: 0 0 var(--sf-esp-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-4);
}

@media (min-width: 900px) {
  .sf-receta-ejemplo { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: var(--sf-esp-8); }
}

.sf-receta-ejemplo__papel {
  padding: var(--sf-esp-6);
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-medio);
  box-shadow: var(--sf-sombra-1);
}

.sf-receta-ejemplo__tabla {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sf-receta-ejemplo__tabla th,
.sf-receta-ejemplo__tabla td {
  padding: var(--sf-esp-3);
  text-align: center;
  border: 1px solid var(--sf-borde-sutil);
}

.sf-receta-ejemplo__tabla thead th {
  background: var(--sf-superficie-hundida);
  font-size: var(--sf-etiqueta);
  letter-spacing: .1em;
  color: var(--sf-acento-texto);
}

.sf-receta-ejemplo__tabla tbody th {
  background: var(--sf-superficie-hundida);
  color: var(--sf-texto-marca);
}

.sf-receta-ejemplo__dp {
  margin: var(--sf-esp-4) 0 0;
  font-variant-numeric: tabular-nums;
  color: var(--sf-texto-secundario);
}

.sf-receta-ejemplo__pie {
  order: 1;
  grid-column: 1 / -1;
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-receta-ejemplo__leyenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-receta-ejemplo__leyenda b { color: var(--sf-texto-marca); font-variant-numeric: tabular-nums; }

/* --- Preguntas frecuentes ------------------------------------------------- */

/* A esta página se llega con UNA pregunta, no a leerla entera: en acordeón se
   ven las cinco de un vistazo. Va en `details` para que funcione sin JS y para
   que el buscador del navegador encuentre el texto aunque esté cerrado. */

.sf-faq__lista {
  max-width: 70ch;
  border-top: 1px solid var(--sf-borde-sutil);
}

.sf-faq__item { border-bottom: 1px solid var(--sf-borde-sutil); }

.sf-faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-4);
  padding: var(--sf-esp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-h6);
  font-weight: 600;
  color: var(--sf-texto-marca);
}

.sf-faq__pregunta::-webkit-details-marker { display: none; }
.sf-faq__pregunta:hover { color: var(--sf-acento-texto); }
.sf-faq__pregunta .sf-icono { flex: none; color: var(--sf-texto-secundario); transition: transform .15s ease; }
.sf-faq__item[open] .sf-faq__pregunta .sf-icono { transform: rotate(180deg); }

.sf-faq__respuesta { padding: 0 0 var(--sf-esp-5); color: var(--sf-texto-secundario); }
.sf-faq__respuesta p { margin: 0 0 var(--sf-esp-3); }
.sf-faq__respuesta p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .sf-faq__pregunta .sf-icono { transition: none; }
}

/* --- Páginas legales ------------------------------------------------------ */

/* Reutilizan las migas, la cabecera y los bloques de las guías: son la misma
   forma de página, texto repartido por sus h2. Lo propio es el índice, que
   estas sí necesitan (a un texto legal se llega con una pregunta concreta) y la
   fecha del documento. */

.sf-legal__fecha {
  margin: 0 0 var(--sf-esp-3);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-legal__indice {
  max-width: 65ch;
  margin-bottom: var(--sf-esp-8);
  padding: var(--sf-esp-4) var(--sf-esp-6);
  background: var(--sf-superficie-bloque);
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
}

.sf-legal__indice-titulo {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/* Sin marcador: los títulos del documento legal ya vienen numerados, y la
   lista ordenada les ponía un segundo número encima («1. 1. Aspectos»). */
.sf-legal__indice ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--sf-esp-2);
  color: var(--sf-texto-secundario);
}

.sf-legal__indice a { color: var(--sf-texto-marca); }
.sf-legal__indice a:hover { color: var(--sf-acento-texto); }

.sf-legal__cierre {
  max-width: 65ch;
  margin-top: var(--sf-esp-9);
  padding-top: var(--sf-esp-4);
  border-top: 1px solid var(--sf-borde-sutil);
  font-size: var(--sf-cuerpo-s);
  color: var(--sf-texto-secundario);
}

.sf-legal__cierre p { margin: 0 0 var(--sf-esp-2); }
.sf-legal__cierre p:last-child { margin-bottom: 0; }
.sf-legal__cierre a { color: var(--sf-acento-texto); }

/* Las listas del texto legal traen párrafos largos dentro de cada punto. */
.sf-legal .sf-guia__bloque ul { margin: 0; padding-left: var(--sf-esp-4); display: grid; gap: var(--sf-esp-3); }

/* --- Familias del catálogo ("Qué estás buscando") -------------------------

   Seis baldosas con foto, nombre y conteo. La foto sale de la imagen de la
   categoría y, mientras el cliente no las cargue, del producto más reciente de
   esa categoría: por eso `object-fit: cover` y una relación fija, que es lo que
   hace que fotos de proporciones muy distintas se vean como una fila pareja. */

/* `auto-fit` y no `auto-fill`: con `auto-fill` sobraba una pista vacía y las
   seis familias se repartían 5 y 1, que se lee como un error. El mínimo de
   150px es el que deja las seis en una fila a 1.280px, igual que el mockup. */
.sf-familias__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sf-esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-familia {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sf-familia:hover {
  border-color: var(--sf-accion-primaria);
  box-shadow: var(--sf-sombra-2);
}

/* La proporción va en la IMAGEN y no en el contenedor, y no es un detalle: el
   contenedor es un item flex en columna, asi que su alto lo decide el contenido y
   `aspect-ratio` no llega a aplicarse nunca. Con la proporcion en el `span`, las
   seis baldosas salian con la foto de distinto alto segun el tamano natural de
   cada archivo: 218, 232 y 294 px en la misma fila. Medido, no supuesto.

   Cuadrada porque es lo que usa el artefacto: sus baldosas miden 153x153 con
   `object-fit: cover`. */
.sf-familia__foto {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--sf-superficie-hundida);
}

.sf-familia__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.sf-familia__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  padding: var(--sf-esp-3) var(--sf-esp-4) var(--sf-esp-4);
}

.sf-familia__nombre {
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-h6);
  line-height: var(--sf-alto-compacto);
  font-weight: 600;
}

.sf-familia__total {
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-alto-compacto);
}

/* --- Bloque de la marca ancla ---------------------------------------------

   Una sola columna sobre foto a media opacidad, y los modelos como filas de
   nombre y rango de precio. Antes eran dos columnas con tarjetas de foto: eso
   venia del fork y el artefacto (`.tn`) no lo tiene.

   Sigue sobre superficie inversa, que es lo que le da el peso que le pide el
   mockup: es la afirmacion comercial mas fuerte de la portada. */

.sf-ancla {
  position: relative;
  overflow: hidden;
}

/* Media opacidad, como `.tn__f`. Es un fondo, no contenido: sin ella el texto
   blanco no aguanta encima de una foto de dia. */
.sf-ancla__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  pointer-events: none;
}

/* El tope de ancho va en el bloque de adentro y no en `.sf-contenido`: esa
   clase se centra sola con `margin-inline:auto`, asi que ponerle el tope aca
   mandaba el texto al medio de la pantalla en vez de dejarlo pegado al borde
   izquierdo, que es donde lo tiene el artefacto. */
.sf-ancla__interior { position: relative; }

.sf-ancla__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-esp-2);
  /* 461px sobre el lienzo de 1024 del artefacto son 576 a 1280. */
  max-width: 576px;
}

.sf-ancla__texto h2,
.sf-ancla__interior h2 { color: var(--sf-texto-inverso); margin: 0; }

.sf-ancla__bajada {
  color: var(--sf-texto-inverso-suave);
  margin: 0 0 var(--sf-esp-4);
}

.sf-ancla__modelos {
  display: block;
  width: 100%;
  list-style: none;
  margin: 0 0 var(--sf-esp-6);
  padding: 0;
}

/* Cada modelo es una fila con el nombre a la izquierda y el rango a la derecha,
   separada por una linea fina. El separador es lo que deja leer la columna de
   precios como columna. */
.sf-ancla__modelo a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sf-esp-4);
  padding-block: var(--sf-esp-2);
  border-bottom: 1px solid var(--sf-borde-inverso);
  text-decoration: none;
}

.sf-ancla__nombre {
  color: var(--sf-texto-inverso);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-alto-compacto);
  font-weight: 500;
}

.sf-ancla__precio {
  color: var(--sf-texto-inverso-suave);
  font-size: var(--sf-cuerpo-s);
  line-height: var(--sf-alto-cifra);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.sf-ancla__modelo a:hover .sf-ancla__nombre { color: var(--sf-acento-inverso); }

.sf-ancla__accion { margin: 0; }

@media (max-width: 899px) {
  .sf-ancla__bloque { max-width: none; }
}

@media (max-width: 599px) {
  .sf-familias__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-esp-3); }
  .sf-ancla__modelos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-esp-2); }
}

/* La tira de marcas de arriba respira menos que el muro del final: es una franja
   de reconocimiento pegada al banner, no una seccion con la que se navega. */
.sf-seccion--tira { padding-block: var(--sf-esp-6); }

/* ==========================================================================
   Prostaff: el equipo en LISTA, no en reja

   La referencia del cliente (DUO International) es una reja de foto redonda y
   nombre. Con cinco pescadores y bios de seis lineas eso obligaba a cortar el
   texto a dos renglones, que es justo lo que hace interesante a la pagina.
   Decision de Daniel el 02-09-2026: en lista, hacia abajo.
   ========================================================================== */

.sf-prostaff__portada { padding: var(--sf-esp-12) 0; }
.sf-prostaff__portada h1 { margin: var(--sf-esp-3) 0 0; }
.sf-prostaff__bajada { margin: var(--sf-esp-4) 0 0; max-width: 58ch; color: var(--sf-texto-inverso-suave); }

.sf-prostaff__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.sf-prostaff__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-5);
  align-items: start;
  padding: var(--sf-esp-8) 0;
  border-bottom: 1px solid var(--sf-borde-sutil);
}

.sf-prostaff__fila:last-child { border-bottom: 0; }

@media (min-width: 760px) {
  .sf-prostaff__fila { grid-template-columns: 300px 1fr; gap: var(--sf-esp-8); }

  /* Alternan de lado para que la lista no se lea como una tabla. El orden del
     DOM no cambia, asi que un lector de pantalla sigue leyendo foto y despues
     datos en las cinco. */
  .sf-prostaff__fila:nth-child(even) { grid-template-columns: 1fr 300px; }
  .sf-prostaff__fila:nth-child(even) .sf-prostaff__foto { order: 2; }
  .sf-prostaff__fila:nth-child(even) .sf-prostaff__datos { order: 1; }
}

.sf-prostaff__foto {
  border-radius: var(--sf-radio);
  overflow: hidden;
  background: var(--sf-superficie-hundida);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sf-esp-4);
}

.sf-prostaff__foto img { width: 100%; height: 100%; object-fit: cover; }

/* El hueco de la foto que falta va rayado, igual que el de «Nosotros»: se tiene
   que ver que falta algo, no parecer una decision de diseno. */
.sf-prostaff__foto:not(:has(img)) {
  background: repeating-linear-gradient(45deg,
    var(--sf-superficie-hundida) 0 12px,
    var(--sf-superficie-calida) 12px 24px);
}

.sf-prostaff__foto-pendiente {
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
  color: var(--sf-texto-secundario);
}

.sf-prostaff__datos { min-width: 0; }

.sf-prostaff__zona { display: block; color: var(--sf-acento-texto); margin-bottom: var(--sf-esp-2); }

.sf-prostaff__nombre {
  margin: 0 0 var(--sf-esp-3);
  font-size: var(--sf-h3-tam);
  line-height: var(--sf-alto-compacto);
}

.sf-prostaff__sellos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
  margin: 0 0 var(--sf-esp-3);
  padding: 0;
}

.sf-prostaff__sellos li {
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-alto-compacto);
  font-weight: 600;
  padding: 3px var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  color: var(--sf-acento-texto);
}

.sf-prostaff__bio {
  margin: 0 0 var(--sf-esp-4);
  max-width: 62ch;
  color: var(--sf-texto-secundario);
}

.sf-prostaff__lema {
  margin: 0 0 var(--sf-esp-4);
  padding-left: var(--sf-esp-4);
  border-left: 3px solid var(--sf-accion-acento);
  font-size: var(--sf-cuerpo-l-tam);
  font-style: italic;
  color: var(--sf-texto-principal);
}

.sf-prostaff__lema p { margin: 0; }

.sf-prostaff__redes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
  margin: 0;
  padding: 0;
}

.sf-prostaff__redes a {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-esp-2);
  padding: var(--sf-esp-2) var(--sf-esp-3);
  border: 1px solid var(--sf-borde-medio);
  border-radius: 999px;
  background: var(--sf-superficie-base);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-alto-compacto);
  font-weight: 600;
  color: var(--sf-acento-texto);
  text-decoration: none;
}

.sf-prostaff__redes a:hover,
.sf-prostaff__redes a:focus-visible {
  background: var(--sf-superficie-bloque);
  border-color: var(--sf-acento-texto);
}

.sf-prostaff__red-nombre { color: var(--sf-texto-secundario); font-weight: 500; }

/* --- Postular -------------------------------------------------------------- */

/* El cierre de la página del Prostaff, donde estaba el formulario de
   postulación hasta que Carlos lo mandó a sacar (punto 11 del 03-09-2026). Va
   sobre superficie inversa para que corte la página y no parezca una sección
   más del listado. */
.sf-prostaff__consulta-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-esp-6);
}

.sf-prostaff__consulta-interior h2 { margin: 0 0 var(--sf-esp-2); }

.sf-prostaff__consulta-interior p {
  margin: 0;
  max-width: 46ch;
  color: var(--sf-texto-inverso-suave);
}

/* El único botón del sitio que no es del sistema. Lleva el verde de WhatsApp
   porque es el canal, no una acción nuestra: es la misma decisión del botón
   flotante. El texto va casi negro y no blanco, que es lo que hace WhatsApp
   sobre su propio verde y lo que deja el contraste en 5,4:1. */
.sf-boton--whatsapp {
  background: var(--sf-red-whatsapp);
  color: var(--sf-superficie-inversa);
  border: 0;
  gap: var(--sf-esp-2);
  white-space: nowrap;
}

.sf-boton--whatsapp:hover,
.sf-boton--whatsapp:focus-visible {
  background: var(--sf-red-whatsapp-hover);
  color: var(--sf-superficie-inversa);
}

.sf-prostaff__postular {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sf-esp-8);
  align-items: start;
}

@media (min-width: 900px) {
  .sf-prostaff__postular { grid-template-columns: 1fr 1fr; gap: var(--sf-esp-12); }
}

.sf-prostaff__postular-texto h2 { margin: 0 0 var(--sf-esp-3); }
.sf-prostaff__postular-texto p { margin: 0 0 var(--sf-esp-3); color: var(--sf-texto-secundario); }
.sf-prostaff__postular-texto p:last-child { margin-bottom: 0; }

/* --- Aviso de contenido de demostración ---------------------------------- */

/* Marca el texto que escribimos nosotros para que el cliente lo corrija encima,
   y que NO puede salir a producción tal cual. Lo pone
   `Scripts/crear_paginas_ayuda.php` en las páginas de Ayuda del 04-09-2026.

   Va en ámbar y con barra, no como un párrafo más: la primera versión se leía
   igual que el resto del texto y eso es exactamente cómo un relleno termina
   publicado. Ya pasó con la garantía de los armazones, que decía «12 meses»
   porque alguien tuvo que escribir algo. */
.sf-aviso-demo {
  display: block;
  margin: 0 0 var(--sf-esp-5);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border-left: 3px solid var(--sf-aviso);
  background: var(--sf-aviso-fondo);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s);
}

/* --- La página de Galería ------------------------------------------------- */

/* Punto 6 del correo de Carlos del 06-09-2026. La reja NO la arma el tema: la
   arma el bloque Galería de Gutenberg, para que Carlos suba fotos solo. Acá se
   le da el aspecto del sitio y nada más. Ver `template-galeria.php`.

   La cabecera copia a la del catálogo a propósito: migas arriba, título en la
   fuente de marca y bajada debajo. Es el mismo tipo de página, «dónde estás»
   más una reja, y darle otra cabecera obligaría a aprenderse dos. */

.sf-galeria__cabecera { margin-bottom: var(--sf-esp-6); }

.sf-galeria__migas {
  margin-bottom: var(--sf-esp-1);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-galeria__migas a { color: inherit; text-decoration: none; }
.sf-galeria__migas a:hover { color: var(--sf-texto-marca); text-decoration: underline; }

.sf-galeria h1 {
  margin: 0;
  font-family: var(--sf-fuente-marca);
  font-weight: var(--sf-marca-wght);
  font-variation-settings: 'wdth' var(--sf-marca-wdth);
  font-size: var(--sf-h2);
  line-height: var(--sf-h2-alto);
  text-transform: uppercase;
  letter-spacing: var(--sf-titulo-mayus-tracking);
}

.sf-galeria__bajada {
  margin-top: var(--sf-esp-2);
  max-width: 68ch;
  color: var(--sf-texto-secundario);
}

.sf-galeria__bajada p { margin: 0; }

/* La reja.

   Se le pasa por encima al flex del bloque nativo con una grilla, y NO por
   gusto: el bloque reparte el ancho con `width: calc(50% - gap/2)` en cada
   figura hija, asi que con fotos verticales y horizontales mezcladas las filas
   quedan de altos distintos y la reja se ve rota. Con grilla mas `aspect-ratio`
   todas las celdas miden lo mismo y la foto se recorta al centro, que es lo que
   dice el mockup del 09-09-2026: «en la pagina irian recortadas a cuadrado».

   OJO CON EL `:not(#individual-image)`, QUE NO ES UN ADORNO. Es la llave que usa
   el CSS del propio bloque para subirse a especificidad de id:

     .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)

   Sin copiarla, una regla con tres clases nuestras pierde igual y la reja se
   queda con el ancho del bloque. Medido el 09-09-2026 con el estilo calculado:
   las fotos salian de 128px con `width` y `aspect-ratio` escritos y sin efecto.
   El `#individual-image` no existe en ninguna pagina: esta ahi solo por lo que
   pesa en la cuenta de especificidad. */
.sf-galeria__cuerpo .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-esp-3);
  margin: 0;
}

.sf-galeria__cuerpo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

.sf-galeria__cuerpo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--sf-radio);
}

/* El pie de foto es opcional y Carlos puede no poner ninguno, asi que no se le
   reserva alto: se pinta bajo la foto solo cuando existe. El bloque lo trae
   encima de la imagen y sobre un degradado, que sobre una foto recortada al
   cuadrado tapa justo el centro. */
.sf-galeria__cuerpo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption {
  position: static;
  max-height: none;
  padding: var(--sf-esp-2) 0 0;
  background: none;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
  text-align: left;
}

@media (max-width: 899px) {
  .sf-galeria__cuerpo .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* --- Instagram ------------------------------------------------------------ */

/* La sección va sobre el fondo alterno para separarse de las familias de arriba
   y del riel de productos de abajo, que son los dos bloques entre los que vive.
   El feed en sí lo pinta el plugin: acá solo va el aire alrededor y el tope de
   ancho de las fotos, que sin él se estiran a la fila completa en pantallas
   grandes. Ver `inc/instagram.php`. */
.sf-instagram { background: var(--sf-superficie-calida); }

.sf-instagram__feed { margin-top: var(--sf-esp-4); }

/* El plugin trae su propia grilla y su propio tamaño de letra. Lo único que se
   le impone es que no desborde: todo lo demás es suyo, y pisarlo obligaría a
   revisarlo en cada actualización del plugin. */
.sf-instagram__feed img { max-width: 100%; height: auto; }
.sf-instagram__feed #sb_instagram { padding-bottom: 0 !important; }