/* ============================================================
   ACTORES S.C.G — TARIFAS (/tarifas) · se carga junto a site.css
   ============================================================

   La única página del sitio público que enseña datos tabulares, y por eso la
   única que trae componentes de tabla: veinte celdas de pesos colombianos en
   dos bloques que hay que poder comparar de un vistazo y que tienen que caber
   en un teléfono.

   Se apoya en site.css para el cromo (wrap, phero, sechead, lab, sec, btn,
   rv) y NO depende de sociedad.css: aunque esta página sea el reverso de
   Recaudamos, no comparte con ella ni una fila de detalle ni una franja de
   cifras. Cargar la hoja entera de «Lo que hacemos» para heredar tres reglas
   sería arrastrar cuarenta que no se usan.
   ============================================================ */

/* ====== LOS ICONOS ======
   `partials/icono.blade.php` entrega solo los trazos dentro de un `<svg>` de
   24: ni color ni grosor, que los pone quien lo incluye. Sin esta regla los
   caminos se pintarían con el relleno negro por defecto y saldrían once
   manchas en vez de once iconos.

   El grosor es 1.7 en toda la página aunque las cajas midan distinto —42, 40,
   38— porque lo que hace que se lean como una familia es el trazo, no el
   tamaño. Cada contenedor pone el suyo al `svg`. */
.tpar-ico svg, .tdi svg, .tcat-ico svg, .trepc-ico svg{
  display:block; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ====== APERTURA ======
   La frase grande de entrada, como en las tres páginas de «Lo que hacemos»,
   y debajo la distinción que gobierna la lectura de todo lo demás.

   ⚠ NO se llama `.intro`. Esa clase es la de `sociedad.css`, que esta página
   no carga: escrita aquí, la frase salía sin una sola regla aplicada —tamaño
   de párrafo, alineada a la izquierda y sin realce—. Es el fallo que se ve
   desde fuera y no desde el marcado, porque la clase estaba puesta. */
.tapertura{background:var(--white)}
.tfrase{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.4vw,42px); line-height:1.18; letter-spacing:-.015em; margin:0; max-width:24ch; color:var(--ink)}
.tfrase em{font-style:italic; color:var(--accent)}

/* Las dos mitades enfrentadas: lo que el derecho NO es y lo que sí. Una en
   gris y otra en naranja, porque la diferencia entre las dos es justo lo que
   hay que retener. */
.tpar{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(34px,4vw,52px)}
.tpar-c{display:flex; align-items:flex-start; gap:18px; padding:26px 28px; border-radius:18px; border:1px solid var(--line)}
.tpar-c.no{background:var(--paper)}
.tpar-c.si{background:var(--orange-50); border-color:rgba(255,81,21,.26)}
.tpar-ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center}
.tpar-ico svg{width:22px; height:22px}
.tpar-c.no .tpar-ico{background:rgba(14,14,12,.06); color:var(--g2)}
.tpar-c.si .tpar-ico{background:#fff; color:var(--accent)}
.tpar-c > div > b{display:block; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; margin-bottom:7px; color:var(--ink)}
.tpar-c p{margin:0; font-size:14.5px; line-height:1.6; color:#3a3a37}
.tpar-c p b{font-weight:700; color:var(--ink)}
@media(max-width:820px){.tpar{grid-template-columns:1fr}}

/* ====== LAS DOS PUERTAS ======
   El primer cruce de la página: principal o secundario. De esa respuesta
   depende TODO lo demás —un porcentaje sobre ingresos o un valor fijo en
   pesos—, así que va antes que cualquier tabla y como dos puertas y no como
   dos párrafos: quien llega ya sabe cuál es su negocio, lo que no sabe es en
   qué casilla lo metemos nosotros. */
.tdoors{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px}
.tdoor{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 32px; transition:transform .3s var(--ease), border-color .25s, box-shadow .3s var(--ease)}
.tdoor:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 30px 60px -40px rgba(14,14,12,.5)}
.tdoor .tdnum{font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:18px}
.tdoor .tdnum::before{content:""; width:26px; height:1px; background:var(--accent)}
.tdoor h3{font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.6vw,32px); line-height:1.06; letter-spacing:-.01em; margin:0 0 12px}
.tdoor p{font-size:16px; line-height:1.55; color:#3a3a37; margin:0 0 20px; flex:1}
.tdoor .tdque{font-size:14.5px; color:var(--g2); line-height:1.5; margin:0 0 22px}
.tdoor .tdque b{color:var(--ink); font-weight:600}

/* La fila de iconos de lo que hay detrás de cada puerta. Se encienden en
   naranja al pasar por la tarjeta entera: el gesto dice que las once
   categorías son el contenido de las dos puertas y no una decoración suelta. */
.tdiconos{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 20px}
.tdi{width:38px; height:38px; border-radius:11px; background:var(--paper); border:1px solid var(--line); color:var(--g2); display:grid; place-items:center; transition:color .25s, background .25s, border-color .25s}
.tdi svg{width:19px; height:19px}
.tdoor:hover .tdi{color:var(--accent); background:var(--orange-50); border-color:rgba(255,81,21,.24)}
.tdoor .tdir{font-weight:600; font-size:15px; color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-top:auto}
@media(max-width:820px){.tdoors{grid-template-columns:1fr}}

/* ====== LA LEY, CITADA ======
   La definición de «comunicación al público» de la Decisión Andina 351 va
   entre comillas y con su fuente al pie porque es la frase que decide si a
   alguien le toca pagar o no. Parafraseada perdería lo único que la hace
   útil: que es literal y verificable. */
.tley{background:var(--ink); color:#fff; border-radius:22px; padding:clamp(32px,4vw,52px); margin-top:40px; position:relative; overflow:hidden}
.tley .spiral{right:-140px; top:-160px; width:400px; height:400px; opacity:.12}
.tley .spiral path{stroke:var(--accent)}
.tley-in{position:relative; z-index:2}
.tley blockquote{font-family:var(--font-display); font-weight:400; font-style:italic; font-size:clamp(21px,2.6vw,32px); line-height:1.3; letter-spacing:-.01em; margin:0; max-width:34ch; color:#fff}
.tley cite{display:block; font-family:var(--font-ui); font-style:normal; font-size:13.5px; font-weight:500; color:#a8a49b; margin-top:22px; line-height:1.5}

/* ====== FICHA DE USUARIO PRINCIPAL ======
   Cinco categorías, todas al mismo tipo tarifario. Lo que de verdad las
   distingue —y lo que se discute en una negociación— es SOBRE QUÉ ingresos se
   aplica ese 4%, así que el criterio es el cuerpo de la ficha y el porcentaje
   es el sello de la esquina. Al revés, las cinco parecerían la misma. */
.tcats{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.tcat{background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 30px 28px; scroll-margin-top:96px}
/* [icono] [nombre, que crece] [4%]. El porcentaje es el mismo en las cinco,
   así que lo que distingue una ficha de otra de un vistazo es el icono: es
   quien hace el trabajo que el número no puede hacer. */
.tcat-cab{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.tcat h3{flex:1; font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.12; letter-spacing:-.01em; margin:0}
.tcat-tipo{flex:none; font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1; color:var(--accent); letter-spacing:-.02em}

/* La caja del icono, compartida por las once fichas de las dos familias. */
.tcat-ico{flex:none; width:40px; height:40px; border-radius:12px; background:var(--orange-50); color:var(--accent); display:grid; place-items:center}
.tcat-ico svg{width:21px; height:21px}
.tcat > p{font-size:15px; line-height:1.55; color:#3a3a37; margin:0 0 20px}
.tcat-crit{border-top:1px solid var(--line); padding-top:18px}
.tcat-crit .tcl{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--g2); margin:0 0 8px}
.tcat-crit p{font-size:14.5px; line-height:1.55; color:#333; margin:0}
@media(max-width:900px){.tcats{grid-template-columns:1fr}}

/* ====== LA EXCEPCIÓN ======
   La regla propia de una categoría: la tarifa reducida de comunitaria, el
   tope del 4% en alquiler, de dónde sale la categoría de un hotel. Van
   destacadas porque son lo que un usuario se salta leyendo la tabla y lo
   primero que reclama después. */
.tnota{margin-top:18px; background:var(--orange-50); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:14px 18px; font-size:14px; line-height:1.55; color:#3a3a37}
.tnota b{color:var(--ink); font-weight:600}

/* ====== BLOQUE DE USUARIO SECUNDARIO, CON SU TABLA ====== */
.tsecs{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.tsec{background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 30px 28px; scroll-margin-top:96px}
.tsec-cab{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.tsec h3{flex:1; font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.12; letter-spacing:-.01em; margin:0}
.tsec > p{font-size:15px; line-height:1.55; color:#3a3a37; margin:0 0 18px}
.tsec-uni{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--orange-700); background:var(--orange-100); border-radius:44px; padding:6px 14px; margin-bottom:18px}
@media(max-width:900px){.tsecs{grid-template-columns:1fr}}

/* ====== LA CIFRA ÚNICA ======
   Transporte aéreo, establecimientos de comercio y eventos tienen un solo
   valor. En tabla quedaban con una cabecera de adorno y una fila que repetía
   la píldora de encima; aquí el número se lee de una vez y la unidad es su
   pie. Es el mismo tamaño que el «4%» de los usuarios principales, para que
   las dos mitades de la página pesen igual. */
.tuno{margin:4px 0 0; display:flex; flex-direction:column; gap:6px}
.tuno b{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4vw,44px); line-height:1; letter-spacing:-.02em; color:var(--ink)}
.tuno span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--orange-700)}

/* ====== LA TABLA ======
   Datos tabulares de verdad —concepto y valor—, así que es un <table> y no un
   grid de divs: un lector de pantalla tiene que poder decir «5 estrellas, por
   habitación: once mil setecientos seis pesos» y no leer veinte celdas
   sueltas.

   El envoltorio con scroll propio es la regla de la casa para contenido
   ancho: la página nunca hace scroll horizontal, la tabla sí si le hace
   falta. Aquí casi nunca le hace, porque son dos columnas. */
.ttab-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ttab{width:100%; border-collapse:collapse; font-size:15px}
/* El <caption> nombra la tabla para quien la oye, no para quien la ve: el
   nombre de la categoría ya está en el <h3> justo encima, y repetirlo en
   pantalla sería decirlo dos veces. Se esconde con clip y no con
   `display:none` ni `visibility:hidden`, que lo quitarían también del árbol de
   accesibilidad y dejarían la tabla sin nombre.

   Va aquí y no como una utilidad `.sr-only` global porque el sitio público no
   tiene ninguna: `sr-only` existe en el repositorio, pero es de Tailwind y
   Tailwind solo se carga en el panel. Puesta en esta página, la clase no
   pintaría nada y el título saldría a la vista. */
.ttab caption{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* La cabecera NO lleva `white-space:nowrap`: con el periodo dentro, «Tipo
   tarifario 2026 · TRIMESTRAL» no cabe en la columna estrecha de una tarjeta a
   dos columnas y se salía por el borde. Que envuelva es lo correcto; la que no
   puede partirse es la celda del valor, y esa sí lo lleva. */
.ttab th{text-align:left; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--g2); padding:0 0 10px; border-bottom:1px solid var(--line); line-height:1.45}
.ttab th:last-child{text-align:right}
.ttab td{padding:13px 0; border-bottom:1px solid rgba(14,14,12,.07); color:#333; line-height:1.4}
.ttab tr:last-child td{border-bottom:none; padding-bottom:0}
.ttab td:last-child{text-align:right; white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.01em; padding-left:20px}
/* El periodo, en la cabecera de la columna de valores. Se dice una vez por
   tabla porque dentro de una categoría todas las filas se causan igual. */
.ttab .tper{color:var(--orange-700)}
.ttab .tper::before{content:"· "}

/* ====== PIE DE VIGENCIA ======
   De dónde salen los números. Va al pie de la tabla de secundarios, que es la
   que cambia cada enero: una cifra que sube sin causa a la vista se lee como
   una decisión de la sociedad, y no lo es. */
.tvig{margin-top:26px; font-size:14px; line-height:1.6; color:var(--g2); display:flex; align-items:flex-start; gap:12px; max-width:70ch}
.tvig svg{flex:none; width:18px; height:18px; margin-top:2px; stroke:var(--accent); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* ====== LAS REGLAS ======
   Seis, numeradas. Es la sección que evita el malentendido caro de la página
   —que el 4% es lo que se factura— y por eso no puede ser una lista de viñetas
   perdida bajo una tabla. */
.treglas{display:grid; grid-template-columns:1fr 1fr; gap:14px; counter-reset:regla}
.tregla{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px; position:relative}
.tregla::before{counter-increment:regla; content:counter(regla,decimal-leading-zero); font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:14px}
.tregla h4{font-family:var(--font-display); font-weight:500; font-size:20px; line-height:1.15; letter-spacing:-.01em; margin:0 0 10px}
.tregla p{font-size:14.5px; line-height:1.6; color:#3a3a37; margin:0}
@media(max-width:820px){.treglas{grid-template-columns:1fr}}

/* ====== EL CÁLCULO, EN BARRAS ======
   La pieza central de la sección de reglas, y la única de la página que
   demuestra en vez de afirmar.

   Cuatro barras que se van encogiendo: 100 → 70 → 35 → 1,4. El ancho ES el
   dato, así que las cuatro comparten una pista del mismo largo y el porcentaje
   sale del config. La última mide lo que mide —un pelo sobre nada— y esa
   desproporción visual es exactamente el argumento: cuando el 4% llega a
   aplicarse, ya no queda casi base sobre la que aplicarlo.

   Sobre tinta y no sobre papel porque es el punto de descanso de la página:
   entre dos secciones claras, y justo antes de la banda naranja que generaliza
   lo que aquí se acaba de ver con un caso. */
.tcalc{background:var(--ink); color:#fff; border-radius:22px; padding:clamp(32px,4vw,56px); margin-top:clamp(36px,4vw,52px); position:relative; overflow:hidden}
.tcalc .spiral{right:-150px; bottom:-190px; width:420px; height:420px; opacity:.1}
.tcalc .spiral path{stroke:var(--accent)}
.tcalc-in{position:relative; z-index:2}

.tcalc-cab{margin-bottom:clamp(28px,3.4vw,42px)}
.tcalc-lab{display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:#a8a49b; margin:0 0 14px}
.tcalc-lab::before{content:""; width:30px; height:1px; background:var(--accent)}
.tcalc-cab h3{font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,42px); line-height:1.06; letter-spacing:-.01em; margin:0; color:#fff}
.tcalc-cab h3 em{font-style:italic; color:var(--accent)}

.tcalc-pasos{list-style:none; margin:0; padding:0}
.tcalc-paso{padding-bottom:28px}
.tcalc-paso:last-child{padding-bottom:0}

/* Lo que se le hizo al paso anterior para llegar a este. La flecha va en el
   `::before` y no en el texto del config: es composición, no vocabulario. */
.tcalc-op{display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:13.5px; font-weight:600; color:var(--accent)}
.tcalc-op::before{content:"↓"; font-size:15px; line-height:1}

.tcalc-fila{display:flex; align-items:center; gap:20px; margin-bottom:12px}
.tcalc-pista{flex:1; display:block; height:14px; border-radius:44px; background:rgba(255,255,255,.08); overflow:hidden}
/* `min-width` para que la última barra no desaparezca del todo en pantallas
   estrechas: a 1,4% de una pista corta serían menos de tres píxeles. Sigue
   siendo obviamente diminuta al lado de las otras tres, que es lo que tiene
   que decir. */
.tcalc-barra{display:block; height:100%; border-radius:44px; background:var(--accent); min-width:8px}
.tcalc-monto{flex:none; min-width:76px; text-align:right; font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px); line-height:1; letter-spacing:-.02em; color:#fff}

.tcalc-tit{margin:0 0 5px; font-family:var(--font-display); font-weight:500; font-size:18px; letter-spacing:-.01em; color:#fff}
.tcalc-det{margin:0; font-size:14px; line-height:1.55; color:#c9c5bc; max-width:64ch}

/* El último paso es la cifra a la que va toda la sección: se sale de la
   escala de color de los otros tres para que no se lea como uno más. */
.tcalc-paso.fin .tcalc-barra{background:#fff}
.tcalc-paso.fin .tcalc-monto,
.tcalc-paso.fin .tcalc-tit{color:var(--accent)}

.tcalc-remate{margin:clamp(28px,3.4vw,40px) 0 0; padding-top:clamp(24px,3vw,32px); border-top:1px solid rgba(255,255,255,.12); font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,38px); line-height:1.1; letter-spacing:-.01em; color:#fff}
.tcalc-remate em{font-style:italic; color:var(--accent)}
.tcalc-fuente{margin:14px 0 0; font-size:13px; line-height:1.55; color:#8b8880; max-width:72ch}

@media(max-width:560px){
  .tcalc-fila{gap:14px}
  .tcalc-monto{min-width:62px}
}

/* ====== EL RANGO ======
   La cifra que desmonta el malentendido: entre 0,16% y 2,56% en la mayoría de
   los casos, no 4%. Va en grande y sola porque es el dato que hace que un
   usuario conteste el correo en vez de mandarlo a su abogado. */
.trango{background:var(--accent); color:var(--ink); border-radius:22px; padding:clamp(34px,4.4vw,56px); margin-top:44px; text-align:center; position:relative; overflow:hidden}
.trango .spiral{left:-130px; bottom:-170px; width:400px; height:400px; opacity:.18}
.trango .spiral path{stroke:#fff}
.trango-in{position:relative; z-index:2}
.trango .trl{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:rgba(14,14,12,.66); margin:0 0 18px}
.trango b{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(38px,7vw,86px); line-height:1; letter-spacing:-.03em; color:var(--ink)}
.trango b em{font-style:italic; color:#fff; font-weight:500}
.trango p{margin:20px auto 0; max-width:52ch; font-size:17px; font-weight:500; line-height:1.55; color:rgba(14,14,12,.82)}

/* ====== EL REPERTORIO ====== */
.trep{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.trepc{background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 26px}
.trepc-ico{width:40px; height:40px; border-radius:12px; background:var(--orange-50); color:var(--accent); display:grid; place-items:center; margin-bottom:16px}
.trepc-ico svg{width:21px; height:21px}
.trepc h4{font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.15; margin:0 0 10px}
.trepc p{font-size:14.5px; line-height:1.6; color:#3a3a37; margin:0}
@media(max-width:900px){.trep{grid-template-columns:1fr}}

/* ====== EL DOCUMENTO ======
   Las 43 páginas del Reglamento. Casi todo lo que hay dentro es el sustento
   —estudios de la CRC, del MinTIC, del DANE, la serie del IPC— y eso no es
   contenido de web: es lo que necesita quien discute la tarifa. Se enlaza y
   se dice qué va a encontrar, para que la descarga no sea a ciegas. */
.tdoc{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(22px,3vw,40px); background:var(--ink); color:#fff; border-radius:22px; padding:clamp(30px,3.6vw,46px)}
.tdoc-ico{flex:none; width:62px; height:62px; border-radius:16px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center}
.tdoc-ico svg{width:28px; height:28px; stroke:var(--accent); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
.tdoc h3{font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.4vw,28px); line-height:1.15; margin:0 0 8px; color:#fff}
.tdoc p{font-size:15px; line-height:1.6; color:#c9c5bc; margin:0; max-width:56ch}
.tdoc-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:13px; color:#a8a49b}
.tdoc-meta span{display:inline-flex; align-items:center; gap:7px}
.tdoc-meta span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent)}
@media(max-width:900px){
  .tdoc{grid-template-columns:1fr; text-align:left}
  .tdoc-ico{width:52px; height:52px}
}

/* ====== CONTACTO ======
   Cierra la página, y su trabajo es que un usuario que acaba de entender que
   debe pagar tenga a quién llamar en la misma pantalla. Sin correo: en este
   proyecto no hay uno institucional de recaudo y publicar uno inventado en la
   página que abre una negociación es peor que no publicar ninguno. */
.tcont{background:var(--paper)}
.tcont-grid{display:grid; grid-template-columns:1fr auto; gap:clamp(28px,4vw,64px); align-items:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(34px,4.4vw,56px)}
.tcont h2{font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.06; letter-spacing:-.01em; margin:0 0 14px}
.tcont h2 em{font-style:italic; color:var(--accent)}
.tcont > .wrap > .tcont-grid > div > p{font-size:17px; line-height:1.6; color:#3a3a37; margin:0; max-width:46ch}
.tcont-datos{display:flex; flex-direction:column; gap:18px; min-width:250px}
.tcont-dato{display:flex; align-items:flex-start; gap:14px}
.tcont-dato svg{flex:none; width:20px; height:20px; margin-top:3px; stroke:var(--accent); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
.tcont-dato .tcl{display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--g2); margin-bottom:4px}
.tcont-dato b{font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--ink); line-height:1.25; display:block}
.tcont-dato span.dir{font-size:14.5px; color:#3a3a37; line-height:1.45; display:block}
@media(max-width:900px){.tcont-grid{grid-template-columns:1fr}}

/* ====== EL DESVÍO PARA EL ACTOR ======
   Va a llegar aquí gente equivocada: es una página que se llama «Tarifas» en
   el sitio de una sociedad de actores, y más de un socio la va a abrir
   pensando que dice cuánto va a cobrar él. Se le saca en una línea y sin
   ruido, antes de que lea dos tablas que no le sirven. */
.tdesvio{background:var(--orange-50); border:1px solid rgba(255,81,21,.24); border-radius:16px; padding:18px 24px; margin-top:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.tdesvio p{margin:0; font-size:15.5px; line-height:1.5; color:#3a3a37}
.tdesvio p b{color:var(--ink); font-weight:600}
.tdesvio a{font-weight:600; font-size:15px; color:var(--accent); white-space:nowrap; display:inline-flex; align-items:center; gap:8px}
.tdesvio a:hover{color:var(--orange-700)}