/* ==========================================================================
   DISEÑOS DE CONTENIDO
   ==========================================================================

   Antes cada template emitia su propio bloque <style> con el contenido_id
   interpolado en cada selector. Una home con 20 tarjetas del diseño 7 mandaba
   20 bloques de ~100 lineas de CSS practicamente identico dentro del HTML.

   Aca el CSS es estatico y cachea. Lo unico que varia por contenido viaja como
   custom property en el atributo style del elemento raiz:

       <div class="dsn dsn7" style="--dsn-overlay: #003366">

   Variables que consume cada diseño (todas opcionales, todas con fallback):

       --dsn-accent    color de acento: barras, botones, iconos, numeros
       --dsn-bg        color de fondo de la caja
       --dsn-bg-image  imagen de fondo, ya en formato url(...)
       --dsn-overlay   color del velo sobre la imagen (diseño 7)

   ========================================================================== */

/* --dsn-radio ya no se declara aca: es un alias de --radius-lg en el :root de
   global.css, junto al resto de las escalas. Se deja de usar el nombre viejo
   en reglas nuevas, pero sigue resolviendo para las que lo referencian. */

/* ==========================================================================
   CAJA BASE — de donde parten todos los diseños
   ==========================================================================

   Los trece diseños comparten superficie, borde, radio y comportamiento en
   hover. Lo que los diferencia es la COMPOSICION (imagen al costado o arriba,
   con velo o sin velo, texto sobre foto o sobre caja), no el padding ni el
   radio ni la sombra, que es como estaban antes: cada uno con los suyos, un
   poco distintos entre si sin ninguna razon visual.

   En reposo una tarjeta no lleva sombra: lleva un borde de un pixel. La sombra
   gris identica debajo de cada caja es lo que hace que una grilla se lea como
   plantilla. La elevacion aparece en hover, que es cuando significa algo
   ("esto responde"), y ahi no se mueve nada de sitio: antes cada tarjeta
   subia 4px y una fila entera saltaba al pasar el mouse por encima. */
.dsn {
  position: relative;
  height: 100%;
}

/* Superficie: la usan los diseños que son una caja (1, 2, 3, 4, 6, 9, 10, 11,
   12, 13 y el 8 con borde). Los que son una foto a sangre (5 y 7) no la usan. */
.dsn-superficie {
  background-color: var(--dsn-bg, var(--color-fondo-alterno));
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* .dsn-superficie:hover {
  border-color: var(--color-acento-borde);
  box-shadow: var(--shadow-md);
} */

/* Utilidad: recorte de texto a N lineas */
.dsn-clamp-2,
.dsn-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dsn-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.dsn-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}


/* ==========================================================================
   CONTENEDOR DE SECCION
   ========================================================================== */

.contenedor-seccion {
  position: relative;
  background-color: var(--dsn-bg, transparent);
  background-image: var(--dsn-bg-image, none);
  background-size: cover;
  background-position: center;
  padding: 0;
}

.contenedor-seccion.contenedor-seccion-espacio {
  padding: var(--space-5) 0;
}

/* Fondo dinamico: se mantiene fijo al hacer scroll */
.contenedor-seccion.dinamica {
  background-attachment: fixed;
}

/* Separador entre secciones consecutivas. Por defecto una seccion no trae
   fondo propio (--dsn-bg queda transparente hasta que el admin le pone un
   color), asi que dos seguidas se fundian con el gris de <body> y no se
   distinguia donde termina una y empieza otra.

   El color sale de la paleta (--color-linea-tenue, calculado sobre el color del
   texto) y no de un rgba de negro: con el modo oscuro un negro al 7% sobre un
   fondo casi negro no existe, y la linea desaparecia. */
.contenedor-seccion+.contenedor-seccion {
  border-top: 1px solid var(--color-linea-tenue);
}

@media (max-width: 767.98px) {

  /* background-attachment: fixed no funciona en la mayoria de los moviles y
     ademas rompe la altura del fondo en iOS. */
  .contenedor-seccion.dinamica {
    background-attachment: scroll;
  }
}

/* Ritmo vertical: separa titulo, imagen, textos, boton e hijos sin tener que
   ponerle margin a cada uno por separado. */
.contenedor-seccion .content-box>*+* {
  margin-top: var(--space-5);
}

/* La fila de tarjetas respira mas que el resto: es el corte entre "lo que
   dice la seccion" y "lo que la seccion lista". */
/* .contenedor-seccion .content-box>.fila-contenidos {
  margin-top: var(--space-7);
} */

/* Titulo propio del contenedor/contenido simple (h2 de arriba del todo).

   Ya no lleva la barrita de acento debajo. Era la seña mas visible de todas:
   el mismo subrayado de color, del mismo largo, bajo absolutamente cada titulo
   de la pagina. La jerarquia la da el tamaño y el aire de abajo, que es lo que
   se pide en DESIGN.md seccion 2.

   El clamp se queda porque el tamaño depende del ancho disponible y no de la
   jerarquia, pero sus extremos ahora salen de la escala: de --font-size-lg a
   --font-size-xl.

   El peso baja de 800 a 600. Un titulo de 32px ya es el elemento mas pesado de
   la pantalla; el peso extra no agrega jerarquia, agrega ruido. */
.contenedor-seccion .content-box>h2 {
  font-size: clamp(var(--font-size-lg), 2.6vw + 1rem, var(--font-size-xl));
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -.02em;
  color: var(--color-texto, #1f2a37);
  margin: 0;
}

/* Imagen del contenido simple. Borde en vez de sombra, igual que las
   tarjetas: una foto no necesita despegarse del fondo, ya se distingue sola. */
.contenedor-seccion .imagen-seccion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde);
}

.contenedor-seccion .imagen-seccion img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

/* max-width en ch y no en px: limita la medida de linea a algo comodo de leer
   (~75 caracteres) sin importar el tamaño de letra. Es lo que hace que un
   parrafo de introduccion a ancho de pantalla deje de leerse como relleno. */
.contenedor-seccion .descripcion-seccion {
  color: var(--color-texto-suave, #555);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  /* max-width: 75ch; */
}

.contenedor-seccion .descripcion-seccion p {
  margin: 0 0 var(--space-3);
}

.contenedor-seccion .descripcion-seccion p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .contenedor-seccion {
    padding: var(--space-7) 0;
  }
}

@media (max-width: 575.98px) {
  .contenedor-seccion .imagen-seccion img {
    max-height: 280px;
  }
}

/* Bootstrap estira por defecto todas las columnas de una fila a la altura de
   la mas alta. Sirve cuando los diseños son parecidos en tamaño, pero uno
   compacto (el boton de disenio 6, por ejemplo) al lado de uno con imagen y
   texto largo quedaba como una caja vacia enorme. Cada tarjeta ya define su
   propia altura minima cuando la necesita, asi que no hace falta que el grid
   la fuerce pareja. */
.contenedor-seccion .fila-contenidos {
  align-items: flex-start;
}


/* ==========================================================================
   TIPOGRAFIA Y ESPACIADO COMPARTIDO — Diseños 1 a 6
   ==========================================================================

   Estos diseños "clasicos" pintan un <h2> y un <div class="descripcion">
   sueltos, sin una clase propia como dsn7-title/dsn8-desc que ya traiga
   estilo. Sin este bloque el titulo salia con el h2 por defecto del
   navegador (grande, sin peso ni color propios) y el texto quedaba pegado
   al titulo de arriba y al boton de abajo. */

.design-one h2,
.design-two h2,
.design-three h2,
.design-four h2,
.design-five .dsn5-panel h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -.01em;
  color: var(--color-texto, #1f2a37);
  margin-bottom: var(--space-3);
}

.dsn .descripcion {
  color: var(--color-texto-suave, #555);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.dsn .descripcion p {
  margin: 0 0 var(--space-2);
}

.dsn .descripcion p:last-child {
  margin-bottom: 0;
}

/* En 4 y 5 el espacio de abajo ya lo da su propio padding/estructura; en 1, 2
   y 3 el boton venia pegado justo debajo del ultimo parrafo. */
.design-one .descripcion,
.design-two .descripcion,
.design-three .descripcion {
  margin-bottom: var(--space-4);
}

/* Del 1 al 5 el hover lo da .dsn-superficie (borde + sombra, sin moverse).
   Antes tenian el suyo propio, que subia la tarjeta 4px. */


/* ==========================================================================
   DISEÑO 1 y 2 — Texto con imagen lateral
   ==========================================================================
   Superficie, borde y radio salen de .dsn-superficie; lo unico propio del
   diseño es que la imagen va al costado y de que lado.
   ========================================================================== */

.design-one,
.design-two {
  padding: var(--space-5);
}

.design-one .imagen-lateral,
.design-two .imagen-lateral {
  height: 100%;
  min-height: 140px;
}

/* Debajo de lg la imagen se apila arriba del texto (ver disenio1/2.php): sin
   esto quedaba pegada al parrafo de abajo, sin el gap vertical que Bootstrap
   solo da entre columnas lado a lado. */
@media (max-width: 991.98px) {

  .design-one .imagen-lateral,
  .design-two .imagen-lateral {
    min-height: 220px;
    margin-bottom: var(--space-4);
  }
}

.design-one .imagen-lateral img,
.design-two .imagen-lateral img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
  /* Un escalon menos que la caja que la contiene: una imagen dentro de una
     tarjeta con el mismo radio que la tarjeta deja una luna de fondo en cada
     esquina. */
  border-radius: var(--radius-md);
}

.design-one .archivo,
.design-two .archivo,
.design-four .archivo {
  margin: var(--space-4) 0;
  text-align: center;
}


/* ==========================================================================
   DISEÑO 3 — Imagen arriba, texto abajo
   ========================================================================== */

.design-three {
  padding: var(--space-5);
}

/* Proporcion fija en vez del alto natural de cada foto: una imagen vertical
   y una panoramica quedaban con relaciones de aspecto muy distintas entre si
   y se veian como un recorte cualquiera, no como parte de un diseño. */
.design-three .imagen-contenido img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Variante con borde: lo unico que cambia es que el borde toma el color de
   acento en vez del gris de la paleta, y que la caja recorta a sus hijos. */
.design-three.dsn-borde,
.design-four.dsn-borde,
.design-five.dsn-borde {
  border-color: var(--color-borde);
  overflow: hidden;
  padding: 0;
}

.design-three.dsn-borde .descripcion,
.design-four.dsn-borde .descripcion {
  padding: var(--space-3);
}


/* ==========================================================================
   DISEÑO 4 — Tarjeta clicable completa
   ========================================================================== */

.design-four {
  padding: 0;
  overflow: hidden;
}

.design-four .dsn4-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.design-four .dsn4-link:hover {
  text-decoration: none;
}

.design-four .imagen-contenido img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* El resto del contenido (fuera de la imagen, que va a sangre) necesita su
   propio respiro: .design-four tiene padding:0 para que la imagen llegue a
   los bordes de la tarjeta. */
.design-four .dsn4-link h2,
.design-four .dsn4-link .descripcion,
.design-four .archivo,
.design-four>div:last-child {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.design-four .dsn4-link h2 {
  padding-top: var(--space-5);
}

.design-four .dsn4-link .descripcion {
  padding-bottom: var(--space-5);
}

.design-four>div:last-child {
  padding-bottom: var(--space-5);
}


/* ==========================================================================
   DISEÑO 5 — Caja con imagen de fondo
   ========================================================================== */

/* La caja es principalmente su imagen de fondo: sin una altura minima propia
   quedaba tan alta como el panel de texto nada mas, y el fondo apenas se
   alcanzaba a ver detras. El panel se ancla abajo, como una caption sobre una
   foto, en vez de aparecer pegado arriba tapando la imagen. */
.design-five .dsn5-inner {
  background-color: var(--dsn-bg, transparent);
  background-image: var(--dsn-bg-image, none);
  background-size: cover;
  background-position: center;
  min-height: 260px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* El panel se apoya sobre la foto de fondo y su texto usa --color-texto, que en
   modo oscuro es claro: si el panel siguiera siendo blanco fijo, el texto no se
   leeria. --color-panel-velo es el fondo de las cajas de la paleta al 92%. */
.design-five .dsn5-panel {
  background: var(--color-panel-velo);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

/* La imagen superior es opcional y aparte de la de fondo: se trata como un
   distintivo chico (logo, icono, foto de autor) apoyado arriba de la caja, no
   como una segunda foto a tamaño completo compitiendo con el fondo. */
.dsn5-topimg {
  align-self: flex-start;
  margin-bottom: auto;
}

/* Redonda y con aro: es lo unico que va sobre la foto sin caja detras, asi que
   el aro es lo que la separa del fondo. Sin sombra: el aro ya alcanza. */
.dsn5-topimg img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-fondo-alterno);
}

/* Cualquier imagen que venga suelta dentro del texto del editor (no la de
   arriba, que ya tiene su propio tamaño fijo). */
.design-five .dsn5-panel img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   DISEÑO 6 — Tarjeta que abre un modal con mas detalle
   ========================================================================== */

/* La tarjeta es un anticipo: imagen chica, titulo, un extracto de 2 lineas y
   un "Leer mas" que abre el modal.

   El borde punteado se va. Era la unica tarjeta del sitio con un borde de otro
   estilo, y lo que tenia que comunicar ("hay mas contenido adentro") ya lo
   dice el "Leer mas": el punteado solo la hacia parecer un placeholder. Con
   dsn-borde toma el color de borde de la paleta, igual que los diseños 3, 4 y 5. */
.dsn6.dsn-borde {
  border-color: var(--color-borde);
}

.dsn6-trigger {
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  padding: var(--space-5);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dsn6-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.dsn6-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dsn6-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-texto, #1f2a37);
}

.dsn6-preview {
  font-size: var(--font-size-sm);
  color: var(--color-texto-suave, #666);
  line-height: var(--line-height-relaxed);
}

/* El "Leer mas" de esta tarjeta es el enlace de texto compartido (.dsn-cta,
   al final de esta hoja); lo unico propio es que se empuja al fondo de la
   tarjeta para que todas las de una fila lo tengan a la misma altura. */
.dsn6-cta {
  margin-top: auto;
  padding-top: var(--space-2);
}

.dsn6:hover .dsn6-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Modal: mas espacioso, con la imagen al costado en vez de arriba del texto
   cuando hay una, y el color de marca del sitio en vez de un azul fijo que no
   tenia relacion con el resto del diseño. */
.dsn6-modal .modal-dialog {
  --bs-modal-width: 720px;
}

.dsn6-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.dsn6-modal .modal-content.dsn6-modal-con-imagen {
  flex-direction: row;
  flex-wrap: wrap;
}

.dsn6-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background-color: var(--color-fondo-alterno);
  border-radius: 50%;
  opacity: .9;
  padding: var(--space-2);
}

.dsn6-modal-media {
  flex: 0 0 42%;
  min-height: 220px;
  position: relative;
}

.dsn6-modal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dsn6-modal-body {
  flex: 1;
  min-width: 0;
  padding: var(--space-6);
}

.dsn6-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto, #1f2a37);
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-tight);
}

/* El modal es el unico lugar del diseño 6 donde hay texto largo de verdad, asi
   que aca si va el cuerpo a tamaño base y la medida de linea acotada. */
.dsn6-modal-body .descripcion {
  color: var(--color-texto-suave, #555);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  max-width: 70ch;
}

.dsn6-modal-footer {
  margin-top: var(--space-5);
}

@media (max-width: 575.98px) {
  .dsn6-modal-media {
    flex-basis: 100%;
    min-height: 180px;
  }

  .dsn6-modal-body {
    padding: var(--space-5);
  }
}


/* ==========================================================================
   DISEÑO 7 — Hero con Overlay

   Los blancos de este bloque no salen de la paleta a proposito: el texto va
   encima de la foto y del velo oscuro, donde lo que lo hace legible es el
   contraste contra la imagen, no el color de marca. El #1a1a2e del fondo es lo
   que se ve mientras la imagen carga, o si no cargo ninguna.
   ========================================================================== */

.dsn7 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1a1a2e;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.dsn7:hover {
  box-shadow: var(--shadow-md);
}

.dsn7-bg {
  position: absolute;
  inset: 0;
  background-image: var(--dsn-bg-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Mas larga que --duration-base a proposito: el recorrido es toda la caja,
     no un color. Es la excepcion prevista en la escala de movimiento. */
  transition: transform .5s var(--ease-standard);
  will-change: transform;
}

.dsn7:hover .dsn7-bg {
  transform: scale(1.04);
}

/* El velo no es decoracion: es lo unico que garantiza que el texto blanco se
   lea sobre cualquier foto que suba el editor. Por eso queda, y por eso no
   cambia de opacidad en hover — atenuarlo justo cuando el visitante se acerca
   a leer era exactamente al reves de lo que hace falta. */
.dsn7-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      var(--dsn-overlay, rgba(0, 0, 0, .62)) 0%,
      rgba(0, 0, 0, .28) 60%,
      rgba(0, 0, 0, .06) 100%);
}

.dsn7-body {
  position: relative;
  padding: 0 var(--space-6) var(--space-6);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dsn7-title {
  font-size: clamp(var(--font-size-md), 2.4vw, var(--font-size-lg));
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
  letter-spacing: -.02em;
}

.dsn7-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, .85);
  margin: 0;
  max-width: 55ch;
}

/* Contorno, sin mayusculas sostenidas, sin flecha y sin vidrio esmerilado.
   Los blancos son fijos a proposito (estan sobre la foto, ver el encabezado de
   esta seccion), pero la forma es la misma que la de .btn-vermas-outline. */
.dsn7-cta {
  display: inline-block;
  width: fit-content;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  margin-top: var(--space-1);
}

.dsn7-cta:hover {
  background: #fff;
  border-color: #fff;
  color: #14161f;
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .dsn7 {
    min-height: 300px;
  }

  .dsn7-body {
    padding: 0 var(--space-5) var(--space-5);
  }
}


/* ==========================================================================
   DISEÑO 8 — Split Media
   ========================================================================== */

.dsn8 {
  display: flex;
  min-height: 280px;
  overflow: hidden;
  background: var(--color-fondo-alterno);
}

/* Es el unico diseño en el que el borde es opcional de verdad: sin el, la
   imagen y el texto van a sangre dentro de la columna. Con el, es una tarjeta
   como las demas. */
.dsn8.dsn-borde {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.dsn8.dsn-borde:hover {
  border-color: var(--color-acento-borde);
  box-shadow: var(--shadow-md);
}

.dsn8-img {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
  background: var(--color-borde);
  min-height: 220px;
}

.dsn8-img-inner {
  position: absolute;
  inset: 0;
  background-image: var(--dsn-bg-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .5s var(--ease-standard);
  will-change: transform;
}

.dsn8:hover .dsn8-img-inner {
  transform: scale(1.04);
}

/* La barrita de acento sobre el titulo (.dsn8-accent) se elimino: era la
   misma seña que el subrayado bajo cada h2 de seccion, repetida una vez por
   tarjeta. El titulo se sostiene solo. */
.dsn8-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  gap: var(--space-3);
  min-width: 0;
}

.dsn8-title {
  font-size: clamp(var(--font-size-base), 2vw, var(--font-size-md));
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-texto, #1f2a37);
  margin: 0;
  letter-spacing: -.01em;
}

.dsn8-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-texto-suave, #555);
  margin: 0;
  max-width: 60ch;
}

.dsn8-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-1);
}


/* Mismo boton que el resto del sitio: mismo radio, mismo peso, sin mayusculas
   sostenidas y sin flecha. */
.dsn8-cta {
  display: inline-block;
  background: var(--dsn-accent, var(--color-acento, #4f46e5));
  color: var(--color-acento-contraste);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.dsn8-cta:hover {
  opacity: .88;
  color: var(--color-acento-contraste);
  text-decoration: none;
}

/* Este diseño casi siempre va de a 2 por fila (col-sm-6 o similar), asi que
   sus columnas ya son angostas desde bastante antes que el viewport. Se apila
   en el escalon de tablet: mas abajo, imagen y texto quedan apretados uno al
   lado del otro sin espacio para ninguno de los dos.

   El corte estaba en 900px, que no era ninguno de los tres breakpoints
   fijados; 768px es el escalon mas cercano y cubre el mismo caso. */
@media (max-width: 767.98px) {
  .dsn8 {
    flex-direction: column;
  }

  .dsn8-img {
    flex: 0 0 210px;
    min-height: 210px;
  }

  .dsn8-body {
    padding: var(--space-5);
  }
}


/* ==========================================================================
   DISEÑO 9 — Card Blog / Noticia
   ========================================================================== */

.dsn9 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* dsn-borde en este diseño era "sombra mas marcada", que con la sombra fuera
   del reposo ya no significa nada. Pasa a ser lo mismo que en los diseños 3,
   4, 5 y 6: el borde toma el color de borde de la paleta. */
.dsn9.dsn-borde {
  border-color: var(--color-borde);
}

.dsn9-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-borde);
  flex-shrink: 0;
}

.dsn9-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-standard);
  will-change: transform;
}

.dsn9:hover .dsn9-img {
  transform: scale(1.04);
}

.dsn9-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-tenue);
  font-size: var(--font-size-xl);
  background: var(--color-fondo);
}

/* Etiqueta de categoria. Radio chico y no pastilla: es un elemento que se
   llena de texto, no un boton, y el radio es una de las cosas que marca esa
   diferencia. Sin mayusculas sostenidas: es una categoria, se lee mejor tal
   como la escribio el editor. */
.dsn9-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--dsn-accent, var(--color-acento, #4f46e5));
  color: var(--color-acento-contraste);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 1;
}

.dsn9-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  gap: var(--space-2);
}

.dsn9-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-texto, #1f2a37);
  margin: 0;
}

.dsn9-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-texto-suave, #666);
  margin: 0;
  flex: 1;
}

.dsn9-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-borde);
}





/* ==========================================================================
   DISEÑO 10 — Testimonial / Quote
   ========================================================================== */

/* La comilla gigante de fondo (.dsn10-qmark, 8rem de Georgia al 10% del
   acento) se elimino: era decoracion pura, la misma en cada testimonio, y
   competia con el texto que en teoria estaba realzando. Lo que dice que esto
   es una cita es la bastardilla del texto y el bloque de autor de abajo. */
.dsn10 {
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Variante oscura. Se apoya en el color de titulo, que es el unico oscuro de
   la paleta, asi que acompania si lo cambian; el texto de arriba queda blanco
   porque el fondo siempre va a ser el extremo oscuro. */
.dsn10.dsn10-dark {
  background: var(--color-texto);
  border-color: var(--color-texto);
}

.dsn10-stars {
  display: flex;
  gap: 2px;
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  font-size: var(--font-size-sm);
}

.dsn10-star-empty {
  color: var(--color-borde);
}

.dsn10-dark .dsn10-star-empty {
  color: rgba(255, 255, 255, .2);
}

.dsn10-text {
  position: relative;
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--color-texto-suave, #444);
  line-height: var(--line-height-relaxed);
  margin: 0;
  flex: 1;
}

.dsn10-dark .dsn10-text {
  color: rgba(255, 255, 255, .88);
}

.dsn10-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-linea-tenue);
}

.dsn10-dark .dsn10-author {
  border-top-color: rgba(255, 255, 255, .1);
}

/* La foto va sin aro de color: el aro de acento alrededor de cada cara era la
   misma decoracion repetida que la barrita y el comillon. Redonda si — es una
   cara, y esa es la convencion que la distingue de una imagen de contenido. */
.dsn10-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.dsn10-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-acento-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.dsn10-info {
  display: flex;
  flex-direction: column;
}

/* .dsn10-sep (la rayita de acento sobre el nombre) se elimino junto con las
   otras tres del mismo tipo. */
.dsn10-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-texto, #1f2a37);
  margin: 0;
}

.dsn10-dark .dsn10-name {
  color: #fff;
}

.dsn10-role {
  font-size: var(--font-size-xs);
  color: var(--color-texto-tenue);
  margin: 0;
}

.dsn10-dark .dsn10-role {
  color: rgba(255, 255, 255, .5);
}


/* ==========================================================================
   DISEÑO 11 — Numero / Estadistica
   ========================================================================== */

/* De todos los diseños este era el mas cargado de decoracion: dos circulos
   del color de marca de fondo, un degradado diagonal en la variante con
   borde, una barrita de acento arriba y un cuadrado solido de marca con el
   icono en blanco. Cuatro recursos distintos para acompañar a un numero.

   Queda el numero, que es de lo que se trata el diseño. */
.dsn11 {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.dsn11.dsn-borde {
  border-color: var(--color-borde);
}

.dsn11:hover {
  text-decoration: none;
}

/* El icono no es el protagonista: acompaña al numero. Por eso va en el acento
   sobre su version translucida, y no como un bloque solido de marca — que era
   lo que hacia que la fila de tarjetas se leyera como una fila de botones.
   Radio medio, no grande: es un elemento chico, no un contenedor. */
.dsn11-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-acento-light);
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
  font-size: var(--font-size-md);
}

/* La imagen del editor viene en cualquier color, asi que se la tiñe del
   acento con una mascara en vez de invertirla a blanco: sobre el fondo
   translucido el blanco no se veria. */
.dsn11-icon-img {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--dsn-icono) center / contain no-repeat;
  mask: var(--dsn-icono) center / contain no-repeat;
}

.dsn11-number {
  display: block;
  font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-2xl));
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-texto);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.dsn11-label {
  font-size: var(--font-size-sm);
  color: var(--color-texto-suave, #666);
  line-height: var(--line-height-base);
  margin: var(--space-1) 0 0;
}

.dsn11-cta {
  margin-top: var(--space-3);
}


/* ==========================================================================
   DISEÑO 12 — Feature con Barra
   ========================================================================== */

.dsn12 {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.dsn12-inner {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  min-width: 0;
}

/* Mismo criterio que el icono del diseño 11: acento sobre acento translucido,
   no un bloque solido de marca. Y un escalon mas chico que el 11 porque aca
   comparte fila con el titulo en vez de encabezar la tarjeta. */
.dsn12-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-acento-light);
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
}

.dsn12-icon-img {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--dsn-icono) center / contain no-repeat;
  mask: var(--dsn-icono) center / contain no-repeat;
}

/* El numero de paso si va solido: es el unico caso donde el elemento ES el
   dato (el orden) y no un adorno al costado del texto. */
.dsn12-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dsn-accent, var(--color-acento, #4f46e5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-acento-contraste);
  font-variant-numeric: tabular-nums;
}

.dsn12-bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dsn-accent, var(--color-acento, #4f46e5));
  /* Alineacion optica con la primera linea del titulo, no un espacio de la
     escala: depende del alto de linea, no del ritmo vertical. */
  margin-top: 9px;
}

.dsn12-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* El titulo va en el color de titulo y no en el de parrafo: antes los dos
   usaban --color-texto-suave, asi que titulo y descripcion pesaban igual y la
   tarjeta no tenia jerarquia interna. */
.dsn12-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto, #1f2a37);
  margin: 0;
  line-height: var(--line-height-tight);
}

.dsn12-desc {
  font-size: var(--font-size-sm);
  color: var(--color-texto-suave, #555);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.dsn12-footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}





/* ==========================================================================
   DISEÑO 13 — Tarjeta con icono centrado
   ==========================================================================

   El hermano centrado del 12. Comparte con el todo lo que se puede compartir
   —la superficie, el disco de acento, el tamaño del icono, la tipografia del
   titulo y del texto— y lo unico propio es el eje: aca la tarjeta se lee de
   arriba hacia abajo y por el medio.

   Cuando el texto pasa de cuatro o cinco lineas conviene el 12: centrado, un
   parrafo largo obliga al ojo a buscar el comienzo de cada linea. */

.dsn13 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-decoration: none;
}

/* Un escalon mas grande que el disco del 12 (40px): ahi comparte fila con el
   titulo y aca encabeza la tarjeta, o sea que es lo primero que se ve. */
.dsn13-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-acento-light);
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Variante solida: el disco toma el acento y el icono queda en negativo. Sirve
   cuando la fila de tarjetas es lo unico de la seccion y el acento translucido
   se pierde contra un fondo alterno. */
.dsn13-solido .dsn13-icon-wrap {
  background: var(--dsn-accent, var(--color-acento, #4f46e5));
  color: var(--color-acento-contraste);
}

.dsn13-icon-img {
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: var(--dsn-icono) center / contain no-repeat;
  mask: var(--dsn-icono) center / contain no-repeat;
}

.dsn13-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto, #1f2a37);
  line-height: var(--line-height-tight);
  margin: 0;
}

.dsn13-desc {
  font-size: var(--font-size-sm);
  color: var(--color-texto-suave, #555);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.dsn13-desc p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   ENLACES COMPARTIDOS POR LOS DISEÑOS
   ==========================================================================

   Los diseños 6, 9, 11 y 12 terminaban cada uno con su propio "Ver mas" y su
   propio "Descargar", con los mismos valores escritos cuatro veces. Cuando
   habia que corregir uno (por ejemplo sacarle la flecha) habia que acordarse
   de los otros tres — que es como se desincronizaron.

   Aca estan una sola vez. Cada diseño se queda con su clase propia solo para
   lo que sea de su composicion: el 6 empuja el suyo al fondo de la tarjeta, el
   11 le da aire arriba.

   El 7 y el 8 no entran: los suyos son botones (con caja), no enlaces de
   texto, y estan definidos en la seccion de su diseño.
   ========================================================================== */

/* "Ver mas" / "Leer mas": enlace de texto en el color de acento. Sin flecha al
   final y sin separarse de ella en hover; se subraya, que es lo que un enlace
   hace desde siempre y no hay que aprender. */
.dsn6-cta,
.dsn9-cta,
.dsn11-cta,
.dsn12-cta,
.dsn13-cta {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  text-decoration: none;
}

.dsn9-cta:hover,
.dsn11-cta:hover,
.dsn12-cta:hover,
.dsn13-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
}

/* "Descargar": este SI conserva su icono. No es una flecha decorativa al final
   de un "Ver mas", es lo que dice que el enlace baja un archivo en vez de
   llevar a otra pagina. Va en el color de parrafo y no en el de acento: es la
   accion secundaria de la tarjeta. */
.dsn8-dl,
.dsn9-dl,
.dsn12-dl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-texto-suave, #555);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.dsn8-dl:hover,
.dsn9-dl:hover,
.dsn12-dl:hover {
  color: var(--dsn-accent, var(--color-acento, #4f46e5));
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   CARRUSEL horizontal (contenido_tipo 6)
   ========================================================================== */

.carouselsection {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel_inner {
  overflow: hidden;
  flex: 1;
  /* Sin esto un flex item no se encoge mas alla del ancho de su contenido
     (min-width:auto por defecto): la fila de tarjetas, mas ancha que la
     pantalla, empujaba a toda la pagina a scrollear horizontal en vez de
     quedarse contenida y scrollear solo aca adentro. */
  min-width: 0;
}

.carousel_inner>ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
  transition: transform var(--duration-base) var(--ease-standard);
}

.carousel_inner>ul>li {
  flex: 0 0 auto;
}

/* Sin un ancho propio, cada item mide lo que le pida su contenido (una
   tarjeta de texto largo se estira bastante) y en una pantalla chica quedaba
   mas ancho que el viewport, cortado a la mitad en vez de una tarjeta
   completa a la vista. Con un ancho en porcentaje, la tarjeta (bloque normal
   adentro) se estira sola a ese ancho. */
@media (max-width: 767.98px) {
  .carousel_inner>ul>li {
    flex: 0 0 60%;
  }
}

@media (max-width: 575.98px) {
  .carousel_inner>ul>li {
    flex: 0 0 85%;
  }
}

.caja-control {
  cursor: pointer;
  color: var(--color-acento, #4f46e5);
  flex-shrink: 0;
  user-select: none;
}

.con-espacios {
  padding: 0 var(--space-3);
}


/* ==========================================================================
   SLIDER (Slick)
   ========================================================================== */

.slider-description {
  color: var(--color-texto-suave, #666);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-relaxed);
}

.slider-empty {
  padding: var(--space-6);
  text-align: center;
  background-color: var(--color-fondo);
  border-radius: var(--radius-md);
  color: var(--color-texto-tenue);
}

/* Slick pone las flechas 25px afuera del slider (pensado para un layout con
   margen alrededor). Sin ese margen, en mobile las flechas quedaban afuera
   del viewport y forzaban un scroll horizontal de toda la pagina, no solo
   del slider. Se traen para adentro y se les da un fondo circular para que
   se puedan tocar/ver bien sobre cualquier imagen. */
.sliderCont .slick-prev,
.sliderCont .slick-next {
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  z-index: 1;
}

.sliderCont .slick-prev {
  left: 8px;
}

.sliderCont .slick-next {
  right: 8px;
}

.sliderCont .slick-prev:hover,
.sliderCont .slick-prev:focus,
.sliderCont .slick-next:hover,
.sliderCont .slick-next:focus {
  background: rgba(0, 0, 0, .65);
}

.sliderCont .slick-prev:before,
.sliderCont .slick-next:before {
  /* Las flechas de slick son un glifo de su fuente de iconos, no texto: el
     tamaño es el del dibujo y por eso no sale de la escala tipografica. */
  font-size: 16px;
  opacity: 1;
}

/* Alto fijo por item: sin esto, cada imagen aporta su propio alto segun su
   proporcion original y las tarjetas del slider quedan con bordes inferiores
   dispares en vez de una fila pareja. */
/* Slick le fuerza "width: 100%" por JS en linea al elemento original de cada
   slide (mas fuerte que cualquier margin de por aca), asi que darle margen a
   .itemSlider lo hacia desbordar su propio slot y el "gap" quedaba recortado
   por el overflow:hidden de la pista en vez de verse. Con padding no pasa eso
   (el sitio ya usa box-sizing: border-box en todo), asi que el espacio se
   descuenta del propio ancho en vez de sumarse. El radio se mueve a la imagen
   porque ahora es ella, y no .itemSlider, la que toca los bordes visibles. */
.itemSlider {
  aspect-ratio: 4 / 3;
  padding: 0 var(--space-2);
}

.itemSlider .slider-link {
  display: block;
  height: 100%;
  text-decoration: none;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.slider-link:hover .slider-image {
  transform: scale(1.03);
}


/* ==========================================================================
   SLIDER — disenio 2 "Ancho completo"
   ==========================================================================

   Las flechas de todos los disenios de abajo se pintan en un solo lugar, al
   final de este bloque de sliders: son el mismo boton circular oscuro sobre la
   imagen y repetirlo por disenio era garantizar que se desincronizaran.
   ========================================================================== */

/* El slider se sale del .container con un ancho de 100vw (ver .sliderAncho).
   100vw cuenta el ancho de la barra de scroll, asi que en los navegadores que
   la dibujan encima del contenido sobran un par de pixeles y apareceria scroll
   horizontal en TODA la pagina. El clip lo corta contra la seccion. Se usa
   'clip' y no 'hidden' porque hidden convierte a la seccion en contenedor de
   scroll y romperia cualquier position:sticky que quede adentro. */
section.contenedor-seccion:has(.sliderAncho) {
  overflow-x: clip;
}

/* Rompe el .container de seccion.php para ocupar el ancho de la ventana: se
   corre medio contenedor a la derecha y se trae de vuelta media ventana a la
   izquierda, que es el modo de conseguir el borde a borde sin sacar el bloque
   de su lugar en el flujo. */
.sliderAncho {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

.sliderAncho-link {
  display: block;
  text-decoration: none;
}

/* Cuadradas: el alto sale del aspect-ratio sobre el ancho que le toco al
   slide, y object-fit cover recorta lo que sobra de las fotos apaisadas sin
   deformarlas. Al ser todos los slides del mismo ancho quedan todos del mismo
   alto y la seccion no cambia de altura al avanzar.

   Van pegadas una al lado de la otra: no hay padding ni margin en el item, asi
   que el corte entre una y otra es a filo. El display block es lo que evita la
   franja blanca que dejaria abajo si se tratara como texto en linea. */
.sliderAncho-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.sliderAncho .slick-prev {
  left: 20px;
}

.sliderAncho .slick-next {
  right: 20px;
}


/* ==========================================================================
   SLIDER — disenio 3 "Una imagen a la vez"
   ========================================================================== */

/* Aire abajo para los puntos, que slick dibuja por fuera de la pista. */
.sliderFade {
  position: relative;
  padding-bottom: var(--space-6);
}

.sliderFade-link {
  display: block;
  text-decoration: none;
}

/* Sin recortar: en este disenio la imagen es el contenido, asi que se muestra
   entera y el alto lo pone su proporcion (adaptiveHeight en el JS acompaña). */
.sliderFade-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.sliderFade .slick-prev {
  left: 14px;
}

.sliderFade .slick-next {
  right: 14px;
}

.sliderFade .slick-dots {
  bottom: 0;
}

/* El punto activo se agranda ademas de cambiar de opacidad: solo con opacidad
   casi no se distingue sobre fondos claros. */
.sliderFade .slick-dots li button:before {
  /* Glifo de slick, igual que las flechas: es el diametro del punto. */
  font-size: 10px;
  color: var(--color-acento);
  opacity: .35;
  transition: opacity .2s ease, transform .2s ease;
}

.sliderFade .slick-dots li.slick-active button:before {
  opacity: 1;
  transform: scale(1.35);
}


/* ==========================================================================
   SLIDER — disenio 4 "Imagen con miniaturas"
   ========================================================================== */

.sliderMin-principal {
  position: relative;
}

.sliderMin-link {
  display: block;
  text-decoration: none;
}

/* Recorte 16:9 para que el bloque no cambie de alto al pasar de una foto
   apaisada a una vertical. Aca si se recorta —a diferencia del disenio 3—
   porque conviven imagen grande y tira: si el alto saltara, la tira bailaria. */
.sliderMin-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--color-borde);
}

.sliderMin-tira {
  margin-top: var(--space-2);
}

/* La separacion entre miniaturas va como padding del slide y no como margin:
   el ancho de cada slide lo calcula slick y un margin le romperia la cuenta. */
.itemSliderMinThumb {
  padding: 0 5px;
}

.sliderMin-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  opacity: .5;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.itemSliderMinThumb:hover .sliderMin-thumb {
  opacity: .85;
}

/* La miniatura de la imagen que se esta viendo, a opacidad plena y con borde
   de acento; las demas, atenuadas. */
.sliderMin .slick-current .sliderMin-thumb {
  opacity: 1;
  border-color: var(--color-acento);
}

.sliderMin .slick-prev {
  left: 14px;
}

.sliderMin .slick-next {
  right: 14px;
}

/* Este disenio va con infinite: false, asi que slick deshabilita la flecha del
   extremo en el que se esta. Sin esto queda a la vista pero sin efecto. */
.sliderMin .slick-prev.slick-disabled,
.sliderMin .slick-next.slick-disabled {
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   SLIDER — disenio 5 "Marquesina continua"
   ========================================================================== */

/* --dsn-marq-bg lo escribe el template a partir del "Color Fondo" del Slider.
   Sin color cargado, la cinta es transparente y se ve el fondo de la seccion. */
.sliderMarq {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) 0;
  background: var(--dsn-marq-bg, transparent);
  border-radius: var(--radius-lg);
}

/* Los degradados de los bordes hacen que los logos aparezcan y desaparezcan
   desvanecidos en vez de cortados a filo contra el borde de la columna. Se
   tiñen del fondo de la propia cinta —y no de blanco fijo— para que sigan
   sirviendo en modo oscuro y con cualquier color cargado. */
.sliderMarq::before,
.sliderMarq::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  z-index: 2;
  pointer-events: none;
}

.sliderMarq::before {
  left: 0;
  background: linear-gradient(to right, var(--dsn-marq-bg, var(--color-fondo)), transparent);
}

.sliderMarq::after {
  right: 0;
  background: linear-gradient(to left, var(--dsn-marq-bg, var(--color-fondo)), transparent);
}

/* Logos de distinto alto, centrados entre si. */
.sliderMarq .slick-track {
  display: flex;
  align-items: center;
}

.itemSliderMarq {
  height: auto;
  padding: 0 18px;
}

.sliderMarq-link {
  display: block;
  text-decoration: none;
}

/* Alto fijo y object-fit contain: los logos vienen con proporciones distintas
   y lo que tiene que quedar parejo es el alto, sin deformar ninguno. La escala
   de grises los uniforma sobre el fondo y el color vuelve al pasar el mouse,
   que es la convencion para estas cintas. */
.sliderMarq-image {
  width: 100%;
  height: 58px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.sliderMarq-link:hover .sliderMarq-image {
  filter: grayscale(0);
  opacity: 1;
}


/* ==========================================================================
   SLIDER — disenio 6 "Imagen con panel de texto"
   ========================================================================== */

/* Espacio a los costados para las flechas, que van montadas por fuera de la
   caja, y abajo para el boton, que asoma por debajo del borde. */
.sliderPanel {
  position: relative;
  padding: 0 46px;
}

/* El boton sobresale de su slide y slick recorta con overflow:hidden. El
   padding es el aire que lo deja verse; sin el queda cortado al medio. */
.sliderPanel .slick-list {
  padding-bottom: var(--space-5) !important;
  overflow: hidden;
}

/* Las dos mitades: la imagen a la izquierda y el panel a la derecha. La
   proporcion 1.9fr / 1fr es la de la pieza original. position:relative es lo
   que ancla el boton a la esquina de abajo a la derecha.

   --dsn-panel-bg la escribe el template por pieza: color propio del item, si
   no el del Slider, si no el acento de la paleta. */
.sliderPanel-caja {
  position: relative;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-lg);
  background: var(--dsn-panel-bg, var(--color-acento));
}

/* El recorte va en el contenedor y la imagen lo llena con height:100%. Con
   aspect-ratio directamente sobre el <img>, Chrome le da la caja correcta pero
   no la termina de cubrir y queda una franja de fondo.

   max-width es imprescindible: la caja es un item de grid con align-items
   stretch, asi que cuando el texto del panel es mas alto que la imagen el alto
   de la fila manda y aspect-ratio recalcula el ANCHO a partir de ese alto. Sin
   el tope la imagen se sale de su mitad. Con el tope se queda en su columna y
   recorta un poco de alto, que es lo que no se nota. */
.sliderPanel-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: var(--color-borde);
  aspect-ratio: 1000 / 385;
  min-width: 0;
  max-width: 100%;
}

.sliderPanel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El panel de color. El padding de abajo es mas grande que el de arriba para
   dejarle lugar al boton y que no se monte sobre la ultima linea del texto. */
.sliderPanel-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6) var(--space-8);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  min-width: 0;
}

/* A proposito no llevan color: el del texto se elige desde el editor de
   contenidos. Sin eso heredan el de la pagina, que sobre un panel oscuro no se
   lee — esta advertido en la ayuda del disenio en el administrador. */
.sliderPanel-titulo {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.sliderPanel-desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* Abajo a la derecha, medio adentro y medio afuera de la caja. Va plano, sin
   sombra: lo que lo despega del panel es que sobresale del borde. */
.sliderPanel-boton {
  position: absolute;
  right: var(--space-5);
  bottom: -16px;
  z-index: 3;
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-acento);
  color: var(--color-acento-contraste);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.sliderPanel-boton:hover,
.sliderPanel-boton:focus {
  background: var(--color-acento-hover);
  color: var(--color-acento-contraste);
  text-decoration: none;
}

/* Las flechas van por fuera de la caja, en los 46px de aire lateral. */
.sliderPanel .slick-prev {
  left: 0;
}

.sliderPanel .slick-next {
  right: 0;
}

/* Se apila por debajo de 992px y no de 768px: entre medio, la columna del
   panel queda tan angosta que el texto se hace mas alto que la imagen, y al
   estirarse la fila la imagen termina recortada de los costados. Apilando
   antes, se ve entera en todo ese rango. */
@media (max-width: 991.98px) {
  .sliderPanel {
    padding: 0 var(--space-6);
  }

  .sliderPanel-caja {
    grid-template-columns: 1fr;
  }

  /* Apilada, la imagen va arriba del panel, asi que su alto puede ser el que
     necesite: se muestra con su proporcion original y no se recorta nada. Con
     una proporcion fija aca, una imagen apaisada perdia los costados, que es
     justo donde suelen ir el logo y los datos. */
  .sliderPanel-img-wrap {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: auto;
  }

  .sliderPanel-img {
    height: auto;
  }

  .sliderPanel-texto {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-8);
  }
}


/* ==========================================================================
   SLIDER — disenio 7 "Logos con testimonio"
   ==========================================================================

   La composicion viene del bloque de clientes de omegasolucionesweb.com: una
   fila de logos en circulo, el elegido resaltado, y debajo su testimonio en un
   panel de color con la foto al lado.

   Que cambia respecto de aquel:

     - el panel y el aro salen de --dsn-accent (el "Color Fondo" del Slider) y
       no de dos azules escritos a mano, asi que acompañan a la paleta;
     - la tira es la navegacion y no hay flechas (disenios.js las apaga para
       este modo): una flecha dice "hay mas", un logo dice "hay mas Y de quien";
     - sin las comillas de adorno, sin el doble aro y sin el alto fijo de
       504px, que era lo que cortaba las citas largas.

   Los blancos del panel son fijos a proposito, como en el diseño 7: van sobre
   un color elegido por el editor y dependen del contraste contra el, no de la
   paleta.
   ========================================================================== */

.sliderLogos {
  position: relative;
}

/* Las dos mitades. El alto lo fija adaptiveHeight en false (ver el modo
   "logos" en disenios.js): asi el bloque no salta al cambiar de cliente
   aunque una cita sea mas larga que otra. */
.sliderLogos-cita {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  margin: 0;
  border-radius: var(--radius-lg);
  /* El borde ata las dos mitades: sin el, el color de la izquierda y la
     plancha de la derecha se leen como dos bloques sueltos en cuanto el fondo
     de la seccion se parece al de la plancha (que es lo que pasa en oscuro). */
  border: 1px solid var(--color-linea-tenue);
  overflow: hidden;
}

/* Sin foto la cita ocupa el ancho completo: media caja vacia se leeria como un
   error de carga. Es el mismo caso que el `if($empresas->imagen)` del bloque
   original, resuelto en una clase en vez de un style inline. */
.sliderLogos-cita-sola {
  grid-template-columns: minmax(0, 1fr);
}

.sliderLogos-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  min-width: 0;
  background: var(--dsn-accent, var(--color-acento));
  /* color: #fff; */
}

/* Un cuerpo mas grande que el de un parrafo y alineado al comienzo. Sin
   bastardilla: lo que se carga aca no siempre es una frase dicha por alguien
   —en este sitio son listas de lo que se hizo para cada cliente— y seis
   renglones en cursiva y centrados no se leen. Lo que dice de quien es el
   texto es el bloque de autor de abajo, no la tipografia.

   text-align propio y no el de la seccion, por el mismo motivo que en el panel
   del selector: el encabezado va centrado y esta bien, el parrafo no. */
.sliderLogos-blockquote {
  margin: 0;
  /* font-size: var(--font-size-lg); */
  line-height: var(--line-height-relaxed);
  /* color: rgba(255, 255, 255, .92); */
  /* text-align: start; */
}

.sliderLogos-blockquote p:last-child {
  margin-bottom: 0;
}

.sliderLogos-blockquote ul,
.sliderLogos-blockquote ol {
  margin: 0;
  padding-left: var(--space-5);
}

/* La linea de arriba reemplaza a la segunda comilla del bloque original: hace
   la misma separacion entre la cita y quien la firma, sin sumar una imagen. */
.sliderLogos-autor {
  display: flex;
  flex-direction: column;
  text-align: start;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.sliderLogos-nombre {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}

.sliderLogos-empresa {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, .7);
}

/* contain y no cover: lo que se carga de este lado suele ser la captura del
   trabajo entregado (una pantalla, una pieza), y recortarla le saca justo lo
   que se quiere mostrar. La plancha de fondo es lo que evita que una captura
   angosta quede flotando sobre el color del panel. */
.sliderLogos-foto-wrap {
  position: relative;
  min-height: 100%;
  background: var(--color-fondo-alterno);
}

.sliderLogos-foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  object-fit: contain;
}

.sliderLogos-tira {
  margin-top: var(--space-5);
}

/* La separacion va como padding del slide y no como margin: el ancho de cada
   slide lo calcula slick y un margin le romperia la cuenta.

   El padding de arriba y abajo no es simetria: es el lugar que necesita el
   disco elegido, que crece un 8%. La lista de slick recorta con overflow
   hidden a la altura del slide, asi que sin ese aire el aro del logo activo
   sale cortado por arriba y por abajo. Va en el slide y no en .slick-list
   porque en centerMode slick le escribe el padding en el atributo style y
   cualquier regla de la hoja pierde contra eso. */
.itemSliderLogosThumb {
  padding: var(--space-2);
}

/* El disco blanco es lo que deja convivir logos de fondos distintos en una
   misma fila. El logo va contenido, no recortado: un logo cortado dejo de ser
   el logo. */
.sliderLogos-disco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-4);
  border-radius: 50%;
  background: #fff;
  /* 1px, y de la paleta: el aro de 3px era un elemento mas de la pagina, y en
     el elegido se leia como un boton apretado. Con un pelo de borde el disco
     lo unico que hace es separar el logo del fondo, que es todo lo que tiene
     que hacer; lo que dice cual esta elegido es que recupera su color y crece
     un punto. Es la misma regla que el resto del sitio: en reposo, un borde de
     1px y no una sombra. */
  border: 1px solid var(--color-linea-tenue);
  cursor: pointer;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity var(--duration-base) var(--ease-standard),
    filter var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.sliderLogos-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.itemSliderLogosThumb:hover .sliderLogos-disco {
  opacity: .85;
  filter: grayscale(0);
}

/* El elegido: a color, con el aro de acento y un punto mas grande. Ese cambio
   de tamaño es la unica forma de que se distinga tambien en escala de grises o
   para quien no separa bien los colores. */
.sliderLogos .slick-current .sliderLogos-disco {
  opacity: 1;
  filter: grayscale(0);
  border-color: var(--dsn-accent, var(--color-acento));
  transform: scale(1.08);
}

/* Abajo de 768px la foto se va: en una columna de telefono es una franja que
   solo empuja la cita hacia abajo. Es lo mismo que hacia el bloque original
   (.right { display: none }), y es la decision correcta. */
@media (max-width: 767.98px) {

  .sliderLogos-cita {
    grid-template-columns: minmax(0, 1fr);
  }

  .sliderLogos-cita .sliderLogos-foto-wrap {
    display: none;
  }

  .sliderLogos-panel {
    padding: var(--space-5);
  }

  .sliderLogos-blockquote {
    font-size: var(--font-size-base);
  }

  .sliderLogos-disco {
    width: 88px;
    height: 88px;
    padding: var(--space-3);
  }
}


/* ==========================================================================
   SLIDER — flechas comunes a los disenios 2, 3, 4 y 6
   ==========================================================================

   Mismo boton circular oscuro que ya usaba .sliderCont, montado sobre la
   imagen. slick-theme.css las pinta blancas y sin fondo, asi que sobre una
   foto clara desaparecen. Cada disenio solo decide donde ubicarlas (las reglas
   left/right de mas arriba).

   44px y no 34: es el minimo recomendado para tocar con el dedo, y estos
   disenios muestran la imagen a mayor tamaño que el de columnas.
   ========================================================================== */

.sliderAncho .slick-prev,
.sliderAncho .slick-next,
.sliderFade .slick-prev,
.sliderFade .slick-next,
.sliderMin .slick-prev,
.sliderMin .slick-next,
.sliderPanel .slick-prev,
.sliderPanel .slick-next {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  z-index: 4;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.sliderAncho .slick-prev:hover,
.sliderAncho .slick-prev:focus,
.sliderAncho .slick-next:hover,
.sliderAncho .slick-next:focus,
.sliderFade .slick-prev:hover,
.sliderFade .slick-prev:focus,
.sliderFade .slick-next:hover,
.sliderFade .slick-next:focus,
.sliderMin .slick-prev:hover,
.sliderMin .slick-prev:focus,
.sliderMin .slick-next:hover,
.sliderMin .slick-next:focus,
.sliderPanel .slick-prev:hover,
.sliderPanel .slick-prev:focus,
.sliderPanel .slick-next:hover,
.sliderPanel .slick-next:focus {
  background: rgba(0, 0, 0, .65);
}

.sliderAncho .slick-prev:before,
.sliderAncho .slick-next:before,
.sliderFade .slick-prev:before,
.sliderFade .slick-next:before,
.sliderMin .slick-prev:before,
.sliderMin .slick-next:before,
.sliderPanel .slick-prev:before,
.sliderPanel .slick-next:before {
  font-size: 20px;
  opacity: 1;
}

@media (max-width: 767.98px) {

  .sliderAncho .slick-prev,
  .sliderFade .slick-prev {
    left: var(--space-2);
  }

  .sliderAncho .slick-next,
  .sliderFade .slick-next {
    right: var(--space-2);
  }

  .sliderMarq::before,
  .sliderMarq::after {
    width: 32px;
  }

  .itemSliderMarq {
    padding: 0 var(--space-3);
  }

  .sliderMarq-image {
    height: 44px;
  }
}


/* ==========================================================================
   BANNER SIMPLE (contenido_tipo 1)
   ========================================================================== */

.slider-simple .content-caption {
  background-color: var(--dsn-bg, transparent);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
}

.slider-simple .carousel-caption {
  position: absolute;
  inset: 0;
  padding: 0 5%;
}


/* ==========================================================================
   ACORDEON (contenido_tipo 7)
   ========================================================================== */

.acordion-img {
  max-width: 50px;
  margin-right: .5rem;
}


/* ==========================================================================
   SELECTOR (contenido_tipo 11)
   ==========================================================================

   Fila de tarjetas que eligen que detalle se ve debajo. El template esta en
   Views/template/selector.php y el comportamiento en js/disenios.js.

   Regla que ordena todo lo demas: SIN JAVASCRIPT SE VE TODO. Las reglas que
   apilan los paneles y ocultan los que no estan elegidos cuelgan de
   [data-selector-listo], atributo que escribe disenios.js recien despues de
   tomar el control. Si el archivo no carga, las tarjetas siguen siendo anclas
   a su panel y los paneles quedan uno debajo del otro: mas largo, pero
   completo.

   Los blancos de las tarjetas no salen de la paleta a proposito, igual que en
   el diseño 7: el texto va sobre una foto, asi que depende del contraste
   contra la imagen y no del color de marca.
   ========================================================================== */

.selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.selector-intro {
  color: var(--color-texto-suave, #555);
  line-height: var(--line-height-relaxed);
}

.selector-intro p:last-child {
  margin-bottom: 0;
}

/* Una banda a ras y no tarjetas separadas: es lo que hace que la fila se lea
   como un solo control —"elegi uno de estos"— y no como seis tarjetas sueltas
   que ademas parecerian enlaces a seis paginas. Viene del bloque original de
   omegasolucionesweb.com, donde los items van pegados y sin margenes.

   auto-fit y no un numero fijo de columnas: la cantidad de items la decide el
   editor, y con minmax la banda se reacomoda sola de tres a cuatro o a cinco
   sin que haya que elegir un ancho en el administrador. El radio va en la
   banda y no en cada ficha, asi que redondea solo las cuatro esquinas de
   afuera. */
.selector-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* El fondo oscuro de base es lo que sostiene el texto blanco cuando el item no
   tiene imagen cargada. Con imagen no se ve: queda debajo de ella. */
.selector-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 160px;
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background-color: var(--color-texto);
  background-image: var(--dsn-bg-image, none);
  background-size: cover;
  background-position: center;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.selector-tab:hover,
.selector-tab:focus {
  color: #fff;
  text-decoration: none;
}

/* El velo es lo que hace legible el texto sobre cualquier foto. La elegida lo
   aclara: la tarjeta activa muestra mas de su imagen que las demas, que es la
   señal principal; la barra de acento de abajo es la que lo confirma. */
.selector-tab-velo {
  position: absolute;
  inset: 0;
  background: var(--dsn-overlay, rgba(0, 0, 0, .55));
  opacity: 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.selector-tab:hover .selector-tab-velo {
  opacity: .8;
}

.selector-tab-activa .selector-tab-velo {
  opacity: .6;
}

/* La barra de abajo confirma cual esta elegida. Es la unica del sitio que se
   dibuja bajo un elemento —las que habia bajo cada titulo se sacaron por
   decorativas (ver DESIGN.md)— y aca no decora: es el estado seleccionado de
   un control, lo mismo que el aro del logo en el slider de testimonios. */
.selector-tab-activa {
  box-shadow: inset 0 -4px 0 var(--dsn-accent, var(--color-acento));
}

.selector-tab-icono {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  background-color: currentColor;
  -webkit-mask: var(--dsn-icono) center / contain no-repeat;
  mask: var(--dsn-icono) center / contain no-repeat;
}

.selector-tab-nombre {
  position: relative;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* ---- Paneles ---- */

/* minmax(0, 1fr) por el mismo motivo que en .selector-paneles: 1fr solo no
   deja que la columna baje del ancho de su contenido. */
.selector-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}

.selector-panel-imagen img {
  display: block;
  width: 100%;
  /* 3:2 y no 4:3: en escritorio la imagen ocupa media fila, y a 4:3 se estira
     mas alto que el texto que acompaña. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-borde);
}

/* text-align propio y no el de la seccion: el encabezado de una seccion suele
   ir centrado y esta bien, pero el panel es el detalle —un titulo y un parrafo
   de varias lineas— y centrado obliga a buscar el comienzo de cada linea. */
.selector-panel-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: var(--space-3);
  min-width: 0;
}

.selector-panel-titulo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto, #1f2a37);
  line-height: var(--line-height-tight);
  margin: 0;
}

.selector-panel-desc {
  color: var(--color-texto-suave, #555);
  line-height: var(--line-height-relaxed);
}

.selector-panel-desc p:last-child {
  margin-bottom: 0;
}

/* El editor usa un encabezado como bajada del detalle ("Creatividad e
   innovacion a tu servicio"). Sin esta regla toma el tamaño por defecto del
   navegador, que abajo de un h3 de seccion queda mas chico que el parrafo. */
.selector-panel-desc h1,
.selector-panel-desc h2,
.selector-panel-desc h3,
.selector-panel-desc h4,
.selector-panel-desc h5,
.selector-panel-desc h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-texto, #1f2a37);
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-tight);
}

/* Sin JavaScript los paneles van uno debajo del otro y necesitan separarse. */
.selector-paneles {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Con JavaScript: los paneles se apilan en la misma celda ----

   Todos ocupan 1/1, asi que la altura del bloque es la del panel mas alto y no
   cambia al elegir otro: si cada panel dictara su propio alto, el pie de la
   pagina saltaria en cada clic y la tarjeta que se acaba de tocar se moveria
   de lugar.

   visibility:hidden y no display:none: saca el panel del orden de tabulacion y
   del lector de pantalla igual, pero deja que la opacidad se pueda animar. */
[data-selector-listo] .selector-paneles {
  display: grid;
  /* minmax(0, 1fr) y no una celda implicita: sin columna declarada, la celda
     se dimensiona al max-content del panel mas ancho —un parrafo largo no
     tiene ancho maximo— y el bloque se sale de la pantalla. */
  grid-template-columns: minmax(0, 1fr);
}

[data-selector-listo] .selector-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-3));
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}

[data-selector-listo] .selector-panel-activo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Abajo de 768px la fila se vuelve un carril que se arrastra con el dedo. El
   scroll-snap es lo que evita que una tarjeta quede cortada al soltar, y el
   60% deja asomar la siguiente: es lo que dice que el carril sigue. */
@media (max-width: 767.98px) {

  .selector-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* El aire de los costados va como padding y el scroll lo respeta con
       scroll-padding: sin el, la tarjeta a la que salta queda pegada al borde. */
    padding-bottom: var(--space-2);
    scroll-padding-left: var(--space-1);
    -webkit-overflow-scrolling: touch;
  }

  .selector-tab {
    flex: 0 0 62%;
    scroll-snap-align: start;
    min-height: 130px;
  }

  .selector-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .selector-panel-titulo {
    font-size: var(--font-size-lg);
  }
}


/* ==========================================================================
   ACCESIBILIDAD — respeta la preferencia del sistema
   ==========================================================================

   Que hay para apagar, despues del refactor:

     - los zoom de imagen de fondo de los diseños 7, 8 y 9
     - el borde y la sombra que aparecen en hover (.dsn-superficie)
     - el desplazamiento de la marquesina y del carrusel

   Y que ya no hay: el revelado al hacer scroll. Cada tarjeta de cada seccion
   aparecia con un fade y un desplazamiento escalonado a medida que entraba en
   pantalla. Era decorativo, no respondia a ninguna accion del visitante y es
   exactamente lo que DESIGN.md seccion 2 descarta; se elimino la clase
   .dsn-reveal y la funcion iniciarRevelado() que la ponia
   (public/skins/page/js/disenios.js).

   Las transiciones de color no se apagan: no son movimiento, y son las que
   avisan que un enlace o un boton respondio.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .dsn-superficie,
  .dsn7,
  .dsn7-bg,
  .dsn8-img-inner,
  .dsn9-img,
  .slider-image,
  .sliderMarq-image,
  .sliderMin-thumb,
  .sliderLogos-disco,
  .selector-tab,
  .selector-tab-velo,
  .carousel_inner>ul {
    transition: none !important;
  }

  /* El panel del selector cambia igual —es la respuesta a un clic— pero sin
     desplazarse: queda el cruce de opacidad, que es lo que avisa que cambio.
     Mismo criterio que la transicion de pagina (ver transiciones.css). */
  [data-selector-listo] .selector-panel {
    transform: none;
    transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
  }

  .dsn7:hover .dsn7-bg,
  .dsn8:hover .dsn8-img-inner,
  .dsn9:hover .dsn9-img,
  .slider-link:hover .slider-image {
    transform: none;
  }

  /* La marquesina no arranca sin autoplay (lo decide disenios.js), pero si
     quedo andando de antes, esto le corta el desplazamiento. */
  .sliderMarq .slick-track {
    transition: none !important;
  }
}

/* ==========================================================================
   IMAGEN PARA MOVIL
   ==========================================================================
   Los diseños que pintan contenido_imagen con un <img> resuelven la version
   movil con <picture>. Los cuatro que la usan como fondo o como mascara no
   tienen <img>, asi que el template declara la variable de movil al lado de la
   normal y aca se elige cual vale: si no hay version movil, var() cae en la de
   siempre y no cambia nada. */

@media (max-width: 767.98px) {

  .dsn7-bg,
  .dsn8-img-inner {
    background-image: var(--dsn-bg-movil, var(--dsn-bg-image, none));
  }

  .dsn11-icon-img,
  .dsn12-icon-img,
  .dsn13-icon-img,
  .selector-tab-icono {
    -webkit-mask: var(--dsn-icono-movil, var(--dsn-icono)) center / contain no-repeat;
    mask: var(--dsn-icono-movil, var(--dsn-icono)) center / contain no-repeat;
  }
}