/* funciones.css · v8.6 · la sección #funciones («Lo que hace»), justo después del metro. Solo selectores de #funciones.
   Los componentes compartidos (.kicker .lead .como .enlace .boton .chat .burbuja .chica .solo-lectores [data-entra])
   son de base.css y acá no se redefinen: solo se acomodan dentro de la sección.
   · Teléfono: una lista por familias; cada función es un details que abre debajo de su fila.
   · Escritorio (861+): el tablero. A la izquierda las familias con sus funciones; a la derecha la «pantalla» de la
     que está abierta, pegada arriba mientras pasa la lista. La pantalla es el contenido del details puesto en
     absoluto sobre la columna derecha (.lado ocupa todo el alto del tablero y .pantalla va sticky adentro).
     Si ninguna está abierta, la columna muestra .vacio. funciones.js estira el tablero si la pantalla es más alta.
   Escala de la biblia §4 (12 · 14 · 16 · 17 · 22 px), curvas de tokens, radios §10. Sin vh. */

#funciones .cabeza{max-width:62ch;margin:0 0 40px}
#funciones .cabeza .lead{margin-bottom:0}
@media(scripting:none){#funciones [data-entra]{opacity:1;transform:none}}

/* ── familias ── */
#funciones .familia{margin:0 0 28px}
#funciones .fam{display:flex;gap:10px;align-items:baseline;margin:0 0 6px;
  font:500 12px/1.3 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
#funciones .fam .n{color:var(--tinta);font-variant-numeric:tabular-nums}

/* ── la fila (summary) ── */
#funciones details.fn{border-bottom:1px solid var(--marco)}
#funciones summary{display:grid;grid-template-columns:minmax(0,1fr) 12px;gap:2px 16px;align-items:center;
  padding:12px 4px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s var(--cromo),box-shadow .2s var(--cromo)}
#funciones summary::-webkit-details-marker{display:none}
#funciones summary .nom{font:500 17px/1.3 var(--f-titulo);color:var(--tinta);text-wrap:pretty}
#funciones summary .uno{grid-row:2;font-size:14px;line-height:1.4;color:var(--tinta-2)}
#funciones summary::after{content:'';grid-row:1/span 2;grid-column:2;width:8px;height:8px;margin-left:2px;
  border-right:1.5px solid var(--tinta-2);border-bottom:1.5px solid var(--tinta-2);
  transform:translateY(-3px) rotate(45deg);transition:transform .24s var(--cromo),border-color .2s var(--cromo)}
#funciones details[open]>summary::after{transform:translateY(2px) rotate(-135deg);border-color:var(--accion)}
#funciones details[open]>summary .nom{color:var(--accion)}

/* ── la pantalla: lo que se ve al abrir ── */
#funciones .pantalla{margin:2px 0 20px;padding:20px;background:var(--superficie);border:1px solid var(--marco);border-radius:20px}
#funciones .titulo{display:none}
#funciones .largo{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--tinta-2)}
#funciones .chat{max-width:none;gap:10px;padding:14px;background:var(--fondo);border-radius:20px}
#funciones .cab{display:flex;gap:8px;align-items:center;margin:0 0 2px;font:500 14px/1 var(--f-titulo);color:var(--tinta-2)}
#funciones .cab img{width:22px;height:22px}
#funciones .burbuja.suya{border-radius:20px 20px 20px 6px}
#funciones .burbuja.mia{border-radius:20px 20px 6px 20px}
#funciones .letra{margin:20px 0 8px;font:500 12px/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
#funciones ul.chica{display:grid;gap:6px;margin:0;padding:0;list-style:none;line-height:1.45}
#funciones ul.chica li{position:relative;padding-left:16px}
#funciones ul.chica li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tinta-2);opacity:.7}
#funciones .accion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:20px 0 0}
#funciones .accion .otra{font-size:14px}
#funciones .vacio{display:none}

/* ── lo que todavía no hace: la sexta familia, sin filas que abrir ── */
#funciones .familia.no ul.chica{margin-top:10px;font-size:14px}
#funciones .familia.no ul.chica li::before{border-radius:1px;width:7px;height:2px;top:.68em}

/* ── pie ── */
#funciones .pie-fn{margin:36px 0 0;display:grid;gap:8px;max-width:72ch}
#funciones .pie-fn p{margin:0;font-size:16px;color:var(--tinta-2);max-width:none}
#funciones .pie-fn b{font-weight:500;color:var(--tinta)}
#funciones .pie-fn .como{font-size:14px}

@media(hover:hover) and (pointer:fine){
  #funciones summary:hover::after{border-color:var(--tinta)}
  #funciones details:not([open])>summary:hover .nom{color:var(--accion-hover)}
}

/* ── escritorio: el tablero ── */
@media(min-width:861px){
  #funciones{--panel:50%;--hueco:40px}
  #funciones .cabeza{margin-bottom:48px}
  #funciones .tablero{position:relative;padding-right:calc(var(--panel) + var(--hueco))}
  #funciones details.fn{border:0}
  #funciones summary{grid-template-columns:minmax(0,1fr) 12px;padding:9px 14px;margin:0 -14px;border-radius:12px}
  #funciones summary .uno{display:none}
  #funciones summary::after{grid-row:1;transform:rotate(-45deg);opacity:0}
  #funciones details[open]>summary{background:rgba(242,160,179,.10);box-shadow:inset 0 0 0 1px rgba(242,160,179,.45)}
  #funciones details[open]>summary::after{transform:rotate(-45deg);opacity:1}
  #funciones .lado{position:absolute;top:0;right:0;bottom:0;width:var(--panel)}
  #funciones .pantalla{position:sticky;top:calc(var(--nav) + 24px);margin:0;padding:24px 28px;border-radius:var(--radio-ventana)}
  #funciones .titulo{display:block;margin:0 0 6px;font:600 22px/1.2 var(--f-titulo);color:var(--tinta)}
  #funciones .largo{font-size:17px;line-height:1.5;margin-bottom:18px}
  #funciones .familia.no{margin-top:6px}
  #funciones .vacio{position:absolute;top:0;right:0;width:var(--panel);margin:0;padding:28px;
    border:1px dashed var(--marco);border-radius:var(--radio-ventana);color:var(--tinta-2);font-size:17px}
  #funciones .tablero:not(:has(details[open])) .vacio{display:block}
  #funciones .pie-fn{margin-top:48px}
}
@media(min-width:861px) and (hover:hover) and (pointer:fine){
  #funciones details:not([open])>summary:hover{background:rgba(143,163,173,.10)}
  #funciones details:not([open])>summary:hover::after{opacity:.6}
}
/* ancho: las familias en dos columnas y la pantalla en las 5 de 12 de la derecha */
@media(min-width:1100px){
  #funciones{--panel:41.6%;--hueco:56px}
  #funciones .familias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 40px;align-items:start}
}