/* AV Wire: tema claro con R, G y B en neón (los tres colores del video), con recursos modernos tomados de la web de
   DICON: manchas de luz, menú de vidrio, botones píldora, tarjetas con brillo y títulos en degradé. Aprobado 02/11/2026.
   Legibilidad: el neón puro va en rellenos, líneas y brillos, siempre con texto oscuro encima; para letras sobre fondo
   claro se usan los tonos "-tinta", más profundos. */
:root {
  --rojo-rgb: #FF1F5A;
  --verde-rgb: #00FF88;
  --azul-rgb: #1E90FF;
  --rojo-tinta: #F0134D;
  --verde-tinta: #00A653;
  --azul-tinta: #0062F0;
  --rgb: linear-gradient(90deg, var(--rojo-rgb), var(--verde-rgb) 50%, var(--azul-rgb));
  --rgb-franjas: linear-gradient(90deg, var(--rojo-rgb) 0 33.33%, var(--verde-rgb) 33.33% 66.66%, var(--azul-rgb) 66.66%);
  /* Para letras: azul → verde. Rojo → verde forma un marrón apagado en el medio. */
  --degrade-titulo: linear-gradient(90deg in oklab, #0A6CFF, var(--verde-tinta));

  --fondo: #F7F9FC;
  --fondo-2: #EEF2F8;
  --tarjeta: #FFFFFF;
  --borde: #E3E8F0;
  --tinta: #0B1220;
  --texto-2: #3A4458;
  --gris: #5B6578;
  --sombra: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px -12px rgba(11, 18, 32, .12);

  --titulo: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--tinta); background: var(--fondo); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--azul-tinta); }
:focus-visible { outline: 3px solid var(--azul-rgb); outline-offset: 2px; }
::selection { background: var(--verde-rgb); color: var(--tinta); }
img { max-width: 100%; }
h1, h2, h3 { letter-spacing: -.02em; }

/* Manchas de luz suaves detrás de todo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 440px at 6% 10%, rgba(30, 144, 255, .16), transparent 70%),
    radial-gradient(520px 420px at 95% 28%, rgba(255, 31, 90, .11), transparent 70%),
    radial-gradient(560px 440px at 55% 98%, rgba(0, 255, 136, .14), transparent 70%);
}

/* Barra de progreso R G B al scrollear (en navegadores que no lo soportan, no aparece) */
@supports (animation-timeline: scroll()) {
  body::after { content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 100; background: var(--rgb);
    transform-origin: left; transform: scaleX(0); animation: progreso linear both; animation-timeline: scroll(root); }
  @keyframes progreso { to { transform: scaleX(1); } }
}

.ancho { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.fila { display: flex; flex-wrap: wrap; gap: 40px; }
.col { flex: 1 1 320px; min-width: 0; }
.col-2 { flex: 2 1 480px; min-width: 0; }
.bloque { padding-top: 40px; padding-bottom: 40px; }
.angosto { max-width: 760px; }
.centrado { text-align: center; margin-top: 32px; }
.separado { margin-top: 40px; }
.mono { font-family: var(--mono); font-size: 12px; }
.gris { color: var(--gris); }
.azul { color: var(--azul-tinta); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 200; background: var(--tarjeta); padding: 8px 12px; border-radius: 8px; }

/* ---------- Etiquetas y botones */
.etiqueta { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 4px 12px; border-radius: 50px; }
.etiqueta-oscura { background: var(--tarjeta); color: var(--tinta); border: 1px solid var(--borde); }
.etiqueta-oscura:hover { color: var(--azul-tinta); border-color: var(--azul-rgb); }
.etiqueta-acento { background: var(--verde-rgb); color: var(--tinta); }
.etiqueta-roja { background: var(--rojo-rgb); color: var(--tinta); }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 50px; font-weight: 600; font-size: 16px;
  font-family: inherit; border: 0; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.boton:hover { transform: translateY(-2px); }
.boton-azul { background: var(--azul-rgb); color: var(--tinta); box-shadow: 0 6px 18px -6px rgba(30, 144, 255, .6); }
.boton-azul:hover { background: #4DA8FF; color: var(--tinta); box-shadow: 0 12px 28px -8px rgba(30, 144, 255, .7); }
.boton-acento { background: var(--verde-rgb); color: var(--tinta); box-shadow: 0 6px 18px -6px rgba(0, 200, 110, .6); }
.boton-acento:hover { background: #5CFFB0; color: var(--tinta); box-shadow: 0 12px 28px -8px rgba(0, 200, 110, .7); }
.boton-borde { border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); }
.boton-borde:hover { border-color: var(--azul-rgb); color: var(--azul-tinta); }
.boton-rojo { background: var(--rojo-rgb); color: var(--tinta); }
.boton-rojo:hover { color: var(--tinta); box-shadow: 0 12px 28px -8px rgba(255, 31, 90, .6); }
.boton-chico { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* ---------- Cabecera: la barra de países se va al scrollear y el resto queda fijo, con vidrio esmerilado */
header { position: sticky; top: -44px; z-index: 50; }
.barra-paises { color: var(--gris); border-bottom: 1px solid var(--borde); }
.barra-paises .ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
.paises, .idiomas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; font-size: 13px; }
.paises .mono { margin-right: 8px; }
.paises a, .idiomas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.paises a:hover, .idiomas a:hover { color: var(--tinta); }
.idiomas a[aria-current] { color: var(--tinta); font-weight: 600; }
.idiomas span { color: var(--borde); }
.cabecera { background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.cabecera::after { content: ""; display: block; height: 3px; background: var(--rgb-franjas); box-shadow: 0 2px 12px rgba(30, 144, 255, .45), 0 2px 8px rgba(0, 255, 136, .35); }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca > span { display: flex; flex-direction: column; }
.marca svg { filter: drop-shadow(0 4px 10px rgba(30, 144, 255, .35)); }
/* Brillo suave de los trazos neón del logo */
.marca svg g { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .45)); }
.marca-nombre { font-family: var(--titulo); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
/* Bajada del logo: Inter en mayúsculas finas y espaciadas (antes era IBM Plex Mono, la letra de máquina de escribir) */
.marca-bajada { font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--gris); margin-top: 6px; }
.cabecera-acciones { display: flex; align-items: center; gap: 12px; }
.buscar { display: flex; border: 1px solid var(--borde); border-radius: 50px; overflow: hidden; background: var(--tarjeta); }
.buscar input { border: 0; height: 44px; padding: 0 16px; width: 160px; font: inherit; font-size: 15px; color: var(--tinta); background: transparent; }
.buscar input:focus { outline: none; }
.buscar:focus-within { border-color: var(--azul-rgb); box-shadow: 0 0 0 4px rgba(30, 144, 255, .18); }
.buscar button { width: 44px; height: 44px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* El menú nunca se parte en dos renglones: si no entra, se desliza de costado */
.menu { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: flex-end; column-gap: 2px; padding-top: 8px; border-top: 1px solid var(--borde); }
.menu::-webkit-scrollbar { display: none; }
.menu a { white-space: nowrap; flex: none; }
/* Pestañas al estilo Chrome: la seleccionada queda pegada a la línea R G B de abajo y toma el color del tramo que tiene
   debajo. Con JavaScript (public/menu.js) una sola pestaña se desliza hasta donde está el mouse; sin JavaScript, la
   seleccionada se pinta con la misma línea (fondo "fijo" alineado con la ventana, así coincide con el tramo de abajo). */
.menu a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 12px 12px 0 0;
  font-weight: 500; font-size: 15px; color: var(--texto-2); transition: color .2s, background .2s; }
.menu a:hover { color: var(--tinta); background: rgba(11, 18, 32, .05); }
/* La pestaña se pinta con la misma línea R G B, alineada con la ventana: así tiene exactamente los colores del tramo de
   abajo, incluso si queda justo sobre un cambio de color. --ancho-linea lo ajusta menu.js al ancho real (sin la barra de scroll). */
.menu a[aria-current], .menu-pestana { background: var(--rgb-franjas) fixed; background-size: var(--ancho-linea, 100vw) 100%; }
.menu a[aria-current] { color: var(--tinta); font-weight: 600; }
.menu a[aria-current] .etiqueta, .menu.con-pestana a:hover .etiqueta { background: var(--tinta); color: var(--verde-rgb); }
.menu.con-pestana a[aria-current], .menu.con-pestana a:hover { background: none; }
.menu.con-pestana a:hover { color: var(--tinta); }
.menu-pestana { position: absolute; top: 0; height: 40px; border-radius: 12px 12px 0 0; z-index: 0; pointer-events: none; opacity: 0;
  box-shadow: 0 -4px 14px -6px rgba(11, 18, 32, .25);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.menu .etiqueta { font-size: 11px; padding: 2px 8px; }

/* ---------- Home */
.ultimo-momento { background: rgba(255, 255, 255, .85); border-bottom: 1px solid var(--borde); }
.ultimo-momento .ancho { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.ultimo-momento a { font-weight: 600; }
.ultimo-momento a:hover { color: var(--rojo-tinta); }
.ultimo-momento .etiqueta { background: var(--rojo-rgb); color: var(--tinta); font-weight: 600; box-shadow: 0 0 14px rgba(255, 31, 90, .55); }
.ultimo-momento .etiqueta::before { content: "● "; }
.portada-fila { padding-top: 40px; padding-bottom: 24px; }
.portada h1 { font-family: var(--titulo); font-weight: 700; font-size: 44px; line-height: 1.1; margin: 12px 0 0; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.bajada { font-size: 19px; line-height: 1.5; color: var(--texto-2); margin: 14px 0 0; }
.meta { font-size: 13px; color: var(--gris); margin: 16px 0 0; }
.titulo-bloque { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-bottom: 1px solid var(--borde); padding-bottom: 10px; position: relative; }
.titulo-bloque::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 84px; height: 3px; border-radius: 3px; background: var(--rgb-franjas); }
.h-bloque { font-family: var(--titulo); font-weight: 700; font-size: 28px; margin: 0; }
.h-bloque-chico { font-family: var(--titulo); font-weight: 700; font-size: 20px; margin: 0; }
.h-grande { font-family: var(--titulo); font-weight: 700; font-size: 36px; line-height: 1.15; margin: 18px 0 0; }
.ver-todos { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--azul-tinta); }
.item-lista { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.item-lista:last-child { border-bottom: 0; }
.item-lista h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 6px 0 0; }
.kicker { color: var(--azul-tinta); }
.portada h1 a:hover, .item-lista h3 a:hover, .tarjeta h3 a:hover { color: var(--azul-tinta); }
/* Títulos destacados con letras en degradé */
.degrade, .comparativa h2, .comunidad-promo .h-grande, .newsletter h2 {
  background: var(--degrade-titulo); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Fotos y recuadros de foto pendiente */
.foto { display: block; width: 100%; height: 200px; object-fit: cover; }
.foto-vacia { background: repeating-linear-gradient(135deg, #EDF1F7 0 14px, #E6EBF3 14px 28px); display: flex; align-items: flex-end; padding: 12px; }
.foto-vacia span { font-family: var(--mono); font-size: 12px; color: #7A8496; }
.foto-portada { height: 400px; border-radius: 18px; border: 1px solid var(--borde); }
.foto-nota { height: 420px; border-radius: 18px; border: 1px solid var(--borde); margin-top: 28px; }

/* Tarjetas */
.grilla { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; }
.grilla > * { flex: 1 1 280px; min-width: 0; }
.grilla-4 { gap: 20px; }
.grilla-4 > * { flex-basis: 240px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s; }
.tarjeta:hover { transform: translateY(-6px); border-color: rgba(30, 144, 255, .55); box-shadow: 0 24px 50px -20px rgba(30, 144, 255, .45); }
.tarjeta-texto { padding: 20px; }
.tarjeta-caso .foto-vacia { border-bottom: 1px solid var(--borde); }
.tarjeta-caso h3 { font-family: var(--titulo); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 8px 0 0; }
.tarjeta-caso p { font-size: 15px; line-height: 1.5; color: var(--texto-2); margin: 10px 0 0; }
.tarjeta-caso p.mono { font-size: 12px; color: var(--gris); margin-top: 14px; }
.tarjeta-producto { padding: 20px; border-top: 3px solid var(--azul-rgb); }
.tarjeta-producto:nth-child(3n+1) { border-top-color: var(--rojo-rgb); }
.tarjeta-producto:nth-child(3n+1):hover { border-color: rgba(255, 31, 90, .5); box-shadow: 0 24px 50px -20px rgba(255, 31, 90, .4); }
.tarjeta-producto:nth-child(3n+2) { border-top-color: var(--verde-rgb); }
.tarjeta-producto:nth-child(3n+2):hover { border-color: rgba(0, 200, 110, .5); box-shadow: 0 24px 50px -20px rgba(0, 200, 110, .4); }
.tarjeta-producto h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 14px 0 0; }
.tarjeta-producto p { font-size: 14px; line-height: 1.5; color: var(--texto-2); margin: 8px 0 0; }
.fondo-gris { background: rgba(238, 242, 248, .7); }

/* Comparativa: bloque claro con un leve tinte azul y verde */
.comparativa { background: linear-gradient(180deg, rgba(30, 144, 255, .07), rgba(0, 255, 136, .05)); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.comparativa > .ancho { padding-top: 48px; padding-bottom: 48px; }
.comparativa h2 { font-family: var(--titulo); font-weight: 700; font-size: 36px; line-height: 1.15; margin: 18px 0 0; }
.comparativa .col > p { font-size: 17px; line-height: 1.55; color: var(--texto-2); margin: 14px 0 24px; }
.comparativa-items { display: flex; flex-wrap: wrap; gap: 16px; }
.comparativa-item { flex: 1 1 160px; min-width: 0; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; padding: 18px; box-shadow: var(--sombra); transition: border-color .3s, box-shadow .3s; }
.comparativa-item:hover { border-color: var(--azul-rgb); box-shadow: 0 0 30px -8px rgba(30, 144, 255, .45); }
.comparativa-item p { font-size: 14px; color: var(--texto-2); margin: 6px 0 0; }
.comparativa-item .nombre { font-family: var(--titulo); font-weight: 700; font-size: 18px; color: var(--tinta); margin: 0 0 8px; }
.en-nota { margin-top: 28px; }

/* Comunidad y directorio en la home */
.comunidad-promo { align-items: center; }
.comunidad-promo .col > p { font-size: 17px; line-height: 1.55; color: var(--texto-2); margin: 14px 0 0; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mosaico { display: flex; gap: 12px; }
.mosaico > div { flex: 1; aspect-ratio: 4 / 5; border-radius: 18px; padding: 10px; border: 1px solid var(--borde); }
.mosaico .corrido { margin-top: 32px; }
.fila-evento { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--borde); }
.fila-evento > * { flex: 1 1 140px; }
.evento-nombre { flex-basis: 200px; font-family: var(--titulo); font-weight: 700; font-size: 22px; }
.fila-evento .mono { font-size: 14px; }
.tarjeta-directorio { padding: 28px; align-self: flex-start; }
.tarjeta-directorio:hover { transform: none; }
.tarjeta-directorio h2 { font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 10px 0 0; }
.tarjeta-directorio p { font-size: 15px; line-height: 1.5; color: var(--texto-2); margin: 12px 0 20px; }

/* Newsletter: tarjeta blanca con borde en degradé y resplandor */
.newsletter > .ancho { padding-top: 40px; padding-bottom: 40px; margin-top: 48px; margin-bottom: 48px; align-items: center; gap: 32px;
  border: 2px solid transparent; border-radius: 24px;
  background: linear-gradient(var(--tarjeta), var(--tarjeta)) padding-box, var(--rgb) border-box;
  box-shadow: 0 20px 60px -24px rgba(30, 144, 255, .5); }
.newsletter h2 { font-family: var(--titulo); font-weight: 700; font-size: 34px; line-height: 1.15; margin: 0; }
.newsletter p { font-size: 17px; line-height: 1.5; color: var(--gris); margin: 12px 0 0; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.campo { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input { height: 48px; border: 1px solid var(--borde); border-radius: 50px; padding: 0 18px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--fondo); }
.campo input:focus { outline: none; border-color: var(--azul-rgb); box-shadow: 0 0 0 4px rgba(30, 144, 255, .18); }

/* Pie claro */
.pie { background: var(--fondo-2); color: var(--texto-2); }
.pie::before { content: ""; display: block; height: 3px; background: var(--rgb-franjas); box-shadow: 0 -2px 14px rgba(0, 255, 136, .35); }
.pie > .fila { padding-top: 48px; padding-bottom: 24px; }
.pie .marca-nombre { font-size: 28px; color: var(--tinta); }
.pie p { font-size: 15px; line-height: 1.55; margin: 12px 0 0; max-width: 380px; }
.col-lista { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.col-lista .mono { color: var(--gris); margin-bottom: 4px; }
.col-lista a, .col-lista span:not(.mono) { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; }
.pie-legal { padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--borde); color: var(--gris); }

/* ---------- Página de nota */
.nota { max-width: 860px; padding-top: 32px; padding-bottom: 24px; }
.nota h1 { font-family: var(--titulo); font-weight: 700; font-size: 44px; line-height: 1.1; margin: 16px 0 0; }
.texto { font-size: 18px; line-height: 1.7; color: #1F2A3D; margin-top: 28px; }
.texto h2 { font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 36px 0 0; }
.texto p { margin: 16px 0 0; }

/* ---------- Directorio */
.intro { font-size: 17px; color: var(--texto-2); }
.filtros { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 16px; }
.filtros label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.filtros select { height: 48px; border: 1px solid var(--borde); border-radius: 50px; padding: 0 14px; font: inherit; font-size: 16px; background: var(--tarjeta); color: var(--tinta); }
.tarjeta-empresa { padding: 20px; }
.tarjeta-empresa h2 { font-family: var(--titulo); font-weight: 700; font-size: 22px; margin: 8px 0 0; }
.tarjeta-empresa p { color: var(--texto-2); margin: 8px 0 0; }
.tarjeta-empresa .verificado { color: var(--verde-tinta); }
.agenda-completa { margin-bottom: 8px; }

/* ---------- Celular */
@media (max-width: 720px) {
  .ancho { padding-left: 16px; padding-right: 16px; }
  .marca-nombre { font-size: 26px; }
  .marca-bajada { font-size: 9px; letter-spacing: .12em; }
  .buscar input { width: 110px; }
  .paises { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .paises a { white-space: nowrap; }
  .portada h1, .nota h1 { font-size: 30px; }
  .foto-portada, .foto-nota { height: 240px; }
  .h-grande, .comparativa h2, .newsletter h2 { font-size: 28px; }
  .fila { gap: 28px; }
  .newsletter > .ancho { margin-left: 12px; margin-right: 12px; }
  /* En el celular cada titular de último momento va en su renglón: los puntos separadores sobran */
  .ultimo-momento span[aria-hidden] { display: none; }
  .ultimo-momento a { flex-basis: 100%; }
}

/* ---------- Vista previa de una nota desde el panel */
.aviso-vista { background: rgba(255, 31, 90, .1); border-bottom: 1px solid rgba(255, 31, 90, .35); font-size: 14px; }
.aviso-vista .ancho { padding-top: 10px; padding-bottom: 10px; }
.aviso-vista a { color: var(--azul-tinta); font-weight: 600; }

/* ---------- Panel de redacción */
.panel-barra { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); }
.panel-barra::after { content: ""; display: block; height: 3px; background: var(--rgb-franjas); }
.panel-barra .ancho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; min-height: 64px; }
.panel-marca { display: flex; align-items: center; gap: 10px; font-family: var(--titulo); font-weight: 700; font-size: 20px; }
.panel-barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; }
.panel-barra nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--texto-2); }
.panel-barra nav a { padding: 0 12px; border-radius: 50px; min-height: 36px; }
.panel-barra nav a:hover { background: rgba(11, 18, 32, .06); }
.panel-barra nav a[aria-current] { color: #fff; background: var(--tinta); }
.panel-salir { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.panel-cuerpo { padding-top: 32px; padding-bottom: 64px; }
.panel-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.panel-titulo .h-grande { margin: 0; }
.botones-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel-ingreso { max-width: 420px; margin: 8vh auto 0; padding: 32px; }
.panel-ingreso:hover { transform: none; }
.panel-ingreso h1 { margin: 16px 0 20px; }

.aviso { border-radius: 14px; padding: 12px 16px; margin: 16px 0; font-size: 15px; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }
.aviso-ok { background: rgba(0, 255, 136, .14); border: 1px solid rgba(0, 166, 83, .4); }
.aviso-error { background: rgba(255, 31, 90, .1); border: 1px solid rgba(240, 19, 77, .45); }

.tabla-envoltura { overflow-x: auto; margin-top: 20px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--gris); padding: 12px 16px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td, .tabla .fila-activa td { background: rgba(30, 144, 255, .05); }
.tabla-titulo { font-weight: 600; }
.tabla-titulo:hover { color: var(--azul-tinta); }
.tabla-acciones { white-space: nowrap; text-align: right; }
.tabla-acciones > * { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.input-filtro { height: 48px; border: 1px solid var(--borde); border-radius: 50px; padding: 0 16px; font: inherit; font-size: 16px; background: var(--tarjeta); min-width: 220px; }

.chip { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 3px 10px; border-radius: 50px; white-space: nowrap; }
.chip-borrador { background: var(--fondo-2); border: 1px solid var(--borde); color: var(--texto-2); }
.chip-publicada { background: var(--verde-rgb); color: var(--tinta); }
.chip-programada, .chip-azul { background: rgba(30, 144, 255, .16); color: var(--azul-tinta); }
.chip-rojo { background: rgba(255, 31, 90, .14); color: var(--rojo-tinta); }

.form { display: flex; flex-direction: column; gap: 16px; }
.form-nota { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 16px; }
.form-principal { flex: 2 1 520px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.form-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.form-caja { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.form .tarjeta:hover, .form.tarjeta:hover { transform: none; border-color: var(--borde); box-shadow: var(--sombra); }
.form-campo { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.form-campo label, .form-campo legend { font-size: 14px; font-weight: 600; }
.form-campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-campo select, .form-campo textarea {
  width: 100%; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--fondo); }
.form-campo input, .form-campo select { min-height: 46px; }
.form-campo textarea { line-height: 1.55; resize: vertical; }
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus { outline: none; border-color: var(--azul-rgb); box-shadow: 0 0 0 4px rgba(30, 144, 255, .18); background: var(--tarjeta); }
.ayuda { font-size: 13px; color: var(--gris); margin: 0; }
.ayuda code { font-family: var(--mono); background: var(--fondo-2); padding: 1px 5px; border-radius: 4px; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; cursor: pointer; }
.opcion input { width: 18px; height: 18px; accent-color: var(--azul-tinta); }
.boton-ancho { width: 100%; }
.foto-actual { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); }
details.form-caja summary { cursor: pointer; font-weight: 600; }
.form-recurso { margin-top: 16px; }
.form-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* ---------- Social: la gente de la industria */
.tarjeta-social .foto { height: 180px; }
.tarjeta-social h3 { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 10px 0 0; }
.tarjeta-social p.mono { margin: 12px 0 0; }
.etiqueta-social { background: rgba(255, 31, 90, .12); color: var(--rojo-tinta); font-weight: 600; }

/* ---------- Crédito de las fotos (debajo de la foto, en la página de la nota) */
.foto-figura { margin: 28px 0 0; }
.foto-figura .foto-nota { margin-top: 0; }
.foto-figura figcaption { font-family: var(--mono); font-size: 12px; color: var(--gris); margin-top: 8px; }

/* Las direcciones largas (por ejemplo las de las fuentes) se cortan donde haga falta y no ensanchan la página en el celular */
.texto { overflow-wrap: anywhere; }
.enlace-texto { color: var(--azul-tinta); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Comunidad */
.comunidad { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: center; gap: 32px; padding-top: 32px; padding-bottom: 48px; align-items: start; }
.comunidad-principal { min-width: 0; max-width: 720px; }
/* Con scroll infinito el pie queda lejos: el contacto va en esta columna, que queda fija al bajar */
.comunidad-lateral { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 16px; }
.lateral-caja { padding: 20px; font-size: 15px; }
.lateral-caja:hover { transform: none; }
.lateral-caja p { margin: 0 0 12px; }
.publicar { padding: 16px; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.publicar:hover { transform: none; }
.publicar textarea { width: 100%; border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; resize: vertical; background: var(--fondo); }
.publicar textarea:focus { outline: none; border-color: var(--azul-rgb); box-shadow: 0 0 0 4px rgba(30, 144, 255, .18); background: var(--tarjeta); }
.publicar-fila { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; font-weight: 600; }
.publicar-fila label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.publicar-fila select, .publicar-fila input:not([type=file]) { height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; background: var(--tarjeta); }
.comunidad-invitacion { padding: 24px; margin-top: 20px; }
.comunidad-invitacion:hover { transform: none; }
.feed { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.post { padding: 18px 20px; overflow: visible; }
.post:hover { transform: none; box-shadow: var(--sombra); border-color: var(--borde); }
.post-cabecera { display: flex; gap: 12px; align-items: flex-start; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; color: var(--tinta);
  background: linear-gradient(135deg, rgba(255, 31, 90, .25), rgba(0, 255, 136, .25), rgba(30, 144, 255, .3)); }
.post-autor { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.post-autor strong { font-size: 16px; }
.post-autor a:hover { color: var(--azul-tinta); }
.post-texto { font-size: 16px; margin-top: 8px; }
.post-texto p:first-child { margin-top: 0; }
.post-foto { width: 100%; max-height: 480px; object-fit: cover; border-radius: 12px; margin-top: 12px; border: 1px solid var(--borde); }
.post-menu { position: relative; }
.post-menu summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: var(--gris); }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover { background: var(--fondo-2); }
.post-menu > div { position: absolute; right: 0; top: 40px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 5; min-width: 140px; }
.post-menu > div a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--rojo-tinta); font-weight: 600; }
.post-menu > div a:hover { background: rgba(255, 31, 90, .08); }
.feed-mas { text-align: center; }
.mi-post { margin-top: 20px; }
.mi-post .aviso form { margin-top: 8px; }
.mod-bloque { margin-top: 32px; }
.mod-item { margin-top: 16px; padding: 16px; }
.mod-item:hover { transform: none; }
.mod-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-form input:not([type=hidden]), .mod-form select { height: 40px; border: 1px solid var(--borde); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 14px; background: var(--tarjeta); }
.mod-form input[name=detalle] { min-width: 220px; flex: 1; }
.input-dias { width: 70px; }
@media (max-width: 900px) {
  .comunidad { grid-template-columns: 1fr; }
  .comunidad-lateral { position: static; }
}

/* ---------- Mensajes entre socios */
.post-menu > div a.menu-normal { color: var(--tinta); }
.post-menu > div a.menu-normal:hover { background: var(--fondo-2); }
.bandeja { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bandeja-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.bandeja-item:hover { transform: none; border-color: var(--azul-rgb); }
.bandeja-nueva { border-left: 4px solid var(--verde-rgb); }
.bandeja-texto { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.bandeja-meta { white-space: nowrap; }
.conversacion-cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.conversacion-cabecera:hover { transform: none; }
.mensajes { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.mensaje { display: flex; flex-direction: column; max-width: 80%; gap: 4px; }
.mensaje-mio { align-self: flex-end; align-items: flex-end; }
.mensaje-otro { align-self: flex-start; }
.mensaje-burbuja { padding: 10px 14px; border-radius: 16px; border: 1px solid var(--borde); background: var(--tarjeta); }
.mensaje-mio .mensaje-burbuja { background: rgba(30, 144, 255, .12); border-color: rgba(30, 144, 255, .3); }
.mensaje-burbuja .texto { font-size: 15px; margin: 0; }
.mensaje-burbuja .texto p:first-child { margin-top: 0; }
.mensaje .mono a { color: var(--rojo-tinta); }
.mod-cita { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--rojo-rgb); background: var(--fondo-2); border-radius: 0 10px 10px 0; white-space: pre-wrap; }

/* Mi cuenta */
.datos-cuenta th { width: 180px; font-family: var(--titulo); font-size: 14px; color: var(--gris); }