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

.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: var(--space-8) 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
   "Borde" de la paleta (--color-borde) en vez del acento, 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 "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 "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;
}

/* El borde toma el color "Borde" de la paleta, igual que en los diseños 3, 4,
   5, 6 y 9. */
.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);
}





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


/* ==========================================================================
   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,
  .carousel_inner>ul {
    transition: none !important;
  }

  .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 {
    -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;
  }
}