/*
 * REDES SOCIALES — inc/redes-sociales.php
 *
 * Los videos a la izquierda, los perfiles a la derecha. Lo pidio asi el dueno.
 *
 * ---------------------------------------------------------------------------
 * EL PROBLEMA DE MAQUETAR ALGO QUE NO CONTROLAS
 * ---------------------------------------------------------------------------
 * Los incrustados de Instagram y TikTok son IFRAMES DE UN TERCERO. Traen su
 * propio ancho minimo (Instagram exige 326 px), su propia altura, y la cambian
 * cuando les da la gana con una actualizacion suya. Maquetar contra eso con
 * medidas fijas es firmar que la seccion se rompa sola dentro de unos meses.
 *
 * Por eso aqui no se le dice a nadie cuanto tiene que medir: cada video vive en
 * una columna que le da un MAXIMO y le deja crecer hacia abajo. Si manana
 * Instagram sube su alto, la seccion crece; no se descuadra.
 *
 * Y los `!important` de la regla de abajo no son pereza: el guion de Instagram
 * escribe estilos EN LINEA sobre su propio blockquote —incluido un
 * `min-width: 326px` que desborda en un movil de 360— y el unico modo de ganarle
 * desde una hoja es ese. Es la excepcion, no la costumbre.
 */

.lt-redes__rejilla {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

@media (min-width: 980px) {
  /* Los videos mandan: son dos columnas verticales de 9:16 y necesitan el sitio.
     Los perfiles son dos filas de texto y se apanan con menos. */
  .lt-redes__rejilla {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    gap: var(--e-6);
  }
}

/*
 * SIN NINGUN VIDEO PUESTO TODAVIA.
 *
 * Los perfiles pasan a ocupar la fila entera, pero NO estirados: dos tarjetas
 * de 1.240 px de ancho con un logotipo a la izquierda y una flecha perdida a la
 * derecha se leen como un error de maqueta, no como una decision. Se reparten
 * en dos columnas y se les pone tope de ancho, que es como se ven llenas.
 */
.lt-redes__rejilla--sin-video { grid-template-columns: 1fr; }

.lt-redes__rejilla--sin-video .lt-redes__perfiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  max-width: 760px;
}

@media (min-width: 620px) {
  .lt-redes__rejilla--sin-video .lt-redes__perfiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Los videos ---- */

.lt-redes__videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  min-width: 0;
}

@media (min-width: 620px) {
  .lt-redes__videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * `position: relative` + `overflow: hidden` NO SON DECORACION. Son lo que
 * impide que la portada entera se desplace a lo lado.
 *
 * MEDIDO: con el incrustado puesto, el documento pasaba de 1440 a 1581 px de
 * ancho en escritorio y de 390 a 425 en movil — o sea, barra de desplazamiento
 * horizontal en toda la pagina. El culpable era el iframe que planta el guion
 * de Instagram, que sale del flujo y resuelve su `width: 100%` contra la
 * VENTANA en vez de contra esta caja, porque no encontraba ningun antepasado
 * posicionado.
 *
 *   · `position: relative` le da ese antepasado: el 100 % vuelve a ser el ancho
 *     del marco.
 *   · `overflow: hidden` es el cinturon: pase lo que pase dentro —hoy, o el dia
 *     que Instagram cambie su guion sin avisarnos— se queda recortado aqui
 *     dentro y no empuja la pagina.
 *
 * Es la unica defensa que funciona contra un tercero al que no controlamos.
 */
.lt-redes__marco {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 0;
  padding: var(--e-2);
  background: color-mix(in srgb, var(--blanco) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--blanco) 12%, transparent);
  border-radius: var(--radio-tarjeta);
}

/* La regla que doma los incrustados ajenos. Ver la nota de la cabecera. */
.lt-redes__marco .instagram-media,
.lt-redes__marco .tiktok-embed,
.lt-redes__marco iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: calc(var(--radio-tarjeta) - 4px);
}

/* Mientras el guion de la red no ha llegado, el bloque es solo un enlace suelto
   sobre el fondo oscuro. Que al menos se lea y se pueda pulsar. */
.lt-redes__marco blockquote > a,
.lt-redes__marco blockquote section > a {
  display: inline-block;
  padding: var(--e-3) 0;
  color: var(--blanco);
  font-size: .9rem;
}

.lt-redes__pie {
  margin-top: var(--e-1);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--niebla);
}

/* ---- Los perfiles ---- */

.lt-redes__perfiles {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
}

.lt-redes__perfil {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--blanco) 16%, transparent);
  border-radius: var(--radio-tarjeta);
  color: var(--blanco);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}

.lt-redes__perfil:hover,
.lt-redes__perfil:focus-visible {
  background: color-mix(in srgb, var(--blanco) 7%, transparent);
  border-color: color-mix(in srgb, var(--blanco) 34%, transparent);
  transform: translateY(-1px);
}

/*
 * EL CIRCULO. Cada red con SU color de marca y no con el azul de la casa: un
 * icono de Instagram en azul corporativo no se reconoce de un vistazo, y
 * reconocerlo de un vistazo es justo para lo que esta ahi. Es la unica
 * excepcion a la paleta en toda la portada, y esta acotada a 52 px.
 */
.lt-redes__circulo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
}

.lt-redes__perfil--instagram .lt-redes__circulo {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* TikTok es negro; sobre el fondo noche desapareceria. Se le pone el aro de
   color de la marca para que se siga leyendo como TikTok. */
.lt-redes__perfil--tiktok .lt-redes__circulo {
  background: #010101;
  box-shadow: 0 0 0 2px #25f4ee, 2px 0 0 2px #fe2c55;
}

.lt-redes__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.lt-redes__nombre { font-weight: 700; font-size: 1.05rem; }

.lt-redes__usuario {
  color: var(--niebla);
  font-size: .875rem;
  /* Un usuario largo no parte la tarjeta: se corta con puntos suspensivos. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-redes__ir { margin-left: auto; flex: 0 0 auto; color: var(--niebla); }

.lt-redes__perfil:hover .lt-redes__ir { color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  .lt-redes__perfil { transition: none; }
  .lt-redes__perfil:hover,
  .lt-redes__perfil:focus-visible { transform: none; }
}

/* ==================================================================== */
/* LOS VIDEOS, A SANGRE Y REDONDEADOS — 2026-08-14                       */
/* ==================================================================== */

/*
 * EL DUENO: «que no quede el cuadrado blanco sino que se expandan a los bordes
 * y por ende queden redondeados».
 *
 * EL BLANCO VIENE DE DOS SITIOS:
 *   1. El marco dejaba aire alrededor del iframe (medido: iframe 301x582 dentro
 *      de un marco de 335x644). Eso se quita estirando el iframe al 100%.
 *   2. El PROPIO incrustado trae cabecera («ver perfil») y pie («7 likes»,
 *      «anadir comentario») con fondo blanco, dentro del iframe. Eso no se
 *      puede quitar —es codigo de Instagram en su dominio— pero SI se puede
 *      recortar: se agranda el iframe mas alla del marco y el marco, con
 *      `overflow: hidden`, deja fuera esas franjas.
 *
 * Es la unica via: el navegador impide tocar el contenido de un iframe ajeno.
 */

.lt-redes__marco {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 18px;
  background: var(--noche, #071324);
  padding: 0;
  border: 0;
}

.lt-redes__marco iframe,
.lt-redes__marco .lt-redes__video {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
}

/*
 * INSTAGRAM: cabecera ~54px y pie ~150px. Se sube el iframe 54px y se le da
 * altura de sobra para que el pie caiga fuera del marco.
 */
.lt-redes__marco--instagram iframe {
  top: -54px;
  height: calc(100% + 210px);
}

/*
 * TIKTOK: su incrustado trae una barra inferior con el nombre de la cuenta.
 * Mismo tratamiento, con menos recorte arriba.
 */
.lt-redes__marco--tiktok iframe {
  top: -2px;
  height: calc(100% + 90px);
}

/* El rotulo de la red, encima del video y no debajo en su propia franja. */
.lt-redes__marco + .lt-redes__pie,
.lt-redes__red {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
}

/* Nada de fondo claro asomando por detras del incrustado. */
.lt-redes__videos,
.lt-redes__marco * { background-color: transparent; }
.lt-redes__marco { background: var(--noche, #071324); }


/* El pie del video lleva enlace: es la salida cuando el incrustado no carga. */
.lt-redes__pie-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;      /* se toca con el pulgar sin fallar */
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.lt-redes__pie-enlace:hover,
.lt-redes__pie-enlace:focus-visible {
  text-decoration: underline;
}


/* ==========================================================================
 * LA CARATULA PROPIA — sustituye al incrustado cuando la red falla.
 *
 * PHP: inc/redes-poster.php
 *
 * Nace del 503 de TikTok: su incrustado fallo en tres de cada cinco intentos y
 * dejaba un hueco de 596 px en la portada. Esto es una imagen del propio
 * servidor con un boton de reproducir que abre el video en su red.
 * ========================================================================== */

.lt-redes__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}

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

/*
 * EL BOTON DE REPRODUCIR VA SOBRE UN VELO, no suelto sobre la imagen.
 *
 * Una caratula de video puede ser clara u oscura —no la elegimos nosotros, la
 * elige la red— asi que un triangulo blanco a secas desaparece sobre un fondo
 * claro. Con el circulo oscuro debajo, el simbolo se lee sobre cualquier foto.
 */
.lt-redes__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(0 0 0 / .55);
  color: #fff;
  /* El triangulo tira a la derecha por su propia forma: se compensa para que
     se vea centrado en el circulo. */
  padding-left: 4px;
  transition: transform .18s ease, background-color .18s ease;
}

.lt-redes__poster:hover .lt-redes__play,
.lt-redes__poster:focus-visible .lt-redes__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgb(0 0 0 / .72);
}

.lt-redes__poster:focus-visible {
  outline: 3px solid var(--cielo, #4EA8DE);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .lt-redes__play { transition: none; }
  .lt-redes__poster:hover .lt-redes__play { transform: translate(-50%, -50%); }
}


/* El <figure> solo agrupa el video y su pie: no recorta ni impone proporcion.
   Quien recorta es `.lt-redes__marco`, que ahora es el <div> de dentro. */
.lt-redes__pieza {
  /*
   * `position: relative` NO ES DECORATIVO: SIN EL, EL PIE SE VA AL HERO.
   *
   * Mas abajo en esta hoja el pie se posiciona en absoluto (`top: 598px`), que
   * era lo correcto cuando vivia DENTRO de `.lt-redes__marco`, que si es
   * relativo. Al sacarlo de ahi para que el marco dejara de recortarlo, se quedo
   * sin antepasado posicionado y empezo a medir desde el principio del
   * documento.
   *
   * MEDIDO en el sitio vivo, con el fallo puesto: los dos pies —Instagram y
   * TikTok— aparecian en y=598, uno encima del otro, FLOTANDO SOBRE EL HERO, que
   * ocupa de 0 a 992. El dueno lo vio en su telefono antes que yo.
   *
   * Con esta linea el `top: 598px` vuelve a medirse desde la pieza, o sea justo
   * debajo del marco de 596 px, que es donde tenia que estar desde el principio.
   */
  position: relative;

  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/*
 * EL MARCO SE CINE AL ANCHO DE SU PIEZA, Y HAY QUE DECIRLO.
 *
 * Antes el marco era el hijo directo de la rejilla y de ahi sacaba su ancho.
 * Al meterlo dentro del <figure> perdio esa referencia: con `aspect-ratio: 9/16`
 * y sin ancho que lo sujete, el alto se disparo —medido: 7.706 px de fondo, o
 * sea siete pantallas de video— y el pie se fue con el.
 *
 * `width: 100%` y `min-width: 0` lo devuelven a la columna que le toca. El
 * segundo no sobra: sin el, un iframe ancho de dentro puede empujar la columna
 * de la rejilla y sacar la barra horizontal en toda la portada, que es
 * exactamente el fallo que explica la nota de mas arriba en esta hoja.
 */
.lt-redes__pieza .lt-redes__marco {
  width: 100%;
  min-width: 0;
}


/* =====================================================================
   LOS OTROS CANALES — 2026-08-15
   ===================================================================== */

/*
 * Llenan el hueco que quedaba bajo los dos perfiles grandes. Van con menos
 * peso visual que aquellos: son el resto de sitios donde publican, no el
 * contenido principal de la seccion.
 */
.lt-redes__otros {
  margin-top: 22px;
  padding-top: 20px;
  /* Una linea fina en vez de un titulo con caja: separa sin anadir ruido. */
  border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
}

.lt-redes__otros-rotulo {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 55%, transparent);
}

.lt-redes__canales {
  display: grid;
  /*
   * UNA SOLA COLUMNA, MEDIDO. Con dos columnas los cuatro canales ocupaban
   * 111px y bajo la columna seguian sobrando 175px de vacio junto a los
   * videos, que era justo lo que el dueno pedia arreglar. En una columna
   * ocupan 222px y el hueco baja a unos 60px.
   *
   * Y de paso quedan del mismo ancho que las dos fichas grandes de arriba, en
   * vez de dos rejillas distintas apiladas.
   */
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-redes__canal {
  display: flex;
  align-items: center;
  gap: 11px;
  /* 48px de alto real: es el minimo para que un dedo acierte sin ampliar. */
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #fff 5%, transparent);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.lt-redes__canal:hover,
.lt-redes__canal:focus-visible {
  background: color-mix(in srgb, #fff 11%, transparent);
  border-color: color-mix(in srgb, #fff 32%, transparent);
  transform: translateY(-1px);
}

.lt-redes__canal:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lt-redes__canal-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* El icono se hereda de la seccion y viene a 26px; aqui se quiere mas chico. */
.lt-redes__canal-icono .lt-redes__icono {
  width: 19px;
  height: 19px;
}

.lt-redes__canal-texto {
  display: flex;
  flex-direction: column;
  /* Sin esto, un nombre largo ensancha la rejilla en vez de recortarse. */
  min-width: 0;
}

.lt-redes__canal-nombre {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-redes__canal-nota {
  font-size: 0.72rem;
  line-height: 1.3;
  color: color-mix(in srgb, #fff 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lt-redes__canal { transition: none; }
  .lt-redes__canal:hover,
  .lt-redes__canal:focus-visible { transform: none; }
}

/* ==========================================================================
   SIN CAPTURAS, LA MAQUETA DE UNA COLUMNA YA NO VALE — 2026-08-26
   ==========================================================================
   Al apagar los incrustados (ver CAPTURAS en inc/redes-sociales.php) la
   seccion se quedo con toda la mitad derecha vacia. Dos cosas lo causaban, y
   las dos estaban BIEN cuando habia videos:

   1. `.lt-redes__otros` es hijo de `.lt-redes__perfiles`, que bajo
      `--sin-video` es una rejilla de dos columnas. Asi que el bloque entero
      de «Tambien estamos aqui» caia dentro de UNA celda: 371px de los 760.

   2. `.lt-redes__canales` va a una sola columna, y eso se midio con los
      videos al lado llenando la derecha —esta escrito en su comentario—. Sin
      videos, una columna deja el hueco que se queria evitar.

   No se toca ninguna de las dos reglas originales: siguen siendo las buenas
   el dia que las capturas se enciendan otra vez.
   ========================================================================== */

.lt-redes__rejilla--sin-video .lt-redes__otros {
  /* Que ocupe las dos columnas en vez de caer en una celda. */
  grid-column: 1 / -1;
}

@media (min-width: 620px) {
  .lt-redes__rejilla--sin-video .lt-redes__canales {
    /* Nueve canales en una columna son nueve filas y una tira larguisima.
       En dos, cinco filas y del mismo ancho que las fichas de arriba. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * EL HUERFANO DEL FINAL SE LLEVA LA FILA ENTERA — 2026-09-01.
   *
   * El dueno, viendo Facebook solo abajo a la izquierda: «cuando falte
   * uno quiero que se expanda y este en el ancho completo».
   *
   * Los canales son nueve, que es impar, asi que siempre sobra uno. Y
   * seguiran sobrando o no segun cuantos haya el dia de manana: esta
   * regla acierta sola en los dos casos, sin tener que volver aqui a
   * contar.
   *
   * `:last-child:nth-child(odd)` significa exactamente «soy el ultimo Y
   * estoy en posicion impar», que a dos columnas es la definicion de
   * estar solo en tu fila. Con un numero par de canales no la cumple
   * nadie y no pasa nada.
   *
   * Aqui no hay que recomponer nada por dentro, al reves que en las
   * tarjetas de ciudad de portada.css: este canal ya es una fila
   * horizontal —icono, nombre, nota—, asi que ensancharlo solo le da mas
   * sitio a lo que ya estaba alineado a la izquierda.
   */
  .lt-redes__rejilla--sin-video .lt-redes__canales > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}